Building Your Own Components

For an introduction to V2 components, which are new in Flash MX 2004, see Chapter 18, "Animation, Interactivity, and Rich Media," page 379 .

A V2 component is essentially a custom class with a number of specific attributes and methods . Thus, the basics of creating components are the same as the basics of creating classes, described at the beginning of this chapter.

Building a component is typically a five-step process:

Create a movie clip in the Library and set its Linkage and AS 2.0 Class properties.
Create visual assets, and put them in the second frame of the new movie clip's Timeline, with a stop() action in the first frame.
Set Component Definition properties in the Library.
Create an .as class file, which embodies the component.
Export the component as an SWC (compiled SWF) file and put it in a specific directory where Flash will find it and include it on the Components Panel, where it's easily accessible for use in projects.

If that sounds pretty simple, it actually can be. From the coding perspective, the complexity of building a component is all in creating the .as file, which is where all the ActionScript goes. (No ActionScript for the component is contained in the .fla file.) If the ActionScript required is simple, creating the component is simple, too.

I am going to illustrate this by walking through the steps of creating what I believe may be the World's Simplest Component. The CD contains a finished example, in worldsSimplestComponent.fla and WorldsSimplestComponent.as.

Open a new .fla file and save it under whatever name you wish. I'll be using worldsSimplestComponent.fla here.

Create a new movie clip symbol in the Library, giving it any name you wish. In the Create New Symbol dialog, click the Export for ActionScript check box, and clear the Export in First Frame check box by clicking it. In the Linkage section, enter an Identifier; I'm going to use worldsSimplestComponent. For the AS 2.0 Class, enter the name of the class (the name of the .as file, but without the .as extension), which will hold the ActionScript for your component. I'll use WorldsSimplestComponent. Remember that class names are capitalized by convention.

That completes step 1.

Because this component doesn't have any visual assets, we get to skip step 2.

Right-click on the movie clip in the Library, and go to the Component Definition option. Type the class name (for example, WorldsSimplestComponet) under AS 2.0 Class. Click the Display in Components Panel check box, and click OK. Notice that we didn't add any parameters at the top of the dialog. Flash will do that for us automatically when we create the class.

That completes step 3.

Now comes what would be the hard part, if this weren't possibly the World's Simplest Component: creating the .as file. In this case, however, it will be pretty straightforward. If you read the first section of this chapter, there will only be a couple of the new items here.

Here's what the .as file looks like:

 // WorldsSimplestComponent.as 1:  import mx.core.UIComponent; 2:  class WorldsSimplestComponent extends mx.core.UIComponent{ 3:      var className:String = "WorldsSimplestComponent"; 4:      static var symbolOwner:Object = WorldsSimplestComponent; 5:      static var symbolName:String = "WorldsSimplestComponent"; 6: 7:      private var __message:String =             "Am I the World's Simplest Component, or What?"; 8:      [Inspectable(defaultValue="World's Simplest Component", verbose=1,category="Other")] 9:     public function get message ():String { 10:         return __message; 11:     } 12: 13:    function WorldsSimplestComponent() 14:    { 15:        trace ("Creating World's Simplest Component"); 16:    } 17:    function size(Void):Void 18:     { 19:        trace( "size" ); 20:        super.size(); 21:    } 22: 23:    function draw(Void):Void { 24:        var container:MovieClip =                this.createEmptyMovieClip( "container_mc", 0 ); 25:        container.createTextField("message_txt",10,-100,-100,400,100); 26:        container.message_txt.htmlText = message; 27:    } 28:  }

Much of the preceding code is standard equipment for a component, including:

Importing mx.core.UIComponent (or whatever class the component is inheriting from) in first line.
The class declaration with the extends keyword.
The attributes on lines 3 “5, which must have the names shown ( className , symbolOwner , and symbolName ), and should be given values reflecting the name of the class itself, as shown.
A constructor function, on lines 13 “16. This is most often left empty for components. Here, it contains a trace statement for testing purposes.
A size() method, as shown on lines 17 “21. The purpose of this function is to react to changes in the component's size. In this case, all we are doing here (other than displaying a trace for testing purposes) is running the size() method of the super class.
A draw() method, shown on lines 23 “27. This is the method that "draws" the component on the stage. In this case, it contains the component's only functionality: creating an empty movie clip, creating a text field in the movie clip, and assigning a string variable to the htmlText property of the text field.

Providing the data infrastructure for the draw() method, we have a private variable ( __message ), which contains the text to display (line 7), and a get function for that variable (lines 9 “11).

That leaves just one unexplained element, on line 8. This is a metadata tag , one of seven possible tags that provide component-specific information. This one, the Inspectable tag, causes the component feature that follows it (the get method in this case) to be exposed to users in the Component Inspector panel.

That concludes step 4.

If you drag the component from the Library onto the Stage now, you will see the trace message from the constructor function, saying Creating World's Simplest Component.

Right-click on the movie clip in the Library, and select Export SWC File. Give it a name (WorldsSimplestComponent.SWC in this case), and Flash will create an SWC file in the current directory.

All that remains now is to copy the SWC file to the Components directory (in Windows: Program Files\Macromedia\Flash MX 2004\en\First Run\Components\ ) and create a new directory with any name you wish. Copy the SWC file into the new directory.

Exit Flash and restart it. Open the Component Inspector, and you will see your directory as a category of components. Your new component will be in it. Drag it onto the Stage and watch it perform.

Running Superclass Initialization Code

Many component classes have initialization code, embodied in an init() function. In that case, when subclassing the component class, you would usually include an init() function in your subclass that runs the superclass init() function. Here's an example:

 function init(Void):Void {     super.init();     // subclass-specific initialization code goes here }

As indicated by the comment in the preceding example, you can also include subclass-specific initialization code after running the superclass init() function.

If you would like to advance to the next step by creating a slightly more complex component, and with visual assets, but still following very much the same steps outlined here, see http://www.macromedia.com/devnet/mx/flash/articles/footer_component.html.