An 'easing function' is a function that controls how a numerical variable changes over time. An 'easing function' causes the change to accelerate, to decelerate, or to change direction in a variety of fashions. Such effects allow for more realistic looking motion and behavior in many situations. The applet below uses our circular motion to illustrate the built-in AS3 easing functions. Many of these functions were originally created by Robert Penner in his work on visual programming for Flash MX.
Download the fla file for the applet above.
The code is almost the same as the code on the previous page and the changes are well-commented in the fla file above. In a nutshell, we added a variable that stores an array of easing functions. The 'click to change easing' button loops through the array. The tween, constructed in the same way as on the previous page, uses the current easing function as a parameter. We also added an array of strings that contains the names of easing functions to be displayed in the text field on the Stage.
The Easing Functions
The built-in AS3 easing functions are divided into five types with descriptive names:
Back, Bounce, Elastic, Regular, Strong
For each type there are three directions:
In, Out, InOut
'Out' gives an effect (deceleration, bounce etc.) at the end of the tween, 'In' at the beginning, 'InOut' at the beginnig and at the end.
The applet above illustrates all the 'Out' combinations: Bounce.Out, etc., and all 'InOut' combinations, BounceInOut, etc.
On the next page, we use the technique described in this tutorial to imitate the motion of a dragged and released balloon.