Activity 9: Frame by Frame animation


Frame-by-frame animation changes the contents of the Stage in every frame and is best suited to complex animation in which an image changes in every frame instead of simply moving across the Stage. Frame-by-frame animation increases file size more rapidly than tweened animation. In frame-by-frame animation, Flash Professional stores the values for each complete frame.

To create a frame-by-frame animation, define each frame as a keyframe and create a different image for each frame. Each new keyframe initially contains the same contents as the keyframe preceding it, so you can modify the frames in the animation incrementally.


Onion Skinning:  Even the most experienced animators often need help in creating smooth motion. The help in this case is a technique called onion skinning, which lets you draw each new frame of animation directly on top of images of previous frames. (The images are dimmed—more so for the earlier ones—to make it possible to draw over them without getting confused about what’s new and what’s old.)

The term onion skinning has nothing to do with peeling vegetables. It comes from the early days of animation, when animators used to do their pencil sketches on semi-transparent paper called onionskin. To draw each new frame of animation, the animator would lay a sheet of onionskin paper on top of the previous one. The transparency of the paper allowed him to line up the new drawing with the old one and to trace portions when necessary. To test the animation, the animator would lift the corner of the stack of onionskin sheets and slowly release them with his thumb, watching the animation play frame by frame as each sheet of paper dropped into place.


Flash Isn’t Creative: You Are:  Before computers, animators drew one frame at a time. You’d think that powerful software such as Flash would relieve us of that drudgery, but in reality, most animation—at least most character animation—is still made one frame at a time. In fact, an animator’s job has been much the same for over a century: Watching how people and things move in the real world, breaking down that motion into incremental steps, and trying to reproduce it in a series of images.

In old photos of animation studios, there were always mirrors on the wall. They allowed the animators to model the movements they were animating. If a character had to jump, the animator would jump in front of a mirror to see how his body moved. He’d then sketch it out back at his drawing table.

Frames of animation no longer have to be pencil-sketched, traced in ink, and hand-coloured. But the humor, interest, and excitement of animation still come entirely from human creativity, frame by frame by frame.



Part 1:  To use the Onion Skin feature:

Animation unit, frame by frame activity part 1 from Digital Voices on Vimeo.

  1. Move the playhead to the keyframe in which you want to make a new drawing.
  2. Click the Onion Skin icon to turn onion skinning on. The playhead is now bracketed by two markers—Start Onion Skin and End Onion Skin—with a dark gray area between them.

    By default, the Start Onion Skin marker is two frames behind the playhead, and the End Onion Skin marker is two frames after the playhead. (If there are fewer than two frames available in either direction, the markers move in toward the playhead as necessary.) To see more or fewer frames, slide the markers.

    The frames bracketed by the markers are visible on the Stage, with increasing degrees of dimness depending on their distance from the playhead.

    This is how the Stage looks when onion skinning is turned on. The black stroke in the center is what’s in the current frame. The dimmer strokes indicate what’s in the two frames before and the two frames after.

  3.       Create or modify the drawing in the current keyframe, using the dimmed images for reference.
  4.       Press F6 to insert a new keyframe, or move the playhead to another keyframe. The Start Onion Skin and End Onion Skin markers move with it, keeping the same distance from the playhead.
  5. Repeat steps 3 and 4 as many times as necessary. When you’re finished, click the Onion Skin marker again to turn off the feature.Here are some variations:
    • To see just the paths in the onion-skinned frames, without strokes and fills, click the Onion Skin Outlines icon.
    • If you want the ability to edit all the frames between the markers—not just the one that the playhead is positioned on—click the Edit Multiple Frames icon.
    • To change the behavior of the markers—for example, to keep them visible even when onion skinning is turned off—click the Modify Onion Markers icon and choose one of the listed options.
  • Save as:  firstlastname_activity 9a.fla in your Activity 9 folder
  • Export your movie as:  firstlastname_activity 9a.swf in your Activity 9 folder

Part 2:  Cell Animation

Animation unit, frame by frame activity part 2 from Digital Voices on Vimeo.

If you want the background of your movie to be a solid colour, there’s no need to put a colored rectangle on a background layer. Instead, click anywhere on the Stage where there isn’t a selectable object; doing so brings up Document Properties in the Property inspector. Use the Background menu to choose a background color for the Stage. Unlike using an object as a background, choosing a color from the Background menu is “free”—that is, it doesn’t add to the size of the SWF file.

Flash can automate mechanical kinds of motion through a process called tweening. But animation is most interesting when its motion isn’t mechanical—when characters express their personality through the way they move.  To achieve that sort of expressive movement, you have to animate your characters one frame at a time. The basic procedure for frame-by-frame animation is short and simple:

  1. In the Timeline, select the cell in which you want the animation to begin.
  2. Press F7 to insert a blank keyframe.
  3. Draw the first frame of animation on the Stage.
  4.       Press F6. Flash inserts a new keyframe immediately after the first one and copies the contents of the first into the new keyframe.
  5.       Modify the drawing on the Stage to represent the next incremental movement.
  6. Repeat steps 4 and 5 as many times as necessary.

Naturally, elements that stay the same from one frame to the next don’t have to be redrawn in each new keyframe. Instead, put them on a separate layer in the Timeline.

A character’s idiosyncratic way of moving can be captured only by drawing it frame by frame.

Each time you draw a new frame of animation, you’ll want to make sure it flows smoothly from the frames that precede it. To do this, you can grab the pink rectangle at the top of the playhead and drag it back and forth through the Timeline at varying rates of speed—a procedure called scrubbing. As you scrub, the corresponding frames of animation play back on the Stage. Scrubbing often reveals slight glitches in the animation that you can then fix.

frame by frame example from Digital Voices on Vimeo.


Once you have enough keyframes placed, you’ll want to preview the animation at its proper frame rate, in any of these ways:

  • Press Enter (Windows) or Return (Mac) to start the playhead moving through the Timeline. Press the same key to stop it. To move the playhead back to the beginning of the Timeline, press Control-Alt-R (Windows) or Command-Option-R (Mac).
  • Make the Controller panel visible by choosing Window > Toolbars > Controller. The Controller offers a standard set of buttons for playing, stopping, and rewinding the movie.
  • Use the menu commands Control > Play, Control > Rewind, and Control > Go to End.

In none of these cases do you have to stop the playhead manually. As soon as the playhead passes through all the frames and encounters empty cells, it knows it’s at the end of the movie, and it stops on its own.

  • Save as:  firstlastname_activity 9b.fla in your Activity 9 folder
  • Export your movie as:  firstlastname_activity 9b.swf in your Activity 9 folder

Part 3:

Animation Unit, Frame by frame activity part 3 from Digital Voices on Vimeo.

  • Students are create a Frame by Frame (aka cell) animation meeting the following requirements:
    • a static background design (no animations),
    • a minimum of 4 layers and a maximum of 6 layers,
    • 24 fps,
    • stage must be 720 X 480 pixels,
    • Animation must be between 120 -240 frames (5 – 10 seconds),
    • Animation must be created using only Frame by Frame (cell animation – NO TWEENS),
    • a main character/object interacting with 2 other objects,
    • Save as:  firstlastname_activity 9.fla in your Activity 9 folder
    • Export your movie as:  firstlastname_activity 9.swf in your Activity 9 folder
    • Export your movie as: firstlastname_activity (quicktime)in your Activity 9 folder

Animation Unit frame by frame activity teacher example from Digital Voices on Vimeo.

Animation Unit, Frame by Frame Activity from Digital Voices on Vimeo.