Bouncing Head

Adobe Flash

This project's goal was to animate a stylized design using a modified, simple puppet style of layering and animation.
This animation also used a new exporting technique for clean, small file size, quality looped .Gifs for web,
using various other programs such as Adobe Photoshop, Swivel, and After Effects.

Step 1 - Blueprint

A prior design was drawn and then refined and redrawn in Adobe Flash. The start of the Bouncing Head motion graphic begins with deciding the pieces and parts that makeup the overall puppet.

The image is an outline of the various parts and structure.

Step 2 - Graphic Layer Organizing

All the individual pieces are made into graphics - or Flash symbols for animation. They're then named correctly and put into corresponding layers for the desired look.
For this animation, each Graphic was placed into another graphic, for easy tweening with grouped parts. For example, the Pupils are located in the Eyes, which are located in the Head, then located in the overall Icon.

To the right is a screenshot of the document library and few layers that hold the graphics.
The library shows most of the Graphics in this project.

Step 3 - Animation and timing

Using the new graphics, and in this case Movie Clips (or Flash symbols for complex animation, coding, and effects) animations are created using various tweens and manual animation, as seen in the eye movements. This animation was also made to loop back to the beginning seamlessly.

The picture shows a visual representation of the parts being put together in their various layers and hierarchy through Graphics and Movie Clips. It's important to remember where each symbol is placed!

Step 4 - Final Rendering

Using a rendering technique involving image sequencing, movie files through a software called Swivel, and After Effects, the final animation is imported to Photoshop and saved into a compacted .Gif format for viewing on the web. File size, color correction, and proper looping is important, as a large file may not upload, color can be warped when rendered, and looping or timing may be off when exported into other programs.

The final image is a clean, looping .Gif, with the original Flash file being a vectored image for any size scaling.