Easing - Page 4

We now have our easing function. But a function is only a function, and when you’re working on a project with a rather large hierarchy of MovieClips, you’ll find it annoying to always have to create a huge path to that one function somewhere on the main timeline to call it from way down in your MovieClip hierarchy.

3. Making Usability and Good-Practice Adjustments
Luckily, Flash provides us with the MovieClip.prototype object to easily solve this issue. I will not discuss the ins and outs of what prototype objects are and how they work: for an excellent and all-in explanation anything you’ll ever need to know about AS 1.0 OOP, please read this tutorial by resident Flash guru Senocular. It’s a long read, but it’s your road to Flash enlightenment.

By defining this function in the MovieClip.prototype object, every MovieClip anywhere will be able to call this method as if it were their own. The prototype function looks like this:

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

var previousPosition:Number = this._x;

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

this.onEnterFrame = function(){

this._x = to – ( to – this._x ) / speed;

if( this._x == previousPosition ){

this._x = to;

delete this.onEnterFrame;

}

previousPosition = this._x;

}

}

Notice that we have made a few additional changes here. The speed value can now be passed along as an argument to the function, allowing for every MovieClip to be eased at an individual speed. If the speed value is in any way incorrect, it will default to 1.2.

Now that we have defined our function as a prototype method, we can apply it to any MovieClip we want. Whereas previously you would call the easing function like this:

ease(myMovieClip,600);

We can now call it like this:

myMovieClip.ease(600, 1.2);

Which, I’m sure you’ll agree, is handier to work with, especially when we’ll be adding functionality later on.

We can now look further into optimizing this method of easing. For example, what if the MovieClip is already at the position it was called to ease to ? Simple: the onEnterFrame loop will be entered, its next position will be calculated, the difference in position will be 0, so that the next position will equal its starting position. Therefore the new position will immediately equal its previous (starting) position, and the loop will immediately exit.

Even though this will work just fine, this is not good programming practice. When you move a MovieClip to the position it’s already at, you haven’t done anything. So it also would make sense for our function not to do anything either. An easy if check will make sure of that:

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

if( what._x != to ){

var previousPosition:Number = this._x;

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

this.onEnterFrame = function(){

this._x = to – ( to – this._x ) / speed;

if( this._x == previousPosition ){

this._x = to;

delete this.onEnterFrame;

}

previousPosition = this._x;

}

} else {

// do nothing

}

}

We now have generic easing function that can be applied to any MovieClip anywhere in the movie using an individual speed setting, and cleans up after itself. Looking even better!
 

The above animation shows all of the code I have explained in action.

Onwards to the next page!
 

1 | 2 | 3 | 4 | 5 | 6