Home / Articles / Top Techniques for Creating Animation in Adobe Flash CS3 Professional

Top Techniques for Creating Animation in Adobe Flash CS3 Professional

#37 Using Shape Hints

Shape tweens are notoriously unpredictable. It may be clear to you what the most logical way is to morph one object into another, but that doesn't mean it's apparent to Flash. Even a simple transformation may take place in a way you don't expect (Figure 37a).

Figure 37a

Figure 37a When a circle morphs into a square, we'd expect the four corners of the square to sprout directly from the circle. Instead, Flash rotates the circle as it becomes a square.

To help with this issue, Flash provides tools called shape hints. Shape hints always come in pairs: one to mark a point on a path in the first keyframe of a tween, the other to mark the corresponding point on the path in the second keyframe. You can use shape hints as follows:

  1. Select the first keyframe of the tween.
  2. Choose Modify > Shape > Add Shape Hint. A red circle with the letter a on it appears in the center of the object.
  3. Drag the shape hint to the first point you want to mark—in this case, the upper-left edge of the circle. When you release the shape hint, you should see it snap into place (Figure 37b).
    Figure 37b

    Figure 37b Snap the first shape hint to the first object in the tween; then snap the second shape hint to a corresponding point on the second object.

    If there's no obvious snap, it means you may not have dragged the shape hint fully onto the path. Try dragging it and dropping it again.
  4. Select the second keyframe of the tween. An identical red circle with the letter a on it is in the center of the object.
  5. Drag this second shape hint to the point that corresponds to the point you marked in step 3—in this case, the upper-left corner of the square. Once again, let it snap into place.

    If everything has been done correctly, this shape hint should turn from red to green, and the first shape hint should turn from red to yellow. If the shape hints are not yet yellow and green, repeat the drag-and-snap process until they are.

  6. Preview the movie to see whether the shape tween now does what you want. In many cases it won't; often one pair of shape hints is not enough (Figure 37c).
    Figure 37c

    Figure 37c Even after we add shape hints, Flash still doesn't get it.

    If necessary, repeat the process to add a second pair of shape hints (Figure 37d). Flash labels the second pair with the letter b, the third with c, and so on.
    Figure 37d

    Figure 37d When adding shape hints, work in a counterclockwise direction from the upper-left corner.

In the example of the circle morphing into the square, two pairs of shape hints is sufficient (Figure 37e). In other cases, more may be needed.

Figure 37e

Figure 37e Adding the second pair of shape hints solves the problem.

In general, if five or six pairs of shape hints don't get you the result you want, it's unlikely that adding more will help. In that case, you might consider deleting the shape tween and trying a new one with simpler paths.

9. #38 Creating Motion Tweens | Next Section Previous Section

There are currently no related articles. Please check back later.