Motion Tweening and Easing
       by kirupa  |  7 October 2005

In the previous page, I introduced some basic instructions on how to create a tween. In this page, I'll talk about easing and how to apply it to the animation you created earlier.

In the example you created in the previous page, the circle grew in size and shrunk in size at a linear rate. For the most part, in real life, very few things increase and suddenly decrease linearly. As an example, when you apply the brakes on a moving vehicle, you do not slow down at a steady rate. You initially slow down quickly before slowing down gradually as time progresses.

The natural way of gradually slowing down or speeding up is known as easing in geek terminology. In Flash, easing refers to the rate at which you move between keyframes during a tween. The speed at which you move through Frames in Flash is specified by your frame rate. In our example, the frame rate is set to 25 frames per second.

With easing applied, it will feel as though your frame rate is adjusted lower or higher than the limit you provided, for your object may accelerate or decelerate its transition from one state to another depending on which type of easing you chose.

Easing & Feel

I emphasize the word feel in the above paragraph because Flash does not really accelerate or decelerate your movie's frame rate. Doing so would cause jerky movement as opposed to the smooth movement you would expect with an ease. I 'felt' that it would be the best word to use to describe the situation :)

Speaking of types of easing, let's get into the two types of easing you will use:

  • Ease In
    When you gradually speed up into an animation sequence.
  • Ease Out
    When you gradually slow down before reaching the end of your animation sequence.

Let's go back to our animation. As you can tell, we animated the circle to grow and then shrink back to its original size. Let's add some easing to our circle animation by easing it into its expanded size and easing back out to its normal size:

  1. Select any frame between the two keyframes on Frame 1 and Frame 25. In your Properties panel, find the Ease text-field and enter -100:

[ enter a value of -100 in the Ease text-field ]

  1. A negative number in the Ease text-field indicates an Ease In. Let's add an Ease Out. select any frame between your keyframes on Frame 25 and Frame 50. From the same Ease text-field, enter a value of 100.
  2. When you preview your animation by pressing Ctrl + Enter, notice that your circle now has a slight bounce when it grows and shrinks. That's easing!

Did you notice that I did not have you select all of the frames between any two keyframes to apply the effect? I simply requested you to click on any frame between the first two or last two keyframes. Any changes you make to your tween are always applied between two keyframes.

Selecting frames, for example, between 10 and 15 and adjusting the ease will not adjust the ease for those 5 frames. It will apply them to all the frames between the two keyframes at Frame 1 and Frame 25.

Custom Ease In / Out*

In Flash 8, you have more control over your easing beyond simply entering a value in the Ease text field. If you press the Edit button, found to the right of the Ease text field, you have greater control over your Ease as well as which property (position, rotation, scale, color, filters) of your animation will be affected by your custom ease.
Addressing this topic requires a tutorial of its own, so I will hold off on explaining the intricacies of the custom easing feature until a later tutorial.

* Thanks to TheCanadian for reminding me.

You are almost done. In the next page I will explain some common tips, tricks, and problems to avoid when using tweens.

Onwards to the next page!

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.