Macromedia Flash Professional 8 UNLEASHED [Electronic resources] نسخه متنی

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:

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.

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:

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:

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.

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.

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.Chapter 13, "The Move Clip Objects."