Easing - Page 2
       by Voetsjoeba  |  9 December 2006

From the previous page, we have thought out how our easing works. Now, how can we apply this easing method in Flash? This page will start you on your path to finding out!

2. Creating the Easing Function in Flash
In any case, our function will have to use some sort of loop construction, so that we can have it follow the above steps inside it to create our easing movement. For and While loops are out of question here, as these would loop way too fast, making the movement practically invisible. The human eye cannot interpret a series of images as fast as a computer can execute for and while loops.

Luckily, Flash provides us with the onEnterFrame handler, which is called every time right before Flash draws a frame of the movie to the screen. The speed at which Flash does that is set by the movieís Frames Per Second ( FPS ) value. An FPS value of 24 means that Flash will draw a frame to the screen 24 times every second. This value is also the minimum FPS needed for the human eye to consider a sequence of images as an animation. I personally tend to use an FPS setting of 40: more than sufficiently fast, and not too resource-consuming.

By relying on the movieís FPS, we have an excellent loop to use. Here is some example code that implements the very first version of our easing function that will ease MovieClips along the stage following the x axis. In Flash, we will most commonly be easing MovieClips, as these are the most generic stage objects in Flash. Other stage objects such as TextFields or Buttons can also easily be eased using our final version of the function, but thatís an issue for when we get there. Furthermore, MovieClips directly implement the onEnterFrame handler which other stage objects donít, so that we do not have to worry about using helper MovieClips and the likes just yet.

var speed:Number = 2;
ease = function( what:MovieClip , to:Number ){
what.onEnterFrame = function(){
var distance:Number = to - this._x;
var newDistance:Number = distance / speed;
this._x = to - newDistance;
}
}

The first line sets the speed at which we will be easing. This is not really a speed at which the MovieClip advances (because that will decrease as it nears its destination), it is instead the value we will use to divide each distance by. This uniquely defines the speed of the easing.

Important

The value of speed must always be strictly greater than 1! If not, you will be moving your object away from itís goal rather than towards it, or not moving it at all.

Check out the following example:
 

Whatís important here is the ease function. It takes two arguments: the MovieClip to ease, and the x position to ease it to. Inside that function, we can see that the onEnterFrame event handler is being set for the MovieClip weíre easing. Every frame, we take the distance between the destination and the current position. We then divide that distance by 2; I assigned this value to the variable speed earlier. We then position the MovieClip to be newDistance away from its goal, thus we have successfully implemented our easing movement.

Onwards to the next page!

 

1 | 2 | 3 | 4 | 5 | 6




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.