Animated Storytelling Chapter Summary

The following is a summary of chapter nine of Liz Blazer’s book, Animated Storytelling:

Animate

Get started

• Start easy, begin by animating the easy-to-animate scenes, doing so will get you moving and build confidence.
• Break up tough scenes into smaller, easier to manage pieces.
• Become a “brutal editor,” before animating any sequence, make sure that it is absolutely necessary to the plot.

Tech considerations

• Save versions of your work and save often
• use simple file names and a logical folder structure
• back up your work every day

 Strategic Movement

Key poses (more elaborate sketches) ensure that all of your planned movement is possible: that you hit your choreography marks, and that your assets conform to the world you’ve built. Make sure you include all elements (e.g., backgrounds, props and logos).

 Anticipation and Follow Through (before and after movements) help illustrate the “physics of gravity on weight and movement…and are responsible for making your animation feel natural” (Blazer, 2015).

Compose Directional Movement. The track of on-screen movement is flat. All animated movement falls into four categories: horizontal, vertical, diagonal, and circular. Directionally consistent movement (e.g., all horizontal) will feel calmer. Adding a contrasting movement can clue a “big story moment.”

 Chart the path of your film before animating. Do this by printing your storyboards and drawing simple lines to show the path that your objects are following.

Decentralize and Mix It Up

• Get out of the center. Check your storyboards and make sure to decentralize your subject because it will keep shots active and exciting.
• Mix up shot lengths (e.g., close-up & long shots). Eyes like a variety of focal lengths to stay engaged and follow the visual clues presented in a frame. Shot length variety keeps sequences interesting and communicates the “big ideas” in your story.

 Consider Adding a Blur

Animating on a computer results in everything be clean, sharp, and in focus. Adding a blur effect (e.g., grunge or vignette) can add “realistic” depth to a shot or de-emphasize areas of your composition that aren’t important to the emotion of the scene.

Sound It Out

As you adjust your story don’t forget to tweak your sound accordingly, so it fits your story.

• Be flexible with your soundtrack.
• Hit your sound marks—animate to your soundtrack (think choreography).
• Mute your soundtrack. It’s important to turn off your soundtrack, so you can evaluate the performance of your animation and ensure that you’re not relying “too heavily” on your soundtrack.

---

References

Blazer, L. (2015). Animate! Animated storytelling: Simple steps for creating animation & motion graphics (1st ed., pp. 129-139) Peachpit Press.

---

Research to Inform

1. I like the smooth movement of this submit button, how it transforms into a progress bar and the color transition.

Link: https://uimovement.com/ui/2764/submit-button/

2. I appreciate the simplicity of this Reminder App animation, the selection transitions and the rounded-rectangles. As a forgetful person, the concept is also appealing.

Link: https://uimovement.com/ui/6707/reminder-app/

3. I like the Crypto concepts clean layout, use of green and red, and smooth transitions.

Link: https://vimeo.com/296631074

4. I appreciate how the Momento app uses drop shadows, and how it highlights a selected item by fading everything else.

Link: https://www.behance.net/gallery/55153121/Momento-app

5. CosmoZoo is a fun concept. I like theme use of purple, and if you scroll down, the vibrating rounded-rectangle time reminder really grabs the eye.

Link: https://www.behance.net/gallery/66612863/CosmoZoo-App-for-pets

Create

For the project, I had no idea where to begin; the tasking seemed daunting because of the possibilities it afforded. To get myself going, I decided to create something small first. I created the animated GIF below of a click-and-hold effect on an app icon. It was created by raising the icon on the z-index.

I was fairly pleased with how my first attempt went, so I decided to build on the concept by adding a progress circle around my Marky Witt icon. My load animation was created in After Effects using ‘trim paths’ and ‘dashes’. For the animation to loop, I time-reversed the keyframes. I created two versions: one an animated GIF and the other a quick video.

 

For my final animation for this module, I, once again, used my Marky Witt logo this time as a text box animation. The “Ask Marky Witt” button is clicked, fades, shrinks behind the logo and pops out as a test box. At the end, the motion reverses back to the original state.