Flashthusiast

In Flash CS3, you could set easing on each keyframe in your animation to apply easing between two instances. Because there is only one instance per tween span, you cannot ease the same way using the new motion model. In order to apply an easing effect to a motion tween, you need to use a custom ease or modify curves in property graphs using the Motion Editor. Keep reading to learn how to ease between keyframes using a custom ease.

You can create a custom ease in the Eases section of the Motion Editor, and then apply them using the Ease menu for each property or category of properties. Refer to this blog post for more information on creating a custom ease. The following section shows you how to create an ease-in, ease-out effect using a custom ease to effectively ease between keyframes.

Note: Another way to create an easing effect between keyframes is to add curves to your animation graph using the Motion Editor. Because the curve controls the rate of change over time, you can control how the property animates like easing does (see the following figure - click to enlarge).

Add curves to rotation to control the rate of change between keyframes.

Note: Controlling curves in X, Y, and Z property graphs (spatial properties) does not work the same way as with other property graphs. A custom ease is best for easing between spatial property keyframes.

How to ease between keyframes using a custom ease
Easing between keyframes is achieved a different way when you use Flash CS4. In Flash CS3, you used the Property inspector to apply easing to individual keyframes. Because there’s only one keyframe per span in Flash CS4, you need to use a custom ease or directly manipulate property curves to add an easing effect between keyframes.

The following example shows you how this is achieved using custom ease.

1. Open the starter file ease-starter.fla. The file has two motion tweens, a classic tween that uses easing between keyframes to ease in and out, and a new tween that you will apply easing to. Play the animation to see what you will replicate.
2. Select the blue tween span on the new tween layer, and then open the Motion Editor (Window > Motion Editor).
3. Scroll to the Eases section, click the Add button and choose Custom from the menu.
4. Move the playhead so it’s at frame 12 (where the middle keyframe is located), and click the Add Keyframe button that looks like a gray diamond (see the following figure).

Click the add keyframe button in the Motion Editor, so the gray button turns yellow.

5. Leave the keyframe where it is on the graph, and then select the first keyframe and drag the handle that extends until it’s vertical above the keyframe and the curve roughly matches the following figure.

Drag the handles so it looks a lot like this curve.

6. Now repeat with the last keyframe, dragging the handle so it’s vertical beneath the last keyframe and roughly matches the following figure.

Drag the handles some more.

7. Now Alt-click (Win) or Option-click (Mac) the middle keyframe so it’s a corner point, or drag the handles so they’re horizontal.
8. Select Custom from the Ease menu for the X and Y properties (see the following figure - click to enlarge).

Choose custom ease from the menu in the Ease column. The graphs update to show how the ease affects the X and Y properties.

9. Play the animation again, and your tween should match the classic tween with easing between keyframes. If not, fine tune the curve in the Custom ease graph while watching the motion path dots update on the Stage.

The finished version of this file is called ease-finished.fla.