Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Creating Frame-by-Frame Animations

Creating Frame-by-Frame Animations

A frame-by-frame animation changes the contents of the Stage in every frame and is best suited to a complex animation in which an image changes in every frame instead of simply moving across the Stage. This type of animation increases the file size more rapidly than tweened animation because Flash stores the values for each keyframe.

To create a frame-by-frame animation, you define each frame as a keyframe and create a different (typically modified) image for each frame. Each new keyframe on a layer typically contains the same contents as the keyframe preceding it because the contents of a frame are copied to the next keyframe when you select a frame and press F6. By selecting a frame and pressing F6, you can modify each new keyframe in the animation incrementally. In Figure 17 the bee’s wing moves only slightly so that a frame-by-frame animation was used to move the wing very slightly on sequential frames.

Using frame-by-frame animation to create subtle animation (the wing instance moving only very slightly between each frame)

Figure 17. Using frame-by-frame animation to create subtle animation (the wing instance moving only very slightly between each frame)

Often, you use the onion skin feature, enabled in Figure 17, to view incremental changes between each keyframe. In Figure 18, a motion tween has been applied to the lemur’s arm and head. The onion skin tool enables you to view multiple frames of the animation at once.

Tweening instances in Flash

Figure 18. Tweening instances in Flash

To turn on onion skinning, click the Onion Skin or Onion Skin Outlines button near the bottom of the Timeline (see Figure 19). Drag the markers above the Timeline to view multiple frames at once. The onion skin outlines are enabled for an animation on the Stage in Figure 17.

Clicking one of these buttons to enable onion skinning

Figure 19. Clicking one of these buttons to enable onion skinning

To create a frame-by-frame animation:

  1. Create a new file and call it framebyframe.fla.
  2. Select Frame 1 of Layer 1. This is where the animation will start.
  3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. You can also paste graphics from the Clipboard or import a file (such as an Adobe Illustrator illustration).
  4. Select the next frame on Layer 1 and create a second keyframe (F6). The contents of Frame 2 are the same as Frame 1 at this time.
  5. Alter the contents of this frame on the Stage to develop the next increment of the animation. You might select the graphic and move it a couple pixels to the right, add some new lines, or bend a line on a shape.
  6. To complete your frame-by-frame animation sequence, repeat Steps 4 and 5 until you’ve built the motion you want.
  7. To test the animation sequence, select Control > Play or Control > Test Movie.

Comments