Using frames and keyframes to create a movie with animation

When you open a new Flash document to begin drawing or importing into, it has one layer and one frame. If you look at the timeline, you'll note that that one frame has a hollow circle in it and the frame has a white background. This indicates that the frame is a keyframe and has no graphic content associated with it on stage. Now draw a shape on stage and you'll see that the frame changes to having a solid black circle with a gray background, which indicates that it is a keyframe which has graphic content associated with it on stage.

Extending the timeline

In order to have animation in a movie (or movieclip, which we'll discuss later), you must extend the timeline to last some specified duration, and put in keyframes wherever you want the scene to change. For example, to create a movie with a blinking star, create a new blank document that's 40 x 40, 12fps, dark blue background. Extend the timeline 12 frames by right-clicking in frame 12 and choosing Insert Frame. Now you have a movie with 12 blank frames (1 second long).

Add Keyframes

Right-click in frame 10 and choose Insert Keyframe to make it a keyframe.

You must insert a keyframe any time you want the content in the timeline to change from its previous state.

Draw a star on stage (hold the mouse down on the Rectangle tool, choose Poly Star tool from the menu that pops up, and in the Properties panel, click Options and choose Star and as many points as you want). Now you should have 9 blank frames, a keyframe in frame 10, and content in frames 10-12 (like the timeline shown below). To see what the movie will look like when published, choose Control, Test Movie (cmd-Enter, pc:ctrl-Enter). The published movie should look like the (somewhat annoying) permanently blinking star below.

First flashing star movie and its timeline

Notice that the movie doesn't just play once and end there -- it goes back to the beginning and plays again. That's an important thing to remember when dealing with any timeline: its default behavior is to start playing and keep playing (looping), unless told to do otherwise. If you want it to play through and stop when it reaches a particular frame, you have to put a stop in that frame (we'll look at that later).

More keyframes can be added to add or refine the animation in a timeline. For example, in the blinking star movie, instead of just two keyframes in 1 and 10, we could add keyframes in frames 11 and 12 (to turn a frame into a keyframe, right-click the frame and choose Insert Keyframe). Then we could use the transform tool or the Transform panel (cmd-T, pc:ctrl-T) to shrink the star in frames 10 and 12, to produce this variation:

Second flashing star movie and its timeline (same overall length, more keyframes for more detail)

Adding keyframe animation to the sheep scene

Now that we've seen how to change the content in a frame by making it a keyframe and then changing the content in that keyframe, let's continue with the sheep scene we created previously and add a keyframe to make the sheep tilt its head and bleat:

• Open sheepscene.fla that you created previously (or open sheepscene.fla from the class directory -- link at right under Files). Save it as sheepscene1.fla.
• Create a layer above the standing sheep layer and call it sheep head. Lock all layers except the standing sheep layer and use the lasso tool to encircle the sheep's head, cut it to the clipboard (cmd-x), unlock the sheep head layer, and paste the head in place (cmd-shift-v) in that layer.
• Extend the timeline for all layers out to frame 32 by selecting frame 32 in all layers (click-drag the mouse through all layers on that frame), and choosing Insert, Timeline, Frame (or right-clicking and choosing Insert Frame, or by pressing F5).
• We'll make the sheep's head tilt up a bit in frame 24. With the transform tool selected, click the sheep's head and rotate it a bit counter-clockwise. Move it up and left a bit too, so it looks like it's tilted, as in the image below:
  
  
• Use the paintbrush tool to 'reconnect' the new head to the body in the keyframe you just made, as in the picture below. A keyframe can have whatever modifications you want to make (changes, additions, deletions) at all.
  
  
• Now we'll add a bleating sound when the sheep tilts its head. Make a new baa layer above the sheep head. Because we want the sound to start in the same frame as the head-tilt, we need to make a keyframe in frame 24 of the new layer (right-click, Insert Keyframe). Choose File, Import, Import to Library and select baa.wav (link at right under Files), or choose another short wav file from your hard drive. You'll see a copy added to the Library. Now drag the sound from the library to the stage, and you'll see it added as a waveform in frame 24, as in the picture above. Choose Control, Test Movie to test the movie.
• Make the sheep's shadow follow its head by adding a keyframe to the sheep2 shadow layer in frame 24. Use the lasso tool to choose the head part of the shadow, and use the transform tool to skew it a bit to the left.
• Save the fla (sheepscene1.fla)

And that's it: a movie extended to 32 frames, with one keyframe in the sheep2 head layer (echoed in the sheep2 shadow layer) to tilt it, and one keyframe in the sound layer to add a sound. This creates a 3-second (almost) movie with two seconds of silence, following by one second of bleating, repeating forever (until we learn how to make that stop, as is done in the sample above).