Building a Flash Class

Making the transition from procedural (inline) ActionScript to Class-based scripting has been - admittedly - pretty challenging for me. Understanding what's public and what's private, how to structure your code, what are the necessary imports, getting class paths right, there's just so much to think about that normally, with procedural scripting, you don't have to.

For example, importing classes is a complete nightmare of a task. What I discovered of late is that anything that is in the flash class library (ex. flash.display.MovieClip) is already available to you in the Flash IDE. Anything in the fl library (ex. fl.transitions.Tween) isn't, so those need to be imported. Flash CS4 doesn't automatically add the class import statements, but I hear that Flash Builder does and maybe CS5 will.

With procedural scripting, the objects that you are talking to; movie clips, buttons, textfields, are all there on the timeline, so there's no mystery going into it. Everything is right there. Most classes, as perfectly as they are built, will require additional code in the FLA anyway.

I know about all of the benefits of class-based programming and it must be great to build modular code that is reusable - especially when you are working on a team - but I'm a one man show here.

So, I ventured to try to create a simple example of a class file to illustrate how to program and test it.

Begin by starting a new ActionScript file in Flash. Save it as NameCaller.as. When you're building a class, the name of the class is the same name as the name of the file. We'll start by writing out a typical class package:

package {
    public class NameCaller extends MovieClip {
         public function NameCaller() {
         
         }
    }
}

Save the file.
Start a new Flash ActionScript 3.0 file and also save it as NameCaller.fla. be sure to save it in the same location as the NameCaller.as class file. In the Properties panel, you'll see a Class field. This is the document class. Enter NameCaller and hit enter. You shouldn't see any warnings or errors when you do this. If you do, then you may have not saved the files in the same place.

In the Flash file, add a dynamic textfield to the stage and give it an instance name of output. Save the file and return to the NameCaller.as class file.

This really basic example will simply concatenate two variables with a sentence and display it in the dynamic textfield.

Since the class extends the MovieClip class, we'll have to import that class. At the top of your script, after the package declaration, add the following:

import flash.display.MovieClip;

How do you know when you need to import something? Well, if you see compiler errors that complain about it, then you'll have to add them.

Next, we'll define our variables. In the class definition, add the following:

public var fname:String;
public var expletive:String;

Variables and functions can either be private or public. This has to do with security and access rights. Since these variables are public, we can use them outside of the class, such as in our fla file.

Every class has methods (functions) in it, but there's one method that is required, which has the same name as the class. Add the following to the NameCaller function:

init(fname, expletive);

We're going to define the init function now. I've seen this in common practice - that the main function isn't doing much other than calling on another function.

Now, we can define the init function:

public function init(fname:String, expletive:String) {
    output.text = fname + " is a complete " + expletive;
}

We've given this function two parameters: fname and expletive. By doing this, we can set those parameters when we call on this function later in the fla file. The dynamic textfield will receive the full message.

Be sure to save the class file and then go to the Fla file. In the Actions panel, add the following:

init("Joe Biden", "Asshole");

We don't have to import the class because it's a document class. Here, we didn't use a class path and save the file in an obscure location, as in the following example:

com.un.necc.ess.ary.long.path.name

We just saved the class file in the same location as the fla. If we were building a complete application that required multiple classes, then we would need to explore that more, but this is just a simple example.

When you test your Fla file, you should see the concatenated statement in the dynamic textfield.

Homework: Try adding input text fields that would allow users to enter in a name and expletive. Try adding a Combo box component that allows users to pick an expletive.

Here's all of the code for the class:

package {
    import flash.display.MovieClip;

    public class NameCaller extends MovieClip { 

         public var fname:String;
         public var expletive:String; 

         public function NameCaller() {
            init(fname, expletive);
         }
         public function init(fname:String, expletive:String) {
            output.text = fname + " is a complete " + expletive;
         }  
    }
}