Flash Notes: Setting Up An External Class File

May 20th, 2008

Here’s how to create a external class using ActionScript 3. In AS2, I was already familiar with instances of objects in the library. Defining a class is basically the same thing.

Why would you want to do this? In a sense, this is where AS3 as an object oriented programming language has finally been realized. You can create a class (object) with its own properties, completely self-contained in an external AS file, making it portable across .fla files. You could code the class so it “draws itself” (not as I have done below) so it wouldn’t even require a symbol in the library to attach to. But I’ll keep this example simple to communicate the concept.

I’ll define a class called “button”. It applies to a symbol I created in the library of an .fla file. That symbol is just a circle with textfield (instance name “label_txt”), converted to a movie clip.

To assign a class to a symbol in the library, select it in the library, call up its properties, and click “Export for ActionScript”. In the dialog box that appears, enter the desired class name in the appropriate field. My class is named “button”. Note the information that appears in the base class field – in this case, it’s “flash.display.MovieClip”. The class I’ll write will be an extension of that display type.

null

I then created an ActionScript file and saved it as “button.as” in the same directory as the .fla file. The .fla file will look for this file when you create the .swf. Here’s the code:

package{
import flash.display.MovieClip;
import flash.text.*;

public class button extends MovieClip{
public function button(xPos:Number, yPos:Number, scaling:Number, label:String){
this.x = xPos;
this.y = yPos;
this.scaleX = scaling;
this.scaleY = scaling;
this.label_txt.text = label;
}
}
}

Similarly to a document class, the import statements handle the elements of the button symbol in the library (movie clip, text field). The public class button extends the symbol type this class is assigned to (movie clip). Within the button function, I’m accepting five properties which are then used to change the look of the button. The first and second properties are the x and y location, the next two properties its scale on the x and y axis, and the last property is some text for its label.

Then in the .fla I added this code:

stage.addEventListener(MouseEvent.MOUSE_UP, reset_btnUp);

function reset_btnUp(event:MouseEvent):void{
	reset_everything();
}

function reset_everything():void{
var button_1 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "This");
var button_2 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "Button");
var button_3 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "Is");
var button_4 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "A");
var button_5 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "Class");

addChild(button_1);
addChild(button_2);
addChild(button_3);
addChild(button_4);
addChild(button_5);
}

reset_everything();

The mouse up event listener is assigned to the stage instead of a button. By doing this, the “reset_everything” function is called whenever the user clicks anywhere on the stage. The “reset_everything” function creates five instances of the button class and passes parameters which are used by the class to define the look of the button (properties of that class).

Note that random numbers are generated differently in AS3, using Math.random() * #. Also, the new instance is added to the stage using addChild (no more loadMovie) via the variable to which the new class instance was assigned.

To sum up, each time the user clicks on the stage, five instances of the button class will appear, with random position and size, and the words “This” “Button” “Is” “A” “Class” on them.

Here’s the example; click away:

Notes to self: