How to Create a Flash CS6 Document
Assemble the Menu for Your Website in Flash
How to Create Your First Animation in Flash

How to Create Inertia and Gravity in Adobe Flash CS6

When objects take motion in real life, several factors affect their speed as they move. In Adobe Flash CS6, you can reproduce the effects inertia and gravity on an object by adding eases to your existing tweens. Flash’s animation engine makes lots of easing behaviors available, including Bounce, Spring, Ease In (speed up), Ease Out (slow down), and more.

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 the F8 keyboard shortcut; when the Convert to Symbol dialog box appears, select Graphic from the Type drop-down list and enter a name for the symbol in the Name text box.

  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.

  5. Press Enter or Return to preview the animation.

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

  6. 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.

  7. 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.

  8. 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.

    image0.jpg
  9. Press Enter or Return to play back and preview your animation.

    The animation slows down gradually as it reaches completion.

You can see how easing affects the speed of the tween as it progresses, and now a simple animation becomes much more lifelike. However, 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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Add Functionality to Your Buttons in Flash
How to Enable Rulers and Guides in Adobe Flash CS6
How to Create Buttons in Flash
How to Create Animation in Adobe Flash CS6
How to Use Frame Labels in Adobe Flash CS6
Advertisement

Inside Dummies.com