Building Complexity in Flash MX

This chapter is from the book

Macromedia Flash MX Advanced for Windows and Macintosh: Visual QuickPro Guide

Learn More Buy

This chapter is from the book

This chapter is from the book 

Macromedia Flash MX Advanced for Windows and Macintosh: Visual QuickPro Guide

Learn More Buy

The key to creating complex animations in Flash is building them from simpler parts. Just as the movement of a runner is essentially a collection of rotating limbs, you should think of your Flash project as being a collection of simpler motions. Isolating individual components of a much larger, complicated motion allows you to treat each component with the most appropriate technique, simplifies the tweening, and gives you better control with more refined results.

To animate a head that's turning quickly to face the camera, for example, you would first consider how to simplify the animation into separate motions. Animating the entire sequence at the same time would be difficult, if not impossible, because the many elements making up the head change in different ways as they move. The outline of the head could be a frame-by-frame animation to show the transformation from a profile to a frontal pose. Some of the features of the face could be symbol instances that you squash and stretch in a motion tween to match the turn of the head. And the hair could be a shape tween that lets you show its flow, swing, and slight bounce-back effect when the head stops.

Learning to combine different techniques and break animation into simpler parts not only solves difficult animation problems, but also forces you to use multiple layers and establish symbols of the component parts. By doing so, you set up the animation so that it is easy to manage now and revise later.

This chapter describes approaches to building complex animations through layering, combining, and extending basic Flash capabilities.

Motion-Tweening Strategies

Motion tweening lets you interpolate any of the instance properties of a symbol, such as its location, size, rotation, color, and transparency. Because of its versatility, motion tweening can be applied to a variety of animation problems, making it the foundation of most Flash projects. Because motion tween-ing deals with instance properties, it's a good idea to think of the technique in terms of instance tweening. Whether or not actual motion across the Stage is involved, changing instances between keyframes requires motion tweening. Thinking of it as instance tweening will help you distinguish when and where to use motion tweening as opposed to shape tweening or frame-by-frame animation.

Creating seamless animated loops

Animated loops are important because they provide a way to continue motion by defining only a few keyframes. You see animated loops in interface elements such as rotating buttons and scrolling menus, as well as in cyclical motions such as a person walking, a butterfly's wings flapping, or a planet revolving. The important point in making seamless loops is making sure that the last and first keyframes are identical (or nearly identical) so that the motion is continuous.

In this section, you consider ways of making two of the most common types of animated loops: scrolling graphics and graphics on closed motion paths.

Scrolling graphics are familiar effects in interface elements such as menu options that cycle across the screen. You can also use this technique to create background animations that loop endlessly, such as a field of stars behind a spaceship or passing scenery from a car window.

To create a continuous scrolling graphic:

1. Create the necessary elements that will scroll across the Stage, and place them as they would appear at any given moment (Figure 1.1).

   Figure 1.1 Five objects placed across the Stage as they would appear when they begin scrolling across from right to left. The objects could be buttons or simple graphics.

2. Select all the elements, and choose Modify > Group (Figure 1.2).

   Figure 1.2 Group the objects by choosing Modify > Group.

3. Copy the group, and paste the copy next to the original group to create a long band of repeating elements. If your elements scroll from right to left, for example, place the second group to the right of the first group (Figure 1.3). Your scrolling elements usually will be larger than the Stage, but if your first group is smaller, you'll need to duplicate it more than once to create a repeating pattern that extends beyond the Stage (Figure 1.4).

   Figure 1.3 Create a pattern by copying and pasting the group.

   Figure 1.4 This group has only two objects. Repeat the groups to extend well past the Stage.

4. Select all your groups, and convert your selection to a graphic symbol (Figure 1.5). An instance of the symbol remains on the Stage, allowing you to apply a motion tween.

   Figure 1.5 Create a graphic symbol of the entire pattern.

5. Create a keyframe at a later point in the Timeline.

6. Select the instance in the last keyframe, and move it so that the second repeated group of elements aligns with the first. When you move your instance, use its outlines to match its previous position (Figure 1.6).

   Figure 1.6 The second repeated group is moved where the first group was originally.

7. Apply a motion tween between the keyframes.

8. Insert a new keyframe just before the last keyframe, and remove the last frame (Figure 1.7). This technique makes the animation not have to play two identical frames (the first and the last) and creates a smooth loop.

   Figure 1.7 Create a new keyframe (top), and delete the last keyframe (bottom).

A motion path in a guide layer provides a way to create smooth movement along a path from the beginning point to the end point. If you make the end point of the path match the beginning point, you can create a seamless loop and effectively close the motion path.

To make a closed motion path:

1. Create a graphic symbol, and place an instance of it on the Stage (Figure 1.8).

   Figure 1.8 An instance of a graphic symbol is placed on the Stage for motion tweening along a path.

2. Create a guide layer by clicking the Add Motion Guide icon below your layers. A new guide layer appears, and your first layer becomes a guided layer (Figure 1.9).

   Figure 1.9 The guide layer above Layer 1 will contain the motion path.

3. Draw an empty ellipse in the guide layer.

4. With the Snap to Objects modifier for the arrow tool turned on, grab your instance by its registration point and place it on the path of the ellipse (Figure 1.10).

   Figure 1.10 The registration point of the earth instance snaps to the motion path.

5. Add frames to both layers, and create a new keyframe in the last frame of the guided layer. The first and last keyframes remain the same to create the animated loop (Figure 1.11).

   Figure 1.11 The position of the earth at keyframe 1 and at keyframe 18 in Layer 1 are the same.

6. Select the middle frame of the guided layer, and insert a new keyframe, moving your instance in this intermediate keyframe to the opposite side of the ellipse (Figure 1.12).

   Figure 1.12 The registration point of the earth in the middle keyframe is positioned at the far side of the ellipse.

7. Select all the frames between the three keyframes, and in the Property Inspector, choose Motion Tween. Your instance now travels along the path of the ellipse, but it returns on the same segment of the ellipse rather than making a complete circuit (Figure 1.13).

   Figure 1.13 The earth bounces back and forth on the same segment of the ellipse.

8. Grab the instance in the last keyframe of the guided layer, and move it slightly closer to the instance in the middle keyframe while maintaining its registration point on the path (Figure 1.14).

   Figure 1.14 The three keyframes of the earth. The first instance is closer to the middle instance on the top path of the ellipse, and the last instance is closer to the middle instance on the bottom path of the ellipse.

Flash tweens two instances by taking the most direct path, so by shortening the distance between the last two keyframes on the bottom segment of the ellipse, you force Flash to use that segment of the ellipse.

Your instance now travels along both sides of the ellipse (Figure 1.15).

Figure 1.15 The earth moves around the closed path.

TIP

You can accomplish the same kind of looping effect by deleting a small segment of your path. When you create a gap, you essentially make an open path with beginning and end points for your instance to follow (Figure 1.16).

Figure 1.16 A tiny gap provides beginning and end points for your motion path.

Using multiple guided layers

A single guide layer can affect more than one guided layer, letting multiple motion tweens follow the same path. This approach is good for creating complex animations that require many objects traveling in the same direction, such as marching soldiers, blood cells coursing through an artery, rapid gunfire, or a stampeding herd of cattle. Although the individual instances may vary slightly, you maintain control of their general direction with a single guide layer.

Several leaves blowing across the Stage could be animated to follow one guide layer, for example. The guide layer establishes the wind's general direction; the leaves could have slight individual variations by being offset in separate guided layers. Just by changing the path in the guide layer, you make all the leaves change accordingly. Using a single path to guide multiple layers this way is an example of how you build complex animations (in this case, swirling leaves) from very simple parts (one guide layer and one leaf symbol).

To assign a second guided layer to a guide layer:

• Select the first guided layer, and click the Insert Layer icon. A second guided layer appears above the first (Figure 1.17).

  Figure 1.17 Selecting the guided layer (Layer 1 above) and inserting a new layer automatically modifies the new layer as a guided layer (Layer 3).

  or

• Drag an existing normal layer below the guide layer. The normal layer becomes a guided layer (Figure 1.18).

  Figure 1.18 A normal layer (Layer 3) can be dragged below the guide layer to become a guided layer.

To offset a second guided layer:

1. Create the second guided layer as described earlier in this section, and drag in an instance that you want to tween (Figure 1.19).

   Figure 1.19 An instance on the Stage in the leaf 2 layer.

2. Select the instance in the second guided layer, and choose the Free Transform tool in the Toolbox. Control handles appears around your instance, along with a white circle in the center marking the current registration point (Figure 1.20).

   Figure 1.20 Select the instance in the second guided layer, and select the Free Transform tool in the Toolbox.

3. Drag the registration point to a new position. An instance's registration point can lie anywhere, even outside the boundaries of the Free Transform tool's control handles. The new registration point will be set where you just placed it (Figure 1.21).

   Figure 1.21 Change the registration point of your instance by moving the white circle.

4. Now select the Arrow tool to exit the Free Transform tool, and make sure that the Snap to Objects modifier is turned on.

5. Grab the instance by its new registration point, and attach it to the beginning of the guide-layer path (Figure 1.22).

   Figure 1.22 The registration point of the leaf, shown selected here, is attached to the path.

6. Insert a new keyframe into the last frame. The newly created instance in the last keyframe will have the same registration point as the edited instance.

7. Now attach the instance in the last keyframe to the end of the guide-layer path, and apply a motion tween between the two keyframes. The motion tween in the second guided layer follows the same path as the first guided layer. The new registration point of the instance in the second guided layer, however, offsets the motion (Figure 1.23).

   Figure 1.23 The two tweens follow the same motion path. The second leaf is offset because of its moved registration point.

To vary the timing of a second guided layer:

1. Continuing with the preceding example, drag the first keyframe of the second guided layer to a later point in time. The motion tween for that guided layer will begin after the first one starts, but both of the animations will end at the same time (Figure 1.24).

   Figure 1.24 The leaf in the leaf 2 layer follows the motion path only after the one in the leaf 1 layer has already started.

2. Drag the last keyframe of the first guided layer to an earlier point in time. The motion tweens following the path in the guide layer are staggered relative to each other (Figure 1.25).

   Figure 1.25 Move the last keyframe in the leaf 1 layer closer to the first keyframe.

3. Refine the timing of the motion tweens by moving the first and last keyframes in both guided layers.

You can increase complexity by using animated graphic symbol instances along the guide layer's motion path. Animated loops within graphic symbols provide localized motion that still follows the guide layer in the main Timeline.

To add local variations to multiple guided layers:

1. Enter symbol-editing mode for the graphic symbol you use on the motion path.

2. Select the contents of this symbol, and convert it to a graphic symbol. You create a graphic symbol within another graphic symbol, which allows you to create a motion tween within your first graphic symbol.

3. Create a looping motion tween (Figure 1.26). This type of animation ends where it begins.

   Figure 1.26 An animated graphic symbol of a leaf moving up and down.

4. Exit symbol-editing mode, and play the movie to see how the motion tween of the graphic symbol gets incorporated into the motion tween on the main Stage (Figure 1.27).

   Figure 1.27 Play the movie to see how the leaves follow the motion path while going through their own animation.

   TIP

   In the Property Inspector, adjust the play mode option and First parameter to vary how the animated graphic instances play (Figure 1.28). By having your loops begin with different frames, you prevent them from being synchronized with one another (Figure 1.29). Rotating your instances at this point can produce even more complex, interesting, and seemingly random movements. Experiment with rotating your instances as they travel along the motion path.

   Figure 1.28 The First parameter is set to 10 so that the leaf graphic will loop beginning with frame 10. The other play-mode options in the pull-down menu include Play Once and Single Frame.

   Figure 1.29 Three instances of the same graphic symbol with different first-frame play options. The left butterfly loops beginning with frame 1;its wings will start to close. The middle butterfly loops beginning with frame 4; its wings are already closed and will start to open. The right butterfly loops beginning with frame 10; its wings are opening.