Home / Articles / Animating Symbols

Animating Symbols

Changing the Pacing and Timing

You can change the duration of the entire tween span or change the timing of the animation by dragging keyframes on the Timeline.

Changing the animation duration

If you want the animation to proceed at a slower pace (and thus take up a much longer period of time), you need to lengthen the entire tween span between the beginning and end keyframes. If you want to shorten the animation, you need to decrease the tween span. Lengthen or shorten a motion tween by dragging its ends on the Timeline.

  1. Move your mouse pointer close to the end of the tween span in the city layer.


    Your pointer’s cursor changes to a double-headed arrow, indicating that you can lengthen or shorten the tween span.

  2. Drag the end of the tween span back to frame 60.

    Your motion tween shortens to 60 frames, reducing the time it takes the cityscape to move.

  3. Move your mouse pointer close to the beginning of the tween span (at frame 1).

  4. Drag the beginning of the frame span forward to frame 10.

    Your motion tween begins at an earlier time, so it now plays only from frame 10 to frame 60.

Adding frames

You’ll want the last keyframe of your motion tween to hold for the remainder of the animation. Add frames by Shift-dragging the end of a tween span.

  1. Move your mouse cursor close to the end of the tween span.

  2. Hold down the Shift key and drag the end of the tween span forward to frame 191.


    The last keyframe in the motion tween remains at frame 60, but Animate adds frames through frame 191.


Moving keyframes

If you want to change the pacing of an animation, you can select individual keyframes, and then drag the keyframes to new positions.

  1. Click the keyframe at frame 60.


    The keyframe at frame 60 is selected. A tiny box appears next to your mouse pointer, indicating that you can move the keyframe.

  2. Drag the keyframe to frame 40.

    The last keyframe in the motion tween moves to frame 40, so the motion of the cityscape proceeds more quickly.

6. Animating Transparency | Next Section Previous Section

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