Flash Shape Tweening

Shape Tweening
Programs used: Flash 5

Many people find it hard to get shape tweening to work well in Flash, whilst motion tweening is fairly easy to grasp. If you haven't learnt how to motion tween first, then you might find some of the concepts in this tutorial hard to understand. This tutorial will help you get a better understanding of how it works and some techniques of getting an effective shape tween.

1 - Simple Shapes
First we'll start by creating some simple shapes to tween. On the first frame of the timeline, select the Oval tool from the tools panel. Now draw a perfect circle by holding Shift while using the tool. Align the Circle in the middle of the satge. Pressing Ctrl+K brings up the Align Panel, or go Window>Panels>Align.

On the time line click on frame 15 and press F7. This adds a blank keyfame at frame 15. The circle should disappear because you're on frame 15. Now draw a perfect square(hold Shift) using the Rectangle tool. Align the square in the middle of the stage.

Figure 1


Figure 2a	Figure 2b

2 - Tweening the Shapes
Now click on frame 1, and open up the frame panel. In the Tweening box, select shape. You will now see that the frames that are being tweened will become green in the timeline.

Play the animation.
Notice how the animation rotates as it is changing shape. While this effect looks good, it can be quite useless.


Figure 3a	Figure 3b	Figure 3c	Figure 3d

3 - Adding Shape Hints
Now click on frame 1, and go Modify>Transform>Add Shape Hint. A small red dot with the letter "a" should now appear on your Stage. This is a shape hint.
Make sure object snapping is on(View>Snap to Objects), and using the black Arrow tool drag and drop the shape hint onto the top left edge of the circle.

Add another 3 hints and place them on the other edges of the circle(Figure 3a).

Now go to frame 15, and place the corresponding shape hints on each corner of the square(Figure 3b).

Notice how they will turn green once they are snapped onto an edge. Frame 1's shape hints should also now turn yellow.
Shape hints are something like anchor points. They tell the computer to try and focus on getting the hints in the two keyframes to match. The rest of the shape will follow.
Play this animation. The rotating effect should now be gone, and in its place should be a smooth transition.

4 - Tweening Techiniques
Effective shape tweeners consider the two shapes being tweened. For instance tweening two very different letters willl be hard to make it look good.
Good tweening usually involves easing in or out for a more realistic effect. You can find this option in the Frame Panel. Also shape tweening allows you to add color changes and gradient fills.
I've created a slightly more interesting tween down the bottom(Figure 4) using a radial gradient fill with some alpha effects on two different layers.

Figure 4

Shape Tweening Programs used: Flash 5

Shape Tweening
Programs used: Flash 5