Keep It Smooth With Shape Hints


 		   

circle2squareFlash sometimes needs a little intuitive help when morphing or "tweening" from one shape into another. Shape Hints guide the visual change by identifying points that should correspond in the starting and ending shapes of the animation.

Circle to square

This first example will create a simple "tween" of a circle into a square using Shape Hints:

Create the "tween"

  1. Create 36 frames by going to Insert > Frame.
  2. At frame 1, create a green circle.
  3. At frame 36, set a keyframe through Insert > Keyframe. Draw a blue square. Delete the green circle.
  4. Click anywhere within the layer and open the Frame panel. In its pop-up box choose Shape.
  5. Flash calculates the in-between steps to morph the circle into a square.

Add Shape Hints

  1. Select the circle in frame 1 and go to Modify > Transform > Add Shape Hints.
  2. A red dot with the letter "A" should appear in the center of the circle. Move the Shape Hint to the top left of the circle along its stroke.
  3. At frame 36, a red "A" dot should mark the center of the square. Move that Shape Hint along the top left corner stroke. It should now become green.
  4. Scrub back to frame 1. The red dot will now be yellow. Add a second Hint, which appears as "B," and move it to the bottom left corner of the circle.
  5. Now go to frame 36 to move the corresponding "B" hint to the corresponding location on the square.
  6. Continue clockwise until all corners of both shapes are filled.
  7. circle2square
    Now the curves of the two shapes map to each other, which causes the circle to slide rather than roll when morphing into a square.

Tips about Shape Hints

  • Hints are yellow in the start keyframe, green in the end keyframe, and red when not set along a curve.
  • Each new Hint takes on the next letter of the alphabet, up to 26 total.
  • Hints play nicely when they are set down one at a time and tweaked from start point to end point.
  • Hints work best when they are placed counterclockwise beginning from top left.
  • To remove hints, drag one off the stage or go to Modify > Transform > Remove All Hints.
  • Check View > Show Shape Hints if the Shape Hints aren't visible.
  • Right-click on a Hint to bring up a contextual menu of choices.
  • Keeping View > Snap to Guides turned on is often helpful when aligning shape corners.

Make a Middle Man

Flash can get a bit fussy when animating complex or irregular shape changes. Sometimes it helps to create an intermediate shape (via a middle keyframe) instead of just defining a start and end shape.