Chapter Four. Creating Animation

If you’ve created artwork in Photoshop or Illustrator (or on paper, for that matter), you’re accustomed to drawing in visual space. What you may not be used to is drawing in time.

Time is what makes animation possible. Animation isn’t just cartoon characters running around; the term refers to any incremental change in visual elements over time. Text moving across the Stage is animation; so is a black-and-white photo that blossoms into color.

If you’re planning to use Flash strictly as an ActionScript programming environment—for example, to make dynamic Web interfaces—you may think it’s not important to know how to create animation. In Flash, however, Web interfaces or online applications are animation. (After all, the user’s interaction with the computer takes place over time.) Whether you’re an aspiring animator, game developer, or interface designer, you’ll need to be familiar with the techniques in this chapter.

Getting to Know the Timeline

The Timeline is where you control how the objects on the Stage change over time. The vertical red line that crosses the Timeline is called the playhead; it marks the passage of time as it sweeps across the Timeline from left to right (Figure 30).

Figure 30. These are the features of the Timeline you’ll use most often for animation.

The Timeline is divided into cells, each of which represents a unit of time. The duration of that unit varies according to the frame rate—see #31—but it’s usually somewhere between one-twelfth and one-thirtieth of a second. The content of each cell (or each column of cells, if the Timeline has more than one layer) determines what’s happening on the Stage at the moment the playhead passes over it.

The cells in the Timeline are empty by default, but you can fill them with either a keyframe or a regular frame.

• Keyframe. A keyframe signals to Flash that you want something in your movie to change. When the playhead passes over a keyframe, it updates the Stage to display whatever is new in that keyframe. A keyframe can also mark changes that aren’t visible on the Stage, such as the start or end of a sound.

To insert a keyframe into the Timeline, select the cell in which you want the keyframe to appear and choose Insert > Timeline > Keyframe, or press F6. A small black circle appears in the cell.

On some occasions, you may want everything that was in the preceding keyframe to disappear. You can make this happen by choosing Insert > Timeline > Blank Keyframe, or by pressing F7. A blank keyframe is represented in the Timeline by a white circle instead of a black one.

• Frame. A frame (which we’ll sometimes refer to as a regular frame, to distinguish it from a keyframe) signals to Flash that you want to maintain the status quo. When the playhead passes over a regular frame, it tells the Stage to continue displaying whatever was in the most recent keyframe.

To insert a frame into the Timeline, select the cell in which you want the frame to appear and choose Insert > Timeline > Frame, or press F5. A white rectangle appears in the cell.

To insert a series of frames, select the cell in which you want the series to end. (Flash will assume that you want the series to begin in the cell immediately following the most recent keyframe.) When you choose Insert > Timeline > Frame or press F5, a white rectangle appears in the last cell in the series. The intermediate frames don’t contain white rectangles, but the dividing lines between the cells disappear; the absence of dividing lines is what allows you to distinguish a series of frames from a series of empty cells.

Note that you can’t have empty cells in the middle of a movie. If you insert a keyframe, skip a bunch of cells, and then insert another keyframe, Flash automatically fills the intervening cells with a series of regular frames.

Note also that there may be different things happening on different layers. When the playhead reaches any given point in the Timeline—let’s say it’s frame 12—Flash looks at the entire column of cells and follows the instructions on each layer. For example, if frame 12 on Layer 1 is a keyframe, Flash will replace whatever was previously on that layer with whatever is new in that keyframe. If frame 12 on Layer 2 is a regular frame, Flash will continue to display whatever was in the previous keyframe in that layer. If frame 12 on Layer 3 is a blank keyframe, Flash will clear whatever was previously on that layer. All of these changes happen simultaneously when the playhead reaches a given frame, regardless of how few or how many layers there are.

Setting the Frame Rate

Every Flash movie has a frame rate, a measurement of how quickly the playhead moves through the Timeline. Frame rates are expressed in frames per second, usually abbreviated as fps. Flash permits frame rates ranging from 120 fps (the fastest) to 0.01 fps (the slowest), which is equivalent to 100 seconds per frame. For comparison, the standard frame rate for a theatrical film is 24 fps.

A movie’s frame rate is displayed on the horizontal strip at the bottom of the Timeline (Figure 31a). The default frame rate is 12 fps, but you can change it by double-clicking the frame-rate display or by choosing Modify > Document.

Figure 31a. The frame rate of your movie is displayed here.

The smoothness of animation increases as the frame rate increases. For example, let’s say the process of opening a door takes 1 second. You might animate the door opening in 10 frames at 10 fps, or you might animate it in 30 frames at 30 fps. Both animations would have a duration of 1 second, but the latter would be much smoother, because there would be less movement in each frame (Figure 31b).

Figure 31b. If both of these sequences are played in the same amount of time, the bottom one will have a higher frame rate and thus will look smoother. If both sequences are played at the same frame rate, they’ll look equally smooth, but the bottom one will have a longer duration.

A higher frame rate requires a larger SWF file (since more information has to be stored in the file), and it also puts more of a demand on the computer’s processor. You’ll often want to use a lower frame rate to gain efficiency at the expense of smoothness. If you’re doing frame-by-frame animation (see #32), a lower frame rate also requires less work from you.

Keep in mind that the frame rate you set for a movie is only a target. For example, it’s unlikely that a typical computer can play a movie at 120 fps. The lower you set the frame rate, the more likely it is that any given user will be able to see the movie as you intended. A frame rate of 12 fps is generally considered the minimum for acceptably smooth motion; most animation on the Web has a frame rate of about 15 fps.

When you set a frame rate, you set it for the entire movie; if you change it, you change it for the entire movie. You can’t start a movie with one frame rate and end it with another—at least not without some tricky ActionScript. If you want to slow down a particular sequence in your movie, the optimal solution isn’t to lower the frame rate, but to add more frames to the sequence.

Animating Frame by Frame

As you’ll see in #36 and #38, Flash can automate mechanical kinds of motion through a process called tweening. But animation is most interesting when its motion isn’t mechanical—when characters express their personality through the way they move (Figure 32a). To achieve that sort of expressive movement, you have to animate your characters one frame at a time. The basic procedure for frame-by-frame animation is short and simple:

1. In the Timeline, select the cell in which you want the animation to begin.

2. Press F7 to insert a blank keyframe.

3. Draw the first frame of animation on the Stage.

4. Press F6. Flash inserts a new keyframe immediately after the first one and copies the contents of the first into the new keyframe.

5. Modify the drawing on the Stage to represent the next incremental movement.

6. Repeat steps 4 and 5 as many times as necessary.

Figure 32a. A character’s idiosyncratic way of moving can be captured only by drawing it frame by frame.

Naturally, elements that stay the same from one frame to the next don’t have to be redrawn in each new keyframe. Instead, put them on a separate layer in the Timeline (Figure 32b).

Figure 32b. Because the drawing in each frame is slightly different from the previous one, frame-by-frame animation appears in the Timeline as a series of keyframes. Static background images should be put on a separate layer.

Each time you draw a new frame of animation, you’ll want to make sure it flows smoothly from the frames that precede it. To do this, you can grab the pink rectangle at the top of the playhead and drag it back and forth through the Timeline at varying rates of speed—a procedure called scrubbing. As you scrub, the corresponding frames of animation play back on the Stage. Scrubbing often reveals slight glitches in the animation that you can then fix.

Once you have enough keyframes placed, you’ll want to preview the animation at its proper frame rate, in any of these ways:

• Press Enter (Windows) or Return (Mac) to start the playhead moving through the Timeline. Press the same key to stop it. To move the playhead back to the beginning of the Timeline, press Control-Alt-R (Windows) or Command-Option-R (Mac).

• Make the Controller panel visible by choosing Window > Toolbars > Controller. The Controller offers a standard set of buttons for playing, stopping, and rewinding the movie.

• Use the menu commands Control > Play, Control > Rewind, and Control > Go to End.

In none of these cases do you have to stop the playhead manually. As soon as the playhead passes through all the frames and encounters empty cells, it knows it’s at the end of the movie, and it stops on its own.

You can also generate a sample SWF file to test your movie (see #35).

Onion Skinning

Even the most experienced animators often need help in creating smooth motion. The help in this case is a technique called onion skinning, which lets you draw each new frame of animation directly on top of images of previous frames. (The images are dimmed—more so for the earlier ones—to make it possible to draw over them without getting confused about what’s new and what’s old.)

To use this feature:

1. Move the playhead to the keyframe in which you want to make a new drawing.

2. Click the Onion Skin icon to turn onion skinning on. The playhead is now bracketed by two markers—Start Onion Skin and End Onion Skin—with a dark gray area between them (Figure 33a).

Figure 33a. The onion skinning controls are above and below the Timeline.

By default, the Start Onion Skin marker is two frames behind the playhead, and the End Onion Skin marker is two frames after the playhead. (If there are fewer than two frames available in either direction, the markers move in toward the playhead as necessary.) To see more or fewer frames, slide the markers.

The frames bracketed by the markers are visible on the Stage, with increasing degrees of dimness depending on their distance from the playhead (Figure 33b).

Figure 33b. This is how the Stage looks when onion skinning is turned on. The black stroke in the center is what’s in the current frame. The dimmer strokes indicate what’s in the two frames before and the two frames after.

3. Create or modify the drawing in the current keyframe, using the dimmed images for reference.

4. Press F6 to insert a new keyframe, or move the playhead to another keyframe. The Start Onion Skin and End Onion Skin markers move with it, keeping the same distance from the playhead.

5. Repeat steps 3 and 4 as many times as necessary. When you’re finished, click the Onion Skin marker again to turn off the feature.

Here are some variations:

• To see just the paths in the onion-skinned frames, without strokes and fills, click the Onion Skin Outlines icon.

• If you want the ability to edit all the frames between the markers—not just the one that the playhead is positioned on—click the Edit Multiple Frames icon.

• To change the behavior of the markers—for example, to keep them visible even when onion skinning is turned off—click the Modify Onion Markers icon and choose one of the listed options.

Editing in the Timeline

Once you’ve created and previewed an animated sequence, you’ll almost always decide to go back and modify it. You may want to make parts of it longer or shorter, change its position in the Timeline, add more action to it, or take some action away.

We won’t try to give you an exhaustive list of menu commands and keyboard shortcuts for editing; you can get that information from the Help menu. Instead, here are some general hints to help you deal with the less-intuitive aspects of working in the Timeline. (Note that any hints dealing with F6 apply to F7 as well.)

• If you want to insert a new keyframe between two existing keyframes, don’t select one of the keyframes and press F6. (All that happens is that the playhead moves to the next keyframe; there are no changes at all in the Timeline.) Instead, select the first of the two keyframes and press F5 to insert a regular frame after it. The second of the two keyframes, and everything beyond it, moves one frame to the right. Then select the newly inserted frame and press F6 to turn it from a regular frame to a keyframe.

• If you want to delete a selected keyframe, don’t choose Modify > Timeline > Clear Keyframe. That menu command and its keyboard shortcut, Shift-F6, will turn the keyframe into a regular frame instead of deleting it. Instead, choose Edit > Timeline > Remove Frames or press Shift-F5 to delete the selected keyframe.

• If you want to move a keyframe to another location in the Timeline, don’t try to click it and drag it in one motion. Although this technique works in most programs, it doesn’t work in the Flash Timeline—all you’ll end up doing is selecting a series of frames. Instead, click the keyframe to select it; release the mouse button; then click again to drag the keyframe.

• If you want to paste frames from one part of the Timeline to another, don’t use the standard Edit > Cut, Edit > Copy, and Edit > Paste menu commands or their keyboard shortcuts. Those commands work only for objects on the Stage, not for frames in the Timeline. Instead, use the special commands Edit > Timeline > Cut Frames, Edit > Timeline > Copy Frames, and Edit > Timeline > Paste Frames.

• If you have a series of regular frames at the end of your movie and you want to extend the series farther into the Timeline, don’t select the last frame in the series and drag it; if you do, Flash may insert a keyframe after it. Instead, click the cell where you want the series to end and press F5. The series of frames will extend to meet the cell you selected.

• Similarly, if you want to shorten a series of regular frames (that is, have it end sooner), don’t select the last frame in the series and drag it backward. Instead, find the frame that you want to end the series, click the frame immediately following it, and Shift-click the current last frame in the series. Then choose Edit > Timeline > Remove Frames, or press Shift-F5, to delete the selected frames.

• To extend a portion of a movie and keep all of its layers in sync, select a block of frames by clicking the frame at the upper-left corner and Shift-clicking the frame at the lower-right corner (Figure 34). Then drag the whole block of frames at once.

Figure 34. You can select a block of frames across multiple layers.

Testing the Movie

In #32, you learned several ways to preview your movie in Flash. All of these techniques have a drawback, however: They don’t show you what the users’ experience will be when they watch your movie. When you watch the movie in the Flash authoring environment, it usually runs more slowly than it would outside, because Flash has to do so many other things at the same time (such as animating the playhead as it moves across the Timeline). Also, you see things in the Flash environment that your users can’t see, such as where objects go when they leave the Stage.

In contrast, the people who see your movie most likely won’t even own Flash; they’ll be playing it in their Web browsers using the Flash Player plug-in. To see the movie the way your users will see it, you too will have to preview it in the Flash Player. There are two ways to do this—one is more convenient, the other is more authentic.

The more convenient way is to choose Control > Test Movie, or press Control-Enter (Windows) or Command-Return (Mac). Flash generates a SWF file and opens it in a separate window representing the Flash Player. It’s not really the Flash Player—it’s actually a Flash Player module that’s built into your Flash application—but it still gives you a reasonably good idea of what your users will see.

The more authentic way is to choose File > Publish Preview > Default. As with Test Movie, Flash generates a SWF file, but then it opens it in your computer’s default Web browser and plays it with the Flash Player plug-in. In this case, you’re seeing the same SWF file your users will see, under basically the same conditions.

Because the Test Movie command is so much quicker, you’ll probably want to use it when you’re first developing a movie. It’s only when you bring your movie into its final stages, and begin to refine and polish it, that the difference between Test Movie and Publish Preview becomes important.

Creating Shape Tweens

Thanks to a process called tweening, not all animation has to be drawn frame by frame. If you give Flash two keyframes—one showing the way an object looks at the start of a sequence, and the other showing what it looks like at the end—Flash can compare the keyframes, analyze all the differences between them, and gradually change one to the other by generating a series of in-between frames.

There are two kinds of tweens: shape and motion. Here and in #37 we’ll be concentrating on shape tweens, but much of how you handle shape tweens will also apply to motion tweens, which are covered in #38.

These are the basic steps for setting up a shape tween:

1. Draw an object on the Stage in an empty keyframe. Don’t group the object or convert it to a symbol. Shape tweens work only with editable paths, primitive shapes, or Drawing Objects.

2. Decide on a duration for the shape tween and calculate in which cell of the Timeline the last keyframe should fall. (For example, if your frame rate is 15 fps, and you want the tween to take 3 seconds, the last keyframe should be 45 frames after the first keyframe.) Select that cell.

3. Press F6. Flash fills the in-between cells with regular frames, creates a new keyframe in the selected cell, and copies the object from the preceding keyframe into it.

4. With the second keyframe still selected, modify the object. You can reshape it, move it to a different place on the Stage, transform it with the Free Transform tool, change its color or opacity, or do any combination of those things.

5. Select the first keyframe again. (This will also work if you select one of the intermediate frames, but selecting the first frame is recommended.)

6. In the Property inspector, choose Shape from the Tween menu (Figure 36a). The frames between the two keyframes turn green, and an arrow points from the first keyframe to the last. The arrow is your confirmation that you have a working shape tween.

Figure 36a. Choosing Shape from the Tween menu causes the two keyframes to be connected by a rightward-pointing arrow on a green background.

7. Scrub through or preview the movie. You’ll see that in each tweened frame, the object in the first keyframe incrementally takes on the characteristics of the object in the second keyframe (Figure 36b).

Figure 36b. Shape, location, transformation, color, and opacity can all be tweened at once.

Shape tweens can be wild or tame (Figure 36c). Wild shape tweens are fun to watch because of the interesting patterns they produce; tame shape tweens are better for more realistic types of movement.

Figure 36c. Figure 36b was an example of a tame shape tween; here is an example of a wild one.

If wild shape tweens are what you want, here are some things to try:

• Make the object in the first keyframe and the object in the second keyframe as different as possible. In fact, instead of pressing F6 in step 3, you can press F7, draw an entirely new object in the second keyframe, and then watch how Flash tweens one into the other.

• Have different numbers of objects in the two keyframes. This sort of tween is especially common with text—for example, morphing the word NO (two objects) into YES (three objects). Keep in mind, though, that if you want to shape-tween text, you first have to break it apart into editable paths (see #20).

If you prefer tame shape tweens—as most serious animators do—consider the following suggestions:

• Tween only one object per layer. Remember that Flash considers the stroke and the fill to be separate objects. If your path has both, move the stroke and the fill to different layers, and tween them separately but simultaneously (Figure 36d). Alternatively, you could use a Drawing Object, in which Flash considers the stroke and fill to be part of a single object.

Figure 36d. It’s fine to have several shape tweens happening simultaneously on different layers.

• Simplify each object as much as possible. The fewer anchor points there are, the smoother the tween will be.

• Use shape hints, which are explained in #37.

Using Shape Hints

Shape tweens are notoriously unpredictable. It may be clear to you what the most logical way is to morph one object into another, but that doesn’t mean it’s apparent to Flash. Even a simple transformation may take place in a way you don’t expect (Figure 37a).

Figure 37a. When a circle morphs into a square, we’d expect the four corners of the square to sprout directly from the circle. Instead, Flash rotates the circle as it becomes a square.

To help with this issue, Flash provides tools called shape hints. Shape hints always come in pairs: one to mark a point on a path in the first keyframe of a tween, the other to mark the corresponding point on the path in the second keyframe. You can use shape hints as follows:

1. Select the first keyframe of the tween.

2. Choose Modify > Shape > Add Shape Hint. A red circle with the letter a on it appears in the center of the object.

3. Drag the shape hint to the first point you want to mark—in this case, the upper-left edge of the circle. When you release the shape hint, you should see it snap into place (Figure 37b).

Figure 37b. Snap the first shape hint to the first object in the tween; then snap the second shape hint to a corresponding point on the second object.

If there’s no obvious snap, it means you may not have dragged the shape hint fully onto the path. Try dragging it and dropping it again.

4. Select the second keyframe of the tween. An identical red circle with the letter a on it is in the center of the object.

5. Drag this second shape hint to the point that corresponds to the point you marked in step 3—in this case, the upper-left corner of the square. Once again, let it snap into place.

If everything has been done correctly, this shape hint should turn from red to green, and the first shape hint should turn from red to yellow. If the shape hints are not yet yellow and green, repeat the drag-and-snap process until they are.

6. Preview the movie to see whether the shape tween now does what you want. In many cases it won’t; often one pair of shape hints is not enough (Figure 37c).

Figure 37c. Even after we add shape hints, Flash still doesn’t get it.

If necessary, repeat the process to add a second pair of shape hints (Figure 37d). Flash labels the second pair with the letter b, the third with c, and so on.

Figure 37d. When adding shape hints, work in a counterclockwise direction from the upper-left corner.

In the example of the circle morphing into the square, two pairs of shape hints is sufficient (Figure 37e). In other cases, more may be needed.

Figure 37e. Adding the second pair of shape hints solves the problem.

In general, if five or six pairs of shape hints don’t get you the result you want, it’s unlikely that adding more will help. In that case, you might consider deleting the shape tween and trying a new one with simpler paths.

Creating Motion Tweens

Creating motion tweens is very similar to creating shape tweens (see #36). Here are the significant differences:

• Motion tweens work only with groups, instances of symbols, and symbol-like objects such as bitmaps.

• Motion tweens can change an object’s location, transformation, color, and opacity, but they can’t morph one object into another as shape tweens can.

• Unlike a shape tween, which can include multiple objects in a single keyframe, a motion tween works with one object at a time. If you want to motion-tween several objects simultaneously, each must be tweened separately on a separate layer.

• Motion tweens can be controlled by motion guides (see #40); shape tweens can’t.

• Motion tweens are more predictable, more reliable, and less processor-intensive than shape tweens. If you have the option of using either a shape tween or a motion tween to achieve the same effect, use the motion tween.

Here are the usual steps for setting up a motion tween:

1. Place an instance of a symbol on the Stage in an empty keyframe.

2. Decide on a duration for the motion tween, and select the cell in which the last keyframe should fall.

3. Press F6. Flash fills the in-between cells with regular frames, creates a new keyframe in the selected cell, and copies the object from the preceding keyframe into it.

For a motion tween to work, the objects in both keyframes must be instances of the same symbol.

4. With the second keyframe still selected, modify the object. You can move it to a different place on the Stage, transform it with the Free Transform tool, change its color or opacity, or do any combination of those things.

To change the object’s color or opacity, use the Color Styles menu (see #25). Changing color by means of swatches or the Color panel doesn’t work with motion tweens.

5. Select the first keyframe again. As with shape tweens, the process will work if you select one of the intermediate frames, but selecting the first frame is recommended.

6. In the Property inspector, choose Motion from the Tween menu. The frames between the two keyframes turn blue (not green, as with a shape tween), and an arrow points from the first keyframe to the last.

7. Scrub through or preview the movie to see the motion tween in action.

Troubleshooting Broken Tweens

Every so often when you create a tween, the Timeline fails to display the confirming arrow on a green or blue background; it displays a dashed line instead (Figure 39a). The dashed line indicates that there’s something wrong with the tween. Although Flash notifies you that the tween is broken, it won’t tell you why. Diagnosing and fixing the problem is left to you.

Figure 39a. This dashed line indicates that a tween is broken.

Here are some common causes of broken tweens:

• You’ve tried to shape-tween groups or symbols, or you’ve tried to motion-tween editable paths.

• The beginning or ending keyframe of the tween is empty.

• In a motion tween, the object in the first keyframe and the object in the last keyframe are different.

• You’ve tried to motion-tween more than one object on a single layer.

The last of these causes is often the most frustrating, because it’s not always obvious. At some point, without realizing it, you may have made a stray mark with the Pencil tool or failed to erase a path fully, leaving a tiny, unnoticeable object on the Stage. If such an object is hiding out in the first or last keyframe of a motion tween, the tween will fail, and you may never figure out why.

If you suspect that a barely visible object is what’s breaking your tween, here’s an easy way to solve the problem:

1. Move the playhead to the first keyframe of the tween.

2. On the Stage, select the object that’s being tweened.

3. Choose Edit > Cut. The tweened object disappears.

4. In the Timeline, look at the color of the circle in the keyframe. If it’s white, then the object you just cut was the only object in the keyframe. You can skip to step 7. But if the circle is black, it means that the keyframe isn’t empty, and that there must be something else occupying the keyframe.

5. Click the keyframe in the Timeline to select all the objects in the keyframe.

6. Press Delete to clear the unwanted objects out of the keyframe. The circle in the keyframe turns white, indicating that the keyframe is empty.

7. Choose Edit > Paste in Place to return the original tweened object to the Stage.

8. Look at the tween in the Timeline. If the dashed line has been replaced by an arrow, you’ve solved the problem. If not, go to the last keyframe of the tween and follow steps 2 through 7 again.

Using Motion Guides

When you tween an object from one location on the Stage to another, the tweened object moves in a straight line. If you want the object to follow a more interesting path, you can use a motion guide to steer it.

To create a motion guide:

1. Motion-tween an object from one point to another. (Motion guides don’t work with shape tweens.) It doesn’t matter where the object starts and ends; you’ll adjust that later.

2. Select the layer in the Timeline that contains the tweened object, and click the Add Motion Guide icon (Figure 40a). A new layer appears, with the layer you selected indented beneath it.

Figure 40a. The Timeline looks like this when it contains a guide layer.

The new layer’s icon indicates that it’s a specialized type of layer called a guide layer. The layer containing your tweened object has become a guided layer.

3. Select the empty keyframe at the beginning of the guide layer.

4. On the Stage, draw the path you’d like the tweened object to follow. You can draw it with any tool, but the Pencil or Pen is recommended.

5. Drag the tweened object to one end of the motion guide and snap it to the guide (Figure 40b).

Figure 40b. The registration point of a symbol instance is marked with a white circle. Grab the instance by that circle, and drop the circle precisely onto the motion guide.

The snapping maneuver is tricky. Try to drag the object by its registration point and drop it a short distance inward from the beginning of the path.

6. Drag the playhead to the last keyframe of the tween and snap the object to the other end of the motion guide.

7. Scrub through or preview the movie. Instead of traveling in a straight line, the tweened object should follow the motion guide. If it doesn’t, try repeating steps 5 and 6 a few more times.

8. By default, the tweened object maintains the same orientation no matter where it moves along the path. If you’d prefer that the object vary its orientation, always staying perpendicular to the portion of the path it’s on, select Orient to Path in the Property inspector.

Masking

A mask is something that hides one part of an object and exposes another part of the object. Creating a mask is simple:

1. Place the object to be masked on one layer, and the object that will act as a mask on the layer just above it.

The mask can be a path, a Drawing Object, a group, an instance of a symbol, a block of text, or just about anything else. Its stroke and fill colors don’t matter (Figure 41a).

Figure 41a. Top, a mask (the text) and an object to be masked. Below, the same objects after the Mask command has been applied.

2. Right-click (Windows) or Control-click (Mac) the name of the layer containing the mask, and select Mask from the contextual menu.

Flash converts the upper layer into a mask layer and the lower layer into a masked layer. The object on the Stage appears masked.

A mask on its own is no big deal. What makes masks interesting is that you can animate the mask, the masked object, or both, thereby achieving complex effects quickly (Figure 41b).

Figure 41b. The bubbles in the water are shape-tweened paths; the laboratory flask is a motion-tweened instance of a symbol. The animated flask is used to mask the animated water, allowing the water level to stay the same no matter which way the flask is tilted.

It’s possible to have one mask layer affect multiple masked layers. If there’s a layer that you want to put under the control of an existing mask, drag and drop it between a mask layer and a masked layer in the Timeline (Figure 41c). The masked layers can be arranged in any order, so long as the mask layer is above them all.

Figure 41c. In this Timeline, one mask layer is affecting two masked layers.

Copying and Pasting Motion

It’s always been possible to copy and paste animation from one part of the Timeline to another. One of the new features in Flash CS3 goes a step beyond that: It allows you to copy animation from one object and apply it to another.

Let’s say, for example, that you’re animating three different cars, each one starting from a different place on the Stage. You want each car to go straight, make a left, make a right, and roll over. In previous versions of Flash, there was no easy way to do this without using ActionScript, but in Flash CS3 it can be done in a few seconds:

1. Create graphic symbols for all three cars and put each one in its proper place on the Stage.

2. Motion-tween the first car.

3. Select the first car on the Stage and choose Edit > Timeline > Copy Motion.

4. Select the second car on the Stage and choose Edit > Timeline > Paste Motion.

5. Repeat step 4 for the third car.

When you copy animation from one object and paste it to another, the motion is relative to the object, not to the Stage. As a result, each car can execute the same set of maneuvers in completely different locations.

There are a couple of potential problems that you’ll need to be alert for. Imagine that the second and third cars are both in the same keyframe on the same layer. That’s fine, so long as they’re standing still. But as soon as you paste the first car’s motion to the second car, you’ve turned the second car into a motion-tweened object; as you’ll remember from #38, a motion-tweened object has to be on a layer of its own. So you’d have to move the second and third cars to separate layers before you could paste motion to them.

Similarly, suppose the first car’s animation has a duration of 100 frames, but the second and third cars are in the movie for only 50 frames. When you paste the first car’s motion to the second car, Flash will automatically lengthen the second car’s span by 50 frames. If there’s any action in the Timeline that’s later in the same layer, that action will be delayed by 50 frames, possibly losing coordination with the action in the other layers (Figure 42a).

Figure 42a. These two views of the Timeline show what happens when motion from Symbol 1 is pasted to Symbol 2.

Putting Animation Inside Symbols

Whenever you’re in symbol-editing mode, you might notice that all of the information in the Timeline disappears. That’s because when you edit a symbol, you stop seeing your movie’s Timeline and start seeing that symbol’s timeline. Every symbol in Flash has its own internal timeline. (As you saw in #27, the one inside button symbols is greatly simplified, but it’s a timeline nonetheless.)

The significance of symbol-specific timelines is that they allow you to put animation inside a symbol. Because instances of symbols appear in a movie’s Timeline, and because instances of other symbols may appear in a symbol’s timeline, it’s possible (and actually common) to have several different levels of animation going on at once.

For example, suppose you want to animate a person running across the Stage. If you had to do this frame by frame, it would take you forever, but the use of animated symbols streamlines the process.

Here’s all you’d have to do:

1. Create a new movie-clip symbol and give it a descriptive name such as m_running.

2. Go into symbol-editing mode and animate the running person within m_running’s timeline (not in the movie’s Timeline).

You need only animate one cycle (that is, left foot forward and right foot forward). Make the cycle smooth enough that it can loop repeatedly without it being apparent where the cycle begins and ends (Figure 43a).

Figure 43a. This frame-by-frame animation was created inside a movie-clip symbol.

3. Drag an instance of m_running onto the movie’s Stage.

4. Motion-tween the instance to make it travel across the Stage.

5. Test or preview the movie. You’ll see two levels of animation going on at once: the animation within the symbol of the person running in place, and the animation outside the symbol of the running person moving across the Stage (Figure 43b).

Figure 43b. As this person runs across the Stage, two levels of animation are going on at once.

Placing animation inside symbols is powerful and convenient, especially if you’re creating an interactive movie in which the action is different every time. The Timeline for many interactive movies is only one frame long, because all of the movie’s possible animation is contained within the symbols in the Library.

Working with Scenes

Scenes are a prominent part of the Flash interface. There’s a Scene panel; there’s an Edit Scene menu (identified by a clapper board icon) right above the Timeline; and whenever you’re in group- or symbol-editing mode, you follow the breadcrumb trail back to Scene 1. Naturally, you probably want to know what scenes are and how to use them.

There’s one catch: Nobody uses scenes anymore. Even Adobe recommends that you not use them.

The original idea was that scenes would be a convenient way to organize the Timeline. If you were working with a long movie, you wouldn’t have to scroll through thousands of frames; you could just divide the movie into short, manageable scenes. The default, when you opened a new document in Flash, was Scene 1; you then had the option of adding Scene 2, Scene 3, and so on. When you played the movie’s SWF file, Flash would concatenate the scenes into a single movie, in numerical order. (If you wanted to, you could even give the scenes descriptive names and rearrange their order; that’s what the Scene panel is for.)

There are, however, several drawbacks to using scenes:

• No matter how efficiently you divide your movie into scenes, they still add up to one very long SWF file. Anyone who accesses your movie from the Web has to download that large file, even if they don’t intend to watch the whole movie.

• Scenes are confusing in collaborative environments. If you give someone a FLA file to edit, and it’s divided into scenes, that person has no way of getting a bird’s-eye view of the structure and organization of your movie. Instead of setting the Timeline’s cell size to Tiny and seeing most or all of the Timeline at once, the person has to go through the movie scene by scene.

• People tend to write their ActionScript scripts as if the current scene is the entire movie, introducing coding errors that are sometimes difficult to debug. In theory, ActionScript works fine with scenes, but keeping track of scene names and numbers adds an unnecessary level of complexity to scripts.

A good alternative to using scenes is to structure your movie as a series of short, individual FLA files. With a line of simple ActionScript, you can instruct each movie to start playing the next one when it ends, so the end result looks the same to the user. But the user gets to download several small SWF files instead of one large one. In fact, you could post individual links to each file in the series, so users need only download the parts of your movie that they want to see.

A collection of FLA files doesn’t solve the problem of working in a collaborative environment, where what’s in each FLA file is no more apparent than what’s in each scene. However, you can have several FLA files open and visible at the same time. With a single FLA file, you can only see one scene at a time.