Extending UIComponent With Actionscript 2.0 Using an External Class File



Before you create a new component object in flash Actionscript, consider its attributes and whether the component you are intending to design is actually more than one individual component. Define each of the subcomponents, and their properties, in a separate class file so that the application is broken down properly into individual objects. This will save you a lot of headache in the long run, even though it may take a little bit more time (I promise that it will pay off, I know this from experience).

Publish Settings

Be sure to set the path to your classes folder in the FIle> Publish Settings> Flash tab, if the classes folder is at the root of your project folder, you only need to put in './ classes', not the full file path from the root of your hard drive. I recommend the folder called classes, as well as a folder called compiled at the root of your project folder. Place your .AS files in the classes folder, also, set your publish settings to place the .SWF file into the compiled folder, this can also be a relative path. This way if you have many separate flash .FLA files the root of your project directory will not get cluttered with additional .SWF files. It is also handy when you are done and just want to grab the .SWF files for production purposes.

Create the Shells

Once you've defined your objects and all of their properties, create a class file for each one of them as well. Be sure to reflect logical groupings of objects as separate folders, and also reflect the folder name, as the package that qualifies the class name. Validate your code frequently and find errors early, before it gets too unwieldy.

Create a movie clip object that will be the visual representation of your component. If your component has no visual representation I recommend placing an icon on frame one and setting the component's visibility to false in it's class definition's init method.

For instance, I use a DataController component in my flash movie that handles data access and can data bind to xml connectors, it will also produce arrays of the generated objects when I need them throughout the movie, it is a movie clip, but has no visible child objects. This component only has an icon, and is only visible when editing the movie, not when it runs. It's very similar to how the XMLConnectors are represented. You can do the same thing for movie clips that have an empty or non-visible clip in frame 1 so that when you place it on the stage it displays as an easy to identify and easy to click picture, rather than a small and very hard to find dot.

Required (Per Adobe) Methods in the Sub Class

There are several required methods that must be implemented when extending UIComponent; including init, size, and draw. You can find more information about these requirements on Flash live docs, in the components book. If you find that you end up writing little additional code within these required methods and properties I recommend that you place them toward the end of the class file so that the most complex methods (the ones you will need to get back to most often) are available to you toward the top of the class. Normally I would not recommend this, in another programming language, but due to the fact that Actionscript 2.0 lacks a user friendly code editing interface, this is useful in order to save time, and sanity.

Method Declarations

For each property that you want to either get or set through the component inspector, you must place [Inspectable] just before the method definition for both the getter and the setter. If you did not already know, you can declare the getter and setter so that you only have one word in the dot notation for calling both the getter and setter methods, it follows the following pattern.

public function get myproperty (): String {…}

public function set myproperty (value: String) {…}

It gets used like this:
var instance: MyObject = new MyObject ();
instance.myproperty = "Testing Setter";

trace (instance.myproperty);
// Will display, 'Testing Setter', in the output window.

The above example uses a property type of String, the type can be what ever you choose, just be sure that it is the same in both the getter, and setter.

On the new movie clip's linkage property, choose to use it in Actionscript and 'Export in First Frame' must also be checked. Then, type in the package-class name of the UIComponent class you previously created where it asks for and Actionscript class. Click OK, then right click on your movie clip in the library, and choose 'Component Definition'. You also need to identify the package-class name here. Once you click OK, you can return to the component definition to see that the public inspectable methods are now available for you to assign values ​​via Flash's Component Inspector, and Properties. You'll also notice that the icon for the movie clip has changed to the icon for a component.

Detailed Other Flash Actionscript programming Stratagies coming soon! For more Watch Flash tips and tutorials in the a near repute.

For more information on extending UIComponents including examples of event handling and binding, find the clock example in the Flash Live Docs Components book.


Leave a Reply