- An Introduction to Tweening in Flash
- Creating a Bouncing Ball with Motion Tweening
- Create an Animation with Shape Tweening
- Creating a Bouncing Ball with Shape Tweening
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating a Bouncing Ball with Shape Tweening
To have a working shape tween, you need three things: a beginning keyframe containing one or more editable shapes, in-between frames defined as shape tweens, and an ending keyframe containing the new editable shape.
While the Create Motion Tween command helps you combine those ingredients correctly for motion tweens, there is no equivalent command for shape tweens. You must create all shape tweens manually by setting up the beginning and ending keyframes and then defining the in-between frames as shape tweens in the Frame Properties dialog box.
Although you'll mostly use shape tweens to transform one shape into another, let's 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 Properties dialog box:
-
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, select Frame 1.
-
In the Toolbar, select the oval tool; set Line Color to None.
-
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 previous keyframe.
-
Select Frame 10, and choose Insert > Keyframe.
-
In Frame 5, select the ball and drag it to the bottom of the Stage (Figure 7 ).
When you reposition an editable object, for the purposes of shape tweening Flash considers it a change in shape. Here you relocate the ball in the middle keyframe to create the bottom of the bounce.
You have just set up the keyframes necessary to make the same simple bouncing ball you made 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.
){kind=link}
-
To define the shape tween for the first half of the ball's bounce, access the Frame Properties dialog box in one of two ways:
In the Timeline, double-click Frame 1.
or
With Frame 1 selected, from the Modify menu, choose Frame.
-
In the Frame Properties dialog box, click the Tweening tab.
-
From the Tweening pop-up menu, choose Shape.
The parameters for shape tweening appear (Figure 8).
Choose Shape from the Tweening pop-up menu in the Frame Properties dialog box to create a shape tween.
-
Choose a Blend Type and enter an Easing value.
Blend Type lets you specify whether Flash retains sharp corners and straight lines as it transforms one shape into another. Choose Angular if you want to preserve them; choose Distributive to smooth out the in-between shapes.
The Easing parameter determines whether the transition happens at a constant rate (enter a value of 0), starts slowly and speeds up (enter a negative value), or starts quickly and slows down (enter a positive value).
-
Click OK.
Flash creates a shape tween between frames 1 and 5. Flash color-codes the frames in the Timeline to indicate the shape tween. With Tinted Frames active (select it from the Frame View pop-up menu at the end of the Timeline), 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 keyframe bullets and the arrow that indicates the presence of a tween from blue to green.
){kind=link}
-
To define the motion tween for the second half of the ball's bounce, in the Timeline, double-click Frame 5 or any of its associated in-between frames (Frames 6 through 9).
-
Repeat steps 9 through 12.
Flash creates the second half of the ball's bounce with another shape tween (Figure 9).
With onion skinning turned on, you can see the in-between frames Flash creates for the tween. In this case, since you only changed the position of the object, it looks just like the bouncing ball created with a motion tween.
){kind=link}
Tip
-
Flash doesn't prevent you from defining shape tweens for frames that contain grouped objects or symbols, but it does warn you that the tween will not work (Figure 10). When you see this warning, you need to go back to the Stage and reevaluate what's there. If the object you want to tween is a group or symbol, you could use motion tweening. Or you could break the group or symbol apart (select the object or symbol and choose Modify > Break Apart) to use shape tweening. If there's an extra object or symbol on the same layer as the editable shape you want to tween, move the editable shape to its own layer.
Flash warns you about the presence of groups or symbols on frames that you define as shape tweens.
){kind=link}