back

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:

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.

Custom Ease In/Ease Out graph

Figure 1: Custom Ease In/Ease Out graph

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.

Effect of the velocity curve slope on the animation

Figure 2: Effect of the velocity curve slope on the animation

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

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

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.

Tangent points in the velocity graph

Figure 3: Tangent points in the velocity graph

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

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

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.
Symbol positions in the first animation keyframe

Figure 4. Symbol positions in the first animation keyframe

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

Figure 5. Symbol positions in frame 50

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

Figure 6. Editing the velocity curve

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

View here: metal-balls.swf

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:

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:

View here: multi-easing.swf

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

Easing setting for the Position property of the animated star

Figure 7: Easing setting for the Position property of the animated star

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

Easing setting for the Blur filter applied to the animated star

Figure 8: Easing setting for the Blur filter applied to the animated star

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:

View here: multi-easing2.swf

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.

Easing setting for the Scale property applied on the bouncing ball animations

Figure 9: Easing setting for the Scale property applied on the bouncing ball animations

Easing setting for the Blur filter applied to the bouncing ball animation

Figure 10. Easing setting for the Blur filter applied to the bouncing ball animation

Copying and pasting motion tweening with easing applied

The new Adobe Flash CS3 gives you the ability to copy motion tweening or apply it to a specific symbol on a separate layer. There are different methods to use the copy motion feature such as:

Here, we will use this feature to copy the easing effect we applied previously to the star and apply it on a different symbol as following (see Figure 11):

  1. Create a new symbol as shown in copy-easing.fla and put it in a separate layer.
  2. Right-click the Timeline in the star's layer and choose Copy Motion from the pop-up menu.
  3. Select the ball symbol and choose Paste Motion from the pop-up menu.

Figure 11. Copy and paste motion tweening with custom easing effect applied to it

The following animation shows the ball animation with the motion tweening and easing applied to it.

View here: copy-easing.swf

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:

Visit the Flash Player Developer Center


Rafiq Elmansy (Adobe Community Expert) has been a multimedia graphic designer since 2001 and a graphic and web designer since 1999. His background is in fine art and sculpture. He uses Flash to create graphics and animations for desktop applications, cartoons, games, websites, e-learning courses, and mobile and Pocket PC applications.