Elements of Animation

Now that you know a little bit about how animation works, we can discuss how it applies to Flash. As discussed in the following sections, several general animation terms have specific meanings in Flash. You need to understand both the general meanings and how the terms apply to Flash.

Frames and Frame Rate

As mentioned earlier in this hour, animation is a series of still images. Each image is called a frame. In movies, frames are the individual pictures on the film itself. In Flash, frames are the little rectangular cells in the Timeline. They're numbered at the top of the Timeline, and every fifth frame is gray; the rest of the frames are white with a gray outline. The Timeline displays all the frames, but normally you can look at the contents of one frame at a time. (Later you'll use the Onion Skin option to view multiple frames.) The red current-frame marker can be in only one place at a time the frame you're currently viewing. You don't draw into a frame on the Timeline you draw onto the Stage. The current-frame marker indicates the frame whose contents are currently onscreen. Figure 6.1 shows the Timeline in its initial state. Until this movie's duration is extended, you can't move the red current-frame marker past 1, and only Frame 1 is enclosed by a solid white box with a hollow circle.

Figure 6.1. The Timeline, with its many cells, is initially only one frame long.

By default, a Timeline is initially one frame long. The current-frame marker is unmovable at that point because it can be placed only in a frame of an animation, and so far the animation has only one frame. Let's look at an animation that has more frames, but instead of building an animation, you can download a sample from my website: www.phillipkerman.com/teachyourself/sourcefiles.

Download and open the keyframing.fla file so you can follow along. Now you can click in the numbered area of the Timeline on Frame 15. The current-frame marker moves to where you click; be sure to click in the numbered area toward the top of the Timeline not in the cells (see Figure 6.2).

Figure 6.2. A 60-frame Timeline is shown, with the red current-frame marker on Frame 15. You can move the current-frame marker to any frame within the 60 frames by dragging in the numbered area.

This example illustrates a few important concepts. First, if you click and drag the current-frame marker in the number area above the frames all the way from Frame 1 to Frame 60, you see a quick preview of the animation. This technique is called scrubbing. The preview you're given is dependent on how fast you scrub. Naturally, the frame rate is locked when the user watches an animation. If you select Control, Play or just press Enter, you see this animation play at its correct frame rate. To stop, you press Enter again. You should also notice the status area near the bottom left of the Timeline. The three numbers are the current frame number, the frame rate, and the current time elapsed (see Figure 6.3).

Figure 6.3. The status area in the Timeline contains three important numbers related to timing.

Scrub is a term that is used in all kinds of animation software. It's a technique for previewing an animation. You simply grab the red current-frame marker and drag it back and forth (through all the frames of the animation). You move your mouse in a scrubbing motion hence the name.

Frame rate is the rate at which frames are played back for the user, measured in frames per second (fps). A frame rate of 30 fps means that 30 frames will be displayed every second. It is easy to confuse frame rate with speed, but they're not necessarily the same. If an entire animation uses 10 frames at 10 fps, it might look identical to the same movement using 20 frames if the frame rate is set to 20 fps. Both of these animations take 1 second to finish.

Speed isn't the reason you pick one rate over another. The issue is the capability of the user's machine. The frame rate you specify should really be called "maximum frame rate." Your movie will never exceed this rate, but on a slow computer, it might play more slowly.

The current frame number (on the left) indicates the location of the red current-frame marker. It changes while you're playing or scrubbing, reflecting that you can be in only one frame at a time. The frame rate (the middle number) normally indicates the frame rate for the movie that you last specified (by selecting Modify, Document and making a selection in the Document Properties dialog box). However, the number shown can be reduced if after you play the movie, Flash estimates that it can't actually keep up with the "requested" frame rate. It's not entirely accurate, but it does provide a good estimate.

Let's change the frame rate to something very high and see what happens. With the keyframing.fla sample file open, you can access the Document Properties dialog box by selecting Modify, Document. (You can also open this dialog box by pressing Ctrl+J, by double-clicking the frame rate number on the Timeline, or through the Properties panel, when nothing is selected, by pressing the button to the right of Size.) Change the frame rate to 120. Press Enter to play the movie and notice that as the red current-frame marker moves through the Timeline, the frame rate changes to show how fast Flash is actually playing. It wants to go 120 fps, but it may not be able to keep up. Now the status shows a more realistic frame rate, one that your computer can maintain. In reality, however, the frame rate shown here is not particularly accurate because it shows only how fast Flash plays during authoring not in the actual exported movie. If you were to export this movie and play it in a browser, it would likely play slightly faster because the Flash authoring environment is not part of the picture.

Current time (the third number) indicates how long it takes to reach the frame you're viewing from the start of the movie. For example, how long it takes an animation to play 50 frames depends on the frame rate. At 24 fps, it should take about 2 seconds. At 12 fps, it should take about 4 seconds. The duration of the movie is based on the frame rate.

Frame Rate Versus the Number of Frames

The numbers in the status area are very important. When you design an animation, you should pick a frame rate and stick to it. When you change the frame rate, you're changing it for the entire movie. For example, say I have an animation of a character walking, running, jumping, and sitting still for a few seconds. If the portion where he's walking is too slow and I try to speed it up by increasing the frame rate, that portion might look better. But then the character will run extra fast, his sitting time will go by more quickly everything will be faster! It's best to leave the frame rate alone and find another way to increase the speed.

There are ways to change the effective speed. Suppose you have an animation of an airplane moving across the sky. You need to decide the effective speed of the airplane according to the size of the airplane and how much sky you're showing. If you move the airplane all the way across the screen in 36 frames, you can't determine whether that's the right speed unless you consider the frame rate. At 12 fps, the airplane takes 3 seconds to move across the sky.

Effective speed is how fast something seems to move. Actual speed, in comparison, is absolute and can be measured. If an animation uses 12 frames (at 12 fps), the elapsed time of 1 second is the animation's actual speed. The viewer's psychological impression determines effective speed. Therefore, you can use illusions to increase or decrease an animation's effective speed. If a lot of action and changes occur in those 12 frames, it's effectively fast. If only one slight change occurs, the effective speed is slow.

If an airplane in the sky travels completely through my view in 3 seconds, the airplane is probably pretty close to me. If the plane is at 20,000 feet, it would take about 15 seconds (or longer) to move across the sky. If 3 seconds is too fast for the airplane in an animation, you can make it appear slower by slowing down the frame rate or by increasing the number of frames used in the Timeline. If you slow the frame rate to 2 fps, it will take 18 seconds for 36 frames, but the animation will be very jumpy (plus you're changing the rest of the animation). If you extend the animation to take 240 frames, the airplane takes 20 seconds to complete the motion. You'll learn how to do these things in the next few hours, but for now, it's only important to understand the difference between frame rate and total frames.

Frame Rates of Different Types of Animation

To put the animation you're about to embark upon into perspective, let's compare some traditional animation media. In a motion picture, the frame rate at which the images appear is 24 fps. Even at this relatively slow rate, you don't notice the moments when the screen is black. Television plays at 30 fps.

In computer animation, the screen doesn't blink between frames, but you do have a choice about what frame rate to use. Technically, the user's monitor will flicker as much or as little as she has it set to flicker, but in any case, it will be much faster than an animation's frame rate. In computer animation, frame rate affects how frequently the onscreen graphic changes or, conversely, how long it pauses before advancing to the next frame. In practice, if you go much below Flash's default setting of 12 fps, your user will start to notice jumpiness, and if it's much higher than 36 fps, it may not perform well on all machines. Remember that traditional movies use 24 fps and look quite smooth.

It might seem that you should always crank up the frame rate as high as you can, which would address the problem of jumpiness. However, it's not that easy. First of all, more frames can mean that your movie has a bigger file size. Also, it often requires a computer that can display images quickly. If your user's machine can't keep up, it slows down the animation and makes it not only jumpy but slow.

Finally, creative animation techniques enable you to fool the user in ways other than relying on persistence of vision and a fast frame rate. You'll see examples in Hour 7, "Animation the Old-Fashioned Way," when you create an animation that uses only three frames. In Hour 22, "Advanced Animation Techniques," you'll learn about even more techniques. For now, just remember that frame rate is important, but it isn't everything.

Keyframes and Blank Keyframes

A keyframe is simply a frame in which you establish exactly what should appear on the Stage at a particular point. A keyframe might include an image, or it might be blank. A blank keyframe is still a keyframe; it's just one in which nothing appears on the Stage.

In traditional film animation, every frame is a keyframe that is, something new appears onscreen with each frame. In Flash you can make every frame a keyframe, but you can also take some shortcuts. If the first keyframe occurs on Frame 1 and the next keyframe doesn't occur until Frame 10, there won't be any changes onscreen during Frames 2 9. The keyframe in Frame 1 establishes what will appear in Frame 1, and it doesn't change until the keyframe in Frame 10, which establishes what appears then. This is totally appropriate for something that doesn't need to change every fraction of a second. When you create a keyframe, it's as if you're telling Flash, "Put this stuff on the Stage and keep it here until you reach the next keyframe." The next keyframe says the same thing: "Now, put this new stuff on the Stage." You have two things to decide when you create keyframes: when you want them to occur (in the Timeline) and what you want to appear onscreen at those moments.

Establishing a keyframe is simply a matter of clicking the cell in the Timeline exactly where you want a keyframe to occur. After you click a single cell in the Timeline, select Insert, Timeline, Keyframe (or, better yet, press F6). A couple things happen when you do this. Flash places a keyframe in that frame (indicated by either a solid or hollow circle), and it copies the Stage content from the previous keyframe. If at the previous keyframe you have nothing on the Stage, a blank keyframe is inserted. If at the previous keyframe you have something drawn on the Stage, that shape or symbol instance is copied onto the State at the new keyframe. This can be convenient because a keyframe gives you a chance to specify both when you want an onscreen change to occur and what the onscreen contents should change to. Often you want just a small change. Creating a keyframe enables you to start with a copy of the previous keyframe's content instead of redrawing it from scratch.

Whatever you draw in a keyframe continues to be displayed until the Timeline arrives at the next keyframe (blank or otherwise). If keyframes are placed one after another, the screen changes with every frame. If the frame rate is 10 fps, you see 10 keyframes in 1 second.

However, keyframes don't have to occur one after another. If you insert keyframes at alternating frames, changes appear five times per second (still at 10 fps). For any frames between keyframes, you see the content of the previous keyframe, either an image or a blank screen. Say you want a box to appear onscreen and remain still for 1 second before it moves. In one keyframe you draw a box, and then 10 frames later (1 second at 10 fps) you insert a new keyframe in which you can move the box to a new location.

Try It Yourself: Analyze a Finished Animation

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

1.	Download the file keyframing.fla from my website: www.phillipkerman.com/teachyourself/sourcefiles. 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 about what kind of animation is taking place.
2.	Notice that there are separate named layers: Sparkle, 8, Flash, and Background. (We'll look at each separately.) You might need to resize the height of the Timeline to see all the layers (as illustrated in Figure 6.5). (Hour 11, "Using Layers in Animations," covers layers much more extensively.) Figure 6.5. You can resize the height of the Timeline to see all the layers.
3.	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 first holding Ctrl and then moving the box at Frame 60 (but don't do this yet). Figure 6.6 shows a close-up of the Timeline. Figure 6.6. Here's a close-up of the Timeline.
4.	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, 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.
5.	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 (because scrubbing might be too abrupt).
6.	The "8" layer is similarly interesting. It has a blank keyframe in Frame 1 (shown by a hollow circle). It's not so much that the 8 is offscreen at the start it doesn't exist (that's the idea of a blank keyframe). The 8 doesn't appear until Frame 10. This is where you see the first (solid) keyframe. When the 8 appears, it changes in every frame that contains a keyframe. Actually, it pauses at Frame 20 there isn't another keyframe in that layer until Frame 25. Finally, Frame 30 is the last frame for this layer. Not only is it the last keyframe, but no frames exist past this point (in this layer).
7.	Try adding frames after Frame 30 in the 8 layer. Click the cell at Frame 60 and select Insert, Timeline, Frame or press F5. When you play the animation now, the 8 never fully disappears. The new regular frames extend the duration of the contents at the keyframe in Frame 30. One way to remove the frames following the keyframe in Frame 30 is to hold down the Ctrl key and drag the box (indicating the end of a span) that is now at the end of the Sparkle layer to the left (see Figure 6.7). (Note that you don't need to hold Ctrl if you've previously selected Edit, Preferences and clicked the Span Based Section option.) Figure 6.7. After you add frames to the end of a layer, you can reduce the duration if you hold Ctrl and drag the box to the left.
8.	Close this file without saving. (You can continue to tinker with it later.)

The practical example in the preceding task is a great chance to see keyframes, blank keyframes, and regular frames in a working file. (By the way, I created this file to exemplify specific points. When you learn more you'll probably find ways to improve it.)

Tweening

You can put whatever you want in keyframes. The space between two keyframes effectively "holds" the onscreen contents from the first keyframe. Alternatively, you can tell Flash to interpolate the change in a process called tweening. For example, suppose that in one keyframe there is an airplane on the left of the stage. The next keyframe shows the airplane on the right side of the stage. Flash can calculate how to move the first image to the second.

Tweening is the process of interpolating two keyframes. Tweening smoothes out a big change by breaking it into little steps. If a circle at the bottom of the screen jumps to the top of the screen 1 second later (at 10 fps), the change appears abrupt. If the two frames are tweened, you see the circle move a little bit (about 1/10 of the total distance) 10 times. The coarse movement is smoothed out with small changes in the in-between frames. Flash calculates these tweened or interpolated frames so you don't have to do all the work.

By the Way: The Meaning of Tweening

The word tweening is from the word between, and it is used in conventional animation, as well as in Flash. If you look at the credits on any full-length animated feature film, you're likely to see the names of both the principal artists and the tweeners. The principal artists draw the keyframes, and the tweeners fill in the blanks between them. Similarly, in Flash you draw the keyframes, and Flash creates the frames in between.

Just so you can see what it looks like, check out the tweened frames in Figure 6.8. Tweening really is as simple as drawing two frames and making Flash tween the difference. You'll learn more about tweening during Hours 8, "Using Motion Tweens to Animate," and 9, "Using Shape Tweens to Morph." For now, you just need to realize that Flash will help you by doing some of the tedious work.

Figure 6.8. When you have two keyframes separated by several frames, you can tell Flash how to get from one to the next.