by Chamila de Alwis

In the last article we discussed about shape tweening, a technique used in Flash to animate shapes. In this session let us go a little deeper and study an aspect that smoothens the automatically built animation. This technique is called Shape Hinting. Let us do this through an activity.

Open up Flash and open a new Flash document. On the toolbox select the Polystar Tool. If this isn't visible click on the Rectangle tool and check the list of tools that appears. Polystar tool should be the last option in that menu. Now on the stage drag the mouse and create a poly star shape.Make sure you do this on Frame one.

Now on the timeline go to the 40th frame and press F6 to insert a keyframe. After that click on either the 40th frame or the poly star shape on the stage and pressDelete. Now on the 40th frame should be a blank key frame.

On the toolbar select the Text tool and type "F" on the stage. Break apart the text by pressing CTRL+B. Now it should be a shape and no longer a text. Fill it with any color you want.

Now we have two different shapes and we only need to do one thing to create a shape tween between these two. i.e. right click on a frame somewhere between the first and the 40th frames and select Create Shape Tween. After this the timeline between the first and the 40th frames should be green with an arrow on it.

Press CTRL+ENTER to preview the motion. The shape tween occurs all right. But based on the positions and the rotations of the two shapes relative to each other, there might be some anomalities that occur in the animation. In my animation there was an instance like this.

The complete animation looks like this. If you browse the timeline you can see which points on the shapes are causing this inward.

I don't want that kind of inwarding to occur. To get rid of this I can Flash to adjust the starting point and end point of the animation as I like. In other words I can define a point on the initial shape and then define where that point should be on the final shape. This is done by adding shape hints.

Go to the first frame and click on the poly star shape. Go to Modify->Shape->Add Shape Hint menu. After clicking on Add Shape Hint you will see a little bullet on the poly star shape named a. Drag this little bullet to the place you want to define as the starting point. It should snap to edges and points. Then go to the 40th frame and you will see the same bullet in a different color. Drag this bullet to show Flash where that initial point should end up. If this description is not sufficient refer the screencast provided.

(If you can't see the bullets described above go to View-> Show Shape Hints)

Now preview the animation and you should see that the inward curving we saw earlier is gone and the points we added the shape hints to, animates smoothly.

Shape hints are specially usefull in making cartoons where you need to control the tweens in a fine manner. We can virtually define the animation and let Flash create it. It is somewhat similar to directing a movie where you instruct the actors how to act and let them do the acting.

Previous Article