READING & WRITING:
Chapter 9 – Animate! -Cont.
There are many different tips and techniques that can be used to make animation easier.
Even though 2D animation may have the illusion of having depth, the movement of it is always flat. This means you want to keep in mind what direction the movement is in the two-dimensional space of the screen. There are four categories of directional movement: horizontal, vertical, diagonal, and circular movement, and all four of them can be used to influence the emotional experience of the animation. When I was making my Moo Deng User Interface (UI), most of the motion coming from the left side of the screen for cohesion, except when Moo Deng rages. Then she has no need for cohesion, for she is chaos incarnate, so she flips from left to right.
Another tip to make animating easier is to create all your key poses first when animating. This will let you go back in and create the frames in between to make sure you hit all the movements you want to, and that it will look smooth in the final product. When animating the hose, I used the pen tool in After Effects and applied a trim path to animate it. I was able to set my key poses, and the program did the rest. I used this same method to animate the water coming out of the house and duplicated the animated line several times to create multiple streams. Since the hose was a line, the nozzle of the house was a separate shape layer that had to be animated separately. I was able to do key poses for the nozzle first but had to set the frames in between the key frames myself to make sure the nozzle remained attached to the end of the hose as it moved.
Adding blur to the movement will help make the movement more believable or put emphasis on certain movements. A camera lens has a limited ability to focus on objects at different focal lengths. This causes some movement to come off as blurry when recorded. Adding a blur to the movement of an animation simulates the blur of a real camera, which adds realism to the movement. While my Moo Deng is meant to be cartoony, I still applied motion blur to have the movement still feel believable.
Blazer, L. (2016). Chapter 9: Animate. In Animated Storytelling: Simple Steps for Creating Animation and Motion Graphics (pp. 129–139). essay, Peachpit Press.
RESEARCH TO INFORM:
Animation can be used to make a UI more engaging and intuitive for the user to navigate. Examples of user interfaces that effectively use animation are:
The WTFWeather App, as the name suggests, is a weather app that will notify you of the weather in a crass but funny way. While using a normal weather app will give you the weather all the same, this app not only uses a unique sort of humor to inform the user, but it also shows a nice animation that reflects whatever weather you have in your area. While I have seen other weather applications that use animation to reflect the weather in your area, the humor that WTFWeather App uses sets it apart from other weather applications.
BitLife is a life simulation game that uses animations in the navigation of the game. You make different decisions that may impact your life. These decisions range in importance from what college you will apply to or whether you will retaliate on a bully with a roundhouse kick. While the animations used are simple, they still make the game more engaging.
Roku sticks are a streaming device that turns any TV into a smart TV with all the current streaming applications. The Roku interface gives the user access to all the available streaming services, including Roku TV which is a Roku version of cable television programming. Animation is used by Roku in the selection of programs, the user can also choose to have an animated background for their interface. If Roku is left alone long enough, it will display an animation as a screensaver. The user can choose the screensaver that is used as well.
Dragon Age: The Veilguard is a game with very interesting UI. The character creator uses an animation of shuffling cards to show the different options a player has for elements of the story such as the faction of the user’s character and gameplay difficulty. There are also pop ups with animations showing the player how to navigate the game. The combat UI allows the player to pause the game and choose a special move or direct a companion character to use a special move or just focus on one specific enemy. It will even give visual cues as to specific abilities that will pair well as a combination, making it easier for the player to hit harder. Veilguard effectively uses animation to help its users navigate its UI. The link leads to a recording of myself playing through the introduction to show off the character creator and the UI for walking around. The character creator is about 1:30 to 12:03 but you can fast forward through to see everything, and then the gameplay UI is about 16:32 to the end. I recorded the whole introduction instead of just the UI because the animation of the game itself is great. Be warned that if you watch the whole video, there is a violent bar fight scene because 5’0 elves be feisty (The whole thing is about 25 minutes).
Typetesting.com is a website that not only will test your typing skills but can teach you proper typing skills as well. The website uses animation to teach the user about how to type, but to also simulate a typewriter typing when it does test you. This shows that animation can be used to not only show the user how to navigate an interface but can also be used as part of an interface to teach a user new skills, like typing.
Club Penguin Legacy is a copy of the multiplayer online game called Club Penguin that ran from about 2005 to 2007. As a kid I loved this game, so I was ecstatic to find someone had made a copy of it! This is a game that heavily relies on animation to show the player not only how to navigate, but the whole online world is animated as well. I think this game is a great example of how animation can be used effectively in UI interface.
CREATE:
For my UI Animation, I decided to create a Moo Deng themed mini-game interface. In it you may let her bite the water from a hose, throw her fruit to eat, or let her rage. I created three buttons labeled with each action to cause these animations.
As mentioned in the reading section, the hose and water were created using a trim path to animate a line. The nozzle had to be animated by hand to keep it in the correct position as the hose moved across the screen.
The frames for Moo Deng were created in a separate program called Clip Studio Paint (CSP), which is my preferred program for illustrating. The images were exported from CSP as PNG to be brought into After Effects (AE). The pieces of fruit were also created in CSP and exported in the same way.
Moo Deng’s rage animation was created as a composition in AE so it can be easily placed and moved as the timing of the whole piece was figured out. Creating it as a composition also gave me an easy place to go back and edit the frames as needed.
For the background ambient sound, I wanted playful music that reflected Moo Deng. I used sound effects that would make sense for the actions such as the sound of the hose water and the fruit being tossed, but also that add humor to the animation. I sampled audio of Bowen Yang from his Moo Deng skit on Saturday Night Live for when she is biting the water from the hose.
When it gets to the rage animation, I wanted everything to change to try and exaggerate the rage without a complex animation. I have Moo Deng change directions, and her whole body turns red. The background turns to a preset effect called Anime Radial Lines. This creates fast paced black lines moving on a white background. The music also changes to death metal. All these elements changed help to exaggerate Moo Deng’s wrath. Since it is still meant to be a loop, at the end she still turns back to normal. This is also just normal Moo Deng behavior.
Overall, I think that I was able to create an engaging UI animation demo using animation and sound that is also easy to navigate.
Home 
Leave a comment