Creating a Document Class in AS3


Source files: doc_class.zip

 


What you will learn:

Prerequisites:



This tutorial is intended as a reference for other tutorials on flashbynight.com/tutes which make use of the document class. Rather than cover it in each tutorial, I’ve linked the other tutorials to send them here.
OK, what is a document class? Before Actionscript version 3 (AS3), most programmers put their code in the main timeline of the main flash movie. The code would end up on different frames and inside buttons and it was just all a general big mess.
Then AS3 came along and forced actionscript programmers to be a bit more disciplined. From now on, we would be encouraged to separate the code from the flash movie in a separate file (sometimes in more than one separate file). The separate files are called classes. The main class that holds our code is called the document class. It runs automatically when we run our flash movie. Hence, we will need two files: the .fla and an actionscript file with the .as extension.
Our example will link the document class to a flash movie and trace the message, “Hello World”.

Step 1


Open up Adobe Flash and choose the following:


img


(I’m using Adobe Flash CS3.)


Save the flash file. I’ve chosen the name HelloWorld.fla.


img

Step 2


Click File>New and this time choose to create an actionscript file:


img

I’ve chosen to save my actionscript file as Main.as:


img

Step 3


We need quite a few lines of code here to get us started:


img

Line 1:   We need to contain all of our code in a package. We need this line for any external class.
Line 3:   We need to import the features we will be using. The document class behaves as a MovieClip, so we need this line.
Line 5:   As we mentioned, the document class behaves as a MovieClip and, in fact, extends the features of a MovieClip. In this line, the name of the class MUST match the name you used when you saved the .as file; capital lettering must match also.
Line 7: This function will be called automatically when the movie is played. Again, the name must match, including capitals.
Line 9:   This is where we run the trace to display “HelloWorld”.
Line 13: This line closes the class definition. You can have as many functions as you like within the document, but they must come inside the class definition, currently closed at this line. Keep in mind that the Main() function is the only one that will be called automatically.

Step 4


So far so good, but we need to do one more thing before it will work. We need to link it to the .fla file. First make sure you save the changes to Main.as. Then, under the property inspector in HelloWorld.fla, we can enter the name of the document class:


img


You can click on the pencil icon to ensure it is linked properly.
Press CTRL + ENTER to test the movie and you should get the following:


img

 

Step 5


We’re done, but there is one more important thing to note.
If you wish to keep your document class in a different folder from your Flash movie (a common practice), you need to show the Flash movie where to look for it. This adds one extra step.
To do this, go to Publish Settings from the File menu or by pressing CTRL + SHIFT + F12. Select Flash and click Settings as shown:


img

From here, you can enter the path to your document class, as shown.


img


Click the pencil icon to make sure it works.


img


If you get the following error message, something is wrong. Go back and check that the path is correct.


img

This step can be important; many programmers like to keep all their classes in a central location.

That’s how to set up a Document Class. Try some of our other tutorials at www.flashbynight.com/tutes or our games at www.flashbynight.com