Easing tweens



Easing is a technique for modifying the way that Flash calculates the property values in between property keyframes in a tween. Without easing, Flash calculates these values so that the change to the value is the same in each frame. With easing, you can adjust the rate of change to the values for more natural or more complex animation.

An ease is a mathematical curve that is applied to the property values of a tween. The final effect of the tween is the result of the combination of the range of property values in the tween and the ease curve.

For example, if you animate a picture of a car across the Stage, the motion is more realistic if the car starts from a stop and slowly gains speed and then slowly comes to a stop at the other side of the Stage. Without easing, the car would go from a stop to full speed instantly and then stop instantly at the other side of the Stage. With easing, you can apply a motion tween to the car and then make that tween start and end slowly.

View full size graphic
A motion path with no ease applied. Note the even distribution of frames along the path.

View full size graphic
The same motion path with the Stop and Start (Medium) ease applied. Note the concentration of frames near the ends of the path, resulting in more realistic acceleration and deceleration of the car.

You can apply easing in the Property inspector or the Motion Editor. Eases applied in the Property inspector affect all of the properties that are included in a tween. Eases applied in the Motion Editor can affect a single property, a group of properties, or all properties of a tween.

An ease can be simple or complex. Flash includes a range of preset eases that you can apply for simple or complex effects. In the Motion Editor, you can also create your own custom ease curves.

One of the many common uses of easing is when you have edited a motion path on the Stage and enabled roving keyframes to make the speed of motion consistent in each segment of the path. You can then use easing to add more realistic acceleration and deceleration at the ends of the path.

When you apply an ease curve to a property curve, a visual overlay of the ease curve appears in the property curve graph area. By showing the property curve and the ease curve in the same graph area, the overlay makes it easier to understand the final tween effect that you see on the Stage when testing the animation.

Because ease curves in the Motion Editor can be complex, you can use them to create complex motion on the Stage without creating complex motion paths on the Stage. You can also use ease curves to create complex tweens of any other properties in addition to the spatial properties X, Y, and Z.

Jen DeHaan provides a useful article about modifying and applying custom eases and another about easing between keyframes at her Flashthusiast.com site.

Ease all properties of a tween in the Property inspector

When you apply an ease to a tween with the Property inspector, the ease affects all of the properties that are included in the tween. The Property inspector applies the Simple (Slow) ease curve, which is also available in the Motion Editor.

  1. Select the tween in the Timeline or the motion path on the Stage.
  2. In the Property inspector, select the ease to apply from the Ease menu.
  3. Enter a value for the strength of the ease in the Ease Value field.

Ease individual properties in the Motion Editor

You can apply a preset ease to an individual property or a category of properties in the Motion Editor.

View full size graphic
The shapes of the ease curves included with Flash.

To use eases in the Motion Editor, add an ease curve to the list of eases available to the selected tween and then apply the ease to the properties you choose. When you apply an ease to a property, a dashed-line curve appears overlayed onto the graph area of the property. The dashed-line curve shows the affect of the ease curve on the actual values of that property of the tween.

  • To add an ease to the list of eases available to the selected tween, click the Add button in the Ease section of the Motion Editor and then select the ease to add.

  • To add an ease to a single property, select the ease from the Selected Ease menu for the property.

  • To add an ease to a whole category of properties, such as motion, transformation, color effect, or filters, select an ease type from the Selected Ease menu for the property category.

  • To enable or disable the effect of the ease for a property or category of properties, click the Enable/Disable Ease checkbox for the property or category of properties. This allows you to quickly see the effect of an ease on property curves.

  • To remove an ease from the list of available tweens, click the Remove Ease button in the Eases section of the Motion Editor and then select the ease from the pop-up menu.

Edit ease curves in the Motion Editor

In the Motion Editor, you can edit the properties of the preset ease curves and make your own custom ease curves.

  • To edit a preset ease curve, set the value for the ease in the field next to the ease name.

    For simple ease curves, the value is a percentage representing the strength of the application of the ease curve to the property curve. Positive values increase the ease at the end of the curve. Negative values increase the ease at the beginning of the curve.

    For ease curves that are waves, such as the sine wave or sawtooth wave, the value represents the number of half-cycles in the wave.

    To edit a preset ease, first add it to the list of available eases with the Add button in the Ease section of the Motion Editor.

  • To edit a custom ease curve, add an instance of the Custom ease curve to the list of eases and then edit the curve using the same techniques as for editing any other Bezier curve in Flash. The initial value of the ease curve must always be 0%.

    You can also copy and paste the curve from one custom ease to another, including to custom eases in separate motion tweens.