• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 10. Animation with Shape Tweenin... > Creating a Bouncing Ball with Shape ...

Creating a Bouncing Ball with Shape Tweening

Although shape tweens can animate changes in many properties of graphics—color, size, location—the distinguishing function of shape tweens is to transform one shape into another. In this chapter, however, you start by using a shape tween to create another simple bouncing-ball animation. This exercise demonstrates the similarity between the two types of tweens and shows how you can achieve the same result by using different tween commands.

To define shape tweens via the Frame Property Inspector:

Create a new Flash document, and name it something like Shape Tween Bounce.

Flash creates a document with one layer and a keyframe at Frame 1 by default.

In the Timeline, position the playhead in Frame 1.

In the Toolbox, 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 > Keyframe.

The Insert > Keyframe command makes a new keyframe that contains the same elements as the preceding keyframe.

Select Frame 10, and choose Insert > Keyframe.

In Frame 5, select the ball, and drag it to the bottom of the Stage (Figure 10.1).

Figure 10.1. When you reposition an editable graphic, for the purposes of shape tweening Flash considers the change in location to be a change in shape. In the middle keyframe of this figure, you relocate the ball to create the bottom of the bounce.

Now you have the keyframes necessary to make a simple bouncing ball like the one in the motion-tween exercise. 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.

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.

From the Frame Property Inspector’s Tween pop-up menu, choose Shape. The parameters for the shape tween appear (Figure 10.2).

Figure 10.2. Choosing Shape from the Tween pop-up menu in the Frame Property Inspector displays the shape-tween parameters.

Flash creates a shape tween in frames 1 through 4 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 info bar), Flash applies a light green shade to the frames containing a shape tween. If Tinted Frames is inactive, the frames are white, but Flash changes the arrow that indicates the presence of a tween from blue to green.

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.

From the Blend menu, choose one 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.

To define the motion 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).

Repeat steps 10 through 12.

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 tween. In this case, because you changed only the position of the object, it looks just like the bouncing ball created with a motion tween.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint