TUTORIAL 8 - Shape Tweening

In this tutorial, you will use Macromedia Flash's Shape Tween feature to make one shape morph into another.

Circle into Square

1. Create a new file in Flash.

2. In the first frame, make a circle with no stroke and any color fill.

3. Select frame 12 and select Insert>Blank Keyframe. With frame 12 still selected, draw a square with no stroke, using a different color fill from the ball.

4. Select any of the first 11 frames and in the Properties panel, select Tweening>Shape.

5. Select frame 13 and Insert>Keyframe. This places a copy of the square from frame 12 into frame 13.

6. Then select frame 24 and Insert>Blank Keyframe. Place a copy of the circle from frame 1 in frame 24. Layer one now displays a tween from a circle to a square and back again.

I into T
7. Create a new layer (Layer 2). In the first frame, use the text tool to make a capital letter "I". With the "I" selected, select Modify>Break Apart to make the text editable.

8. Select frame 12 and Insert>Blank Keyframe. Use the text tool to make a capital letter "T" and Modify>Break Apart.

9. Select any of the first 11 frames and in the Properties panel, select Tweening>Shape. Flash applies a shape tween to morph the "I" into the "T".

10. To smooth out the transition, you must place shape hints around the perimeters of the two letters. To do this, select the first keyframe and press Command-H. You should need only 4 hints. With the first keyframe ("I") still selected, click and drag the hints a through d around the perimeter of the letter. Keep them in either clockwise or counter-clockwise order.

11. Select the keyframe in frame 12 ("T") and drag the four shape hints around the perimeter of the letter, keeping them in the same order as in the previous step. If done correctly, this should produce a smoother tween.

12. To morph the "T" back into the "I", simply follow the directions as above, creating a keyframe in frame 13 with a "T" in it, then a blank keyframe at 24 in which you place an "I". You must apply a new set of shape hints to the new tween.

S into Z
13. Create a third layer. To morph an "S" into a "Z", you should follow the same directions as the previous tween, except you must use a third character in between to make the transition smoother. In this case, an "I" was used, so that the "S" tweens into an "I", and then the "I" tweens into a "Z". A few more shape hints were used to smooth out this morph than the last.

14. Save the file as both an .fla and a .swf. to your disk.

Note:
Most tweens can be done using the Motion Tween option (changing color, size, rotation, position).