Section 7.1. Morphing with Shape Tweens

7.1. Morphing with Shape Tweens

As you've seen in prior chapters, motion tweens are typically used when you want to move or manipulate a symbol over time. You can change many properties of a symbol instance during a motion tween, but by the very nature of symbols, you can't radically alter their…shapes.

If a bell is ringing in your head, you're on the right track. Shapes are not instances or references to other objects, and they can be altered. Shape tweens, similar in creation to motion tweens, allow you to do so over time. Here's a simple example:

1. Create a new Flash document and save it as shape_tween.fla in the 07 folder.

2. Select the Rectangle tool, pick a fill color, and draw a square of approximately 90 x 90 pixels near the left center of the Stage.

3. Add a blank keyframe to frame 12 using the F7 key

4. Select the Oval tool, pick a contrasting fill color, and draw a circle of approximately 90 x 90 pixels near the right center of the Stage.

5. As you would with a motion tween, select the first keyframe and pick a tween from the Tween menu in the Properties panel. This time, however, pick Shape.

6. Save your work and test your movie. The result, over time, looks something like Figure 7-1, seen here in outline view. If you want to check your work, look at shape_tween_01.fla in the 07 folder.

Figure 7-1. A shape tween as it appears over time

The square morphs into a circle over the duration of the tween. Any shape can morph into any other shape, provided there are nothing but shapes in the layer. However, the complexity of vectors can lead to unpredictable results. Look carefully, for example, at the morph you created. It looks as if the square is rotating as it becomes a circle.

This is because Flash is doing its best to figure out how to change one vector into another, and the main anchor points of a square and a circle aren't matching up perfectly. Flash sees the main anchor points of the square in its four corners and the main anchor points of the circle at left, top, right, and bottom, as seen in Figure 7-2. It is matching the anchors of the square and circle, respectively, in pairs: upper-left to left, upper-right to top, lower-right to right, and lower-left to bottom. Therefore, the shape appears to rotate during the tween, even though it's just morphing.

Figure 7-2. The main anchor points of a square and circle, as seen by Flash

7.1.1. Shape Hints

To improve the quality of the morph, you can add shape hints to each keyframe. Shape hints let you tell Flash precisely which points in each vector to match up during the tween. So, if you add shape hints matching the corners of the square with the secondary anchor points of the circle, the morph will no longer appear to rotate. Here's how:

1. Select the first keyframe and choose Modify Shape Add Shape Hint (Ctrl/Cmd-Shift-H).

2. Select the last keyframe, and you will see a corresponding a shape hint. Drag it to the upper-left arc of the circle. (A peek at the final result in Figure 7-3 may help guide the positioning of the shape hints.) These two points will now match up during the tween.

3. Continue the process until you have four matching shape hints. (Often, just one or two hints are enough for Flash to catch on, but sometimes many are required.) The result can be seen in Figure 7-3.

   ---

   Note: There is a limit of 26 shape hints for each shape tween.

   ---

4. Save your work and test your movie. The result will be a cleaner morph from square to circle. If you want to check your work against the sample files, look at shape_tween_02.fla in the 07 folder.

Figure 7-3. Shape hints tell Flash which part of each vector to match up during the tween

The rotation that occurs when the square is morphed into the circle without shape hints is a relatively subtle distortion compared to some of the more severely confused morphs that can occur. A very simple example can be found in the 07 folder of your working directory. Compare eye_to_i_before. fla with eye_to_i_after.fla to see how shape hints can improve a morph. You can try something like this on your own by morphing one word into another. Flash can't be expected to create the morph the way you want it with so many vectors and without any additional guidance. Shape hints provide the assistance needed in these situations and can really be worth the labor it takes to add them.

7.1.2. Using Shape Tweens in Animations

An oft-seen transition technique is one in which an interface appears to draw itself, line by line, until it is complete and filled with content. This can be accomplished a number of ways in Flash, but one easy way is by shape tweening lines from one size to another. You'll use this method now to draw the outline of a house:

1. Create a new Flash document and save it as animated_ad.fla in the 07 folder. Change the document background color to light yellow.

2. Activate the Line tool, and set the stroke color to black with a stroke weight of 1.

3. Draw a very short and straight vertical line at the bottom of the Stage, about one-quarter from the right of the Stage.

4. Convert frame 5 to a keyframe (F6).

5. At frame 5, activate the Selection tool and move the cursor over the top end of the line you drew in step 3. The cursor displays a small right angle icon next to it. This means you are hovering over the end point of a line.

6. Click and drag upward to extend the length of the line to the vertical center of the Stage.

7. Select the first keyframe and apply a shape tween.

8. Press Enter/Return to play the animation.

The line starts short and gets longer, ending at frame 5. The shape tween has effectively drawn the line for you. Continue with the rest of your animation, and draw the remainder of the house outline (it will help, during the descriptions of how to draw each line, to take a look at the finished product in Figure 7-4):

Figure 7-4. The finished shape tween

1. Insert a new layer, and add a keyframe to frame 6 of the new layer. Adding a new layer makes it easier to keep the shape tweens discrete and makes it possible to adjust timing later, if you don't want your animation to be sequential.

2. Add frames, through to frame 85, in your first layer so you can see the previously drawn line to know where to continue drawing. Starting in frame 6 of the new layer, draw a short diagonal line from the top end of the first line down and to the right about 5 pixels.

3. Add a keyframe to frame 9 of Layer 2 and, in that keyframe, stretch the new line so it's about half an inch long.

4. Add a shape tween to the frame span between frames 6 and 9.

5. Add a new layer, insert a keyframe at frame 10, and draw another short diagonal line up and to the right approximately 5 pixels.

6. Add a keyframe at frame 12, stretch the line, and add a shape tween to the frame span.

7. Repeat steps 5 and 6, drawing short lines in the direction indicated in Figure 7-4 and then tweening them until your timeline and Stage match animated_ad_01.fla, located in the 07 folder.

8. After each shape tween, add frames to the layer until you reach frame 85.

9. Finally, in a new layer called actions, add a stop() action in frame 85.

10. Save your work and test the movie to see the animation.