How to Show Inertia and Gravity in Flash CS5 Animation with Easing - dummies

How to Show Inertia and Gravity in Flash CS5 Animation with Easing

By Jennifer Smith, Christopher Smith, Fred Gerantabee

In Adobe Flash Creative Suite 5, you can reproduce the two most recognizable forces of motion, inertia and gravity, by using a special tween option: Ease. The new animation engine makes lots of easing behaviors available, including Bounce, Spring, Ease In (speed up), Ease Out (slow down), and more. You can assign easing to any tween span with the Motion Editor.

Add easing to a Flash CS5 symbol

To create an easing behavior, follow these steps:

  1. Create a new Flash document. Select the Oval tool and create a perfect circle at the bottom of the stage.

    Hold down the Shift key to constrain the circle while you draw it.

  2. With the new circle selected, press F8; when the Convert to Symbol dialog box appears, choose Graphic from the Type drop-down list and enter a name for the symbol in the Name text box.

    In this example, we named the circle Ball.

  3. Right-click (Windows) or Control-click (Mac) the first frame of the layer and choose Create Motion Tween from the contextual menu that appears.

    A new tween span is created, and the playhead advances to the last frame of the tween span.

  4. Using the Selection tool, select and move the symbol straight to the top of the stage while preserving its horizontal position.

Drag the symbol slowly toward the top of the stage to keep it from shifting left or right. The Snap to Objects behavior keeps the symbol aligned with its original horizontal position until you release it.

  1. Press Enter or Return to preview the animation.

    The ball should now move from the bottom to the top of the stage.

  2. Click directly on the tween span on the Timeline to select it and then click the Motion Editor’s panel tab to bring it forward.

    You see the various properties of your tween represented on the Motion Editor panel.

  3. Scroll to the bottom of the Motion Editor, locate the Eases row, and change the Simple (slow) value from 0 to 100.


    You can click and drag over the value to change it, or double-click and enter a value by hand.

    You see that the default Simple (slow) ease is already listed. You can add other types of eases to use later, but for now the default works fine.

    Changing the value creates an ease out, which slows the animation as it comes to completion.

  4. Scroll to the top of the Motion Editor and locate the Basic Motion row; directly to the right, choose Simple (slow) from the drop-down list.

    This step applies the ease to the motion properties of your tween.

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

    The animation slows down gradually as it reaches completion.

Reverse the easing in Flash CS5

What goes up must come down, so the following steps walk you through making the Ball return to the ground:

  1. Click the Timeline tab and then click directly on the layer anywhere within the tween span to select the entire motion tween.

  2. Right-click (Windows) or Control-click (Mac) the selected frames to open the contextual menu and then choose Copy Frames.

  3. On the same layer, select the next empty frame immediately after the tween span ends.

  4. To paste the tween you copied in Step 2, make sure that the frame is selected, right-click (Windows) or Control-click (Mac), and choose Paste Frames from the contextual menu that appears.

  5. Click the newly pasted tween span to select it.

  6. To flip the tween backward, right-click (Windows) or Control-click (Mac) the selected frames and choose Reverse Keyframes from the contextual menu that appears.

  7. Press Enter or Return to preview your animation.

    The ball goes up and then down, and conveniently the animation is not only reversed but is also easing.

Use easing with Flash CS5 IK animation

Just as with motion tweens, you can mimic the forces of gravity and inertia using easing with IK animations. Although the Motion Editor isn’t available for posed animation, you can easily add easing behavior from the Property inspector to give your IK animation a more realistic look and feel.

Follow these steps to add easing to an Armature layer:

  1. Click and select the first frame of an existing IK Armature layer on the Timeline.

  2. Locate the Ease options on the right side of the Property inspector — the default value is set to zero (no ease) — and then click and drag to change the value to 100 (Ease Out).

  3. (Optional) Select another type of ease from the Type drop-down list.

  4. Press Enter or Return to view the animation.

    You see the easing change the behavior of your animation.