Animation Basics - Frame by Frame

A Blank Keyframe
blank keyframe

Frame Drawing

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 MX.

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).

There are hundreds of placeholder frames (protoframes) in that one layer. They appear in the Timeline as a series of little boxes. Empty frames - aka protoframes 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. Insert a keyframe 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 undo 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?

  • .Keyframes added with content in frame are solid 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 undo 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.

  1. Start a new movie. Give your layer a name. Save and name the movie.

  2. Go View/Grid/Show Grid and set the Snap modifier snap tool to ON to help you position your graphics.

  3. . no line color Select frame 1 in the Timeline, activate the Oval tool and set the Line color to none.

  4. Hold down the shift key as you draw an Oval near the top of your Stage.
    • This creates a perfectly round circle.

  5. 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.

  6. Let's use the Timeline's *Preview in Context* mode. This will help us to see where the ball is in each frame:
    • Preview in context 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.

  7. Select Frame 2 in the Timeline and press F6 to insert a Keyframe.
    • Second keyframe added
      This duplicates your ball in the new Frame.

  8. Select the ball in Frame 2 and move it to the bottom of the Stage.

  9. Select Frame 3 in the Timeline and press F6 to insert a Keyframe.

  10. 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.
    arrange your frames

  11. Position your cursor in Frame 1 and press the Enter key to test your movie. 

  12. 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.

  13. Click on each of your new frames to select them and press F6 to insert Keyframes.

  14. Reposition the ball a little farther downward in each Keyframe.
    Reposition the balls in your frames

  15. Test your movie by going Control/Test Movie. 

  16. You can add a few more Keyframes to make the movie smoother.
    Preview frames in context

  17. 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.
    Bouncy bouncy

    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

Things to remember:

  • 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.)
    frames are inserted

    • 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 keyframe's content.
    Flash MX treats in-between frames as
    individual frames for purposes of selection.
    timeline frames