How to apply and control custom easing effects in Flash

by Rafiq R. Elmansy

Are you looking to give your Flash animations realistic motion effects? Good news. With the Custom Ease In/Ease Out you can easily and precisely control the velocity of animated objects using a graph that provides independent control of position, rotation, scale, color, and filters. This feature can yield amazing motion tweening effects that are easy to create and fun to play with.

In this article, I will explain the Ease In/Ease Out graph by showing you specific examples that create interesting animation effects. I also discuss custom easing properties and how to apply multiple easing effects.

Custom easing in Flash

Flash CS3 and Flash 8 provide a few methods for controlling the easing of your animation. The first uses the Ease slider in the Property inspector. This is how you did it in previous versions of Flash. The second method uses the Custom Ease In/Ease Out dialog box, which is available only for motion tweening animation. (The third way involves ActionScript, whether you use the Tween class/easing methods or your own equations.)

When you click the Edit button next to the Ease slider (you must first click a frame on the Timeline that contains a motion tween), the Custom Ease In/Ease Out dialog box appears with a graph that provides independent control over the symbol properties such as the position, rotation, scale, color, and filters, all of which change during the motion tweening.

Note: When you apply custom easing on your symbol, the Ease value in the Property inspector displays --.

The Custom Ease In/Ease Out dialog box includes the following features:

• The Ease In/Ease Out graph lets you control the easing of your tweening by editing the curve through the control points, as I discuss in the next section.
• The Use One Setting for All Properties option uses one curve setting for all object properties (selected by default).
• The Property pop-up menu becomes active when you deselect the Use One Setting for All Properties option; it allows you to specify a separate curve setting for each of the position, rotation, scale, color, and filters properties of the symbol.
• The Play and Stop buttons let you preview the curve effect on your animation.
• The Reset button reverts the velocity curve to its default position.

This article concentrates on the Ease In/Ease Out graph, which is the powerhouse behind the easing feature.

Understanding the ease in/ease out graph

The Ease In/Ease Out graph is easy to use. The horizontal axis represents the frames of the movie and the vertical axis represents the percentage of change in animation (tweening). You control the animation using the control points on the velocity curve. You can add points by clicking the curve or delete points by selecting a point and pressing the Delete key.

Each control point has two handles, called tangent points. By moving these tangent points, you can control the shape of the velocity curve (see Figure 1). This affects the smoothness of the resulting tweening animation.

Let's break down the different parts of the graph to see better how it works. The speed of the tweening is affected by the slope of the velocity curve. The vertical parts of the curve with a large slope represent a fast animation, while the horizontal parts with a small slope represent a slow animation. In Figure 2 the velocity curve starts with a large slope value, moves horizontally, and ends with a large slope again in the end of the animation.

Play the following demo to see the effect of the velocity curve slope in Figure 2 on the animation:

As I mentioned, the tangent points affect the slopes in the velocity curve. Steep curves produce a sharp, fast animation that is suitable for mimicking a collision, such as metal balls hitting each other. I will get to this example later.

Wide curves produce a smooth animation that is suitable for creating slow movements. In Figure 3, the first collision with the opposite border is a sharp animation point, which indicates a fast trajectory of the animated star, while the wide part of the velocity curve produces a slow return of the star to the middle of the Stage.

Play the following demo to see the effect of the tangent points shown in Figure 3 on the animation:

In this example, the points' location on the graph indicates the tweening percentage. Whe you put a low-value point after a high-value one, this means that the tweening will retreat back to a lower percentage. In Figure 3, the lower point indicates that the motion tweening will retreat to 30% of the tweening after reaching its final effect (100% percent).

Using the easing graph to create animation effects

The following example mimics the collision of two metal balls. In previous versions of Flash, you had to go through a lot of motion tweening and keyframes to get the result you wanted. But as you will see, you will accomplish the effect with only one motion tweening for each symbol (the metal ball).

To create the effect in the example, follow the steps below:

1. Create a metal ball symbol as shown in the MetalBall.fla example and put it on the Stage.
2. Duplicate the metal ball symbol instance and put each instance on a different layer.
3. In the first keyframe of the animation, position the metal ball symbols as shown in Figure 4. The transformation point is as shown.

4. In frame 50, create another keyframe and position the metal ball symbols as shown in Figure 5.

5. Create a motion tween for both symbols and select any frame within it.
6. In the Property inspector, click the Edit button next to the Ease slider.
7. In the Custom Ease In/Ease Out dialog box, edit the velocity curve so that it resembles the graph you see in Figure 6.
8. Preview your animation by clicking the Play button in the dialog box. It should appear as it does in the following animation.

Play the following demo to see the sample motion tweening animation that uses a Custom Ease In/Ease Out setting:

Applying multiple easing effects

In the Custom Ease In/Ease Out dialog box, the Use One Setting for All Properties option is the default option. However, you can control each object's properties independently by deselecting this option. When you do so, the Property pop-up menu becomes enabled and provides a separate velocity curve for each of the symbol properties listed.

The following list describes the properties that appear in the in the Property pop-up menu and how each one affects the velocity curve:

• Position affects the position of the animated symbol through the motion tweening
• Rotation affects the rotation of the animated symbol, such as the sample in Figure 3
• Scale affects the size of the animated symbol
• Color specifies the ease settings for color transitions applied to the animated instance
• Filters affects the filters applied to the animated symbol

When you create a velocity curve for each symbol property, you are applying a multiple easing effect on one symbol. In the following example, you will see how to apply a different easing setting for the Position and Filters properties of a star instance.

Play the following demo to see the star animation with two easing settings (Position and Filters property) applied to it, as shown in Figures 7 and 8:

The velocity curve in Figure 7 shows the easing setting for the position of the star throughout the motion tweening.

The velocity curve in Figure 8 shows the easing setting for the Blur filter applied to the star throughout the motion tweening.

In the next example, a bouncing ball as seen from the top, I have applied a different easing setting to the Scale and Filters velocity curves (Figures 9 and 10).

Play the following demo to see the bouncing ball animation with two different easing settings for the Scale property and Blur filter:

The Scale setting (see Figure 9) creates the bouncing-ball effect, while the Filters setting (see Figure 10) creates the blur at the end of the animation.

Where to go from here

Try to mimic natural animation effects and explore what else you can do with the velocity curve. Create a simple motion tween, open the Custom Ease In/Ease Out dialog box, and start editing the velocity curve to see how these changes affect the animation.

The following articles will also help you understand easing and how to use it to create animation effects:

• Basic Motion Tweens (by Lynda.com)
• Designing and Animating Characters in Flash 8: Introducing "2.5D" (by Chris Georgenes)
• Flash Animation Learning Guide: Applying Easing and Custom Ease-in and Ease-out to Motion Tweens (edited by Jen deHaan)
• Using the Tween and Transition Classes in Flash MX 2004 (by Jen deHaan)

Visit the Flash Player Developer Center

‹ Back

---