Home / Articles / Animating Symbols

Animating Symbols

Animating Position

You’ll start this project by animating the cityscape. It will begin slightly lower than the top edge of the Stage, and then rise slowly until its top is aligned with the top of the Stage.

  1. Lock all the existing layers so you don’t accidentally modify them. Create a new layer above the footer layer and rename it city.

  2. Drag the bitmap image called cityBG.jpg from the bitmaps folder in the Library panel to the Stage.

  3. In the Properties panel, set the value of X to 0 and the value of Y to 90.


    This positions the cityscape image just slightly below the top edge of the Stage.

  4. Right-click the cityscape image and choose Create Motion Tween or choose Insert > Motion Tween.

  5. A dialog box appears warning you that your selected object is not a symbol. Motion tweens require symbols. Animate asks if you want to convert the selection to a symbol so it can proceed with the motion tween. Click OK.

    Animate automatically converts your selection to a symbol with the default name Symbol 1, and stores it in your Library panel. Animate also converts the current layer to a tween layer so you can begin to animate the instance. Tween layers are distinguished by a special icon in front of the layer name, and the frames are tinted blue. The range of frames covered by the tween is the tween span. The tween span is represented by all the colored frames from the first keyframe to the last keyframe. Tween layers are reserved for motion tweens, and hence, no drawing is allowed on a tween layer.

  6. Move the red playhead to the end of the tween span at frame 191.

  7. Select the instance of the cityscape on the Stage, and while holding down the Shift key, move the instance up the Stage.

    Holding down the Shift key constrains the movement to right angles.

  8. For more precision, set the value of Y to 0 in the Properties panel.

    A small black diamond appears in frame 191 at the end of the tween span. This indicates a keyframe at the end of the tween.


    Animate smoothly interpolates the change in position from frame 1 to frame 191 and represents that motion with a motion path.

  9. Drag the red playhead back and forth at the top of the Timeline to see the smooth motion. You can also choose Control > Play (or press Enter/Return) to make Animate play the animation.

    Animating changes in position is simple, because Animate automatically creates keyframes at the points where you move your instance to new positions. If you want to have an object move to many different points, simply move the red playhead to the desired frame, and then move the object to its new position. Animate takes care of the rest.

Preview the animation

Integrated into the bottom of the Timeline is a set of playback controls. These controls allow you to play, rewind, or go step-by-step backward or forward through your Timeline to review your animation in a controlled manner. You can also use the playback commands on the Control menu.

  1. Click any of the playback buttons on the Controller below the Timeline to go to the first frame, go to the last frame, play, stop, or move forward or backward one frame.

  2. Select Loop Option (to the right of the Controller) and then click the Play button.

    The playhead loops, allowing you to see the animation over and over for careful analysis.

  3. Move the start or end markers in the Timeline header to define the range of frames that you want to see looped.

    The playhead loops within the marked frames. Click Loop Option again to turn it off.

5. Changing the Pacing and Timing | Next Section Previous Section

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