Flash provides several methods for creating animation. In addition to shape and motion tweening, you can create frame-by-frame animations. The frame-by-frame method is derived from the traditional animation process whereby the content is redrawn on each frame with slight differences from the last frame. When these frames are played in sequence, there is an illusion of movement. In Flash, you utilize keyframes in the Timeline to accomplish this. A keyframe defines a change to the artwork placed on the Stage. There are a number of ways to create and edit keyframes, as they are editable objects. Keyframes can be moved, copied, and pasted to and from any Timeline in your Flash movie or between different Flash documents. Frame-by-frame animations can be previewed in the Flash development environment so you can quickly see the results and check your work as you animate. They can also be viewed in the Flash Player using the Test Movie feature.
Additionally, there is an Onion Skin mode that allows you to see the active frame in context to the frames around it, making it easier to fine-tune keyframe changes. The versatility of the Timeline and the strength of the Flash Player allow you to implement animation in your movie and give it life.
Animation is the illusion of movement. It is comprised of a series of pictures, each slightly different from the last, that when played sequentially imply movement. Motion pictures work the same way. What you see when you view a film is a long strip of images played at specific intervals. In this way, the content in the pictures moves and seems to imitate real life.
Traditional cell animators draw a picture onto a frame of celluloid and then draw the same thing onto the next frame but with slight changes made to the drawing. Static parts of the scene (such as a background) are copied and only the objects that change are redrawn. In this way the process is more efficient.
The principles for animating in Flash have derived from this process. In Flash, you create frame-by-frame animations in the Timeline through the use of keyframes. Each keyframe defines a change on the Stage, and when played in succession, the content can seem to evolve, or move. When you export your movie, Flash will play these frames in succession at specific intervals depending on the frame rate you set. A good introduction to this concept, as well as the basics of animation, is the dissection a character walk cycle. When human beings walk, they are essentially repeating the same motion over and over again. In an animated walk cycle, the same thing occurs, though instead of drawing the cycle over and over again, the motion is spaced out so that the last frame (the last image drawn) meets up with the first frame. If this animation is looped, the character will seem to walk perpetually.
When art is placed on the Stage, it appears in a keyframe in the Timeline. A keyframe is represented as a black-bounded box with a small circle in it. By default, each layer in the Timeline has a keyframe on its first frame. An empty keyframe displays an empty or hollow circle, but when you place artwork or objects on the Stage, the bounding box becomes shaded and the small circle becomes a filled black dot. A keyframe can span multiple frames when there are no changes to the art. To make a change you create another keyframe. In this way, you can create animations or content that seems to move or change over time.
Click anywhere in a keyframe span.
• To insert multiple keyframes, select the number of frames you want.
Click the Insert menu, point to Timeline, and then click Frame.
Repeat until you’ve increased the framespan to the length you need.
Timesaver
Press F5 to add a frame or Control+click (Mac) or right-click (Win) the selected frame, and then click Insert Frame.
Any frame can be converted into a keyframe. As a time-saver, you can select a range of frames and convert them all into keyframes simultaneously. This is useful when you have many frames to convert. It is also a good technique for fine-tuning shape and motion tweens. After the tween has been applied, you can convert the frames in the tweened span into keyframes and edit them independently.
Click on a frame, and then drag to select a frame span.
Click the Modify menu, point to Timeline, and then click Convert To Keyframes.
Timesaver
Press Ctrl+click (Mac) or right-click (Win) the selected frames, and then click Convert To Keyframes or Press F6 after selecting all of the frames you want to convert.
Did You Know?
You don’t have to select a frame to add keyframes. If you place the playhead over a frame and add a keyframe or a blank keyframe, it appears without you having to select the actual frame. However, if you are working with multiple layers, Flash adds a keyframe to all layers at that frame if no frame is selected.
Depending upon how you like to work, you can choose between two selection modes in Flash. The default mode is frame-based selection. In this mode, frames are treated as individual elements. When span-based selection is chosen, Flash treats frames as part of a frame span, which means all of the frames adjacent to a keyframe are selected as a unit. You can accomplish the same tasks in either mode and you can switch between the two depending upon the task at hand.
Depending on what you are trying to accomplish, you can choose to remove a frame’s status as a keyframe or remove the frame entirely. Clearing a keyframe preserves the length of the framespan and the overall duration of the animation on the layer. It simply turns the keyframe back into a regular frame and removes any changes the keyframe contained. Conversely, removing frames deletes the entire frame and shortens the framespan as well as the length of your animation in the Timeline.
Keyframes are editable elements. You can add or remove content from a keyframe, move keyframes around by simply dragging, or copy and paste keyframes in the same Timeline, across scenes and even other Flash documents. Because keyframes are so versatile, you can continue to fine-tune your animations after they are created. When the playhead is placed on a frame, the content of that frame is displayed on your Stage. Selecting the keyframe in the Timeline selects all of the content on that keyframe on the Stage. Likewise, selecting any of your content on the Stage will select its corresponding keyframe. In this way, you can interactively edit the content in a keyframe or the keyframe’s position in the Timeline and know what you are affecting.
Click on the keyframe to select it or click and drag to select a keyframe and a range of frames.
Click again on the selected frame(s), and then drag to a new area of the Timeline.
Did You Know?
It’s important to understand the difference between the normal copy and Paste commands and the copy frames and Paste Frames commands. When you copy and paste frames you are copying the keyframes and in-between frames and the content contained in them. Pasting them preserves the structure and layout. If you select a keyframe and use the normal copy and paste commands
+C and
+V (Mac) or Ctrl+C and Ctrl+V (Win), you are only copying the content contained in that keyframe.
You can use drag and drop to copy frames. Press and hold down the Option (Mac) or Alt (Win) key as you drag frames, Flash copies them to a new location.
Flash incorporates the traditional animation technique with its use of keyframe-based animation. Artwork is placed in a keyframe in the Timeline and subsequent keyframes are created to record changes to the artwork. When played consecutively, these minute changes mimic movement as each keyframe describes an altered position or transform effect. Static art that does not change is stored on separate layers and can span the entire animation. In this way, you don’t have to redraw the entire frame and you can quickly create complex animations.
Create a new Flash document or open an empty Timeline.
Click the first frame to select it.
Click the Oval tool on the Tools panel.
Click on the Stage, and then drag to draw a circle.
Click the second frame to select it.
Click the Insert menu, point to Timeline, and then click Keyframe.
Select the second keyframe or double-click the circle on the Stage and drag it slightly to the right.
Click on the third frame to select it.
Repeat step 6.
Select the third keyframe or double-click the circle on the Stage and drag it slightly further to the right.
Continue to add keyframes and move the circle until it reaches the right edge of the Stage.
Click the Playhead and move it across the frames to preview the movement of the circle.
In addition to moving the playhead in the Timeline to view your animation, commonly called scrubbing, Flash provides a controller to navigate the Timeline. The Controller resembles the transport controls on a VCR and can be used in the same way. Additionally, you can export your Flash document into a Flash movie (a .swf file). You do this to see your Flash movie in its final state, as there are some elements that are not viewable in the Flash Development environment, such as animations contained in movie clip symbols and ActionScript functionality. To preview basic animations from their own Timeline, you can use the Controller to preview them.
Click the Window menu, point to Toolbars, and then click Controller.
To stop the animation, click Stop.
To rewind to the first frame of the animation, click Rewind To Beginning.
To step back one frame, click Step Back.
To play or stop the animation, click Play.
To step forward one frame, click Step Forward.
To fast-forward to the end of the animation, click Go To End.
Normally, the playhead shows one frame at a time—the frame it’s placed on. As you play the Timeline, the Stage displays the content of one frame at a time, forming your animation. Onion Skinning mode allows you to view multiple frames simultaneously. This is useful for fine-tuning your animation, because you can see the content on the frames immediately preceding and following the active frame.
Open a Timeline with a multiple frame animation.
Click the Onion Skin Mode button in the Status bar.
Onion skin markers appear in the area above the frame numbers and the area of the range of frames selected dims. The frames that precede the active frame and the frames that follow appear in varying degrees of shading on the Stage, becoming lighter the further they are from the active frame.
You can adjust the number of frames previewed in the onion skin by manually dragging the onion skin markers. These markers have draggable handles that set the beginning and end of the onion skin. The handles appear as brackets with small dots. Alternately, you can set the range of the markers from the Modify Onion Markers popup menu.
Click the Modify Onion Markers button.
The Modify Onion Markers popup appears.
Select from the following options:
• Always Show Markers. Keeps Onion Skin Markers visible in and out of Onion Skin mode.
• Anchor Onion. Maintains the selected frames even if you move the playhead.
• Onion 2. Shows two frames before and after the current frame.
• Onion 5. Shows five frames before and after the current frame.
• Onion All. Includes the entire duration of the Timeline in the markers.
If you need to make changes to an entire animation or to a series of frames at once, you can select them in Edit Multiple Frames mode. When this feature is enabled, brackets appear similar to those in Onion Skinning mode. Drag them to select the range of frames you want to edit. This works well if you need to make global changes to your animation such as resizing it or changing its location. You can select an entire framespan or layer instead of moving or resizing the content on each individual frame separately.
Open a Timeline with a multiple frame animation.
Click the Edit Multiple Frames button in the Status bar.
Click and drag the markers until they include all the frames you want to select.
All of the content in the selected frames appears on the Stage.
Click the Selection tool on the Tools panel.
Drag a selection box around the content on the Stage.
You can make changes to location, scale, effects, etc. All the selected frames will be affected.