Using Keyframes

A keyframe is a frame where you specify changes in the animation. In tweened animation, you create keyframes at important points in the timeline and let Flash create the frames in between. If the Timeline isn't visible, choose View > Timeline.

Keyframes appear as circles in a frame. A keyframe for a layer that contains no graphics is hollow.

In this example, you'll make the bird in the work area move from its current position to the red X.

1. Use the arrow tool to drag a selection border around the bird.

2. Choose Insert > Create Motion Tween.

In the BIRD layer, Flash draws a dotted line to indicate an incomplete motion tween. It also automatically made the bird into a symbol called Tween 1 that is listed in the Library window. When creating a motion tween, the image you tween must be a symbol or group.

Select frame 15 in the BIRD layer and drag the bird to the red X on the Stage. Flash automatically inserts a new keyframe and makes the dotted line solid.

Make sure there is no check mark next to Control > Play all Scenes. If there is, choose the command to change the setting.

Choose Control > Rewind and then Control > Play.

Tweening size and rotation

Aside from motion, you can use motion tweening to change the size of a group or symbol, or make it rotate. In this section you'll also learn about creating multiple keyframes.

Choose Control > Play to see the completed animation you will create in this section.

The pinwheel in the work area has already been converted to a symbol, so you can skip that step.

Select frame 60 in the Pinwheel layer and choose Insert > Keyframe.

Notice that selecting the frame also selects the content of that frame on the Stage. Thus, the change you make in the next step applies to the selected pinwheel.

Choose Window > Inspectors > Transform. Enter 200 for scale, 180 for rotation, and click Apply.

Select any frame between 41 and 60 in the Pinwheel layer and choose Insert > Create Motion Tween.

Select frame 41 in the Timeline and then choose Control > Play.

Now you'll use a shortcut to add another keyframe.

Position the pointer at frame 80 in the Pinwheel layer. Right-click (Windows) or Control-click (Macintosh) and choose Insert Keyframe from the context menu.

In the Transform Inspector, enter 100 for scale and click Apply.

Select any frame between 60 and 80 in the Pinwheel layer and choose Insert > Create Motion Tween.

Select frame 41 and choose Control > Play.

Using a motion path

At this point you probably can figure out how to make a symbol move in a complex path by defining several keyframes, but it's much simpler to use a motion path.

Choose Control > Play or press Return to see the animation you will create in this section.

The bee in the work area has already been made into a symbol.

Select the Bee layer and choose Insert > Motion Guide.

Select frame 21 in the Guide:Bee layer and choose Insert > Keyframe.

Use the pencil tool to draw a curving line from the flower to the hive.

In the Timeline, select frame 21 in the Bee layer.

Select the arrow tool and click the Snap modifier.

Move the bee so that its center point is over one end of the line. A black ring appears at the center point when it is locked to the motion guide.

Choose Insert > Create Motion Tween.

Select the last keyframe in the Bee layer and move the bee so that it snaps to the other end of the line.

Double-click frame 21 to open the Frame Properties dialog box. Click the Tweening tab, select Orient to Path Direction, and click OK.

Play the animation by pressing Return.

Tweening Color

When tweening changes in color, you use the Instance Properties dialogue box. Once open, you will have to move the dialog box to continue reading the steps.

Select the keyframe in frame 20 of the bird layer and choose Modify > Instance.

Click the Color Effect tab and choose Tint from the Color Effect pop-up menu.

Choose a color from the Color pop-up menu at the lower right.

Move the Tint Amount slider to 50% and then click OK.

Select any frame between 1 and 19 in the Bird layer and choose Insert > Create Motion Tween.

Rewind and play the animation to see the color tween.

Shape tweening

Shape tweening is similar to motion tweening but you use it to change the shape of an image over time. Unlike motion tweening, you must use ungrouped graphics to tween shapes. Flash cannot tween the shape of a group or a symbol.

The shape at right is an ungrouped graphic, just as you might draw with the pencil tool.

Select the keyframe in frame 20 of the Shape layer.

Use the arrow tool to deselect the shape and then change it.

Double click the first keyframe in the Shape layer to open the Frame Properties dialog box.

Click the Tweening tab and then choose Shape from the Tweening pop-up menu. You don't need to set any of the other options. Click OK.

Play the animation to see the shape change.

With Shape Hints you can more precisely control how a shape changes from start to finish. See "Using Shape Hints" in Flash Help.