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.
Advanced #initclip The mischievous among you may be wondering what would happen if you put something other than a method, constructor, or registerClass within the #initclip pragmas. The answer is that it will be evaluated at the _root level, with "this" referring to _root as well. That means that you can refer to the component only through method definitions, so you have to avoid the temptation to use a statement such as "this.myProp = 5;" to try to set a property of the component outside of the constructor or a component method. You need to bring that statement into the constructor or into a method. That goes as well for defining event handlers, such as onEnterFrame or onPress. If you want to define these event handlers for your component, they should be done as myComponentClass.prototype.onEnterFrame = function () {...} or from within a constructor or method: function myComponentClass () { ... this.onEnterFrame = function () { ... } ... } While the approaches are functionally equivalent, the former is more efficient if you want it to apply to the whole class because it defines the method once for the class, whereas the latter defines the method for each instance of myComponentClass. |
#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.
» Level Intermediate |
Added: 2002-04-16 Rating: 8 Votes: 55 |
» Author |
Jonathan Kaye, PhD, is the President and CTO of Amethyst Research LLC, an award-winning interactive design and engineering firm specializing in the creation of online device simulations. He and David Castillo are the authors of "Flash for Interactive Simulation: How to Construct and Use Device Simulations", to be published by Delmar Thomson Learning in November, 2002 (the accompanying web site will be www.FlashSim.com). |
» Download |
Download the files used in this tutorial. |
Download (0 kb) |
» Forums |
More help? Search our boards for quick answers! |
-
You must have javascript enabled in order to post comments.
Comments
There are no comments yet. Be the first to comment!