Tweening shapes

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and color of shapes.

Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, all the shapes must be on the same layer.

To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. See Breaking apart groups and objects. To apply shape tweening to text, you must break the text apart twice to convert the text to objects. See Breaking text apart.

To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape. See Using shape hints.

To tween a shape:

  1. Click a layer name to make it the active layer, and create or select a keyframe where you want the animation to start.
  2. Create or place the artwork for the first frame of the sequence. For best results, the frame should contain only one item (a graphic object or broken-apart group, bitmap, instance, or text block).
  3. Select the keyframe in the Timeline.
  4. Select Window > Properties.
  5. In the Property inspector, select Shape from the Tween pop-up menu.
  6. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:
    • To begin the shape tween gradually and accelerate the tween toward the end of the animation, drag the slider down or enter a negative value between -1 and -100.
    • To begin the shape tween rapidly and decelerate the tween toward the end of the animation, drag the slider up or enter a positive value between 1 and 100.

    By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of transformation by gradually adjusting the rate of change.

  7. Select an option for Blend:

    Distributive creates an animation in which the intermediate shapes are smoother and more irregular.

    Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes.

    Note: Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you select do not have corners, Flash reverts to distributive shape tweening.

  8. Create a second keyframe the desired number of frames after the first keyframe.
  9. With the second keyframe selected, select the artwork you placed in the first keyframe and do one of the following:
    • Modify the shape, color, or position of the artwork.
    • Delete the artwork and place new artwork in the second keyframe.