• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 6. Understanding Animation > Task: Analyze a Finished Animation

Task: Analyze a Finished Animation

In this task you'll view a sample animation and make some edits so you can better understand keyframes.

Download the file “keyframing.fla” from my Web site. The address is www.phillipkerman.com/teachyourself/sourcefiles/keyframing.fla. In Flash, open this file and then press Enter to watch the animation. (See Figure 6.4.)

Figure 6.4. This Timeline has many clues as to what kind of animation is taking place.

You should notice that there are separate named layers (Sparkle, X, M, Flash, and Background). We'll look at each separately. You may need to resize the height of the Timeline to see all the layers (as illustrated in Figure 6.5.) (In Hour 11, “Using Layers in Your Animation,” we'll cover layers much more extensively.)

Figure 6.5. You can resize the height of the Timeline to see all the layers.

Personally, I find it easiest to make edits when the timeline preference “span-based selection” is selected (under Edit, Preferences, General) as shown in Figure 6.6. Go ahead and make this selection.

Figure 6.6. The timeline preference for “span-based selection” is my personal preference—and one that makes this exercise easier.

The Background layer appears initially in frame 1 and remains unchanged onscreen for the duration of the animation. Notice that there's a keyframe in frame 1, followed by many regular frames. It's possible to extend or reduce the duration of any of the background layers by moving the box at frame 60 (don't do this yet). See Figure 6.7 for a close-up of the timeline.

Figure 6.7. Here's a close-up of the timeline in case you don't have a chance to download the file.

Scrub frames 31 through 60 by dragging the current frame marker in the numbered area of the Timeline. Notice the animation of “Sparkle”. In the Sparkle layer, you'll notice a keyframe in each frame from 31 to 54. Onscreen, a different drawing of the sparkle appears for each frame. Scrub past frame 54, and the sparkle is gone. That's because in the Sparkle layer, there are no frames after 54.

The layer called Flash is more interesting. In frame 1 the word “Flash” appears, but there isn't another keyframe until frame 4, where the word changes. Then, in frames 4 through 15, a different keyframe for every frame contains a modified image of the word (to make it look like it spins). You can press the comma and period keys to step through this animation (as scrubbing might be too abrupt).

Both the “M” and “X” layers are similarly interesting. Both have a blank keyframe in frame 1 (shown by a hollow circle). It's not so much that the M and X are offscreen at the start—they don't exist (that's the idea of a blank keyframe). The M doesn't appear until frame 10 and the X in frame 15. This is where you see the first (solid) keyframe for both. Once the two letters appear, they change in every frame containing a keyframe. Actually, you should notice the M pauses at frame 13—there isn't another keyframe in that layer until 17. Finally, frame 29 in both M and X is the last frame. It's not just the last keyframe, but no frames exist past this point (in these layers).

Let's see the result of adding frames after frame 29 in the M layer. Click the cell at frame 60 and select Insert, Frame (or press F5). When you play the animation now, the M never disappears. The new regular frames extend the duration of the contents at keyframe 29. One way to remove the frames following the keyframe in frame 29 is to drag the box (indicating the end of a span) now at the end of the Butterfly layer to the left (see Figure 6.8). (Note that if you didn't change the preference to span-based selection in step 3 you can still drag the end-span box but you'll have to press Alt first.)

Figure 6.8. After you add frames to the end of a layer, you can reduce the duration by dragging this box to the left.

You can continue to tinker with this file later, but for now close this file without saving.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint