Add a motion tween to instances, groups, or type

To tween the changes in properties of instances, groups, and type, use motion tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the color of instances and type, creating gradual color shifts or making an instance fade in or out. To tween the color of groups or type, make them into symbols. To animate individual characters in a block of text separately, place each character in a separate text block.

If you apply a motion tween and then change the number of frames between the two keyframes, or move the group or symbol in either keyframe, Flash automatically tweens the frames again.

For a video tutorial about motion tweens, see www.adobe.com/go/vid0125.

For a text tutorial about motion tweens, see Create a Timeline Animation on the Flash Tutorials page at www.adobe.com/go/learn_fl_tutorials.

For samples of animation, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. The following samples are available:

  • Animated Drop Shadow: Download and decompress the Samples zip file and navigate to the Graphics\AnimatedDropShadow folder to access the sample.

  • Animation and Gradients: Download and decompress the Samples zip file and navigate to the Graphics\AnimationAndGradients folder to access the sample.

Create a motion tween by using the Motion Tweening option

  1. Click a layer name to make it the active layer, and select an empty keyframe in the layer where you want the animation to start.
  2. To create the first frame of the motion tween, do one of the following:
    • Create a graphic object with the Pen, Oval, Rectangle, Pencil, or Brush tool, and then convert it to a symbol.

    • Create an instance, group, or text block on the Stage.

    • Drag an instance of a symbol from the Library panel.

  3. Create a second keyframe where you want the animation to end, and leave the new keyframe selected.
  4. To modify the item in the ending frame, do any of the following. To tween the color of elements other than instances or text blocks, use shape tweening:
    • Move the item to a new position.

    • Modify the item’s size, rotation, or skew.

    • Modify the item’s color (instance or text block only).

  5. Click any frame in the tween’s frame span and select Motion from the Tween pop‑up menu in the Property inspector (Window > Properties > Properties).
  6. If you modified the size of the item in step 4, select Scale to tween the size of the selected item.
  7. To produce a more realistic sense of motion, apply easing to the motion tween. To apply easing to a motion tween, use the Ease slider to specify an easing value for each motion tween you create, or use the Custom Ease In/Ease Out dialog box to more precisely control the speed of the motion tween.

    Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

    • To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a negative value between ‑1 and ‑100.

    • To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and 100.

    • To produce a more complex change in speed within the tween’s frame span, use the Custom Ease In/Ease Out dialog box.

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

  8. To rotate the selected item while tweening, select an option from the Rotate menu:
    • To prevent rotation, select None (the default setting).

    • To rotate the object once in the direction requiring the least motion, select Auto.

    • To rotate the object as indicated, and then enter a number to specify the number of rotations, select Clockwise (CW) or Counterclockwise (CCW).

    Note: The rotation in step 8 is in addition to any rotation you applied to the ending frame in step 4.
  9. If you’re using a motion path, select Orient To Path to orient the baseline of the tweened element to the motion path.
  10. To synchronize the animation of graphic symbol instances with the main Timeline, select the Sync option in the Property inspector.
    Note: Modify > Timeline > Synchronize Symbols and the Sync option both recalculate the number of frames in a tween to match the number of frames allotted to it in the Timeline.
  11. If you’re using a motion path, select Snap to attach the tweened element to the motion path by its registration point.

Create a motion tween by using the Create Motion Tween command

  1. Select an empty keyframe and draw an object on the Stage, or drag an instance of a symbol from the Library panel.
    Note: To create a tween, you must have only one item on the layer.
  2. Select Insert > Timeline > Create Motion Tween. If you drew an object in step 1, Flash automatically converts the object to a symbol and names it tween1.
  3. Click inside the frame where you want the animation to end, and select Insert > Timeline > Frame.
  4. Move the item on the Stage to the desired position. Adjust the size of the element to tween its scale. To tween its rotation, adjust the rotation of the element. Deselect the object when you complete adjustments.

    A keyframe is automatically added to the end of the frame range.


  5. To adjust the rate of change between tweened frames, drag the arrow next to the Easing value or enter a value:
    • To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a value between ‑1 and ‑100.

    • To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down 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 acceleration or deceleration by gradually adjusting the rate of change.

    • To produce a more complex change in speed within the tween’s frame span, use the Custom Ease In/Ease Out dialog box.

  6. To rotate the selected item while tweening, select an option from the Rotate menu:
    • To rotate the object once in the direction requiring the least motion, select Auto.

    • To rotate the object as indicated, and then enter a number to specify the number of rotations, select Clockwise (CW) or Counterclockwise (CCW).

      Note: The rotation in step 6 is in addition to any rotation you applied to the ending frame in step 4.
  7. If you’re using a motion path, select Orient To Path to orient the baseline of the tweened element to the motion path.
  8. Select Synchronize to ensure that the instance loops properly in the main document.

    Use the Synchronize command if the number of frames in the animation sequence inside the symbol is not an even multiple of the number of frames the graphic instance occupies in the document.

  9. If you’re using a motion path, select Snap to attach the tweened element to the motion path by its registration point.

  This page on the Web