# data[].attributes.body
As the animation progressed we decided to experiment with additional sound effects on top of the audio file that we got given. The idea was to implement these noises in areas such as the ambulance going by or a bicycle peddling. This would have been beneficial as it would have intrigued the viewer.

Setting out to create these sounds from scratch was tricky. I had to come up with a creative idea of imitating these sounds like they do in professional films in later sounds production. One of the biggest challenges I faced was, recreating the sounds of a static TV noise. I set out by exploring with a shower head and seeing if the noise of many water droplets would give me the wanted outcome. After recording I went into post production and started editing those sounds, adding reverb, reducing the low-end frequency and many other settings still didn’t give me the final sounds I was looking for. I didn’t want to give up and getting all my answers from the internet.

Adding crunched up tin foil onto the bottom of the bath gave some great results at first but after running the water for more than three seconds, little pools started to form and change the sounds completely. Therefor I had the tin foil under an angle so the water would ruin of quietly onto the bath floor not creating other unwanted noises. This gave me a great outcome as the tin foil made more of a static sound straight away.

After implementing some of these sounds within our animation, aligning the timing and noise levels to fit in better with our animation, as a group we decided that it did actually take away from the overall experience. We came to a conclusion it was too disturbing and random for the viewer, taking away their concentration from the important audio about saving the planet and focusing on the animation too much.

Michał Sobolewski ms2110

# data[].attributes.body
Before starting our project we each chose a topic to research in depth, therefore create a powerful final project with a a well-established base and a complete research behind it. I decided to choose Climate change as it would be a big part of our project.

I have always been very interested and conscious about the climate crisis (one of the reasons why I chose this brief) so I was well informed, but what interested me more for this project was how the other young adults felt about it.  To do this research  I started reading different articles about and what came up the most was the following question "Although young people are aware of Climate Change are they really CONSCIOUS about it´s threats?". This is when I started realising that young people’s understandings of climate change were generally limited, erroneous and highly influenced by mass media.

This took me to another question, "What attracts a teenager then?"  Didactic, creative and affect-driven approaches to climate change were the conclusion I got to. Nowadays social media is one of the most effective ways to get information through to people so we decided our animation would be aimed towards that audience. The adjectives I mentioned before are how we planned to get to the viewers of the video. Another thing we discussed was making an "agile" animation with quick transitions and short scenes, as many studies reflect that the percentage of people who watch the video until the end in social media is affected by how dynamic the video is.

Tara Pérez de Miguel - tlp8

# data[].attributes.body
We started by researching fonts that would fit in, with our animation. Our goal was to find a font that resembled handwriting, and was clear to read. The style of “Chalkboard SE Light” really appealed to us as a simple and well sized font.

Tools that I’ve found most useful within this project have to be the guide lines I set up after viewing videos and tutorials of designing fonts. This helped me keep the scale of the letters similar, meaning they all fit together and didn’t need much correction with resizing.

I wanted to create a font using a single line as it would impersonate a handwritten font as well as allow my group to choose the stroke level on the letters adjusting it to the rest of the animation.

To create the letters I mainly used the pen tool in order to get all the curves and angles of the shape. The uneven straight lines were created on purpose as the font was meant to look rough.

Add and delete anchor tool allowed me to have more control over the points on the lines. Direct selection tool meant I could change the shape of the letters entirely. One of the problems I came across was when the lines weren’t connected to each other properly, (in letters such as P and K). When changing the stroke level the two points weren’t aligned and created other unwanted misfits. I managed to overcome that by making sure all the points were jointed and grouped together.

After getting a good idea of what fonts already exist, I decided to carry out a test of other peoples handwriting. I’ve asked members of my household to each write letters and numbers in capitals there fore making the survey (if you can call it that), fair. I then compared the letters to one another to see the differences in the style of handwriting, this led to me to picking out and combining the letters and different shapes into the desired font.

These are the result of the font that I have created, and screenshots of different frames of the final text being put into the animation. I really like how it turned out due to the different sizing making it eye-catching for the viewer as well as fitting in with the overall style of our animation.

Michal Sobolewski ms2110

# data[].attributes.body
Week 28

After receiving more feedback on our animation Candida designed the new style frames, which I incorporated into the sequence and removed the previous sections. With the new city scene added in I worked on connecting the three separate scenes from Illustrator into one sliding background that I could then animate and then have vehicles pass across the foreground.

This was a challenge but once I was able to get each frame to flow onto the next and the vehicles moving across the screen and transforming into each other I added grain to the smoke and dark clouds as well as wave warps to fire and smoke as well.

Another change for the final animation was to remove the television scene from the beginning of the sequence, from our feedback it was clear that we were not achieving what we wanted with this so removed it. Instead we changed the movement of the newspapers coming onto screen so they were less linear, using easing in and easing out on the graph editor.

After I had changed this the initial screen still seemed quite empty before any of the newspapers came onto screen so I added the kinetic typography to the very beginning of the sequence.

From the feedback we received, another idea discussed was having four plumes of smoke in the factory scene and when the 50% drifts off two of them fade and stop. This was another change we added to the final animation, as well as adding grain to the smoke plumes.

Once the sequence was all together and we were happy with it, I went through and changed some of the animated opacity so the animation was not as linear, using the graph editor again to ease in and ease out the key frames.

Jay Grimmer jg657

# data[].attributes.body
Week 27-28

These final changes include extending the cityscape by adding a merge styleframe and removing the ambulance. I decided to suggest this as the ambulance styleframe was seen as too busy, and the change from bad to good in the cityscape was to sudden. Thus, by adding in a styleframe that merged the two and removing the ambulance scene, allowed us to extended the cityscape not only making it simpler to follow but removing an aspects that were too busy or sudden.

With this development we changed the cars moving along the bottom. This meant having the smokey car move along the bad city and transform to a sustainable bus with the good city and audio, which then further developed to transforming the bus into the ambulance a the point of health care in the audio.

These changes were crucial to the design as it created a smoother flow along the introduction of the animation. It ensured all aspects of the audio were covered in one scene rather than jumping through various different scenes. Overall, these were the final changes we made as they were the most important and affected the animation the most.

Candida Correia cc779

# data[].attributes.body
Week 25

For the initial animatic we decided to solely focus on the flow of the scenes with the audio so did not include any transitions. Once I had completed the animatic and we had received feedback and suggestions on some transition ideas I began work on adding them into the sequence.

Due to the speed of the audio track the transitions had to be very fast so the visuals could keep up with the soundtrack. As a result of this, a lot of the transitions were zoom effects, created through animating the scale and position of scenes. We would transition from one scene to another by zoom into one area of the composition which was the colour of our next scene until it filled the screen and then the next scene would begin.

Another style of transition we used was having the newspapers that were flashing on the screen of the television at the beginning of the sequence cover the screen. The newspapers then fell away and a new scene was underneath.

For the factory scene near the end of the sequence we matched aspects of the bad factory scene with aspects of the good factory scene so as the camera moved through the scene following the text I changed the backgrounds whilst the viewer’s focus was on the text. I then had the camera zoom out to reveal the change in the background.

Jay Grimmer jg657

# data[].attributes.body
Week 23 - 27

At this stage of the project I was focusing on helping Jay with any missing sections or development ideas. This was very apparent throughout the process of creating the animatic and refining the final animation. In these couple weeks we faced countless challenges that meant we needed new styleframes, drawings or typography. In order to solve these issue we would discuss as a group what we thought we thought would work the best.

During this process I focused on drawing and creating countless new styleframes, icons or transition ideas. A lot of the decisions we made were to improve the flow, look and message of the animation. The inspiration I took for these styleframes came from various videos and feedback based on what we already had.

This is where a large part of reflection into the animation came in. Due to previous changes we were discovering new areas of improvement. Examples of this would be :
1. Removing the scene of the bus reflection as it was present in the cityscape, while adding in a beating heart after the ambulance.
2. Converting the negative aspects at the end of the animation to become positive.
3.Creating a background and hands drawing to be add to the animation in pushing the world up.
4. Creating the bicycle and posters for the end scene.

Overall, in creating these styleframes or icons, it not only improved the flow of the animation but it allowed certain sections to link further to the audio. This allowed us to improve the animation based off of feedback which meant that it would be more successful.

What I learnt from this process is that there is always something that can be improved or refined to be better. As well as that feedback is an essential part in creating a successful project.

Candida Correia cc779

# data[].attributes.body
Week 23
The development of our kinetic typography scenes came from having missing sections in our initial animatic. We decided to create the typography as we felt it would have a greater impact on conveying the necessary message.

Within this process we had developed our own font, as well as decided on how the background of the style-frame was going to look. Inspiration for the font and the use of kinetic typography came from this video https://livekentac.sharepoint.com/teams/EL576-SPR-20-21-Team6/Shared%20Documents/Team%206/Just%20How%20Much%20You%20Meant%20To%20Me.mp4. It allowed us to see how effective kinetic typography can be in portraying an important message. As well as influenced the design style for our font, in terms of it looking hand written.

Creating this typography was one of my main challenges. This was due to having never done something like this before. In order to overcome this challenge and create the typography in an interesting and effective manner, I looked at countless examples as well as completed further research using Youtube tutorials. These tutorials gave me various ideas as to how I could display and animate the text to ensure the viewer remained interested. This included ideas such as reveal, slam on the page, liquid motion and fade in and out. This Youtube link is the page I used the most in order help me create my ideas, https://www.youtube.com/channel/UC7XdblXDNQA0_v6b7CKUeCA/videos. It was very helpful in showing me quick and easy methods, while having to think about more than one word in a timed sequence.

This was also important in order to create the correct mouth shapes for our animation, thus, when she would talk it would look as realistic as possible. The Youtube link is the research I did in order to fully understand how the process should work, as well as what mouth shapes I would need, https://www.youtube.com/watch?v=VKDMpZzhCp0. This was very helpful in creating a simple pull down menu along with key frames in order to change to the correct mouth shape for the correct sound.

Overall, I feel as if the kinetic typography I created was effective in portraying the message from the audio. It was fluid and interesting to look at, while providing slightly different effects throughout. Over time, however, along with more practise it could have been used as a transition into the next scene.

Candida Correia cc779

# data[].attributes.body
Week 22/23
Having had the initial animatic completed and gained a better understanding as to what the next challenge we faced was, we knew we had to come up with new style-frames in order to fill the gaps.

This process consisted of re-evaluating the section of the audio which was missing animation. From this we were able to come up with new designs that fit this audio and allowed us to develop our animation further.

1. " The list is long. That is where the work needs to be, to remind everyone". For this section of the audio we decided based on some inspiration we found and on previous research on animations that we would include a kinetic typography section. This meant creating a style-frame which fit the design style we had chosen. Once the style-frame was created with the character, I was able to focus on producing the typography to fit the space of the audio.

2." For the first time in human history, we have the technologies, the finance and the policy, if we align them all together". Here we decided to create icons that represented each of the things mentioned in this audio section. Having drawn them and added the correct colour palette they were ready for Jay too animate. The designs I created are a simple and effective way for the animation to follow along the audio. One of the main aspects I looked at including in each icon was the idea of nature. This links the things we have today with how we can benefit the environment.

I took inspiration for both of these things through looking at existing examples and seeing how I could adapt them to fit our animation and theme.

What I learnt from this was that creating a basic structure for the project allows for a real step in development later on. This is due to having to solely focus on certain aspects and think about them in more detail. Overall, it allowed us to focus on a section of typography which has not only made the animation more interesting but effective as well.

Candida Correia cc779

# data[].attributes.body
Week 20

Once the scenes were drawn out and coloured in Illustrator I began work on the animatic. One initial problem I encountered was that the scenes that were drawn in Adobe Illustrator were in A4 dimensions whilst the composition for the animatic was in 1280x720. This meant I had to transfer each layer of the scenes in Illustrator into a new file so that I could put the Illustrator file directly into After Effects so that I could animate each layer of each scene separately.

Once I completed this I put the scenes into After Effects and began animating them. I created a main animatic composition with the audio file we had been given and where I planned to place each scene’s composition into to then edit together.

The idea for our initial animatic was to get a rough idea of how the scenes would fit together with each other in a sequence and with the audio. With this in mind I kept the animation for each scene to a relative minimum, giving an idea of what we had in mind for the scenes animation but not putting it all in at this point.

A lot of the animation was done through changes in position and scale of the layer and assets from Illustrator. The smoke and fire animations were created through wave warp effects. Once I had animated a scene in its own composition I would then place that scene’s composition into the larger animatic composition and line it up with the audio track.

Once I had finished work on the animatic we sent it off to receive feedback. From this we decided to add to some areas of the sequence that were blank and needed scenes to fill them. We also decided to adapt and change some scenes and also remove some of other scenes.

Jay Grimmer jg657

# data[].attributes.body
Week 16 - 20

Once our storyboard was complete it was up to me to draw the different styleframes so we could later begin our animatic. The process in which I made these were through hand drawing them and then placing them in illustrator in order to create the digital versions. I drew them by hand first to ensure I captured all the necessary details and aspects each styleframe needed. I also felt it would be easier to create the dimensions and placement in illustrator if Tara and I had a template to follow.

In order to make them to my best ability I looked at drawings online and pinterest in order to see how I might add all the elements together. This was an important thing as it meant I had a good idea of how each part should work together. I also watched Youtube videos in order to age the best understanding as to how the illustrator file should be set up to make it easy to transfer into After Effects. From this video https://www.youtube.com/watch?v=yPha_s7W-0M,  I learnt that each section needed its own layer in order to be individually animated in after effects.

The main challenge at this stage was the time consuming issue of creating each part separately in illustrator from the drawing. Creating each of those lines by one on the more detailed styleframes took quite some time. But in the end it was worth it as it created the highest quality outcome.

Once all the styleframes were drawn by me and then concerted digitally by myself and Tara, we were able to pass them over to Jay in order to create the animatic.

Candida Correia cc779

# data[].attributes.body
Week 17

Once we had created our first style frame of the city we decided as a group we needed to pick a colour palette which would follow through the animation. We went away and selected a few different colour palettes and then changed the colours we had used in the original style frame to a selection from these colour palettes.

We then had four versions of the same scene, all using a different colour palette. To decide on which we should use we set up a survey on Google forms. On the form, I set out three questions for those taking the survey, firstly, how old they were and whether they were within our target audience, secondly which of the four style frames they liked the most and lastly, whether they would stop to watch a video on the environment.

From this survey we had thirty-nine responses, of which 92.3% were within our target audience of 15-23. From these responses, we were able to see that one style frame was preferred more than the others, with a winning majority of 33.3% and we were also able to see that 56.4% of the responders would watch a video on the environment and another 41% would watch the video depending on the style.

After we collected the data from the survey we discussed the results and agreed that we due to the topic of our video the style frame that those taking the survey picked as their favourite would not necessarily be well adapted for each of our scenes. To address this we decided that we would create our own colour palette, taking the majority of colours from the survey winner but also from two of the runner up style frames so that we could then have a mixture of colours which would be broad enough to be adapted to each scene of the animation.

Jay Grimmer jg657

# data[].attributes.body
Week 16
I went away and came up with some ideas for different sections of the audio and then as a group we decided on whether they would work or/and if there were any other ideas we had. This process of bouncing ideas off of one another was an effective way for us to develop and adapt our ideas to be unique and fitting for the message we are trying to portray. Some work that provided us with inspiration was https://youtu.be/NoY4-bEqO1s.

As I was creating the storyboard and style-frames, I created a map of the audio lyrics in order to show the different ideas we had for each section. This was useful to us all as it ensured we all knew what was going on and could add any new ideas we might have had.

From this audio map, the storyboard was created. This storyboard focused on each main scene and the aspects it would contain. It was a useful process in allowing us to complete the main style-frames and any animations they may contain. This storyboard was hand drawn and took our basic ideas and added more detail to them, bringing them to life. It meant that we had a wireframe to adapt and develop any ideas in the future. Based on this storyboard there should have been no missing spaces once the animatic had been made. However, this was no the case and as a group we had to adapt and fill our design (will discuss later on).  This was something I learnt in the storyboarding process, that even if you think all the sections are filled there will probably be some empty space. This is important to consider as it means you can be prepared to create new and developed ideas.

The final aspects of this process was creating a full sized style-frame in illustrator and experimenting with different colour schemes.

Candida Correia cc779

# data[].attributes.body
Week 15

In our initial research stage I began looking at different styles of animation we could use for the visuals of our project. As a group, we then decided to take two styles of animation to research into deeper and have ready to present for our first presentation. Once we all had gone away and researched into our chosen styles we would then look at them all and decide which one we wanted to use in our project.

The two styles I researched into were grain motion graphics and neon-retro motion graphics. Once we had all done our research into our respective styles we chose to move forward with a mixture of fluid transition motion graphics and grain motion graphics and also kinetic typography being used as well.

After we decided to move forward with these styles I began researching into how we would animate in these styles and work out what aspects needed to be maintained in the drawing of the scenes so they could be animated in these styles. For this research I looked at multiple different examples of animations, in particular the animator Ben Marriot, who has extensive work in his portfolio working in grain motion graphics.

https://www.youtube.com/user/benmarriottart

https://www.benmarriott.com/

https://www.youtube.com/watch?v=XmrcRUGy1uM

https://www.youtube.com/watch?v=O5wq9DsQ_Lc

https://www.youtube.com/watch?v=doSmYieyIgw&t=2s

https://www.youtube.com/watch?v=X8JiaUHmdUA&t=9s

https://www.youtube.com/watch?v=Wbq1bwMdFbA

One key aspect I learnt from this research stage was that layering of the designs whilst in Illustrator was key to achieve the desired style in After Effects whilst animating.

Jay Grimmer jg657

# data[].attributes.body
Week 15

Here as a group we focused on familiarising ourselves with the different types of animation styles out there. This was an important thing to do as it ensured we were aware of the existing designs, as well as how we could develop our own to be effective.

As each of us did research on 2 types it meant we had a wider range to choose inspiration from. It allowed for a broad understanding of the different styles, ensuring we could choose one which best fit our theme and target audience.

Based on our target audience being from the ages of 15-23 it meant our design style had to fit with the current trends of social media.
This meant having : An interesting and visual design.
A colour palette that draws attention.
Transitions that flow between the scenes.
A visual design that portrays the message in a way that will                                        make a difference.

These aspects all affect the design of the animation as it is important that it plays to the interests of the target audience. From this research and understanding we decided to create our animation in the style of fluid transitions and kinetic typography. This is because the bright and smooth animation style with the dynamic typography will make for an eye-catching motion graphics.

The two styles I focused on were Double exposure and Kinetic typography. In order to do research on these I looked at existing examples and different methods to how they are created. This gave the group a good sense of direction and what we would be comfortable in producing. In order to present my research and inspiration I created a mood board of existing examples as well as a paragraph explaining the style.

Having decided on our design styles we completed further research to find examples and ideas of how the animation would look and be created. These existing ideas led to mood boards and initial ideas for how our animation would look.

Candida Correia cc779