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

Lesson 4. Creating Animation > Adding Shape Hints

Adding Shape Hints

When you tween between complex shapes, you may notice that Flash sometimes creates complex intermediate shapes. You can use shape hints to minimize this complexity and to control the way the intermediate shapes appear. You do this by adding shape hints to identify which points correspond in the initial and final shapes. You should still be inside the Shape Animation symbol in zoo19.fla when you start this step.

1.
Select frame 30 of the Shapes layer, and choose Modify > Shape > Add Shape Hint.

When you choose Modify > Shape > Add Shape Hint, a small red circle containing the letter a appears in the center of the stage. This circle is a shape hint. You can add up to 26 shape hints, going from a through z.

NOTE

Because the shape hint is in the center of the stage, you might not be able to see the letter. When you move the shape hint in the next step, you should be able to see the letter.

TIP

If you accidentally add a shape hint that you don't need, you can remove it by dragging it off the stage. You can remove all the shape hints in the currently selected frame by choosing Modify > Shape > Remove All Hints. This command will work only if you have the starting frame selected.

2.
Drag the shape hint to the top point of the triangle.

When you added the shape hint in the last step, Flash should have automatically switched to the arrow tool. Using the arrow tool makes it easier to drag the shape hint around on the stage. As you drag the shape hint, you should notice that it snaps to the edges of the triangle. If it doesn't, click the Snap to Objects button in the Options section of the toolbox.

3.
Select frame 36 of the Shapes layer. Drag the shape hint to the top of the rectangle, placing it in the same position as the shape hint in frame 30.

When you select frame 36, you should see a shape hint containing the letter a in the center of the stage. It might be hidden by the center of the symbol, so look carefully. Drag the shape hint to the top of the rectangle. The shape hint should snap to the edge of the rectangle and also should turn green, indicating that it's an ending shape hint.

NOTE

Starting shape hints are yellow, and ending shape hints are green. If a shape hint is not attached to the edge of a shape (curve), it will appear red.

4.
Select frame 30 of the Shapes layer. Press Ctrl+Shift+H (Windows) or Command+Shift+H (Macintosh). Drag the resulting shape hint to the bottom of the triangle.

When you select frame 30 again, you should notice that the shape hint containing the letter a is now yellow.

Pressing Ctrl+Shift+H (Windows) or Command+Shift+H (Macintosh) adds another shape hint. This shape hint contains the letter b, and appears in the middle of the stage. Move it to the bottom edge of the triangle.

5.
Select frame 36 of the Shapes layer and move the shape hint that corresponds with the one you added in the last step to the bottom of the rectangle.

When you switch to frame 36, you should see a shape hint containing the letter b in the center of the stage. Move the shape hint to the bottom edge of the rectangle.

TIP

If you are working with shape hints and you don't see them on the stage, choose View > Show Shape Hints. The shape hints for the currently selected frame, if there are any, will appear.

6.
Choose Control > Play. Save the movie as zoo20.fla.

When you play the animation, you should see that the transition between the triangle and rectangle shapes has changed significantly. The top corners of the rectangle should appear to grow out of the side of the triangle, and the top and bottoms should stay in place.

If you'd like to see what your movie looks like now, choose Control > Test Movie. Be sure to choose Control > Loop Playback to stop the looping playback or the movie will loop repeatedly. You haven't added the Shape Animation symbol yet, so don't be alarmed if you don't see it.

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