• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 9. Using Shape Tween to Morph > Task: Use Shape Hints for a Better Shape T...

Task: Use Shape Hints for a Better Shape Tween

In a new file, draw a perfect square with the Rectangle tool (just hold Shift while you drag).

In frame 25 of the Timeline, insert a keyframe (click in the Timeline at frame 25 and then press F6 or select Insert, Keyframe).

Change the shape in frame 25 to a triangle. There are many ways to do this, including starting from scratch and using the Onion Skin to help line up your triangle with the square. I would like the triangle to be as similar as possible to the square, so try the following method.

In frame 25, draw a vertical line that doesn't touch the square.

Select the Arrow tool (make sure Snap to Objects is turned on), click once on the line to select it, and click and hold in the center of the line. (Make sure you have the solid circle, indicating that you've grabbed the center—if not, try grabbing the line again.) Now drag the line so it snaps in the center of the horizontal top of the square (as in Figure 9.5).

Figure 9.5. Dragging a vertical line while Snap is turned on lets us position the line at the center of the square perfectly.

Click off the line and grab the top-left corner of your square. Drag it until it snaps to this bisecting line. Do the same for the top-right corner of the square.

Select and delete the excess portions of the vertical line.

Select the first keyframe and use the Properties panel to set Tween to Shape. Scrub and you'll see the results are probably not what you expected. Now's our chance to use Shape Hints.

Under the View menu, select Show Shape Hints.

Place the red current frame marker in frame 1 and select Modify, Shape, Add Shape Hint (or press Ctrl+Shift+H).

Notice a little red circle with the letter a (a Shape Hint). Temporarily move the 2red current frame marker to frame 25 and notice there's also an a Shape Hint in this frame.

Make sure you're back in frame 1 and that Snap is turned on (select View, Snap to Objects). Use the Arrow tool and drag the Shape Hint so it snaps to the top-left corner of your square. (Notice in Figure 9.6 that it's still red, indicating that you haven't really mapped this point to an endpoint yet.)

Figure 9.6. Although we've added a Shape Hint in our first keyframe and even attached it to our shape, it's still colored red because we haven't done so for the ending keyframe.

Go to frame 25 and position Shape Hint a so that it snaps to the middle of the left side of the triangle. Notice that the Shape Hint turns green, indicating that it's been mapped. Also, when you return to frame 1, the Shape Hint is colored yellow to indicate that it's been mapped.

Scrub to see the results so far—if it looks good, you don't need to add any more Shape Hints. (For this exercise, however, it will likely look worse.)

In frame 1, add another Shape Hint (press Ctrl+Shift+H), which is automatically given the name b, and position it in the top-right corner of the square.

In frame 25, map this second Shape Hint b to snap to the middle of the right side of the triangle (similar to how a was mapped). See Figure 9.7.

Figure 9.7. Our second Shape Hint (b) is snapped to the middle of the right side of the triangle in the second keyframe.

At this point the results should be much better than before we added any hints. Do a Test Movie to see.

Understanding Shape Hints

The time-consuming part of the exercise was creating the triangle to match the square perfectly (and this should have been a review). Adding the Shape Hints was fairly simple. Granted, I told you where to place the hints. However, figuring out logical positions for Shape Hints is usually pretty easy. Think of it this way: You're telling Flash “this point in the starting shape goes with that point in the ending shape.”



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint