Controlling Shape Tweens with Shape Hints

A shape tween is a gradual morphing of one shape into another. Sometimes when we create a shape tween between two objects the result is a bit messy for example the tweening of the number 1 into a number 2 below.

To add a level of control to our shape tweens we can add shape hints that map points of our starting shapes to points on the ending shape to create a smoother shape tween. The "a" point in Shape 1 will map directly to the "a" point on shape 2 and so on.

By adding shape hints to this tween the result is a much smoother transition from the one shape to another as seen below.

To work through this process follow the steps listed below.

Step 1: Create a new flash movie

Choose File > New and choose flash document from the resulting menu or simply use the keyboard combination Ctrl + n (win) or Cmd + n (mac) and choose flash document.

Step 2: Define movie properties

Double-click on the Frame Rate label in the timeline and from the resulting dialog box set the movie properties to:
Title: Shape Hint Example
Width:  180 pixels
Height: 180 pixels
Frame rate:  12 fps (frames per second)
Background Color:  choose a color
Leave the other options at there default values.

Step 3: Add the starting text

Make sure you are in the first frame of your movie. Select the text tool and click on the center of your document. Enter the number 1and with the number still highlighted increase the font size by typing 120 in the font size text box on the properties inspector and choose a color from the type color box.

Tip: Align your text to the center of the stage by choosing align horizontal and align vertical from the Align palette (make sure the to stage option button is selected).

Step 4: Break apart the Text

At this point we our text is still editable. We need to convert the text to be just a shape which can be used for shape tweens - normal (editable) text can not be used in a shape tween.

To convert the text to a form useable in a shape tween we need to "break apart" the text, a process that converts text to simple shapes. Right-click the object and choose Break Apart from the resulting menu.

When you select the number 1now, you can see the bounding box has disappeared and that it is just a shape (example to the right).

Step 5: Creating the second shape

Right-click frame 25 in the timeline and choose insert blank keyframe from the result menu.

Repeats steps 3 & 4 to a number 2 shape on frame 25.

Step 6: Creating the Tween

At this point your timeline should look like the example to the left with a keyframe in frame 1 that contains your number 1 shape and a keyframe on frame 25 that contains your number 2 shape. The keyframes and frames will be grey at this point as there is currently no tween applied to these frames.

Click on frame 1 on the timeline and then on the property inspector choose Shape Tween from the Tween pulldown list on the property inspector. Once you have selected a shape tween the frames in the timeline will turn green.

Choose Control > Play to test the resulting movie. Chances are, you have a very messy morph between the 1 and 2 shapes.

Step 7: Adding Shape Hints

		In the timeline, click on the first frame. Choose modify > Shape add shape hint or use the hot key combination Ctrl + Shift + H (win) or Cmd + Shift + H (mac). A little red circle with the letter "a" will appear in the middle of your shape. Drag it to the top left of the 1 shape
		In the timeline, click on the 25th frame. Choose modify > Shape add shape hint or use the hot key combination Ctrl + Shift + H (win) or Cmd + Shift + H (mac). You will see another little red circle with the letter "a" in the middle of your "2" shape. Drag it to the bottom left most corner of the 2. Once you drag it to another point it may turn green indicating that it has been set.
		In the timeline, click on the first frame - you will notice you hint a has turned yellow this indicates is has been set. Choose modify > Shape add shape hint or use the hot key combination Ctrl + Shift + H (win) or Cmd + Shift + H (mac). This time a little red circle with the letter "b" will appear in the middle of your shape. Drag it to the bottom right most corner In the timeline, click on the 25th frame add a shape hint using either of the methods previously specified. Drag the "b" hint to the bottom right most part of the 2 shape.

Tip: It is important that you choose a starting point and work in one direction only. You can use up to 26 hints for each tween but it is usually best to use only a couple. It does take a bit of playing to determine the best place to position your hints.