Back to the Timeline


As mentioned in the previous chapter, there are two types of tweens: the Shape tween, which was covered last chapter, and the Motion tween.

Your First Motion Tween

Motion tweening works just like Shape tweening does, except it works with symbol instances instead of primitive shapes, and you have more control over it with the Custom Ease In/Ease Out window (covered in more detail later in this section).

Follow these steps to create a Motion tween:

1.

Create a new Flash document and save it as motionTween1.fla.

2.

Draw a circle on the left side of the stage, about 75x75 with a red fill color (0xff0000).

3.

Select both the stroke and fill of the circle and choose Modify, Convert to Symbol (F8).

4.

Give it a symbol name of circleMC, set its behavior to Movie Clip, and click OK.

5.

Back on the main timeline, select frame 20 and choose Insert, Timeline, Keyframe (F6).

6.

In frame 20, move the circle to the right side of the stage.

7.

Select frame 1, and in the Properties Inspector panel, select Motion from the Tween drop-down.

8.

You can test inside the authoring environment using the controller, or you can test the movie all together by going to Control, Test Movie (PCCtrl+Enter, MacOpen Apple+Enter).

You can go a step further thanks to a new tween editor in Flash 8.

The Tween Editor

The Custom Ease In/Ease Out window (or tween editor) is a new tool that enables you to control the easing of your Motion tweens. To launch it, select the first frame of your Motion tween; you will see an Edit button in the Properties Inspector, below the tween type drop-down. Click that, and the tween editor will appear, as shown in Figure 5.11.

Figure 5.11. The tween editor.


This panel enables you to control the easing of your Motion tween by adjusting the tween curve. Along the bottom of the curve are the frames, so you can see where in the tween your settings will take place. Also on the left of the tween curve, you will see the tween percentage.

You can select either of the two end handles, and a new handle will appear, allowing you to bend the curve. You can also add new handles anywhere on the curve as well to create different effects. You can adjust all the properties that are being tweened (position, rotation, transparency, and so on) or you can tween them individually by unselecting the Use One Setting for All Properties check box. Then the Property drop-down will become available. At any time during your tween customization, you can preview the tween by clicking the Play button at the bottom, or reset the tween by clicking the Reset button.

TIP

If you want a good starting point for creating your custom tween, use the tween slider first to get the basic tween you want, then open the tween editor. It will have the easing already calculated into the curve.


Now that you know how to create a Motion tween and how to customize the easing, it's time to move on to the real power of Motion tweeningnested animations.

Nested Animation

Because movie clips have their own independent timeline, you can embed movie clips in other movie clips and have them animate independent of one another.

Continuing from the previous example, follow these steps to see the capability of nested animations:

1.

Select the first frame in the main timeline.

2.

Select the circle Movie clip on the stage and choose Edit, Edit Symbol (PCCtrl+E, MacOpen Apple + E).

3.

While in Edit mode of the circle, select the circle shape on the stage and choose Modify, Convert to Symbol (F8).

4.

In the Convert to Symbol dialog box, set the symbol name to circle2MC and the behavior should already be set for Movie Clip. Then click OK.

5.

Still in Edit mode of the original symbol, select frame 20 of the timeline and choose Insert, Timeline, Keyframe (F6).

6.

While in frame 20, move the circle down near the bottom of the stage, but to roughly the same horizontal position.

7.

Still in Edit mode, go back to frame 1 and in the Properties Inspector, set the tween to Motion.

Test the movie again, and you will see this time that the circle moves diagonally from the top left to roughly the bottom right. This is because two animations are taking place at the same time. One animation is moving the circle down while the other is moving the circle to the right. It's true that this could have been done in a single tween, but you can still see the benefit of having nested animations.

So far, all of your animations have taken a very linear path, but sometimes you may want your animation to take a less-straight path. This is where Motion Guides come in handy.

Motion Guides

Motion Guides are a special type of layer that you can draw lines in to create a path for your animations. Because movie clips will snap to these Motion Guides, they will follow it throughout the tween. And even though you are drawing directly into the Motion Guide layer, it will not be visible at runtime.

Following is an example of creating and using a Motion Guide:

1.

Create a new Flash document and save it as motionTween2.fla.

2.

Rename layer 1 to animation.

3.

Draw a square in the upper left of the stage with 50x50 dimensions.

4.

Select the square, both stroke and fill, and choose Modify, Convert to Symbol.

5.

Give it a symbol name of squareMC, set the behavior to Movie Clip, set the registration to Center, and click OK.

6.

Select frame 20 of the main timeline and choose Insert, Timeline, Keyframe (F6).

7.

Create a Motion Guide layer by clicking the Add Motion guide button, as shown in Figure 5.12, and name it Path.

Figure 5.12. Motion guides help a great deal when moving objects in a curved manner.


8.

In the Motion Guide, draw a curved line, as in Figure 5.13, using the Pencil tool.

Figure 5.13. Use the Pencil tool to create your path in the Motion Guide.


9.

Select frame 20 of the Motion Guide and choose Insert, Timeline, Frame (F5).

10.

Select frame 1 of the Animation layer, and set the tween to Motion in the Properties Inspector panel.

11.

While still in frame 1 of the Animation layer, select the square Movie Clip and drag it onto the top left of the line in the Motion Guide until it snaps. (If it does not snap, make sure snapping is turned on.)

12.

Select frame 20 of the Animation layer, and drag the square Movie Clip until it snaps to the bottom right of the line in the Motion Guide.

You can test the movie now, and you will see that the square moves from the top left to the bottom right in a curved path. Plus, the Motion Guide is not visible. If you went back in and removed the Motion Guide, the square would then revert back and move in a straight fashion.

The final piece to add to this animation is a mask.

The Mask Layer

Masks are used to show only sections of masked layers. For example, suppose you have an image on one layer, and you want to display only a small section. You would draw a shape to define the area you want to display in its own layer. Then set that layer as a mask and make sure the layer with the image in it is set to be masked.

Continuing from the previous example, we will create a mask in the center of the stage, so the animation will be visible only when the square movie clip moves into the same area where the mask presides.

1.

Continuing from the previous example, return to the main timeline.

2.

Select the Motion Guide layer and click the Delete Layer icon. (Motion Guides and masks don't mix well.)

3.

Then select the Animation layer.

4.

Click the Add Layer button so it adds a layer right above the Animation layer. (If it adds the layer anywhere else, don't worry; just drag the layer so it is directly above the Animation layer and right below the Motion Guide.)

5.

Name this new layer mask.

6.

In the Mask layer, draw a large circle in the center of the stage, about 200x200 in size. The fill color does not matter as long as it has a fill.

7.

Right-click (MacCtrl+click) the Mask layer and select Mask.

Notice that Flash locks both the Mask layer and the Animation layer as well as puts new icons on the left side of the layer names, as shown in Figure 5.14. If the Animation layer is not affected, right-click (MacCtrl+click) it and select Properties to reveal the Layer Properties dialog box (see Figure 5.15) where you can select Masked to force the layer to be masked by the Mask layer.

Figure 5.14. When converting a layer to a mask, the changes are obvious.


Figure 5.15. The Layer Properties dialog box.


Test the movie and you will see the square animate the same as before, but it will be visible only as it moves through the mask.

You can also do masks dynamically, which is discussed later in Chapter 13, "The Move Clip Objects."




Macromedia Flash Professional 8 Unleashed
Macromedia Flash Professional 8 Unleashed
ISBN: 0672327619
EAN: 2147483647
Year: 2005
Pages: 319

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