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.
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.
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.
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.
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:
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.
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:
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).
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:
Figure 4. Symbol positions in the first animation keyframe
Figure 5. Symbol positions in frame 50
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
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.
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.
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.
Figure 9: Easing setting for the Scale property applied on the bouncing ball animations
Figure 10. Easing setting for the Blur filter applied to the bouncing ball animation
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):
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
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:
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.