Ultrashock Tutorials > Flash5 > Extending Prototypes of Built-in Objects  
 
by: Robert Penner, robertpenner.com


Source File

 
Extending Prototypes of Built-in Objects
 

Flash has numerous built-in objects like MovieClip, String, Math, Array, Color, and Object. Each has useful methods and properties that are defined in the Actionscript manual. Have you ever wanted to play Dr. Frankenstein with these objects? For instance, you'd like every movie clip to have a method to flip itself horizontally or vertically, something like ball.flipX(). In other words, each movie clip in your movie would automatically inherit your flipX() method.

This actually isn't very difficult. If you know the right syntax, you can add your method to the prototype of the built-in object. For example, this is how you would add the flipX() method to the MovieClip class:

MovieClip.prototype.flipX = function () {
    this._xscale = -this._xscale;
};

Now you can flip any movie clip by calling your method like this:

mc.flipX();

Here is a flipY() method to match:

MovieClip.prototype.flipY = function () {
    this._yscale = -this._yscale;
};

In general, you can add a method to a built-in object using this syntax:

BuiltinObject.prototype.method = function () {
    // code
};

(A little sidenote on terminology: the MovieClip.flipX() method I created is not "a prototype"; it is a prototyped method. The MovieClip class only has one prototype, so you can't "add a prototype" to MovieClip.)

Here is a SWF that demonstrates the flipX() and flipY() methods:

The source file for this movie is here.

Overwriting Built-in Methods

Not only can you add new methods to the built-in objects, you can actually overwrite their built-in methods. For instance, Branden Hall from Figleaf has written new String methods that are substantially faster than the default ones in the Flash Player.

To overwrite a built-in method, just use the same syntax as for adding a method. For example, the Array.push() method is fairly slow in Flash 5. You can overwrite it with this code:

Array.prototype.push = function (data) {
    this[this.length] = data;
};

The above code inserts data into the end of the current array. Notice that the this keyword is used to refer to the current object, from inside the method.

Extending Static Built-in Objects

Math, Selection, Key, and Mouse are "static objects," as opposed to classes like Array and Date. "Static" means that there is just one object that sits there; you can't instantiate any more of them. For instance, you can't create more Math objects.

Extending some of the built-in objects needs to be done a little differently. Static objects don't have a prototype property, so you add properties and methods directly to the object instead. For example, this is how you could write a Math.distance() function, that finds the distance between two points:

Math.distance = function (x1, y1, x2, y2) {
    var dx = x2 - x1;
    var dy = y2 - y1;
    return Math.sqrt (dx*dx + dy*dy);
};

In general, you can use this syntax to extend static objects:

StaticObject.method = function () {
    // code
};

Note: don't use this syntax:

StaticObject.__proto__.method = function ()

Using __proto__ in this case will actually add the method to Object.prototype, which we don't want.

Prototype Extension Resources

To explore this area further, check out the Functions, Prototypes, and Classes forum here in the Ultrashock community. I personally have written some easing functions and color methods that extend the Math and Color objects. These have been discussed in the Ultrashock forums for Actionscript and Functions, Prototypes, and Classes.

There are also several sites that store collections of custom prototype methods:

http://www.layer51.com/proto/
http://www.five100.com/protos/protoJunkie.html
http://www.sephiroth.it/download/prototype.php

Have fun, and try not to overextend yourself. It will drive you mad, I tell you, MAD!

 

 
©2002 Ultrashock.com Inc. - All rights reserved