LESSON 2: ANIMATION BASICS

OBJECTIVES

In this lesson, you’ll learn to:

• animate your drawing

• work with symbols and the library
• work with layers, scenes, the timeline, and the controller
• understand animation techniques such as keyframes, onion skinning, tweening, and frame-by-
frame animation

CONTEXT

In the previous lesson, you created a simple drawing with a background (sun and grass), a character (an
ant), and some text. In this section you’ll learn the basic techniques of animating your drawing in Flash.
By the end of the lesson, you will have made the sun rays pulse, the ant run across the grass, and the
text change size and spin around.

EXERCISES

Preparing Your Drawing for Animation

Before you begin adding animation to your drawing, there are a few steps you can take to make the
animation process easier and better organized. In this section, you’ll learn to turn a drawing into a
symbol and add it to the Library, to create a new scene of your movie, and to separate the different
parts of the animation into layers.

Turn the Ant Into a Library Symbol

A symbol is an element that is catalogued in the Library of a Flash
movie. It can be used over and over again in your movie without
increasing the file size, because it always remains linked to the original
symbol. As you’ll see in Lesson 5, turning characters into symbols
allows you to make global changes to the character just by editing it
once in the Library.
1. If your file ant.fla is not already open, open it now.
2. Select the ant by clicking it with the Arrow tool. The ant should
already be a grouped element.
3. Choose Insert > Create Symbol. The Symbol Properties dialog box
will appear.
4. In the Name field, type “ant.”
5. Select the Behavior option Graphic. Click OK to finish.
6. Open the library by choosing Window > Library. Notice the
reference to your new ant symbol (Figure 2-1).

Figure 2-1
The ant drawing has been
added to the Library.

FLASH CURRICULUM 9
Create a New Scene
Think of a Flash scene just like a scene in a movie. Different scenes occur in different locations or at
different times, and may have different sets of characters. Flash scenes make it easier to organize
different sequences of your animation. While the animation you’re building is simple, you’ll step through
the process of creating a new scene so you can learn how to do it. Essentially, you’ll create a second
scene in your movie, which will contain the interactive animation you’re going to build.
1. Choose Insert > Scene. A new scene tab will appear on the upper right side of the window, next to
the Timeline (Figure 2-2). You can use these tabs to flip between the different scenes of your movie.
2. Double-click on the tab labeled “Scene 2.” This will launch the Scene Properties dialog box.
3. Name the scene “Animation,” then click OK. Notice that the scene 2 tab is now labelled
“Animation.”

Figure 2-2
A new scene tab appears to the right of the Timeline.

Organize the Drawing Into Layers

The animation that you’re building will have the following elements: the ant will move across the screen,
the sun will give out rays, and the text will change size. Each of the separate motions must occur on a
separate layer of the timeline for your scene.

1. Click on the Scene 1 tab to return to your original drawing.

2. Using the Arrow tool, click to select the line of grass. (Make sure the ant is not selected.) Choose
Edit > Copy.
3. Click on the Animation scene tab to switch scenes. The Stage should be blank.
4. Choose Edit > Paste in Place. This will paste the grass in the exact same position.
5. The layers area on the left of the Timeline (Figure 2-3) lists the single layer which your scene
currently contains. Double click on the words Layer 1 until the text is highlighted, allowing you to
enter a new name for this layer. Type in “Grass.” Press the Enter or Return key on your keyboard
to finish.
6. Now, make a second layer for the sun. Choose Insert > Layer. Double-click on the layer name, and
rename it “Sun.” Press Enter or Return.

Figure 2-3
The Layers area is located to the left of the Timeline.

7. Go back to your original drawing by clicking on the Scene 1 tab. Using the Arrow tool or the Lasso,
select all the parts of the sun drawing. Choose Edit > Copy. Click on the Animation tab to return the
Animation scene.

10 FLASH CURRICULUM
8. Before pasting the sun into the scene, make sure that the Sun layer is the Current layer. How can
you tell? The current layer will have a little pencil to the right of its name. If the pencil is not there,
simply click on the Sun layer to make it current.
9. Choose Edit > Paste in Place to paste the sun into its own layer.
10. Finally, repeat the process for the text. Create a new layer, name it “Text” (don’t forget to press
Enter!), copy the text from Scene 1, and paste it into the Text layer in the Animation scene.
By now, you should have a new scene called “Animation” in your Flash movie. The list of layers should
look like Figure 2-4. The Stage should contain grass, a sun, and some text (we’ll put the ant into the
scene a little later). When you’re ready, go ahead and save your work.

Figure 2-4
You should now have three different layers in your scene.

Learn More About Layers

You’ve just learned to create a new layer and name it. Before proceeding, you should learn a little more
about the layers of the Timeline. Refer to Figure 2-4 as you go through these exercises.
1. Notice the black circle to the left of the Text layer, which indicates that there is a selected object in
that layer.
2. Click on the grass image on the stage to select it. Another black circle should appear next to the
Grass layer.
3. The icons to the right of each layer name are important. Each layer has its own Layer Icon, indicating
the status of that layer. The pencil icon indicates which layer is the current layer; drawing and
pasting will usually affect the current layer. The hand icon indicates a normal layer; you can select,
edit, and move items in a normal layer.
4. Click on the layer icon next to the Sun layer. The Layer pop-up menu appears. This menu provides a
number of options for controlling and manipulating layers. From the Layer pop-up, select Hidden.
The sun should disappear from the Stage, and the Sun layer icon should change to an eye with a red
X through it.
5. Once again, click on the Sun layer icon. From the Layer pop-up, choose Current. The sun drawing
should reappear.
6. Layers can also be used to control the overlapping of objects. To illustrate this, use the Arrow tool
to select the text “Where’s the picnic?” on the Stage. Move the text so that it overlaps the
sun drawing.
7. In the Layers area, select the Text layer and drag it downward. An insertion line will appear as you
drag. When the insertion line is between the Sun and the Grass layers, let go. This action will move
the Text layer underneath the Sun layer. Look at the Stage and notice that the text is now hidden by
the sun.
8. Choose Edit > Undo to return the layers to their previous order. Choose Edit > Undo again to return
the text to its original position. Fortunately, Flash allows many levels of Undo. The number of levels
can be changed in the File > Preferences dialog. The more Undo levels you specify (the maximum is
200), the more memory Flash will require.

FLAS H CURRICULUM 11
UNDERSTANDING ANIMATION TECHNIQUES

Before you start animating your drawing, let’s review a few basic concepts of animation so that you’ll
understand the different tools Flash provides.

The essence of animation is an optical illusion. A succession of drawings is made, with slight changes
between each drawing. When these drawings are shown in rapid succession, the human brain
automatically perceives movement. A very simple form of animation is a flip-book, with a drawing on
each page. When you flip rapidly through the book, it gives the effect of motion. This is an animation.

Each of the individual drawings in an animation is called a frame. The Timeline in Flash shows the
sequence of frames in your animation.

Keyframes are an important element in creating Flash animations. Imagine a single animation sequence
as a short trip from your house to the grocery store. To give directions, you would probably mention the
important intersections. You might say: “Go to the first stop sign and take a right. Then, when you get to
Maple Street, go left.” And so on. Think of keyframes as the intersections, or turning points, of your
animation sequence.

The two styles of animation involve different uses for keyframes. In the first type of animation, called
frame-by-frame animation, every single frame is a keyframe. This method is often laborious, but it gives
you very fine control over your animation. The second type of animation is more like giving the street
directions we described above. This method, called tweening, uses a beginning keyframe and an end
keyframe, and relies on Flash to figure out the frames in between (this “in-betweening” is why the
process is called “tweening”). This second method is faster and requires less memory. For an
illustration of tweening, see Figure 2-5.

Figure 2-5
In this tweened animation of a bouncing ball, the top row shows the
different frames and keyframes of the animation. The middle row
shows how the animation might look. A keyframe has been made at
the points where the ball changes direction. The dotted lines show the
frames that would be created by tweening. The last row shows how
one segment of the animation would lookon the Flash Timeline.

12 FLASH CURRICULUM
In traditional animation techniques, animation was drawn on transparent sheets of cellulose acetate.
These sheets were stacked on top of each other (a technique called onion skinning). Each frame was
drawn as a reference to the previous frame. These drawn frames were then painted and filmed to create
the final animated sequence.

CREATING ANIMATIONS

You will start by making a frame-by-frame animation with your drawing of the sun. The goal is to make
the rays of the sun appear to pulse.

Creating a Frame-by-Frame Animation

1. Click on the Sun layer to make it the current layer (look for the pencil on the layer icon).
2. Each layer of your animation has a corresponding row in the Timeline. You should see a blue circle in
the first frame of the Sun layer timeline. This circle is in the first frame of your animation. Click on
the circle and drag all the way out to frame 20 on the Timeline. (The frame numbers are shown along
the top of the Timeline.) The first 20 frames should now be highlighted.
3. Choose Insert > Keyframe. Flash will insert a keyframe into each of the first 20 frames.
4. In the Timeline, try clicking on some of the frames you just created. The solid blue circle in the
Timeline frames indicates that there is an image in each of the keyframes. You’ll notice that Flash
has copied the sun into each frame. As you move from frame to frame, notice that the small
downward pointing arrow at the top of the Timeline moves depending on which frame you’ve clicked.
This arrow is the frame pointer, and you can drag it to change frames.
5. You’ll now begin the repetitive process of animating the sun frame by frame. In the Timeline, click on
the second frame of the Sun layer.
6. The Stage now displays the contents of the second frame of your animation. The sun drawing should
be highlighted. Shift-click on the body of the sun to deselect it. Only the rays of the sun should be
selected now.
7. Delete the sun rays using the Backspace or Delete key.
8. Click on the third frame. You’ll see that the rays are still there. Leave this frame as it is.
9. Click on the fourth frame. Repeat steps 5 and 6 to delete the sun rays.
10. Repeat this process for every other frame of the animation.

Play Your Animation

1. Choose Control > Loop Playback.
2. Choose Window > Controller. The Controller will appear, with buttons to control playback of
your movie.
3. Press the Play button (the single right arrow) on the Controller.
4. To stop the playback, press the square Stop button on the Controller.
Congratulations! You have just completed your first animation. Now let’s move on to some more
sophisticated animation techniques. In the next exercises, you’ll animate the ant using tweening.

Place a Symbol from the Library

It’s time to put the ant character back into the movie.
1. Create a new layer and name it “Ant.” (If you need a refresher on how to do this, refer to the
section above on organizing your drawing into layers.)
2. If there are too many layers to display on the Timeline, you can drag the screen divider underneath
the Timeline to give it more room.
3. Choose Window > Library. The Library will appear.
4. Make sure the Ant layer is current. Notice that the first frame of the Ant layer’s timeline has an open
blue circle. This indicates an empty keyframe (remember that a solid blue circle indicates a keyframe
with an image in it).

FLASH CURRICULUM 13
5. Click on the first frame in the Ant layer’s timeline.
6. Click on the ant drawing in the Library, and drag it onto the Stage. This will place the ant symbol into
your animation.
7. Close the library.
The next step is to animate the ant with tweening. Please note that you must use either a group or a
symbol for tweened animations. Thus, you can tween the ant, but you could not tween the sun, because
it’s not grouped.

Create an Animation Using Tweening

Now you’ll make the ant run across the screen from left to right.
1. Using the Arrow tool, move the ant all the way to the left edge of the Stage.
2. In the Ant timeline, click on frame 20.
3. Choose Insert > Keyframe. Notice that Flash copies the ant image from the previous keyframe on
that layer (in this case, frame 1).
4. Move the ant image to the far right edge of the Stage.
5. Click again on the first frame of the Ant timeline. This should show the ant at the left side of the
screen.
6. Double-click this frame in the timeline. This will bring up the Frame Properties dialog box.
7. Select the Tweening tab. Use the pop-up menu to select Motion tweening. Leave the other options
in their default state, and click OK to finish.
8. Notice how the timeline has now changed. The Ant layer has a red line with an arrow between the
two keyframes, indicating that the in-between frames have been tweened. The first keyframe now
has a red circle instead of a blue one; red indicates a tweened keyframe.
9. Using the Controller, press Play to view your animation. The ant should stroll across the screen, and
the sun rays should pulse.
10. If you’re happy with your animation so far, choose File > Save to save your work.

Create a Still Background Image

The ant looks lively, and the sun looks hot, but it’s a little odd that the grass disappears after the first
frame. In this exercise, you’ll extend the grass image through the whole animation. Since you don’t want
the ground to move or change, you won’t need another keyframe for this layer.
1. In the Grass layer of the Timeline, click on frame 20.
2. Choose Insert > Frame. This will copy the grass image to each frame of the animation.
3. Using the Controller, view your animation.

Use Onion Skinning

The last animation you’ll do is with the Text layer. In this exercise, you’ll use the onion skinning feature to
help create the steps in your animation. You’ll also be combining several of the techniques you’ve used
so far to create a more complex animation sequence.
Onion skinning is the process by which you can see the previous frame as if it were under a film of onion
skin. This techniques originated with traditional animators who used onion skin to see the drawings
underneath, copying some portions and changing others to create the illusion of some parts standing still
and others moving.
1. Click on the Text layer to make it current. Make sure no images are selected in the scene.
2. Click on frame 5 of the Text timeline. To make the Frame pop-up menu appear, right-click (PC) or
click and hold (Mac) on frame 5. The Frame pop-up provides some of the same functions as the
Insert menu, but it’s a quicker way to access frame control commands.
3. From the Frame pop-up menu, select Insert Keyframe.

14 FLASH CURR IC ULUM

4. Locate the Onion Skin button. In Figure 2-6, this is the button in the upper left just above the layer
names. Click the button to turn onion skinning on. Notice that you can now see transparent images
of the ant’s motion.

Figure 2-6
The onion skinning button is in the upper left, just above
the Ant layer.

5. Notice that two new markers appear at the top of the Timeline. These determine how many frames
are shown via onion skinning. Slide the left Onion Skin marker backwards to the first frame to show
the beginning position of the text.
6. Frame 5 should still be selected. Using the Arrow tool, select the “Where’s the picnic?” text and
move it down and to the right about one inch.
7. Choose Modify > Transform > Scale and Rotate. Enter 60 into the scale percentage box. Click OK
to finish.
8. Your screen should now look something like Figure 2-7. To make a gradual transition between the
large and the small text, double-click on frame 1 of the Text layer. Click the Tweening tab, select
Motion tweening, and click OK to finish.

Figure 2-7
With onion skinning turned on, you can see the relative scale and
position of the text.

9. Next, you’ll make the smaller text spin around. Click on frame 15 in the Text timeline. Using the
Frame pop-up menu, choose Insert Keyframe.
10. Double-click on frame 5 to bring up the Frame Properties dialog box. Select the Tweening tab.
11. From the Tweening pop-up menu, select Motion. Further options will now appear in the dialog box.
12. In the Rotate pop-up menu, select Clockwise. In the box just to right, type in “1” to make the
rotation occur one time.
13. Click OK to finish.
14. Finally, you should extend a still frame of the text to the end of the animation. Click on frame 20 of
the Text layer timeline. Using the Frame pop-up menu, choose Insert Frame. You don’t need a new
keyframe here, since nothing will change.

FLAS H CURRICULUM 15
15. Now, play your animation with the Controller. You can also view the animation in slow motion by
sliding the Frame pointer (at the top of the timeline) slowly through the frames. You may first want to
turn Onion Skinning off by clicking the Onion Skin button.
16. Now is a good time to save your work.

Modify a Tweened Animation

One advantage of tweening is that it makes changing your animation easy. You need only modify the
keyframes, and Flash will change the in-between frames automatically. First, you’ll make the ant appear
and disappear on the edges of the Stage.
1. Select the Ant layer in the Timeline. Click on frame 1.
2. Using the Arrow tool, move the ant further to the left, so that only the front part of its body remains
on the Stage (Figure 2-8).
3. Click on the last frame (frame 20) of the Ant timeline.
4. Move the ant off to the right, so that only its derriere remains on the Stage.
5. Play the movie with the Controller to view your changes. Notice that Flash automatically updates the
in-between frames to reflect the changes you’ve made to the keyframes.
Next, you’ll make the ant move across the Stage more quickly, leaving a few frames where it does not
appear in the scene.
1. Holding down the Control (Window) or Command (Macintosh) keys, select the last frame in the Ant
timeline. Still holding the Control or Command key down, drag the frame leftward to frame 10, then
let go. This will shorten the ant motion sequence by ten frames.
2. Using the controller, play your animation. Notice that the motion remains the same, except that it
looks faster. Also notice that there are now about 10 frames in which the ant does not appear in the
scene at all.
3. Save your file.

Figure 2-8
Move the ant almost off the Stage.

MORE EXERCISES TO SHARPEN YOUR SKILLS

• Save a copy of your movie ant.fla as ant2.fla. Use this new copy while you’re doing these
exercises.
• Try changing the motion of the ant and the text in different ways. Use the Tweening controls in
the Frame Properties dialog box to experiment with different settings.
• Add a new layer to your drawing. Create some more background elements. Practice creating
still background frames that extend throughout the animation.
• Copy the sun to a new layer, and try to create a tweened animation with it. You’ll find out you
can’t do this until you turn the sun drawing into a grouped element. Make the sun rise and set.
• Experiment with moving frames around on the Timeline using the Copy, Cut, and Paste
commands.
• Try changing the length of different animation sequences.

16 FLASH CURRICULUM