First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Jonathan Kaye | Website: http://www.amethyst-research.com

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:

function TriangleClass () {
this.cobj = new Color(this);

// 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._xscale = 10 * this.tbase;
this._yscale = 10 * this.theight;

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

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.

Note: The pragmas #initclip/#endinitclip are really only useful for defining components. At first glance, they may have seemed like they should work to evaluate a block of code on any timeline, but they do not.

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
(10 being the highest)
» 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.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.