Animation Basics - Frame by Frame
|A Blank Keyframe
When you first open a new movie, you will notice that it has one layer.
The first frame will be white with a black outline and a hollow bullet.
The image below designates a Blank Keyframe as shown in Flash
|A Filled Keyframe
As soon as we draw or place an object on the stage, the white background
turns grey and a black bullet appears to show that there is content
in that frame. This is called a Keyframe and is an integral part
of animation. Without Keyframes, we can't do much. However, keep in
mind that keyframes increase file size, so only place keyframes
when necessary (i.e., when the content of the movie changes).
are hundreds of placeholder frames (protoframes) in that one
layer. They appear in the Timeline as a series of little boxes. They remain placeholders until you insert live frames.
You must create a Keyframe in order to place objects into the frame.
We'll discuss how to do this as we go along in this lesson. Once a Keyframe
is inserted, the frames that follow it will continue to show the same
content until another Keyframe is inserted.
Try this exercise...
- First save your movie and give it a name.
- Click on protoframe 10 (ON the frame in the timeline
- you'll know you're in the right place when the frame marker below
the number turns black, we'll just call them frames from now
on :) and press the F6 key, OR right click & choose
Insert Keyframe, OR go Insert/Keyframe on the
menu to insert a Keyframe.
- Notice that frames 1 and 10 now have a black outline with a hollow
bullet in them and that all the in-between frames are white. This tells you that there is nothing in your movie or on that
layer. Since the first keyframe was blank, the new keyframe is actually
another Blank Keyframe and the frames in between it and frame 1 are
empty. Boring movie eh? LOL
Frame 9 has a hollow rectangle in it. This indicates that it is the
last frame in a range of frames following Keyframe 1. The frames in
this range are called "in-between frames".
Click the Undo button now.
Ok, now let's put something into Frame 1.
- Draw an oval, any color, any size. See how the Keyframe indicator
in Frame 1 turned into a solid bullet?
- . Now click on frame 10 and press the F6 key, OR
right click & choose Insert Keyframe, OR go Insert/Keyframe
on the menu to insert a Keyframe. Notice how frames 1 and 10 now have
solid bullets in them and that all the in-between frames have turned
gray. If you click on any of them you will see on stage the oval that
you drew in frame 1.
Click the Undo button as many times as necessary to
get back to the Blank Keyframe in frame 1 now.
Frame by Frame Animation
Although this method can result in VERY large files if you get carried
away, the simplest way to create an animation is to use straight Keyframes.
This can be done on a single layer. Let's try it. We'll make a bouncing
ball in this exercise.
- Start a new movie. Give your layer a name. Save and name the movie.
- Go View/Grid/Show Grid and set the Snap modifier to ON to help you position
- . Select frame 1 in the Timeline, activate the Oval tool and set
the Line color to none.
- Hold down the shift key as you draw an Oval near the top of your
- This creates a perfectly round circle.
- Since we are going to be using the ball on the stage in more than
one keyframe, we need to convert it to a symbol so let's do that now:
With the ball selected, press F8 or go Insert/Convert
to symbol and give your ball symbol a name. Click OK.
- Let's use the Timeline's *Preview in Context* mode. This will help
us to see where the ball is in each frame:
- Click the Frame view pop up menu button over on the
right side of the Timeline and choose Preview in context.
This feature is used to show your objects in the Timeline in relation
to where they are on the stage.
- Select Frame 2 in the Timeline and press F6 to insert a Keyframe.
This duplicates your ball in the new Frame.
- Select the ball in Frame 2 and move it to the bottom of the Stage.
- Select Frame 3 in the Timeline and press F6 to insert a Keyframe.
- Select the ball in Frame 3 and move it up so that it's about half
way between where the ball appears in Frame 1 and Frame 2.
- Position your cursor in Frame 1 and press the Enter key to test
- Let's add a few frames between our Keyframes (aka "in-between frames")
to slow it down a little:
Place your cursor in Frame 1 in the Timeline and press F5 twice. This
inserts two frames between the first two Keyframes.
You now have 5 live frames.
- Click on each of your new frames to select them and press F6
to insert Keyframes.
- Reposition the ball a little farther downward in each Keyframe.
- Test your movie by going Control/Test Movie.
- You can add a few more Keyframes to make the movie smoother.
- Try this: Reposition your ball to different parts of the stage in
some of the Keyframes. You can create a ball bouncing madly all over
the stage with this technique.
Whew! Just thought of something.. It's a good thing we converted
our ball into a symbol isn't it? Imagine how large this file could
get using all these keyframes AND multiple objects. As it is, the
file size won't be too bad because we're using multiple instances
of one symbol.
IMPORTANT NOTE: Remember that each Keyframe you add to your
movie increases file size, so you won't want to use this technique to
create large animations.
Inserting Keyframes, Frames, Blank Keyframes
- F6 inserts a Keyframe. This Keyframe will contain the same
data as the frames before it - if the Keyframe before it was empty,
this one will be empty also.
- Shift F6 deletes a selected Keyframe.
- F5 inserts Frames. When Frames are inserted between Keyframes
they will contain the same information that the Keyframe preceding
them contains. (Tip: If you select
10 frames and then press F5, Flash will insert 10 Frames.)
- Shift F5 deletes selected Frames. (Tip: You can select more than one frame at
a time before pressing Shift F5.)
- F7 inserts Blank Keyframes in a selected Frame.These can
be used to cause whatever preceded them to "disappear" when your movie
reaches that Frame. They come in handy when you want to stop one animation
and then start another on the same layer. (Tip: Remember, keyframes increase files size
- even empty ones. If you need more than one blank frame use a blank
keyframe followed by a range of plain old frames using the F5 key
rather than a series of blank keyframes.)
- Shift F6 deletes selected Blank Keyframes.
Identifying & Selecting Frames
The Flash MX Timeline provides a visual distinction between a
keyframe and any subsequent in-between frames that display that
|Flash MX treats in-between frames as
individual frames for purposes of selection.