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

Basic Frame by frame animation:

Both the interface and metaphor for working within Flash takes place in two hemispheres. The Timeline and the Stage. In Flash, users create in both Time (timeline; animation) and Space (stage; graphic design).

In-Class:
Pair up and teach each other how to make a shape move and change color across the screen.

A) Key framed animation spelling out student name:

By experimenting with Flash’s type tool on the stage and on the timeline above, basic typewriter effects can be achieved.

B) Make a circle layer, draw a circle and use frames to animate.

By experimenting with Flash’s shape tools and the timeline above, basic animations can be achieved.

Using Tweens to Animate in Flash

Analogy: Like shipping any object through the Postal Service, your item needs an envelope or a box to be shipped in.

Suppose a package of carrots is put in a container to ship. The container is called a symbol in Flash. The Symbol is the container and its contents can be changed within the Symbol.

1) All objects that are to be animated need to be on their own layer.
2) All objects that are to be animated then need to be Converted to a Symbol (F8)
3) All symbols are stored in Flash’s Library, and can be used over and over. Each time a symbol is placed from the Library to the stage, it is called an Instance, and can be modified independently from other instances of the same symbol.

Flash's Library

Tweening

Analogy: the USPS and sending a package from Ventura to NYC.

Any object(s) on the stage can be converted into a Symbol. When the object(s) is converted into a symbol it is automatically added to the Library. This then enables the object(s), which is now a symbol, to then be Tweened.

To make any object or group of objects a symbol: Convert to Symbol (F8)

Correct Tween
A Correct Tween in Flash

Incorrect Tween
An Incorrect Tween in Flash

Untweened Group of Keyframes
An UnTweened Set of Keyframes in Flash

Rules to consider when doing Motion Tweening:
› Every object must be converted into a symbol
› Every symbol must be on a separate layer
› When tweening between keyframes, both keyframes must have same symbol.

Tweening Options:

Easing:
Easing In starts slow and ends fast (denoted in negative numbers).
Easing Out starts fast and ends slow (denoted in positive numbers).

Rotate:
Symbols can be rotated Clockwise and Counter Clockwise. Times specifies how many times the symbol will be rotated.

Color Options: (Alpha, Tint, Brightness)
Color options can be accessed only when a symbol is selected while on its specific keyframe.
› Alpha: Changes the opacity of a symbol
› Tint: Changes the color of a symbol
› Brightness: Enables a symbol to absorb more white or black

Flash's Tweening Options located in the Properties palette.

In-Class:
Explore Tweening by illustrating and animating the “Postal Service” metaphor.

Publishing Movies in Flash

.fla vs. .swf

There are two distinct file types that Flash makes. The first, .fla is the editable flash file. It keeps all layers, tweens, keyframes, Library assets, etc. The second, .swf is a compressed, read-only, web-ready file.

To publish a movie (make a .swf file) in Flash:
After saving an .fla version, press [Option + Return] at any time to Publish a .swf file with the same name to the same folder.

Last Updated 9 August 2007 by Todd Roeth

Commenting is closed for this article.

← 12: Additional Resources | 05: Animation Techniques →


← Return to Main Page...