
218
USING FLASH CS4 PROFESSIONAL
Timelines and Animation
Shape tweening
About shape tweens
In shape tweening, you draw a vector shape at one specific frame in the Timeline, and change that shape or draw
another shape at another specific frame. Flash then interpolates the intermediate shapes for the frames in between,
creating the animation of one shape morphing into another.
Shape tweens work best with simple shapes. Avoid shapes with cutouts or negative spaces in them. Experiment with
the shapes you want to use to determine the results. You can use shape hints to tell Flash which points on the beginning
shape should correspond to specific points on the end shape.
You can also tween the position and color of shapes within a shape tween.
To apply shape tweening to groups, instances, or bitmap images, break these elements apart.
To apply shape tweening to text, break the text apart twice to convert the text to objects.
Create a shape tween
The following steps show how to create a shape tween from frame 1 to frame 30 of the Timeline. However, you can
create tweens in any part of the Timeline that you choose.
1
In frame 1, draw a square with the Rectangle tool.
2
Select frame 30 of the same layer and add a blank keyframe by choosing Insert > Timeline > Blank Keyframe or
pressing F7.
3
On the Stage, draw a circle with the Oval tool in frame 30.
You should now have a keyframe in frame 1 with a square and a keyframe in frame 30 with a circle.
4
In the Timeline, select one of the frames in between the two keyframes in the layer containing the two shapes.
5
Choose Insert > Shape Tween.
Flash interpolates the shapes in all the frames between the two keyframes.
6
To preview the tween, scrub the playhead across the frames in the Timeline, or press the Enter key.
7
To tween motion in addition to shape, move the shape in frame 30 to a location on the Stage that is different from
the location of the shape in frame 1.
Preview the animation by pressing the Enter key.
8
To tween the color of the shape, make the shape in frame 1 a different color from the shape in frame 30.
9
To add easing to the tween, select one of the frames between the two keyframes and enter a value in the Ease field
in the Property inspector.
Enter a negative value to ease the beginning of the tween. Enter a positive value to ease the end of the tween.
Updated 5 March 2009