Creating a Bouncing Ball with Shape Tweening

Although shape tweens can animate changes in many properties of graphicscolor, size, locationthe distinguishing function of shape tweening is to transform one shape into another. You could use a shape tween to replicate the simple bouncing-ball animation you created in Chapters 8 and 9, but the beauty of shape tweening is that it lets you change the shape of the ball. A better use of shape tweening for a bouncing ball is to flatten the ball as it strikes the ground.

To define shape tweens via the Frame Properties tab of the Property inspector

In a new Flash document, or in a new layer of an existing document, position the playhead in frame 1.

In the Tools panel, choose the oval tool.

Set the stroke to No Color.

Near the top of the Stage, draw a circle.

This circle will be the ball. Make it fairly large.

In the Timeline, select frame 5, and choose Insert > Timeline > Keyframe.

The Insert > Timeline > Keyframe command makes a new keyframe that duplicates the contents of the preceding keyframe.

Select frame 10, and choose Insert > Timeline > Keyframe.

Drawing-Objects and Shape Tweening

In the previous chapter, you learned that you can use drawing-objects to make motion tweens. That's because they fulfill the motion-tween requirement that shapes be isolated in a container and unable to interact with other shapes on the same layer. However, drawing-objects are also editable directly on the Stage. You can change their shape without drilling down to the individual merge-shapes. This makes them flexible enough to work in shape tweens as well. Drawing-objects are the only type of objects that can be used with either tweening method.

In frame 5, select the ball, and drag it to the bottom of the Stage.

Now you have the keyframes necessary to make a simple bouncing ball like the one in the motion-tween task. In frame 1, the ball is at the top of its bounce; in frame 5, the ball is at the bottom of its bounce; and in frame 10, the ball is back up at the top.

Use the drawing tools to reshape the oval in frame 5, flattening the bottom and elongating it a bit sideways (Figure 10.1).

Figure 10.1. Changing the shape of the ball graphic in the keyframe representing the bottom of the bounce makes the movement appear more natural. The ball seems to respond to gravity by flattening on contact with something solidsay, the floor. (Turn on onion skinning to see the beginning and ending keyframes.)

By changing the shape at the bottom of the bounce, you make it look like the ball really contacts something solid, such as a floor.

To define the shape tween for the first half of the ball's bounce, in the Timeline, select any of the frames in the first keyframe span (1, 2, 3, or 4).

Note that the ball is selected automatically. When you define a shape tween, the element to be tweened must be selected.

10.

In the Frame Properties tab of the Property inspector, from the Tween pop-up menu, choose Shape.

The settings for the shape tween appear (Figure 10.2).

Figure 10.2. When you choose Shape from the Tween pop-up menu, the Frame Properties tab of the Property inspector displays the shape-tween settings.

Flash creates a shape tween in frames 14 and color-codes those frames in the Timeline. With Tinted Frames active (choose it from the Frame View pop-up menu at the end of the Edit Bar), Flash applies a light green shade to the frames containing a shape tween. If Tinted Frames is inactive, the frames are white (Mac) or patterned (Windows), but Flash changes the arrow that indicates the presence of a tween from black to green.

11.

In the Ease field, do one of the following:

To make the bounce start slowly and speed up, enter a negative value.
To make the bounce start quickly and slow down, enter a positive value.
To keep the bounce constant, enter 0.

12.

From the Blend menu, choose either of the following options:

To preserve sharp corners and straight lines as one shape transforms into another, choose Angular.
To smooth out the in-between shapes, choose Distributive.

13.

To define the shape tween for the second half of the ball's bounce, in the Timeline, select any of the frames in the second keyframe span (5, 6, 7, 8, or 9).

14.

Repeat steps 1012.

Flash creates the second half of the ball's bounce with another shape tween (Figure 10.3).

Figure 10.3. With onion skinning turned on, you can see the in-between frames Flash creates for the shape tween. This animation looks similar to the bouncing ball created with a motion tween. In this case, the change in the object's shape creates the illusion of impact.

Tips

Flash doesn't prevent you from defining shape tweens for frames that contain grouped shapes or symbols, but those tweens won't work. Flash does warn you by placing the broken-tween dotted line in the relevant frames in the Timeline. When you select such frames, a warning button appears in the Frame Properties tab of the Property inspector (Figure 10.4). When you see these warnings, go back to the Stage and reevaluate what's there. If the item you want to tween is a group or symbol, you can use motion tweening. Or, to use shape tweening, you can break the group or symbol apart (select the shape or symbol, and then choose Modify > Break Apart). If there's a symbol or group on the same layer as the editable shape you want to tween, move the extra item to its own layer (select it and choose Modify > Timeline > Distribute to Layers).

Figure 10.4. A warning button appears in the Frame Properties tab of the Property inspector when there are groups or symbols in frames you're defining as shape tweens (top). Click the exclamation-sign button to see the warning dialog (bottom).
Note that Flash Professional 8's custom-easing settings aren't available for shape tweens; they're strictly for motion tweens.

Shape-Tween Requirements

To have a working shape tween, you need three things: a beginning keyframe containing one or more editable shapes (they can be merge-shapes or drawing-objects), in-between frames defined as shape tweens, and an ending keyframe containing the new editable shape.

For motion tweens, the Create Motion Tween command can help you combine those ingredients correctly. No equivalent command is available for shape tweens. You must create all shape tweens manually by creating the beginning and ending keyframes and then setting the keyframe span's Tween property to Shape in the Frame Properties tab of the Property inspector.

Motion Tweening or Shape Tweening?

The key to deciding whether to use motion tweening or shape tweening is to ask yourself whether you need to change the outline (shape) of the graphic-object you're animating. If the answer is yes, then you need shape tweening. If you are animating a change to a property of the graphic-object (its location on the Stage, its color, its size, or rotation), Flash can make the change with motion tweening.

Another important distinction between motion tweening and shape tweening is that motion tweening requires that shapes be in some kind of container (drawing-objects, groups, symbols, and text boxes all qualify), whereas shape tweening requires shapes whose outlines can be modified directly on the Stage (merge-shapes and drawing-objects qualify). Note that drawing-objects qualify for both types of tweens; pay attention when applying the tween property to a keyframe span containing a drawing-object to make sure you create the animation style you intend.

Although you can sometimes arrive at the same tweening effect with either a motion tween or a shape tween, it's best to reserve shape tweens for the shape-changing animations that you can't achieve with motion tweens.

Motion tweens don't work if you apply them to a layer containing more than one graphic-object. If you want to tween a multipart graphicsay, a robot constructed of many shapesyou can place each shape on a separate layer and tween the shapes separately, or you can unify the shapes by turning them into a symbol or group. Symbols and groups can only be tweened with motion tweening. To create morphing effectstransforming a pumpkin into a magic coach, for exampleyou must use shape tweening. In addition, if you want Flash to move a tweened graphic around the Stage along a curving path (as opposed to a straight line), you must use motion tweening.