More Motion Tweens

On the last page, we saw how motion tweens can be used to move an object across the stage (in any direction), either in a line or following a drawn path. Motion tweening can also be used to:

Fade In (or Out)

To create a motion tween that fades a photograph (or any other object on stage) from 0% alpha (invisible) to 100% alpha, follow these steps:

1. In a new layer, import the photo (eg, flower_pink.jpg in the example below).
2. Convert it to a graphic symbol.
3. Move the start keyframe of the photo to wherever you want the fade to begin. To move a keyframe, choose the Select tool, click the keyframe once to select it, then click-drag to move it. Make an end keyframe further down the timeline (the sample below uses a frame rate of 15fps, and each photo fades in over 15 frames).
4. Click the starting keyframe and turn Motion Tween on in the Properties panel. Then click the photo in that frame and, in the Properties panel, click Color, choose Alpha and set it to 0%.

The steps above make one photo in one layer fade from 0 to 100% opacity. To add others, as in the example below, you can add more layers and repeat the steps above, staggering the start/end keyframes of each layer so they happen one after the other. You can open flowershow.fla in the class folder (link at right under Files) to see how that was done for the sample below.

Grow and/or Rotate

To get a graphic symbol to grow or shrink over a motion tween, just use the transform tool or Transform panel to resize the symbol in either the start or end keyframe of the motion tween. To get it to rotate, use the Properties panel instead. Click on the start frame of the motion tween, and choose CW or CCW from the Rotate dropdown box that appears once motion tween has been selected. You can set the number of times the object is to rotate over the duration of the tween in the 'times' box.

Change Color

You can apply a tint to a graphic symbol, in either the start keyframe or the end keyframe, or both. If the start and end keyframe have different tints, Flash will produce a smooth color transition between the two over the tween. Note: the tint will be applied to the entire symbol; there is no way to apply it to only part of the symbol. To do that, click on the symbol in either the start or endframe and, in the Properties panel, choose Tint from the Color dropdown box. Use the color and % boxes to apply a different tint. To produce a change in both color and transparency, you need to select Advanced under Color, and set each of the R,G,B, and alpha properties.