grad603-02a-kinetic-ahnesshim

[grad603-02a-kinetic-ahnesshim]

Final Animation

I payed attention to small details, such as timing and the pace of the animation.

At 22 seconds when "Thanks" appears I noticed that between the keyframes "Thanks" was actually visible in when it was scaling up. Therefore, I made changes to that by adding opacity keyframes so that it wouldn't be visible when at 25 seconds that frame disappears.

Reflection

Using this program was definitely something new but also a program that felt somewhat familiar. I found that although there were more technical things you could do with adobe after effects, creating more diverse and effective animations, it was very similar to how creating kinetic animations with photoshop was, which was why it felt familiar, especially when creating keyframes.

But because the program was different, there were quite a few new things I learnt and picked up new skills. I found that understanding the concept of new compositions was difficult in the beginning but as I was starting to animate and add files from Illustrator I started to understand and felt that it was very useful. This was because I could create animations in "sections" then add the whole composition in the other and adjust accordingly to the audio. This made the workspace much easier to work in because I then would not have as many layers to scroll down through.

I also found that you could animate in a 3D space, which I found really interesting and an amazing technical tool that I utilised in my animation.

Looking back at my storyboards and my final animation is quite different. The designs and the animations changed whilst I was in the process of creating it and found myself iterating the animations if I thought that it did not reflect the visual style, the tone and audio of Taika.

I found this project both very challenging but also very enjoyable. It was challenging to animate in a way that reflected Taika's speech, but seeing my animation come together and create accordingly to the tone for my animation, it started to get a little easier. Prior research into the specific speech that Taika was talking about and on him, made establishing a design for the animation easy because I drew inspiration from the film he was talking about in his speech, but it was more that the technical skills and the animating were more challenging.

[grad603-02a-kinetic-ahnesshim]

These were some notes I made on my animation, as I reviewed it again and again, to see what I could change to improve my animation.

Taking on board these annotations and reflection of my animation, I took this into the digital workspace and started to make some changes.

I found that the small minor things to the animation, can have quite an impact to the flow, rhythm and pace of the animation.

At 36 Seconds of this video, I changed the height of the "and" because I felt that the gap was slightly bigger.

And at 30 seconds of this video the "read" was previously black, but I changed the colour of the word, to add a little more emphasis to the word, to reflect Taika's tone.

At 35 seconds, I also wanted to add a slight but not too obvious, emphasis to the "and" so I scaled the "and" slightly larger and then quickly returning to its original scale.

Also, in the very beginning of the animation, I altered the keyframes of "presenting Taika Waititi" because I felt that the pace of the clipping mask revealing and hiding the text was too fast. Therefore, I slowed the pace down by spacing out the keyframes. This was also done to the credits as well.

[grad603-02a-kinetic-ahnesshim]

Drafting Part 4

Creating and animating this part for me, I felt was particularly hard or felt more challenging than other keyframes that I animated. This was because I was trying to find a visual way of showing a “search - light”, quite literally, playing on words here. I wanted to create a spotlight visual, inspired from the name of “searchlight”.

Then I needed to find a way to animate the other words, that I felt could not be animated on a “new slate” because I felt that the way Taika spoke this part, “searchlight” and “for believing in the project”, almost belonged together, so I thought that they should be seen in the same composition.

Sketch of Idea

I wanted the “and” and “Uh” to relate to the “searchlight” so I used the same visual technique of animating a beige circle - which imitates the spotlight to “search” the “and uh” phrase, then this carrying on to “searchlight” 

Iteration 1

I experimented by animating phrase sliding in from the left to the right. However I felt that the flow or rhythm of this was not right, and felt almost too fast. 

Iteration 2

I then tried animating it on a curvature, following the beige circular shape and animating it from the bottom to the top, sitting below the beige circle. 

I quite liked how the words followed the curvature of the beige circle, as there was a sense of unity and softness, however, I still thought the way the text appeared or animated could be improved. 

Iteration 3

Because, I quite liked the way the words were following the curvature of the circle, I created an iteration of it, by animating the words to circle around the spotlight like an orbit. 

Although the idea was playful, I thought that it was visually not appealing. It looked quite messy in the frame. 

Iteration 4

I play with a mix of horizontally straight and curved words. I quite liked this but thought it might be better if I had both phrases following the curvature of the spotlight. 

I also liked the split of “for believing” and “In the project” as there was a connection to the way Taika spoke, the slight pause in between the two phrases. 

Iteration 5

Iteration 6

Final

I finally settle for this one. It is exactly the same in how the text animates around the curvature in iteration 6, however in the final one, I decided to change the colour of the text because I felt that visually there was not enough colour contrast. 

I felt that with this , there was a relation to the spotlight and followed the rhythm and tone of Taika’s speech/audio. 

[grad603-02a-kinetic-ahnesshim]

As I was in the process of furthermore editing this animation, I made sure to look at my animation as parts and also as a whole, to see if everything really ties in together and flows from one keyframe to another.

I edited previous keyframes, to improve them, such as the line that ran across "Christine Leunens", I got rid of, and at 23 seconds, of this video you'll be able to see that I have changed the "and um" to stay in the same position as "and" in the previous keyframe. Before, I felt that it was too distracting, because it was leading the viewers eyes having to up and down in too much of a fast time, being quite unpleasant and rather distracting.

I think that this little change have made quite an impact to the transitioning from keyframe to keyframe.

Also at 24 seconds of this video you can see that I also got rid of the red line that previously ran across below the word "read" to emphasize it. I thought it would be more effective if I just changed the family of the type, by changing it from regular extrabold to italics extrabold.

[grad603-02a-kinetic-ahnesshim]

Drafting 3rd Part

First Iteration

For this part, I first tried animating this by creating a clipping mask and revealing the text from bottom to the top. I thought that this effect did not suit the audio, because the way Taika spoke this was quite fast and also it was not an important part of his speech. But I thought there would be a better way to animate this part. 

2nd Iteration

I thought the rotating and scaling was interesting, however, I wanted something more simple - simple but an effective animation without drawing too much attention to this part, but also reflecting the way Taika speaks through animation. 

3rd Iteration

After trying several different effects/animations, I thought that this one was the most resolved and felt more connected and related to Taika’s audio, whereas the other ones felt somewhat disconnected and seperate from the audio. 

For this one, I think the use of just simply making “Uh” appear first in the comp, then offsetting the characters of anyway, reflect the sort of echo, or the “dragging” of words we hear form Taika when he speaks. 

First Iteration

2nd Iteration

3rd Iteration

[grad603-02a-kinetic-ahnesshim]

I think most of my timing for the animation is good with the audio, but now that I am seeing the exported version, the "insisted that I read" could be timed a little bit more slower and more accordingly with the audio just slightly.

I tried to take into consideration of the pace and the way Taika speaks, therefore some animation may seem a little more faster and some a little more slower in comparison, such as the christine leunens part, which is slower in comparison than to "and made me read, taught me how to read, insisted that I read", part.

At around 5 seconds of this video, I am not too quite sure about the transition of the and coming down, abruptl, I may need to add some motion blur to when the "and" positions to the middle of the page.

[grad603-02a-kinetic-ahnesshim]

Drafting of Animation (2nd half of “first” paragraph)

First Iteration

I experimented with the words, having to appear one by one below eachother. I quite liked this animation or effect I put as I thought it suited well to the audio, however one thing that I did not like was to have to transtion a “new” frame or composition for the next set of words that were to appear, following “Uh who” because the words were too big on the frame. I felt that if I “wiped” the “Uh who” away from the frame for the next set of words to animate, I felt that there would be a disconnection. 

Second Iteration 

Moving on from my first iteration, I used the red line that runs below the word “mother” and scaled that very large, so tha t creates a smooth transition to “Uh who”. This also appears one by one but, next to each other. 

I quite liked how I animated “introduced me to the book”, however when I played it back and thought about the audio, the timing was just not right, as the “me to the” comes through a bit later than “introduced” 

I was inspired by the word “book” and wanted to create an effect like how pages flip or how the front cover closes - essentially here, I was trying to think about the meaning of the word, and see how I could literally put that to effect. 

Second Iteration

You can see that I have addressed the concerns I had with the previous animation, by seperately animating “introduced” and “me to the” due to the timing of the speech/audio of the words. I wanted to do this accordingly so that the animation do not feel connected or cohesive to the audio. 

First iteration 

Here I offset the characters to create a typewriter effect. I was not too sure about this effect as I felt that it was too much of an animation for that word, for something that felt a lot more simple and sharp when listening to the audio. 

Second Iteration

Therefore, I improve the animation by only offsetting the “....” to make them appear one by one after “um” - whole word appears. I felt that this looked and felt more suited to the audio. 

Sketch of Idea

First Iteration

When I was transcribing the audio, this was one of the first things that I noticed. In the speech, there are repeating words several times right after each other. I wanted to take this to my advantage, without having to animate every single word, by animating only the few words that change in the phrase that Taika speaks. 

Immediately I thought of possibly using a clipping mask to make the words slide down one after another or the other one was to make the words “flip” one after another. 

I quite liked the flipping technique, and thought it emphasised it more, therefore, I animated the words so they flipped one after another. 

Second Iteration

I added further emphasis to the words that change like “made”, “tauught”, and “Insisted”, by changing the colour from black to red, to stand out amongst the rest of the black text. This highlights the importance of these words in the audio.

[grad603-02a-kinetic-ahnesshim]

This is just a part of my work that I have iterated many times during the process (screenshots of process is documented on blog). Some of these animations of frames may change, but this is my work so far.

I tried to explore different ways off animating text, but also staying true to Taika's colour and the way he speaks and delivers his speech.

As mentioned in the blog before, I have chosen these three main colours, red, beige and black, because I was inspired by the film Taika talks about in this speech called "Jojo Rabbit".

The use of monospaced type (Adelle Bold) and a more soft round serif (Mueso Sans 700) type, shows the sternness and formality within the speech, but also showing the more humourous and softer side to Taika - which I tried to reflect his personality and the way he speaks, which is quite humourous and sarcastic.

[grad603-02a-kinetic-ahnesshim]

Drafting of Animation (2nd sentence)

1st Iteration

To smoothly transition from the intro to the next, I used red from my colour palette.

I then use that red as a colour block and almost create a section to highlight the start of a new sentence (although it is connected)

Here I attempt to emphasize Taika’s stuttering when he speaks by offsetting the characters and letting the “P’s” appear first before the whole word appears on the screen.

2nd Iteration

I wanted to play around with the composition of “people” to explore a possible better composition for this specific part. 

I liked how it looked overall, but I was quite unsure about it as I thought it was a little difficult to read. 

I use the blank space, to animate the words “I want to have to” by revealing them. 

In these two images above, I do not use motion blur or easy easy in this one, which makes the movement looks a little more harder and stiff. I used these lines, to guide the viewers eyes to highlight the important names and things that were mentioned in the speech.

to make the movement alot more smooth transitional, I add motion blur and easyeasy to the keyframes. 

On adobe illustrator, I initially had designed this bookshelf illustration to put in my animation, however, I wanted to opt for a more simpler and singular form than this one, as I felt that this would look more messy on the animation frame/composition. 

I use a circle shape or ellipse shape on aftereffects and hide it within the spine of the book, so that I couuld use it as a transitional cue for the next set of sentences or words.

I thought that the previous transition felt very unnatural to something that was “trying to be more subtle and a natural transition” but ended up being the opposite. Therefore, I opted for a simple transition and I think this worked better than the circle transition. 

[grad603-02a-kinetic-ahnesshim]

Drafting of Animation

Intro

i wanted something simple for my title. Something that did not reveal too much but something that was not too vague. I wanted the intro to be quite simple and clean to reflect somewhat the formality or seriousness of the BAFTA award ceremony. 

I start by creating a rectangle mask and altering the two anchor points to create a diagonal clipping mask over the text. 

I proceed ed then to make the mask run over the text so that the tedxt is then gradually covered or disappears. This transition allows the next sequence to flow.

First Sentence

There were notes that I made before creating storyboards; a printout of the transcription, and the notes I made on this particular sentence was ecircling the emphasis on some of the words and “ummm” was one of them. Which is why I scaled it quite large on the composition. 

I let the “ummm” run through the page, to show Taika’s trail of thought.

This then falls of the composition which leads to the next set of words. 

I start by revealing the first two words through a clipping mask that slides downwards. 

I then highlight the words really it, because I felt that, again, it emphasised these words when Taika spoke.

I created another clipping mask which reveals the text from the left side to the right. 

Second Sentence

I attempt to try different methods on how I could visually show the stuttering of the “p-p-people”. I thought of putting a black square behind the p and when Taika stutters again to put the black square behind the second P, highlighting the stuttering of Taika. However, I felt that it was not very visually appealing and the black square hindered the text's readability. 

Instead of putting the black square behind the letter, I attempted to actually change the colour of the P and then do that to the next one accordingly to the audio. 

I think I like this iteration better than the first attempt, because you can clearly see the text and theres enough contrast with the background to provide that. 

[grad603-02a-kinetic-ahnesshim]

Audio

For the audio, I visualised something that was a little more upbeat, but not something that sounded hopeful - like an inspirational music. I wanted something that sounded a little playful and fun. 

I looked on a few websites that offered background music such as Royalty free music, Audio Jungle. 

If I liked an audio I would turn Taika’s speech on with the audio soundtrack to see if they went well together. I found that it was a little difficult to find a soundtrack that I quite liked but I ofund one on Pixabay, by Lema called “you can do more !”

https://pixabay.com/music/upbeat-you-can-do-more-108602/

I thought this soundtrack fit well with Taika’s speech as it sounded upbeat and happy but not like an inspirational or hopeful music. 

[grad603-02a-kinetic-ahnesshim]

Lesson B4

This was quite a useful tip, to expand the waveform out when working with text so you see when the speech or a certain word is played, enabling you to animate text much more efficiently. 

Another useful thing I learnt through this lesson was the option of being able to press the keyframe “Source Text” - this button allows you to retain the text and style in that keyframe. This enables you to create different animated text when you use the “type tool”, which creates a different keyframe with a different word. 

This allows you to animate different words, without having to have multiple different layers, which creates an easier workspace.

You can bring in a photoshop file that has many layers and adobe aftereffects can retain and export those individual layers. This makes it quite efficient as it allows me to work with different layers within adobe effects, and without having to export multiple individual files. 

It also creates a new composition, allowing you to work within a “new space”. 

Here I also trimmed the audio here, to work with this photoshop file for a specific time on the audio. 

Because I only need a specific amount of the audio for the photoshop illustrated files, to animate a certain bit for the audio, the audio acts as a guide to see where I need to animate the files. So I trim the work area and also once I’m done animating I can delete the audio file on the new composition so that it does not overlap with the original workspace.

Later, I then learnt you can close the composition or “new workspace” and then drag that to your original workspace and drag the time of the files to where you need it to animate. 

Flower Activity

Here I have created three keyframes, one in its original position and the second to the position that we want it to bounce off then the third back to its original position. 

These keyframes will animate a “bouncing” effect, however the bounce will seem mechanic and not very lively. 

To take away the mechnaical feeling of the flower bouncing up and down, we use the “easing” method on the keyframes. I have applied “easy easy out” to the very first frame and “easy easy in” to the very last frame. This will “ease” the bounce of the flower and feel and look like it is actually “bouncing”.

Here I press the “graph” button next to the position button, then I press on the Master graph which is at the top right. This graph shows a “bottom” shape which is the movement of the flower. 

I change the shape of the graph to a mountain. This allows the fall or bounce of the flower, you get a lovely hold and the fall of the flower when the gravity kicks in. This further takes away from the mechanical constant movement/bounce of the flower from before. 

Squash & Stretch

This was created by using the scale transformation. 

A keyframe was made in the beginning of the timeline to retain its original scale, then one made one frame made before it “hit” the floor and scaled it narrower and longer in length vertically. This was copy and pasted to one key frame after it hit the floor again.

Then another keyframe was placed in between the two and it was “squashed” by scaling it flatter and wider. 

The squashing and stretching of the flower makes a more dynamic movement and bounce.

[grad603-02a-kinetic-ahnesshim]

Exploration of Visuals

As explained before I drew colour and visual inspirations from the film Jojo Rabbit that Taika Waititi’s speech was about at BAFTA. 

I have decided to use a few different fonts, this decision was made on the way I viewed and felt while listening to Taika’s speech, esepcially in the way he talks and the formality of the setting. 

I have decided to use Adelle - a slab serif typeface and Museo Sans Rounded and look script for some specific words that stand out such as mother and fabulous within the speech.

Although I did initially explore mostly sans serif typefaces, I thought they did not fit so well with the overall aesthetic that I wanted to go for this animation. Especially with the colour choices the way in which Taika spoke and the formality of the setting (at formal awards event, BAFTA). Which is why I chose to use a mix of soft rounded sans serif typeface to reflect taika’s casual spoken language and the slab serif which evokes a sense of formality within the speech but not too formal. The script typeface choice was made because of the way in which those words spoke out or seem like. They have more warmth to the word hence why I chose a script typeface for them.

[grad603-02a-kinetic-ahnesshim]

Titles and Credits Exploration

Candy (2022)

I thought the motion of the text was quite interesting. It moved accordigng to the illustrations that were in the frame. It almost the letters or he type were apart of the ingredients or instruction of a recipe. 

I thought that this was quite well thought out in terms of design and in the way they made the type move.

Jojo Rabbit

This one was quite a simple one, but the type is loud and bold. But contrastingly, it uses a soft fading in and out. Perhaps it reflects the softness of the theme or the way in which film disappears.

Unknown 

I thought that how the type became apart of the imagery in this but in the most subtle way was interesting.

You can seethat the “l” on the end of the name is white but later turns to orange when the orange sticks hit the “J”. In a way I thought it was clever but also what if perhaps the ‘L” was just orange from the start...?

The Glory 

Through the mood, colour palette and choice of typeface, we can instantly tell its a gloomy atmosphere to the film. The way the type fades also seems to be some sort of gritty texture over it when it fades. 

The choice of type and the way it fades away like dust makes it seem quite eerie and dark.

https://www.behance.net/gallery/170051989/-Main-Title

This is not a title or credits animation but I thought it related because usually in the ending scenes you would have all the credits almmost scrolling through, I thought this was a fun and interesting design.

https://www.behance.net/gallery/128785741/We-Love-Graphic-Design-Opening-Titles

Big Fish

I loved the way how the type reflected the ripples of the waves and how that thought and process went into when animating the type. The careful blurring and disappearing of the type made it serene and definitely set the tone for this animation.

I thought it was quite clever. It was also clever to :liquify” or “warp” the text as the background moves - which is of water, I think that it shows and reflects the underwater theme quite well. Without the background moving image, you would be able to tell it is mimicking the ripples of the waves. 

https://www.behance.net/gallery/30476481/Big-Fish-Credits-Video-making-motion

Catch me if you can

I had actually watched this film a couple months ago, and the animation had really caught my eyes then and still does. I loved the linear work they used as a part of the type, by manipulating the type and creating motion and animation within. 

If you watch the whole opening and ending scene they continue to use these lines to guide the viewers eyes without them getting lost, which I thought was excellent as there were quite a few animations happening, and the words could have gotten lost. But they used the lines to their advantage and instead guided the viewers eyes. 

[grad603-02a-kinetic-ahnesshim]

Week B3

Masks

select text and create rectangle over the text

open and view mask in the side panel, and you can choose what to do with the mask

when MASK PATH is selected press SHIFT and ARROW KEY to move the mask then activate keyframe to reveal text.

can alter shape of mask by using anchor points

click off the mask layer then click the edge of the mask layer until two squares are highlighted and another two not highlighted, then you can adjust the shape

You can use the pen tool to create creative shaped masks

[grad603-02a-kinetic-ahnesshim]

Planning + Story Boards

I printed off the transcription of the audio and I extracted and annotated certain words or phrases that stood out to me. This may have been related to the importance of the speech or the tone and pace of Taika’s speech. I also have thought about how certain words or phrases could have a whole frame on their own due to the rhythm of Taika’s speech. 

Story Board 1

This is a storyboard I sketched up and also annotated in how they would animate and to also see how it would be sequenced or placed within the frame. Reflecting on the importance and the way Taika spoke, was taken into consideration when sketching up a storyboard. 

These things may slightly change when I actually come to animate. But storyboarding was a good way to give me a rough visual idea of how I may sequence of animation.

Story Board 2

This storyboard has similar styles or techniques to the first one, but I have tried to try out different compositions of the text, and sketched out different and a little bit of a more creative way to sequence or compose it. 

[grad603-02a-kinetic-ahnesshim]

Colour

These are the two colour palettes I am thinking of. 

These colours were extracted from the movie “Jojo Rabbit”, which is the context of his speech. I thought that although these colours were exracted from his movie, I thought they suited the theme, the place and his speech. 

The colour palette on the left represents his personality a little more than the right colour palette, however, I think it will depend on how I will design this animation and where I will use the colours.