Final Hay Festival Animation…

Hay Project Mindmaps and Initial Designs…

Initial Drawings

I decided to create my drawings and animation in Procreate as I wanted to use different textures to create depth to the images. By doing this also, it was much quicker to create. I really like how my drawings came out, overall.

I want my animation to be short and snappy, for it to get to the point whilst being quite minimalistic in style. I have decided this so the point stays clear throughout, without being over crowded with images. I want to reuse some of the drawings throughout the animation to make the points more prominent and to stick in the viewers mind.

Hay Festival Sustainability Research…

Hay festival has a ‘Green Programme’ which consists of Environmental and Sustainability focused events. They explore current issues, new developments and technical advances. Hay hopes to become Britain’s first carbon neutral village.

One environmental problem they are focused on is the greenhouse gas emissions that are produced by the festival goers E.g CO2. Hey festival try to reduce this by providing public transport to and from the local train station. They run this 10 times a day to try and reduce the amount of cars used to get to the festival.

From this I wanted to research how much greenhouse gasses e.g CO2, are actually impacting our world and what damage it is doing. This is something I am also passionate about and would like to make my animation based on this to try and spread awareness.

This video gave me an idea of what certain types of greenhouse gasses do to the atmosphere and how it effects our lives also, bringing to lights side effects such as smog and illness.

This animation educates people on how C02 is effecting the earth. It talks about how man-made greenhouse gasses are becoming too much for plants to absorbs, this meaning that increased levels of CO2 are being left in the atmosphere, this increasing the earths temperature. Some of the leading causes of this are, factories, transport, use of fossil fuels and agriculture. The video also provided graphs which demonstrate how the increase in CO2 directly correlates with the increase of the earths temperature.

In this video, helpful tips on how to help global warming are given. Things such as, carpooling, public transport, recycling, only buying enough food for what you need etc. This is an informative and helpful video which will help me with my animation.

Final Dialogue in Motion

FINAL ANIMATION VIDEO – https://youtu.be/x1nkNZ8ose0 – link to the video as it wouldn’t play through my blog

My final animation is 31 seconds long and even though it stops abruptly, I’m really happy with how it turned out. I really struggled with this module, After Effects in particular, so am proud of what I have created and how much I’ve learnt. I would have liked to have gotten to the first chorus of the song but didn’t have enough time to get there, if I was to visit this module I would defiantly carry on and try to finish the song.

The first change I made was the type for ‘walk out tha door’ I decided to make them still instead of animated as I didn’t like how the animated versions looked. I much preferred the way still text looked for the style of the scene. I kept the layout of this though as I liked how this looked and also kept the effect of zooming into the door. To create this effect, I attempted to use the camera tool to make it look as though it was a camera zooming in. I also created the section before this, ‘cant stand to see me’, in the same style so it all linked and tied together. However, I wanted these words to pop up in random places on the screen. I really like how this section of my animation flowed.

FIGHT THE FEELING – For the next section ‘fight the feeling’, I wanted the text to slide on from side to side, and also for ‘feeling’ to slide up from the bottom. Again I created this text in Procreate as I found this way much easier. The after putting each individual word into After Effects I played around with the position tool to create the effect of the words sliding onto screen. To tie in with the ‘fight’ aspect of the scene I decided to illustrate a fist with the idea of the words being punched downwards to transition to the next scene. To do this I used the ‘Bezier Warp’ effect. This allowed me to create the effect of the text being squished down as the fist hits it. This made the words curve around the fist although they has actually been punched. To move the fist I just used the position tool.

For ‘now’ I wanted it sort of floating down from the previous scene, I wanted it to animated across the screen and almost look as though it was floating. I decided that with just this, the scene looked plain so I decided to add continuous lines of the word ‘now’ sliding across the screen. To create this effect, using a path layer, I needed to draw a shape in illustrator for the animation to follow. I then copied this layer onto a text layer which then puts the text on top of the drawn path. To make the text look as though its running along the path, I changed the first margin (which is under the text layer-text-path options). I liked how this turned out, however in future, I would have preferred to hand draw the text and then animate it this way.

Dialogue in Motion project

Day one –

In day one of animating, I decided to concentrate on the beginning section of the song. I timed the opening part and realised it was 24 seconds, I had four words to animate so knew that each word needs to be 6 frames. I drew each individual number and word in procreate on my iPad and also drew the colours separate, I did this so I could import them all on to After Effects and animate them all moving. Once in After Effects, I attempted to use the effect called Saber. I really like how this part turned out. I also decided that for the rest of this piece, I liked the idea of have changing background as I got inspiration for this from some of my research. I found starting this project difficult as I had never used this program, so this took me longer than expected.

Day two –

After a few days of drawing my typography, this is what I did on day two of animating.
I decided to draw out ‘my baby’ and ‘don’t mess around’. I wanted to animate ‘my baby’ appearing on the screen first and then wanted to have ‘don’t mess around’ rotate into shot, this pushing ‘my baby’ to the side with each letter falling off screen. For the typography, I drew it all in Procreate and then exported each letter as a separate image. This made it easier to animate each letter once in After Effects. I decided to keep the theme of bright, changing backgrounds as I want the animation to be as vibrant as possible.
To get the text to rotate in, I attached each letter of ‘my baby’ to a null object, acting as the parent. This means that you can rotate them all together from one axis, instead of their own individual axis. This also allowed me to rotate in ‘don’t mess around’ at the same time. To get the letters to fall, I moved each individual letter downwards after pressing the ‘position’ tool. This allowed me to add frames after each movement and made an animation of the letters falling.

Day 3 – https://youtu.be/YbsnyiMugZ8 – Link to day three animation as it wouldn’t play through my blog.

On day three of animating, I added in the heart and the type saying ’cause she loves me so’. For this I wanted the text to be inside the heart, almost like the end of a film/ cartoon, where the curtains close in around the character. I drew the heart in Procreate where I left the middle empty with no background. I did this because before putting it into After Effects I wasn’t sure what background colour I would be using. Having a hollow shape would give me more freedom in deciding this. I also created the text in Procreate. For this I wanted bold colours and a crisp shape, making it stand out. I stuck to four colours as I thought that this worked best.
For movement I wanted the illusion of the heart beating. To do this I used scale to enlarge and shrink back down the size of the heart. Whilst doing this I also added new frames after each movement, creating the beating effect. (I also did this for the type, making it move at the same time as the heart). I wnated to put emphasis on the ‘so’ as in the song this word is help for longer than the others. I decied to zoom in on the word, making sure it was left on the screen for longer. To do this I used scale again, zooming in on the word and making new frames after each movement.
Overall I was happy with the progress made today.

Day 4 – https://youtu.be/ysbOVKTPwqc – link for day four animation as it wouldn’t play through my blog

I spent the next few days concentrating on creating typogrpahy and images from animation as I was staring the become limited on time. I drew them all on Procreate and then transferred them into After Effects. For ‘this I know’ I added the effect ‘ CC spotlight’. I wanted to start experimenting with effects on my text and really liked how this looked. I kept the background black so that the effect would stand out more. For ‘fo sho’ I wanted the illusion that it was being drawn and illuminated at the same time. To do this I used the draw on effect in After Effects.

For the animated lady, I wanted a subtle animation which wouldn’t take away from the text. Using the Fractal noise and Guassian Blur effects in After Effects allowed her to sparkle and be some what lit up, whilst also allowing for concentration on the text. For the text to move I played around with scale again. This allowed for the growing and shrinking motion I created. I also played around with the opacity of the type, this allowing it to fade in and out as it shrinks.
For ‘walk out tha door’ I wanted the words to be animated onto a still background (which I drew in Procreate). To make the text move I used the scribble effect in After Effects. This allowed me to create the look of the text moving/ being scribbled. I like how this effect worked out and added a sense of hand drawn illustration into the animation, which is mainly typography based. I also wanted the background to zoom in a rotate to the side, this keeping ‘door on the screen for longer; this because ‘door’ is elongated in the song. To do this I changed the scale and rotation.

Dialogue in Motion – Research

For this brief, we were challenged to create a piece of kinetic typography, using After Effects. I wasn’t familiar with this decided to look up some videos on YouTube, I did this to try and get a better understanding of what we had to do. I tried to get a wide variety of styles, e.g music videos and informative videos. These were some of the inspirations behind my piece of kinetic typography.

I think this video is a really nice example of kinetic typography from an illustrative point of view. I really like how images add to the text but don’t take away from it. I think it’s interesting that in some parts the text actually becomes the image, almost as if they morph into each other. The limited colour palette used in this video works really well with the message of the video. The colours aren’t too over powering meaning the viewer can concentrate on the message/ typography. I think in my piece of work, I would like to have the text as the main focus, with the illustrations adding to the overall look/ feel of the video; taking inspiration for this from this video.

In this video, I liked how the text was the main focus of the video; being mainly in the centre of the screen and having bold type fonts, it draws the viewers attention to the main message of the video. I also like how the background in the majority of the video is a plain block colour, this meaning it doesn’t take way from what’s happening on screen. From watching this video, I have realised how may different effects there are on After Effects for text. This has made me want to experiment with effects when creating my own animation. the only thing I don’t like about this example is the use of small images crowding the screen, which happens a few times in this video.

In the example, the background is constantly changing colour, some being bright and others being quite dull/ muted. I think I’d like to use this in my animation. I really like how throughout the video your eyes are drawn to the little circle moving around the screen, its almost as though its guiding you through the animation. I think its a nice touch to the video as it stayed constant throughout and keeps the viewer looking in the right places. For the typography movement, I really liked how the words almost mimic the emotions they’re portraying. This keeps the animation fun and interesting without having to use images to demonstrate these emotions. The audio behind the animation is really subtle, this works really well with the style of animation. The sounds draws your attention to the text and in my opinion, ties the whole animation together .

I really like how the type faces in this video is simple and similar all the way through; with some effects to keep the text interactive and moving. However, I think this example could be seen as quite visually uninteresting, especially from illustration point of view; there are very few images throughout, and where there are, they don’t really add anything to the text. There were quite a few effects used throughout the animation. I liked this and would potentially use this approach in my own animation.

This is my favourite kinetic typography example that I looked at. I really like how the text is completely in sync with the audio; especially the very distinct beat throughout the song. It almost feels like the text and images are being moved/ controlled by the beat of the song, I defiantly want my animation to sync with the beat/ audio of my chosen song. I love how the images add depth to the animation and also visually communicates what the text is saying. I really like how some f the images are simple line images, I think this would fit my style of illustration and is a good inspiration for some my animation. The text and the images complement each other, so much so, some of the images morph into the text and vice versa. The main colour theme is black and white with a pop of colour. I think this is really effective as there aren’t too many things/ colours on screen as this can sometimes be too distracting to the audience.

I don’t really like this example. I chose to look at it because it was different to the others I had researched, this one was spoken audio which I wanted to look more into. The animation was very simple and to me wasn’t very visually pleasing. The main colour is a dull grey which blends into the unchanging background. This to me, looks boring and a little bit plain. The video does however have pops of colour coming through from the other pieces of text and the small amount of images used. However, these colours are limited and the animation, in my opinion, still look incomplete.

This again is another spoken audio animation. There is not much variety in terms of typography as the artist has stuck to three type faces throughout the entire animation. I like how each actor speaking has their own font, allowing you to distinguish between the voices. I also like how the text suits the characters e.g the Joker has a scratchy/ messy font, whereas Batman has a strong/ bold font. I think this is a nice stylistic choice for this animation. Throughout the whole animation the text has a shadow behind it, this gives the illusion that the text is floating, I think this is a nice touch. I think this animation could benefit from having some colour or images appearing throughout the video as its quite plain and repetitive.

I really liked this one as they have used texture in the background, I think I would like to use some sort of texture for the background, in parts of my animation. I think the use of one main text works really well for this animation as its big and bold, which fits in with the audio which is someone shouting. The animation uses very simple illustrations which adds humour in some places. The images don’t take away from the text, only add to it; I really like the simplicity but added effect of the images. This video has a very limited colour scheme, mainly sticking to cream and back, with hints of red and pops of colour on the illustrations.
I also really like the camera rigs on this animation. It gives the illusion that the camera is following the text, insteadof the textjust moving around on the screen. I would like to have ago at mimicing some of these effects in my animation as I think it adds sophistication to the overall look of the animation.

Dialogue In Motion – style pages and storyboards

My initial idea;

This was a rough story board I produced before testing out fonts. I made it with simple drawings so I knew what the layout would be, but I explained in detail so that I knew what happens in each section.

On my ipad I decided to create some trial text fonts. Because of the animation being produced on a background of old tv’s, I thought these fonts would work well with this. I liked the colours also as they go against the idea of an old tv. I tried to make the orange text look like it came from an old computer screen, and I thought the pink glow effect would stand out for certain parts of the animation. I thought these would both look good with the glitch effect added to them.

AE Essential Skills Experiments

For this brief we were experimenting with using After Effects, we got to learn the basics of the programme and created mini projects to practice these skills.

This lesson was useful as we created a simple animation of an old game of ping pong. For this we experimented with the ‘position tool’. We learnt about creating key frames and how to parent objects to each other in order for the animation to work. To start with we created a line shape by using the shape tool. We then started to move the line up and down and for each movement moved the playhead along, this adding new frames. We then drew another line and placed it on the other side of the screen and did the same to this object. Then parented one line to the other so that they would move at the same time. We then created a little ball object to animate going in between each line, creating a ping pong effect.

For this animation we experimented with the ‘puppet pin tool’. This allows you to take a still image and give it joints, allowing parts of the image to move. For this piece of work I downloaded a cartoon image of a person, used the puppet pin tool to put joints in the appropriate places e.g knees, neck, elbows and waist. By pressing down the alt key the joint tool changes, so that you can add a bone like structure to parts of the image, allowing for a more realistic movement.
We also used the position and rotation tool to animate the cupcake being kicked and flying across screen. Again, for this animation, we added a new frame after each movement; whilst moving the leg and body to recreate a kicking movement, and then again for the cupcake flying and spinning. To finish the animation I inserted a background behind the images.
I was happy with how this turned out as it was my first attempt at using the puppet pin tool.

For the next workshop we had to animate text bouncing up and down. For this I used the position tool to animate the text moving up and down. I wanted to try animating by using key frames instead of lots of new frames; for this I added a starting frame (when the text is in the middle of the screen), a middle frame (when the text touches the floor) and a final frame for the finishing position. I also, to try and make the bounce look more realistic, halved the height of each bounce as in reality when an object bounces it loses half of its momentum and the bounce becomes smaller, until it eventually stops. To make the bounce look smoother, I added motion blur to the animation.

After the lesson I decided to revisit the bouncing text and try making the letters bounce individually. For this I separated the text up into letters, in Photoshop. After this, I imported the individual letters back into After Effects. I did the same to this text as in the last attempt, only instead of moving the whole word, I simply moved each letter up and down, whilst using the position tool. To get the effect of the letters bouncing individually I set the key frames at different heights and also had some letters bouncing for longer than others. This gave the effect that the movement is random and more natural. For a little extra effect, I animated the ‘o’ falling over, I liked how this turned out.
However, the text, in some places bounces too fast, making the movements looks unnatural. This is something that if revisited I would change.

I wanted to expand on the bouncing text to try and improve the animation. For this one, I tried to add the ‘squash and stretch’ technique. When the text hits the ground, it squashes a bit due to the impact. Then ,when the text bounces back up it stretches out, until it eventually returns to its natural size. This made the bounce looks more realistic and I prefer this animation to the previous one.

However, when animating the text I forgot to add the easy ease effect. Easy ease makes the start and finish of the animation appear smoother, as it eases in the animation and eases the animation to a smooth finish. This makes the animation have less jolts in it and makes the animation look better overall. If I revisit this, I will add this effect to improve my animated bounce.

For the next part of the brief, we had to make 2D images into 3D objects. We did this by adding the sphere effect onto the image. I used an image of Freddie Merury, once I had chosen my image, I dragged the sphere effect from ‘effects and presets’ over onto the image in the middle of the screen. This changes the image into a sphere. I then played around with the shading and shadows of the sphere, this making the image clearer.
To animate the sphere spinning, I set two key frames, one where the animation would start and another when where the animation would finish. I then started the stopwatch on the rotation tool and moved the playhead to the end key frame and made the sphere rotate a few times. The when I dragged the playhead back to the beginning and press play, it allows you to see the rotation that was just created. I then turned on the position tool and started animating the sphere moving around the screen. For this I just moved the playhead along each time I moved the sphere. This resulted in the sphere moving around and spinning at the same time.

To expand onto this, I made two attempts at animating two spheres that are both moving and rotating, and also bumping into each other. To create the second rotating sphere I did the same as I mentioned above. However, this didn’t really work as the first sphere was already animated, so when I tried to animate the second sphere, I couldn’t get the correct timing or positioning. Because of this, when I tried to animate the two spheres bumping into each other, the first sphere ends up being behind the second. The movements ended up not looking random enough and didn’t look believable.

To expand on this even further, I wanted to animate the whole of Queen as spheres, all spinning, moving and bouncing into each other. To try and make the bouncing into each other look more realistic, I decided to animate them all at the same time instead of one after another. This allowed me to have the correct timing and positioning through out the animation, to make the interaction look real. To do this I started the stopwatch for the position tool, I then moved the playhead along, moved all of the spheres, then moved the playhead along again and moved the spheres again, I did this until the last key frame. By doing this, the interactions between the spheres looked more natural and believable, whilst still making the movements look random.

For the final attempt at this, I wanted to add something different to try out and get used to more tools. For this, I decided to have the Queen logo appear and get bigger towards the end of the animation. For this I played around with opacity and scale. For the beginning of the animation the opacity of the image was at 0 and throughout the animation it gradually increases up to 100. Whilst the opacity in increasing, scale is also increasing. To start with, the scale was also 0 and as the opacity increased, the scale also increased. I really liked how this overall animation looked. If revisited I would sharpen up the interactions between the spheres, as at certain points they bounce off each other without fully colliding.