Recipe 4.4. Applying Advanced Tweening Effects

Problem

You want to apply an advanced tween that combines several easing settings and/or has elastic or rebound effects.

Solution

Use the Custom Ease In/Ease Out utility.

Discussion

Prior to Flash 8, applying advanced tweens was a manual procedure requiring you to use several tweens back to back. For example, if you wanted to do something as simple as animate a ball that drops and bounces, it required several tweensone as the ball dropped and accelerated, a second as the ball rebounded, a third as gravity pulled the ball downward again, and so forth until the ball finally rested. The process became even more complex if the ball's shape changed as it hit the surface, as a tennis ball might.

However, starting with Flash 8, you can accomplish such advanced and custom tweening effects with just one tween by utilizing the Custom Ease In/Ease Out utility. In order to use the utility, you must first apply a tween as discussed in Recipe 4.1. Then, with the first frame of the tween selected, click the Edit button next to the Ease field in the Property inspector. Clicking the Edit button opens the Custom Ease In/Ease Out utility.

The Custom Ease In/Ease Out utility displays the tween progress as a line moving across a graph from the lower-left corner to the upper-right corner. The lower-left corner represents the starting point of the tween, and the upper-right corner represents the stopping point of the tween. When you first apply a custom tween effect using the utility, the line is a straight line, indicating that the tween is applied in a linear fashion over the duration of the animation. However, you can adjust the line in several ways:

• Click any existing point (represented by a black square) on the line, and the corresponding control points are displayed. You can then adjust the control points to affect the curvature of the line.

• Click anywhere on the line where there is not an existing point, and a new point is added.

• Click and drag any point (except for the end points) on the line to move it.

• Hold the Alt key, and click on the points to delete them.

By default, the same custom easing setting is applied to every property. For example, if you have a motion tween for which the alpha and the location are both changed, the same custom easing graph is applied to both properties. However, just above the graph is a checkbox labeled "Use one setting for all properties." If you uncheck that option, the drop-down menu to the left of it is enabled, and you can apply different custom easing settings to each of the properties. By applying different settings to each property, you can make much more sophisticated animations than by applying the same easing settings to all the properties. Working with each property individually requires a fair amount of trial and error, but the effect can be rewarding.