Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > Flash Animation Five Tips in Five Days: Tip 1 - Easing

Flash Animation Five Tips in Five Days: Tip 1 - Easing

All animation is rooted in motion. When an object moves, it generally goes through 2 types of motion: ballistic and honing.

Ballistic motion is movement in the general direction of the target. Honing motion occurs when the object gets close to its target position and needs to approach its endpoint with greater precision. Imagine a helicopter moving rapidly at a constant speed toward a landing pad miles away. Finally, the helicopter slows dramatically before it touches down, landing accurately in place. Thus, the helicopter is easing into its target position on the landing pad. In Flash, this type of easing would be considered an ease-out because the easing occurs at the end of the motion.

Now imagine you're in a car at a stoplight. The light turns green and you begin accelerating until you reach a constant speed. Your car has eased-in to its motion. Almost everything in the world around you moves with some amount of easing, with a few exceptions (e.g., an object coming to a complete stop when hitting a brick wall). Easing is a simple and effective way to simulate realistic movements in Flash. Viewers may not immediately know why, but they will be more moved (pun intended) by animation that makes appropriate use of easing.

To create a simple ease-in or ease-out in Flash, you can adjust the Ease value of a selected tween in the Properties panel.

The Motion Editor added to Flash CS4 and CS5 facilitates the application of complex eases within Flash. The default ease available in the Motion Editor is called Simple (Slow), which is an ease-out. The curve on the graph toward the last frame (below) indicates that the animation will slow toward the end.

You can add a new ease to the list by clicking the Add Ease button.

There are several different types of advanced easing that come preinstalled with Flash CS5.

Once you've added the ease to your list, you can apply it to your tween's properties using the menus inside the Motion Editor.

To create a custom ease, you can also adjust the points and the curvature of the ease in the Motion Editor. For more details on custom eases, see this page on Flashthusiast, and this page on Kirupa.

Once your animation appears the way you want it, you can store it as a Motion Preset for future reuse.

You can also create advanced eases for Classic (known as Motion pre-CS4) tweens, using the Edit easing button in the Properties panel.

In the Custom Ease window, you can adjust the ease to your liking. For example, you can adjust the bezier handles at the start and end points to create an ease-in-out.

The Motion Presets panel is great for storing your entire animation. However, what if you just want to save a custom ease (and not the entire animation) for later use? Check out the free Ease Caddy extension. Ease Caddy can store and cross-apply eases from both Motion and Classic tweens.

Now that you know about eases, and you've got the tools to apply them, you can add that extra bit of realism to your animations!

For more tips and step-by-step, illustrated instructions for creating animation in Flash, check out Animation with Scripting in Adobe Flash CS5 Studio Techniques.