Easing - Page 5

So far we have focused on implementing easing and making the implementation more portable (see previous page), but there are some edge cases that we will need to address before you can use this effect without running into any issues.

4. Delegating the onEnterFrame Handler
Up till now, our method has always been using the onEnterFrame handler of the MovieClip it was easing. This is an issue when we want to ease a MovieClip that already has an onEnterFrame handler set to perform some other task. We can’t just assume that it’s ok for us to overwrite any MovieClip’s onEnterFrame handler!

[ the MovieClip’s onEnterFrame handler directly sets its own _x property – not good ! ]

Considering that every MovieClip instance listens to the onEnterFrame event, the solution to this problem is obvious: we’ll just use another MovieClip’s onEnterFrame handler ! But which MovieClip ? It has to be one of which be can be sure it has no onEnterFrame handler already in use. The only way we can be sure about that, is by spawning and using an auxiliary MovieClip. Because our auxiliary MovieClip has just been created, we are sure that it does not have an onEnterFrame handler already in use.

So where do we spawn this auxiliary MovieClip ? Since every MovieClip must be able to ease separately from any other, we will create it inside the MovieClip we will be easing. This also enables for easy targeting: our auxiliary MovieClip will only need to target its parent MovieClip to get a reference to the MovieClip it will be easing around.

[ A better way of doing it: delegating the onEnterFrame to an auxiliary child MovieClip ]

Spawning MovieClips through ActionScript is done using the createEmptyMovieClip function. The new MovieClip will be created inside the MovieClip that called the method, making the MovieClip that called the method the parent of the newly created MovieClip. When creating it, you must specify an instance name and a depth for the MovieClip. The choice of these two values is important, as they both have to be unique for each easing method.

Right now we’re seeing a method of easing along the X axis, but we will also see methods for easing a MovieClip’s width, height, y position, scale, etc. That’s why we will now rename our easing function to easeX, to differ between any additional future easing methods. Because a MovieClip should be able to ease more than 1 of these properties at the same time, we must make sure that all the easing methods use different auxiliary MovieClips that take care of the separate easing loops. And to ensure they are all different, we must ensure that they all have both consistently unique instance names and consistently unique depths.

MovieClip.prototype.easeX = function( to:Number , speed:Number ){

if( what._x != to ){

var _this:MovieClip = this;

var aux:MovieClip = this.createEmptyMovieClip( “aux_easeX” , 1337 );

var previousPosition:Number = this._x;

if( isNaN( speed ) || Number(speed) !== speed || speed <= 1 ) speed = 1.2;

aux.onEnterFrame = function(){

this.x = to – ( to - this.x ) / speed;

if( this.x == previousPosition ){

this.x = to;

this.removeMovieClip();

}

previousPosition = this.x;

}

} else {

// do nothing

}

}

Notice that we are now no longer just removing the MovieClip’s onEnterFrame, but rather the entire auxiliary MovieClip. This because when the easing movement has ended, this extra MovieClip has lost its purpose and should be deleted. For easy code adjustment within the loop body, we have saved a reference to the parent MovieClip being eased as _this, so that we need only replace the this by _this in order to target the MovieClip we’re easing instead of the auxiliary MovieClip.

So now, we can ease MovieClips around just like before, but this time keeping their onEnterFrame handler intact.

Onwards to the next page!
 

1 | 2 | 3 | 4 | 5 | 6