Illustration and Visual Narrative | Task 2: Decisive Moment

Our next task was to create an 800 x 600px animated poster depicting a significant moment in a movie, comic, video game...etc. The poster had to be in a minimalist style and should contain some basic animation elements.

Inspiration

If the banner above wasn't obvious enough, I knew I wanted to portray the 'Forbidden Friendship' scene from How To Train Your Dragon :D. It is the first scene where Hiccup and Toothless get to know one another and it is considered as "the heart of the movie" (in the entire trilogy, in my opinion). 

Figure 1: Inspiration Board, Week 6 (30/9/21)

From finding references and inspirations, I found myself leaning towards the more 'detailed' looking posters. 

Figure 2: 'Forbidden Friendship' scene flow, Week 6 (30/9/21)

Figure 2 is my third reason to fangirl in this semester. 'Forbidden Friendship' is a musically-driven scene that shows the starting of Hiccup and Toothless's friendship. The scene has almost no dialogue at all, so it is carried through the expressions and interactions of the characters with one another. A pattern arises: Hiccup smiles, Toothless 'smiles' (ADORABLE). Hiccup draws, Toothless draws. Another subtle pattern comes whenever Hiccup tries to touch Toothless, he will always recoil/be defensive again. As the scene progresses, we can see the initial building of trust with each other until the very end of the scene (aka the decisive moment). 

But the ending is not perfect; Toothless is still hesitant (fun fact, the slight hesitant movement of Toothless was actually a glitch by the animation software, but it was perfect so they kept it :D). And, while befriending a dragon is not realistic at all (sadly), this scene still retains the idea that trust between two opposing sides can be built when both sides are willing to understand each other. It may not be perfect or reach a 'happy ending' immediately but it can help bridge a connection between what seems like two clashing worlds (ie: humans and dragons). 

This scene often reminds me of something the world needs a little more of.

Sketches

The decisive moment is pretty straightforward, a simple one-point, somewhat close-up composition. Hence, I struggled more with the background of the poster and thinking about what to include in it. 

Figure 3: Poster layout sketches, Week 6 (30/9/21)

The main experimentations were playing with different logo styles and the background of the poster.  I tried a 'simple' white background with some texture overlay (middle top) but it gives off a little plain feeling. The top right sketch looks too similar to the original movie poster too :(.. I like the bottom row the most as the background seems to feel up the 'plain' feeling. In general, I feel that the layouts I tried were very 'safe' and direct; what was in that scene was taken. There may be some imposter syndrome going on here haha. Another concern is that it may be too detailed to be considered 'minimalistic'. 

I just found out a landscape orientation is also possible as long as the dimensions are within 600 x 800px. 

Figure 4: Poster layout sketches (landscape), Week 6 (1/10/21)

Feedback: Both Ms Anis and Ms Jennifer preferred the sketch with the white background as it is simple but also effective.

Digitization

I started with vectorizing the logos used here: 'DreamWorks' and 'How To Train Your Dragon'. 

Figure 5: Tracing DreamWorks logo, Week 7 (4/10/21)

Yes I stupidly did it point by point to trace the pixelated DreamWorks logo before finding out another magical tool exists: Image Trace. I only found out after I had finished the DreamWorks logo :,) so I only used it for 'How To Train Your Dragon'. While it wasn't perfect, it was much faster hahaha.

Figure 6: Logo vector, Week 7 (4/10/21)

Vectorizing Toothless' head and Hiccup's hand were pretty straightforward. The textures, however, I had a difficult time finding the right one. Especially for Toothless - scales are complicated ;-;. Even though Toothless' head was cut off by the edge of the page, I still drew it outside because it may be needed in the animation later on (and it just looks weird to draw a random fill shape). 

Figure 7: Workspace, Week 7 (4/10/21)

If you look close enough at the background texture, it is liTTERED with watermarks (it was barely noticeable, so I didn't notice it at first)... so I just changed the background with another texture, and voila:

Figure 8: Final Vectorized Poster, Week 7 (4/10/21)

Feedback: It was good to go! So time to animate :D

Animation

The main animation is simple enough: Toothless' head will move forward and do a nose boop on Hiccup's hand. However, I also wanted to capture the slight hesitance before Toothless moves forward, and also the closing of his eyes. 

Figure 9: Animation reference, Week 8 (14/10/21)

Simple enough, right? Well...kinda yes but no... You see, to make Toothless' head and Hiccup's arms and sleeves, I needed to make a clipping mask of each element to show the shadows and highlights. And after creating a clipping mask, if I want to move and/or duplicate that layer somewhere else, I need to create a NEW layer. Otherwise, it will be ~invisible~. If you don't understand what I mean, it's ok, just look at Fig 10.

Figure 10: Unexpected nightmare, Week 8 (14/10/21)

I even created layers just to make a division to separate each section. A more efficient method probably exists, but as of now, this is what I'm capable of :,D... There were 12 frames in total, not too many. I used all except Frame 9, because for some reason, it just reFUSES to cooperate with the animation. So bye-bye Frame 9.

Figure 11: Drawn frames, Week 8 (14/10/21)

To ensure that the pacing between Toothless' head to Hiccup's hand is even, I counted the total number of 'right clicks' needed to reach and spaced it among 7 frames (first 5 frames is the hesitant part). I'm also very proud that I kept track of most of my adjustments to each frame, it helped when I needed to tweak some frames, knowing what can be changed or adjusted.

Figure 12: Timeline in Photoshop, Week 8 (14/10/21)

I used Frame Animation instead because I am more familiar with it. This set of timings, while not the smoothest, provides the most optimal pacing in my opinion; it isn't too fast, or too slow. And it loops!

Figure 13: Final Animation GIF of "Forbidden Friendship", Week 8 (14/10/21)

Reflection

If this entire activity isn't the epitome of an excuse for me to fangirl about the details of HTTYD, I don't know what is. From the very beginning to the end I really really enjoyed this task, even when I wasn't doing it this animation was still in the back of my head. I was almost sad I finished it :,D... The nuances with the layering and clipping mask were a little bothersome but I found myself overlooking all the small inconveniences when doing this animation. Smoothness wasn't my priority, but sticking as close to the original animation as possible was the motive when I planned out the frames (if only I planned out my life like that). 

Usually, I would want to do something with more complexity but with this exercise, I found that simplicity can bring more focus to the main message and subject. So even if this wasn't the most complex piece that I have done, I am still very happy I got to replicate this scene in this style. My appreciation for animation and the Forbidden Friendship scene grew even more after this.

It was a small dream come true, younger Jane would be so proud.