Todd RoethTodd Roeth is an Assistant Professor, Graphic Design. School of Fine Art.
©Justin M. Bowen
05: Animation Techniques

Flash as an Animation Tool

Flash can be used to create a visceral experience when used effectively. Mature and effective design will have a clear, but not overstated character to the work.

The Challenge in Flash (and all visual communication), is how to effectively convey both the Message and the Meaning. Designers need invent a way to communicate the idea, as well as a proper tone and/or emotion to the message. Without overstating your movie, how do you emotionally move someone?

Flash can establish TEMPO, MOVEMENT, TONE, AND TYPE through animation.

Examples of Flash Slideshows and Animation that establish a mood and tone:

Getty images
www.sofake.com
www.rawpower.tv
www.eminem.com
www.bullseyeart.com

Animation & Images: Making Slideshows

One approach to animation in Flash is to create Slideshows. Like Vector Artwork – and some the examples above – Flash can animate bitmapped images.

› Stage Size and Frame Rate
› Movie, stage size, frame rate.
› Find a site you like, view source to see movie size, EMBED SRC=and see height and width

Vector Drawing In and Out of Flash

Flash is, among many things, a drawing tool. But not all artwork has to created natively.

Using Illustrator

Illustrator is a more robust tool for drawing artwork. Artists often render their artwork in Illustrator.

› There are different options when exporting files into Flash. In some situations one can copy and paste simple objects into Flash.
Read and Watch Video: Adobe Tips & Tricks for Exporting .swf files from Illustrator

› Show import options into Flash

In-Class:

SlideShow #1: build a 3 image (3 layer) movie and fade in and out the images with alpha tween

SlideShow #2: build a 3 image (3 layer) movie and fade in and out the images with a fader box on top of the images.

Be sure to experiment with keyframing, tweening, and easing.

Shape Tweens

Like motion tweening, Flash can automate transitions between vector shapes in between keyframes. Shape tweening can also rely on hints to control the way or order in which shapes change.

Guide Layers

Tweening symbols doesn’t have to be applied in a straight line between keyframes. By using a ‘Guide Layer’ designers can draw a line in any shape on it. By placing a symbol on a ‘Guided Layer’ below it, the symbol will follow the line drawn, much like a rail car moves on train tracks.

Masking

Masking is a technique in flash that can be applied to vector and bitmap artwork. By specifying a particular layer order and layer properties, symbols on a ‘Masked’ layer can be revealed or partially hidden by ‘Mask’ layer above it.

Movie Clips: Nested Clips

As we know, Flash uses symbols, organized in the Library to control and animate within the Flash movie file.

Each symbol within Flash has it’s own timeline. (Button symbols have a unique timeline. More on buttons later.) When objects are converted to symbol, Graphic Symbols and Movie Clip Symbols can have an additional timeline inside of the Symbol. Movie Clip Symbols use animation that runs independently of the main timeline.

In our first animation exercise, we used the analogy of mailing a box in the Post across the country. Now imagine a nested movie clip as a package that has a wind-up toy or a music box inside of the package: as the box moves across the country, the toy inside the box also moves (spins, cranks, plays…) while moving within the package.

Example: A movie clip symbol can have an animation of a man with his legs moving as if walking in place, on a treadmill. Once the movie clip of the moving man is placed on the main timeline, it can be tweened across the stage to give the appearance of a figure walking.

In-Class

In Class: Create an animation with a nested movie clip.

Last Updated 9 August 2007 by Todd Roeth

Commenting is closed for this article.

← 04: Animation Basics | 08: Interactivity in Flash →


← Return to Main Page...