Featured Flash FLA 11336 Flash Movies | 2 New Flash Movies Added What's New | Top 100 Featured FLA » Author: Surjit Dhami » Title: Book » Description: Book » More by Surjit Dhami Random FLAs | Add Flash Movie Featured Flash Site 5848 Flash Sites | 0 New Flash Links What's New | Top 100 Flash Site Featured Site » Posted in the Flash Kit Links section » Title: All-American Rejects » Description: Get to know this great band by exploring their "practice room". Random Links | Add your own Flash Related Links

1277 Tutorials 7 New Tutorials Added! What's New | Top100 » Create xml slideshow with free template » How to Insert a Multilingual Subtitle Into Your Flash Video Studio » How to Create Cool Halloween Slideshow » Debugging flash using the Firebug console » Create Flash Slideshow on Blogger » FLASH TRICKS IN WEB ADVERTISING: FLASH BANNERS » HTML Photo Gallery Tutorial » Create your first flash site – PART 1 » How to Make a Flash Photo Gallery » Unknown Tag: Title10 Random Tutorial | Add Site

Sr Instructional Designer D2L-Moodle,Clearance WSI Nationwide, Inc. US-NJ-Fort Monmouth Post A Job | Post A Resume

Tutorials Home What's New Top Rated Submit myTutes Random!

Tutorials » Actionscripting

How to Create a Flash MX Component
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:

#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.

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1