Introduction to Flash Animation
Lloyd Rieber

This short tutorial will introduce you to the basics of Flash animation. The first four demonstrations will show you how to construct the following animation:

Of course, you should use your name instead!

Before we begin

Before we begin, take the time to learn 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.

Tweening is the process of generating all of the frame between the keyframes. This term comes from the history of animation, such as the creation of the classic Walt Disney cartoons. The master (high paid) animators would draw the keyframes and the "tweeners" (lower paid) would draw the rest of the action. Fortunately, Flash has built-in tools to do the tweening for us.

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.

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!

The first movie demonstrates how to have your first name animate from the top left corner of the screen to the middle area. As you watch the movie, notice that as soon as the first name is typed, the first cell on the timeline automatically turns into a keyframe, as indicated by the black, filled in dot (a blank keyframe is denoted by a hollow dot).

Demo 2: Scaling an Object
1:01

The next movie shows how to scale an object - making it bigger or smaller over time. This step nicely shows the benefits of vector graphics. A vector graphic, unlike a bitmap graphic, stores the graphic via a very small mathematical expression with scale being just one parameter. Instead of sending a large bulky bitmap graphic through the Internet, Flash simply sends this tiny mathematical expression and asks the computer on the receiving end to construct it. As a result, scaling, rotating, and other transformations can be done with very little needed memory, thus keeping file sizes extremely small. (It's always best to draw your graphics from within Flash whenever possible to ensure minimum file sizes.)

In this example, notice that the scaling is done at the second keyframe because the goal is to have the object grow as it animates. This example also demonstrates a very handy Flash tip: right-clicking on an object to show a context-sensitive pop-up menu. Memorizing this little trick will greatly facilitate your Flash work.

Notice two important things here. First, notice how the property inspector at the bottom changes based on the context. That is, its options and features will always be relevant to the object or screen area clicked. (Once you learn to accept this, working with Flash becomes much easier!) The second thing to notice is that the kind of rotation used here (spinning an object 1 or more times in succession) is added to the first keyframe. Since you'll undoubtedly want to use this kind of rotation a great deal in your Flash work, this is a useful thing to memorize. There is another kind of rotation that is part of the transform panel, and is used when you want to rotate an object less than one complete spin.

The next movie repeats the process above, but for your last name. This movie highlights how to add and use layers. Think of layers as transparent pages of plastic - although you can draw on each separately, when you put one down on the other, you can see both sets of graphics (though the objects on the topmost layer may cover up those on the bottom layer). Working with multiple layers is an essential Flash skill.

In this movie, notice how important it is to make sure you are working in the right layer at the right time. Careful attention to the timeline is essential. You need to make sure that the right frame in the right layer is highlighted before beginning one of the steps.

If you want to animate objects other than text, you will need to learn how to create symbols. All graphics must first be converted to a symbol before they can be used as part of animations. That is the topic of the next demonstration.

One of the most fundamental concepts in Flash is the symbol. Basically, a symbol is any graphic that is stored in the library. One turned into a symbol, copies of the symbol, called an instance of the symbol, are used in the movie. The advantage of this approach is that the graphic is only really stored one time in the computer's memory as the symbol. You can use an indefinite number of instances of the symbol, with each using extremely little memory. In this way, you can have a complex animation, yet keep the file size very small. You can also make some changes to each of the instances, such as its color (tint), transparency (alpha), scale, rotation, to name a few.

This movie shows how to create the following animation using just one bottle graphic that I drew beforehand:

I couldn't help but include one more animation using the above skills. I show how to make a fairly provocative movie using the submarine graphic I made in the drawing lesson. Are you approaching the submarine, or is the submarine approaching you? Either way, let's hope the mission is friendly!