Create Flash CS5 Animation with Motion Tweens - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Flash Creative Suite 5 can automatically create Flash animation sequences from nothing more than a starting point and an ending point, figuring out everything else between them. This method of creating animation is known as tweening.

A motion tween is a type of Flash-generated animation that requires the use of symbols and is best for creating movement, size, and rotation changes, fades, and color effects. All you need to do is tell Flash where to change the appearance of a symbol instance, and it fills in the blanks in between key changes in the symbol’s appearance to create an animation sequence.

Only one object at a time can be tweened on a layer. If you want to tween several objects simultaneously, each object needs to live on its own layer and have its own tween applied.

To create a motion tween, follow these steps:

  1. Drag a symbol from your library to the stage to a new layer.

    The symbol is added to Frame 1. For example, we positioned the symbol in the upper right corner of the stage, which is where the motion will begin.

  2. Right-click the first frame of the layer your symbol is on and choose Create Motion Tween from the contextual menu that appears.

    A shaded span of frames — a tween span — appears on the Timeline, and the layer is converted to a tween layer. A tween layer, as the name suggests, is a layer that contains one or more motion tweens. Tween layers become dedicated to animation, and cannot hold other items that are not-related to that animation.

    To create animation, you can move the playhead to different points along the tween span and make changes to your object’s appearance or position.

  3. Drag the playhead to a new frame and then reposition your symbol.

    For this example, we dragged it to Frame 15 and repositioned the symbol in the middle of the stage, slightly toward the bottom.

    A new keyframe (which appears as a bullet point) has been created automatically at this frame to mark the change.

  4. Drag the playhead to another frame and move the symbol instance to another location on the stage.

    For this example, we dragged it to Frame 24 and repositioned the symbol in the upper left corner of the stage.

    In addition to another keyframe, a motion path is created on the stage to show the path of animation the symbol will take.

  5. Press Enter or Return to play the Timeline and preview your animation.

    For the motion tween we created, the symbol moves from right to left.


To see all frames of your animation at one time, select the Onion Skin option underneath the Timeline. This option lets you select and show several frames at once so that you see the frames that the Flash tween created for you.