Fine-Tune Flash CS5 Shape Tweens with Shape Hinting - dummies

Fine-Tune Flash CS5 Shape Tweens with Shape Hinting

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Sometimes Adobe Flash Creative Suite 5 may overthink things and perform more shape morphing than it has to, especially when two shapes have common features. In these cases, you can use shape hints — sets of matched markers that can tell Flash CS5 that two points on two different shapes are related.

You can attach shape hints to the outlines of shapes on the starting and ending frames of a shape tween to let Flash know which common points exist between the two.

Two good examples of related shapes are the letters F and T. The two letters have many common angles. A shape tween between the two is a great way to make use of shape hints.

Before you get started, create a new document. Select the Type tool and, using the Property inspector, set the font style to Arial Black (or its equivalent) and set the font size to 200. Then follow these steps:

  1. On the first frame of a new layer, type F in the middle of the stage.

  2. Select the letter with the Selection tool and choose Modify→Break Apart to break down the type to its raw outlines.

  3. On Frame 20 of the same layer, create a new, blank keyframe by using the F7 keyboard shortcut.

  4. Type T on the new keyframe and position it in the same place as the F on the first frame.

    You can use the Property inspector to match the X and Y positions, if necessary.

  5. Break apart the T by choosing Modify→Break Apart.

  6. Create a shape tween by right-clicking (Windows) or Control-clicking (Mac) the first frame and choosing Create Shape Tween from the contextual menu that appears.

    An arrow and green shaded area appear, indicating that the tween was created successfully.

  7. Press Enter or Return to preview your movie.

    The F morphs into the T.

Even though the shape tween was successful, the outcome may not have been what you expected. Chances are good that the F seems to get mashed up (instead of completing a smooth transition) before being completely reconstructed into the T because Flash can’t see the common angles between the two shapes (even though you can). That’s where shape hints come in: You can add them to suggest common points to Flash and smooth out the tween.

Before you get started, make sure that Snap to Objects is enabled by choosing View→Snapping→Snap to Objects. Then follow these steps:

  1. Select Frame 1 of your shape tween and choose View→Show Shape Hints to turn on shape hinting.

  2. Choose Modify→Shape→Add Shape Hint to create a new shape hint on the stage.

    A red button, labeled with the letter a, appears.

  3. Repeat Step 2 to add another shape hint.

    This time, the shape hint appears labeled with the letter b.

    Sometimes, shape hints stack on top of each other; move one to reveal the others underneath if only one is visible.

  4. Position the two shape hints on the outline of the F.

    To do so, move shape hint (b) over just a bit so that you can see shape hint (a). Then move (a) and snap it to the lower left corner of the F. Position the second shape hint (b) in the upper left corner of the F.

  5. Select Frame 20.

    You see the companions to the shape hints you created, waiting to be positioned.

  6. Position shape hints (a) and (b).

    This step matches the lower left and upper left corners of the T to the ones in F, as shown in the figure. The buttons turn green to indicate a successful match.

    If you can’t get the hints to snap perfectly to the edge (the hints will appear red), make sure snapping is enabled by choosing View→Snapping→Snap to Objects.


  7. Press Enter or Return to preview your animation.

    If you watch carefully, you see that the shape hints are keeping those two corners anchored while the rest of the shape transforms, creating a smoother transition.

Note: Much like motion guides, shape hints do their work without appearing in your final, published movie.

Add Shape Hints with the shortcut key combination Shift+Ctrl+H (Windows) or Shift+@@cmd+H (Mac).

You can also add some remaining hints to finalize your tween by following these steps:

  1. Select Frame 1 of your shape tween and make sure that shape hints are still visible by choosing View→Show Shape Hints.

    If they’re already enabled, you see a check mark.

  2. Create one new shape hint with the keyboard shortcut Shift+Ctrl+H (Windows) or Shift+@@cmd+H (Mac).

    The shape hint is automatically labeled with the letter c.

  3. Position the (c) shape hint on the F in the upper right corner.

  4. Select Frame 20 and you see the companion to the new shape hint waiting to be placed.

  5. Position the shape hint on the T to match the angle you marked on the F.

  6. Press Enter or Return to play your animation.

    You see that the shape hints have provided a much smoother transition from what you started with.


Shape hints have their own contextual menu that appears when you right-click (Windows) or Control-click (Mac) any shape hint on the first frame of a shape tween. To clear a selected shape hint, choose Remove Shape Hint or choose Remove All Hints to clear all hints on the stage and start over.

Though it often isn’t necessary to add more than a handful of shape hints, you may be wondering: How many shape hints are allowed? The answer is 26 — the exact amount of letters in the alphabet. After Flash runs out of letters to label shape hints, it doesn’t allow you to create more.