| The most basic form of animation is frame-by-frame animation. Because this type of animation employs unique artwork in each frame, it is ideal for complex animations, such as facial expressions that require subtle changes. Frame-by-frame animation is also useful for making dramatic changes in a short period of timein a slide show, for example. Frame-by-frame animation does have drawbacks. Drawing a unique image for each frame can be tedious and time-consuming . And all those unique drawings contribute to a larger file size . Let's start with a simple frame-by-frame animation. -
Open zoo13.fla.  This is the same file you completed at the end of Lesson 3, so if you still have that file open, you can get started. If you don't have it open, you can find it in the Lesson04/Starting folder on the CD-ROM. -
Select the Panda layer, and choose Insert > Blank Keyframe.  A hollow dot should appear on the timeline in frame 2 of the Panda layer. This hollow dot signifies an empty keyframe in the timeline. A solid black dot signifies a keyframe with something on the stage. In frame 1 of the Panda layer, there's an instance of the Panda symbol on the stage. A keyframe marks a point on the timeline where the contents of a layer change. In this case, the change is from a keyframe containing something (the panda) to a keyframe containing nothing. If you'd like to see what the keyframe looks like, you can choose Control > Play to play the animation. When you add a blank keyframe to the Panda layer, Flash automatically adds a single frame to each of the other layers . Inserting a frame does not change the animation in a layer; it only extends the animation for a longer period. Up to this point, you've known the timeline as the place where Flash keeps all your layers, but it's really much more. The timeline enables you to create animation by changing the contents of the stage over time. One way to think of the timeline is as a graph. The y -axis of the timeline shows the name of each layer. The x -axis, across the top of the timeline, indicates the frame number. Each hash mark indicates a frame, and the numbers over the first frame, and every five subsequent frames , help you find a frame in the "graph." The point at which the two axes intersect is a frame. So, each square in the "graph" is a frame. -
Select frame 2 of the Logo layer. Shift-click frame 2 of the Background layer; this selects frame 2 in all the layers in between. Select Insert > Blank Keyframe.  You can select a frame by clicking the frame in the timeline. Don't click the number at the top of the timelinethe number simply indicates the number of each frame. When you select a frame, look at the numbers at the bottom of the timeline. You should see the current frame number, as well as the frame rate for the movie, which you set in the Document Properties dialog box (Modify > Movie). The third number indicates the amount of time that would have elapsed by the time you reach this frame. Right now the number should be 0.1, which indicates that in frame 2 of the animation, 0.1 seconds have elapsed. When you select frame 2 of the Logo layer, then hold down the Shift key and select frame 2 of the Background layer, Flash selects frame 2 in the Logo, Frame, Main Page Bitmaps, Welcome Text, and Background layers. This great feature lets you select multiple adjacent frames, either layer by layer or in a single layer. Simply click the first frame in the span you want, and then hold down the Shift key and click the last frame you want in the span.  You can also select non-adjacent frames in the timeline. Just click the first frame you want to select, then hold down the Ctrl (Windows) or Command (Macintosh) key and click the next frame you want. If you continue to hold down the Ctrl or Command key, you can keep selecting additional frames. In Lesson 1, you learned that Flash lets you use frame-based or span-based selection in the timeline. In frame-based selection, which you're using right now, you can select individual frames in the timeline. In span-based selection, you can click a frame, and the entire frame sequence, from one keyframe to the next, is selected. The Span Based setting is located in Flash's Preferences dialog box. -
Select the blank keyframe in frame 2 of the Panda layer, and drag an instance of the Panda symbol from the Library to the stage.  You can select the keyframe in frame 2 of the Panda layer by clicking it. Before you add the instance of the symbol, make sure the Panda layer is unlocked otherwise you won't be able to add the instance. It's also a good idea to make sure it's the only layer that's unlocked, so you don't accidentally add the instance of the Panda movie-clip symbol to the wrong layer. Just right-click (Windows) or Control-click (Macintosh) the name of the layer and choose Lock Others from the drop-down menu. After you've added the instance of the Panda symbol to the keyframe in frame 2 of the Panda layer, the hollow dot that indicated an empty keyframe becomes a solid black dot. That block dot indicates there's something in the keyframe, namely the Panda symbol. -
Use the Transform panel to set this instance of the Panda symbol to 200% of its original height and width. Then use the Align panel to center this instance horizontally and vertically on the stage.  You've used both the Transform and Align panels before. If you can't find them on the screen, look in the Window menu. You can choose Window > Transform to open the Transform panel and Window > Align to open the Align panel.  To center a selected element on the stage, you can use the Align panel. Select the element you want to align, and click the To Stage button. Then click the Align Horizontal Center and Align Vertical Center buttons , and whatever you have selected will be centered on the stage. You can also use the Align panel to position elements along the left, right, top, and bottom edges of the stage. Keep the To Stage button selected, and then click the Align Left Edge, Align Right Edge, Align Top Edge, or Align Bottom Edge button to position the element where you want it. You can even select multiple elements, by Shift-clicking each one, and align them all at once using this method. -
Select frame 1 of the Panda layer, then hold down the Shift key and select frame 2 of the Background layer. Choose Modify > Frames > Reverse.  You can reverse the frames in an animation using the Modify > Frames > Reverse command. You can use this command to reverse any number of frames in an animation sequence. Right now you just have two frames, so it'll simply swap the order of the frames. You can reverse a sequence of frames as long as there are keyframes at the beginning and end of the sequence. Select the entire sequence of keyframes and choose Modify > Frames > Reverse. Remember, you can click the first frame, and then hold down the Shift key and click the last frame to select a sequence of frames. -
Drag the playhead back and forth between frames 1 and 2. Save the file as zoo14.fla. The playhead is the red rectangle above the timeline. It moves through the timeline to indicate the current frame displayed on the stage. To display a frame on the stage, move the playhead to the frame on the timeline. Drag the playhead back and forth between frames 1 and 2 to see what you have accomplished in this step. The animation should start with only an instance of the Panda symbol on the stage, and end in frame 2 with all of the content you added in Lesson 3. |
