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!
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.
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!
|
Easing - Page 2
