How to Create a Flash MX Component - Page 4

Step 2. Define the triangle class

Now we will create the triangle class. Within the movie clip, add a new layer and label it "definitions". Open the Actions panel for the first keyframe and enter the following:

#initclip
function TriangleClass () {
this.cobj = new Color(this);
this.update();
}

// Allow TriangleClass to inherit MovieClip properties
TriangleClass.prototype = new MovieClip();

// Update draws the triangle at the current base and height values.
TriangleClass.prototype.update = function () {
if (this.applyTint) {
this.cobj.setRGB(this.tcolor);
}
this._xscale = 10 * this.tbase;
this._yscale = 10 * this.theight;
}

// Connect the class with the linkage ID for this movie clip
Object.registerClass("FTriangle", TriangleClass);
#endinitclip

You have just defined the component class! Let's take a closer look at the instructions you used to get this far.

#initclip and #endinitclip

Flash MX has two new statements ('pragmas'), #initclip and #endinitclip, that are used in defining components. When you make a component, you define a constructor for the class, define all the methods, and then register (connect) the class with the movie clip.

The #initclip and #endinitclip pragmas are used to mark a block of code for a component definition and registration. The code within the pragmas gets executed only one time during the playback of the whole movie, regardless of how many instances of the component you are using in the movie. The code within the pragmas is executed before any code in the timeline of the movie clip. This allows you to refer to class methods immediately when the clip is placed, overcoming a limitation of Flash 5 that required one to wait one keyframe before defined methods became available.

The TriangleClass Constructor

function TriangleClass ()

This defines the constructor for the triangle component. When Flash creates the component, it will call this constructor and execute its actions. The properties (tbase and theight) are automatically set by default already (we will see how, later).

Setting Up Inheritance of Movie Clip Properties and Methods

TriangleClass.prototype = new MovieClip();

When you issue the instruction to connect the class definition to a movie clip, Flash reassigns the type of the movie clip to the type (class) we define. However, we still want the movie clip to behave like a movie clip, so we have to set up our new class to inherit the methods and properties of movie clips. Therefore, the statement above sets up the inheritance so that we can use any method and property of a movie clip with our component.

It is imperative that this statement follows immediately after the constructor and before any methods have been defined for the class.

Triangle Update Routine

TriangleClass.prototype.update = function ()

This method draws the triangle at the current base and height values. It first checks to see if we are supposed to apply the tint to the triangle, and, if so, it applies the tint. The property "applyTint" is a true or false value that tells us whether or not to apply the tint. However, once a tint has been applied, it cannot be removed, only tinted to something else. This is a limitation of our programming strategy, which has been kept as simple as possible for didactic purposes.

In this example, we multiply by 10 rather than 100 because we originally set the triangle to a width and height of 10.

Registering the Class with the Movie Clip

Object.registerClass("FTriangle", TriangleClass);

This is the critical instruction that links the class (TriangleClass) with the movie clip identified with the Linkage ID "FTriangle". In Step 6, we will label the component with this Linkage ID.