Animating Multiple Motion Tweens


As you learned in Chapter 9, Flash can motion-tween only one item per layer. You can tween multiple items simultaneously; you just have to put each one on a separate layer. You can use Onion Skin and Edit Multiple Frame modes to make sure all the elements line up in the right place at the right time. To get a feel for tweening multiple items, try combining three simple motion tweens to create a game of Ping-Pong. One layer contains the ball; the other layers each contain a paddle.

To set up the three graphics in separate layers

1.

Open a new Flash document, and add two new layers.

2.

Rename the layers.

Name the top layer Ball, the next layer 1st Paddle, and the bottom layer 2nd Paddle. Naming the layers helps you keep track of the elements and their locations.

3.

Create the graphics.

On the Stage, in the Ball layer, use the oval tool to create a ball; in the layer named 1st Paddle, use the rectangle tool to create a paddle; and then copy the paddle and paste the copy into the layer named 2nd Paddle. Give each shape a different color. Your file should look something like Figure 11.10.

Figure 11.10. To have several graphics motion-tween simultaneously, you must place each one on a separate layer. Here, each item is on a separate layer. The descriptive layer names help you keep track of what goes where.


To set up the tween in all layers with one command

1.

Using the document you created in the preceding task, in the Timeline, select keyframe 1 in all three layers.

2.

Choose Insert > Timeline > Create Motion Tween.

Flash turns each shape into a symbol (naming the symbols Tween 1, Tween 2, and Tween 3) and gives all the frames the motion-tween property (Figure 11.11). It's a good idea to rename your tween symbols in the library.

Figure 11.11. By using the Create Motion Tween command with frames selected on all three layers (top), you create three motion tweens with one command. The Frame Properties tab of the Property inspector reveals their status as motion tweens (bottom).


3.

In the Timeline, select frame 20 in all three layers.

4.

Choose Insert > Timeline > Frame.

Flash extends the motion tween through frame 20 on all three layers. A dotted line across the frames indicates an incomplete motion tween. Reposition the symbols and create keyframes to complete the tweens (Figure 11.12).

Figure 11.12. Using the Create Motion Tween command in keyframe 1, sets the Tween property for all the frames that follow (to end the tween sequence, you must change that property). The added frames contain broken tweens; you must add keyframes and content.


Tips

  • The Create Motion Tween command helps you create symbols and set the tween property, but it has drawbacks: You have no control over the symbol's type or registration point. If you use the command a lot, the generic names can be difficult to deal with. Rename the symbols meaningfully.

  • You can create the graphics as symbols from the beginning, placing instances of each symbol in the appropriate layer in step 3 of the first task in this section. If you start with symbols, skip the Create Motion Tween command. In step 2 of the preceding task, set the Frame property to Motion in the Frame Properties tab of the Property inspector (see Chapter 9).


To adjust the positions of the tweened items

1.

Using the document you created in the preceding task, in the Timeline, position the playhead in frame 5.

2.

On the Stage, drag the ball to the approximate location where it should connect with one of the paddles for the first hit.

Flash makes Ball the active layer and creates a keyframe (in frame 5) for the ball in its new location (Figure 11.13). Flash completes the motion tween between keyframe 1 and keyframe 5 of the Ball layer and leaves the broken-tween line in all the other frames.

Figure 11.13. Moving a graphic in a frame that's defined as part of a motion tween causes Flash to make the layer containing the graphic the active layer (top). Flash creates a keyframe in that layer for the graphic's new position, completing one tween sequence (bottom).


3.

On the Stage, reposition the first paddle graphic so that the paddle connects with the ball for the first hit.

Flash makes 1st Paddle the active layer and creates a keyframe (in frame 5) for the paddle in its new location (Figure 11.14).

Figure 11.14. As you reposition the paddle (top), Flash appears to be selecting the wrong set of frames; but when you release the mouse button, Flash correctly tweens frames 14 (bottom).


4.

In the Timeline, position the playhead in frame 10.

5.

On the Stage, drag the ball to the approximate location where you want it to connect with a paddle for the second hit.

Flash makes Ball the active layer and creates a keyframe (in frame 10) for the ball in its new location. Flash completes the motion tween between keyframe 5 and keyframe 10 of the Ball layer.

6.

On the Stage, reposition the second paddle so that it connects with the ball for the second hit.

Flash makes 2nd Paddle the active layer and creates a keyframe (in frame 10) for the paddle in its new location (Figure 11.15).

Figure 11.15. Moving an element in another frame creates another tween. Here, the paddle on the right side appears to move more slowly than the paddle on the left side, because Flash is creating a 10-frame tween for the right paddle, whereas the left paddle tweens in 5 frames. (Here onion skinning is turned on to make the tweened shapes visible.)


7.

Repeat steps 16, creating keyframes 15 and 20, to make the ball connect with each paddle one more time.

8.

Play the movie to see the animation in action.

9.

Select Onion Skin Outlines and Edit Multiple Frames, and then reposition objects as necessary to fine-tune the motion (Figure 11.16).

Figure 11.16. Selecting Onion Skin Outlines and Edit Multiple Frames makes fine-tuning the location of objects easier. Here, the paddle on the right doesn't move in a straight line. If you want it to do so, reposition the paddle graphics in the first and final frames so that one lies directly above the other; and then reposition the ball so that it comes into contact with both paddles.


Although Edit Multiple Frames doesn't show onion skins for keyframes, it does show them for tween graphics.

Tips

  • After you define a set of frames as tweens, any slight change you make to an object causes Flash to create a new keyframe. Even clicking and holding more than a second or two causes Flash to insert a keyframe. So that you don't change objects' positions or create new keyframes accidentally, lock or hide the layers that you're not working on.

  • To position items on the Stage with greater precision than dragging allows, select an item and use the Properties tab of the Property inspector or the Info panel to set the item's x and y coordinates.

  • If you like to use Snap Align, Flash's default setting, to help you position items, you'll notice that sometimes in the preceding task, the snapping guides don't appear as you drag graphic elements in in-between frames whose Tween property is set to Motion. These guides work best when all objects involved are in keyframes. If the guides aren't appearing for you, drag items to approximate locations initially. Once Flash has created the new keyframes, you can drag your elements, and the guidelines will appear.


Tweening Text

You can use the multiplemotion tween idea to animate individual characters within a piece of text. After you create the text that you want to animate, select it and choose Modify > Break Apart. That command places each character in its own text box. Next, with each character of the text selected, choose Modify > Timeline > Distribute to Layers. Each character winds up on its own layer. Now use any of the animating techniques you learned in Chapters 8 and 9, or in earlier tasks in this chapter, to animate the individual text characters (Figure 11.17).

Figure 11.17. Using Flash's Modify > Break Apart command in conjunction with the Modify > Timeline > Distribute to Layers command, you can set up tweens quickly to animate individual text characters. Each letter in this animated text is a motion tween.


To transform the shapes of the letters, you need to use shape tweening. That means converting the letters from editable text elements to editable graphics. Select one or more text boxes containing individual letters, and choose Modify > Break Apart. The letterforms look the same, but now they're raw shapes that you can modify with the drawing tools and use in shape tweens. Shape tweening letters can get pretty complex. Remember to use shape hints (see Chapter 10) to help Flash make the transition between shapes correctly.





Macromedia Flash 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Flash 8 for Windows & Macintosh
ISBN: 0321349636
EAN: 2147483647
Year: 2005
Pages: 204

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net