Introduction to Flash Animation Techniques
Lloyd Rieber

This short tutorial will introduce you to some Flash animation techniques: Frame-by-Frame animation, guided paths, masks, and shape tweening.

 

Before we begin

 

Before we begin, take the time to review these key Flash animation ideas and skills.

Key changes to an animation must occur in a keyframe. Examples of key changes are starting and ending points of an object's movement on the screen; places on the screen where an object's movement changes; places where an object's size changes; where rotations begin, etc.

Another term you will hear a lot is scrubbing. It's best to understand this term by imagining drawing a paper-based animation using a tablet of about 10 sheets of paper, say of a person running. On each page, the person would be drawn just a tad differently, such as showing one leg moving slightly ahead of the other. Scrubbing is the act of quickly flipping through the pages in rapid succession to create the illusion of movement. In Flash, scrubbing is done by clicking and dragging on a small red rectangle just above the timeline.

 

IMPORTANT NOTE!

The following movies are some of my first attempts at creating tool demos. They're pretty rough. Also, they were produced for 1280X1024 screen size in order to show the best clarity. I realize that this may be too large for some monitors. Let me know if this poses a big problem for you.

These movies are only available in the Windows Media Player format. My apologies to Mac users!

 

Demo 1: Frame-by-Frame animation
2:48

The first movie demonstrates how to animate the old-fashioned way -- frame by frame. This kind of animation is necessary for all sorts of movements, such as a person walking, a bird flying, and a plant growing.

As you watch the movie, notice how I use the drawing techniques covered in the earlier movies. Watch closely as I wait to get the little curve and corner symbols before I make a modification to the stick man figure to make him dance.

 

Demo 2: Motion guides
3:09

This movie shows how to create a motion guide to have an object move on curve lines or any path you draw. It also shows how to have the object orient itself to the path so that it turns to always face forward no matter what direction it is moving.

 

Demo 3: Masks
3:35

Masks allow you create some amazing effects, as this demonstration shows -- a spotlight of a city skyline.

 

Demo 4: Enhancing the mask effect
2:23

This movie show how to enhance the effect of the last movie by creating a copy of the city skyline and dimming it. It really helps to create the illusion of the spotlight.

 

Demo 5: Shape tweening
1:40

Also known as morphing, shape tweening must be one of the coolest animation effects possible in Flash! It's also one of the simplest.

Some rules to remember when it comes to shape tweening: no symbols or groups allowed!

Caution: Shape tweens can take huge amounts of memory (basically because none of the memory saving features of Flash, such as symbols, can be used).