A shape tween morphs one shape into another. Circles become squares, blue letters become yellow buttons. A shape tween can change the shape or color of any vector object.

For a good example of shape tweening, check out:

http://www.nrg.be

What Shapes Can be Tweened?

For a shape tween to take place, the objects being tweened must not be symbols.

Until now, tweens required symbols. Shape tweening is opposite. You cant shape tween a symbol. Flash cannot shape tween groups, symbols, text blocks, or bitmap images. If you want to apply shape tweening to any of these objects, you must first break them down by clicking:

MODIFY-> BREAK APART

Breaking Apart Text

Before shape tweening text, it must be broken apart. If text has been converted into a symbol, it must be broken apart twice. The first breaking apart returns the text to its normal editable text state.

Applying a Shape Tween

To apply a shape tween, youll need two different keyframes, with two different objects.

1.      Select or add a keyframe.

2.      Draw or place an object.
Remember that the object can not be a symbol. You can break apart a symbol by clicking MODIFY-> BREAK APART

3.      Add another keyframe on the same layer.

4.      Change or replace the object on the second keyframe.

5.      Click the first keyframe in the animation sequence. On the Frame Panel, choose Shape Tween

A green-shaded arrow should join your keyframes.

Play your animation!

Controlling Shape Tweens With Shape Hints

When you set up a shape tween, you tell Flash what the first keyframe should look like and what the last keyframe should look like. Flash knows it has to get the animation from one shape to the other, but it doesnt know how to get there, so it tries to take the path of least resistance. Sometimes the object will try to fold over itself instead of doing what you want it to do. If this happens, you can add shape hints. A shape hint tells Flash where a specific place in the object should start and end during the animation. You can add as many shape hints as you like.

A ten-frame animation of a shape tweened triangle might look like:

Notice how the animation folds itself?

Well add a shape hint to keep the bottom left corner on the bottom.

To Add a Shape Hint

1.      Click the first frame in the animation sequence.

2.      Click MODIFY-> TRANSFORM-> ADD SHAPE HINT
The shape hint, labled "a" will pop into the middle of the object.

3.      Drag the shape hint to a place in the object.
Flash will pay attention to where you drag the shape hint. You are designating the area that you wish to control. Next, you will specify where you want that specific place on the shape top end up when the animation is finished. Shape hints work best if you place them in counterclockwise order beginning at the top left corner of the shape.

4.      Click the next keyframe in the animation sequence.
Youll notice that another shape tween labeled "a" is already waiting for you when you get there.

5.      Drag the shape hint. In step 3, we set the starting point for the lower left corner, now well need to set its ending point. In the following example, I dragged the shape hint into the corner.

Now the animation plays correctly!

Shape Tweening Tips

�.       Remember that shape tweening can not be performed on symbols.

�.       Shape tweening is very hard on the processor. Use it sparingly.

�.       The lower number of changes, the better.
Example:

Okay.

Not Okay.

The second example is not okay because the computer will have to tween four shapes (each letter) into one shape. The tween will work, but will be very hard on the processor.

�.       Shape tweening text is very hard on the processor.

�.       For complicated animations, break each object into separate objects and animate them on different layers.

�.       | Back to Courseware | back to the web design course