A Flash Developer Resource Site














Internet Commerce

Partners & Affiliates














Developer Channel

internet.com


Featured Flash FLA
Gallery Downloads 11303 Flash Movies | 7 New Flash Movies Added
What's New | Top 100

Featured FLA

» Author: Nitin Tikhe
» Title: Cart
» Description: This Animation Tut is a fun and useful for kids below 15 years. Watch the Flag, Doors, Stick and Horse movements.
» More by Nitin Tikhe


Random FLAs | Add Flash Movie
Featured Flash Site
Gallery Downloads 6008 Flash Sites | 0 New Flash Links
What's New | Top 100 Flash Site

Featured Site

» Posted in the Flash Kit Links section
» Title: Banana Swimwear
» Description: This is a banana swim wear interactive catalog we designed and animated in Flash


Random Links | Add your own Flash Related Links
Flash Tutorials 1255 Tutorials 7 New Tutorials Added!
What's New | Top100

» Make flash video player for broadcasting live streaming video / TV on website
» How to convert the project file of Flash Demo Builder 2.0 into FLV file
» FLV to PSP for Mac - How to convert YouTube video to PSP on mac
» How to Convert FLV to MP4 for Playback on iPod
» how to download and convert youtube video to AVI with Leawo Free FLV converter
» Flash Multi-player Game Tutorial - TicTacToe
» How to make Flash elearning tutorials with screen recorder?
» Fader API:Slideshow with MovieClips on stage
» How to convert MS PPT file into an FLV File
» Unknown Tag: Title10
Random Tutorial | Add Site

Network Design Manager
The Computer Merchant, Ltd
US-VA-Hampton

Justtechjobs.com Post A Job | Post A Resume


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

Search Tutorials


Tutorials Tutorials » Actionscripting

Categories How to Create a Flash MX Component
Author: Jonathan Kaye | Website: http://www.amethyst-research.com |

 
Page 4
«prev 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... next»

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.

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.

«prev 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... next»

» Level Intermediate

Added: : 2002-04-16
Rating: 8.42 Votes: 54
Hits: 903
» 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)
Get conversion and unzipping tools for PC and Mac here!

» 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
Read or Post Comments