Setting up your game development environment in AS3: The Object Oriented Way

Introduction: Why use object oriented programming (OOP)?

If you've tried making a game more complex than pong, you'd understand why it is a mess NOT to use OOP methodologies. OOP makes your code much cleaner and organized because each object can be defined in a separate file/class. Out of the many features that OOP provides, the most useful feature in game development is being able to create multiple instances of an object without duplicating code. This also means making changes to all instances of an object is fairly easy. Using great practices such as OOP will save you time and headache in the long run. However, I suspect many game developers are discouraged in exploring this area with Flash because of the learning curve or lack of information on how to set up such an environment. This article will show you how to set up your game development environment in AS3 using the object oriented methodology. Before I being, I would like to say that this tutorial is by no means the best nor the only way to set up your game engine environment. This method is MY way: a hybrid between a designer and programmer. This tutorial is intended for intermediate/advanced Flash developers.

Step 1: Use an external editor: Notepad++

Although Flash CS3's internal editor will work just fine for your development needs, I highly recommend using Notepad++ for any action script development. It has very useful functions such as "replace all in all documents", "find in files", function lists, collapse function content, and even color spaces for AS2 and AS3. And best of all, it is FREE and is distributed for Windows, Linux, and MAC.

Step 2: Creating your Main class

Using your preferred editor, create an AS file: Main.as. You can call it something else if you'd like.
Put this file in a folder called "code" (without the quotes). In it put the following code (there is a link to the source files at the end of the article):

Notice the first line: "package code". The word 'code' comes from the fact that our AS file is inside the folder called 'code'.

Now open CS3 and create a new AS3 document.

In the properties panel, enter code.Main as the document class:

Do a test movie by pressing CTRL-ENTER(Windows). You should not get any errors.

Your Main class is like the mother ship for your game. It oversees everything and manipulates your objects both externally and internally (library).

Step 3: Creating game content objects

In Flash, draw a circle of size 50x50 and convert it to a movie clip (F8). Name it "m_circle". I like to use organized naming conventions such as 'm_' for movie clips, 'g_' for graphic, 'sd_' for sound, etc.

Create your circle class by creating Circle.as in the 'code' folder:

Now, go back to CS3, and DELETE the circle from your workspace.

Right click on m_circle from your library and choose "Linkage".

Check the checkbox "Export for Action Script".

Leave the "m_circle" name for the Class but change Base Class from "flash.display.MovieClip" to "code.Circle".

This is important and you should remember this always: The reason for making the class name DIFFERENT (Circle vs. m_circle) is so that you can create multiple instances of the Circle class. Save your work but do not compile the program yet.

Line 10 and 11 creates listeners for this circle object. AS3 does not have onPress or onRelease functions; every action is an event listener.

Line 14 says: When you roll your mouse over me, I will fade by 10%. (In AS2, the alpha property ranges from 0-100, AS3 is from 0 to 1)

Line 15 says: When you click on me, I will tell Main to call function increaseCount(). If you are calling functions from Main, the functions and variables must be static.

Step 4: Manipulating game content

You are not limited to controlling objects from the library. Manipulating objects on the stage is even easier.

Create a dynamic textfield and put it on the top left corner. Give it instance name: tf_count

Put the following in Main.as:

Ok let’s go through this in detail. Notice that there are more "import" lines from line 3-6. Most API in Flash requires importing packages. This takes some time to track down but it really frees a lot of memory in bigger applications when you are only importing the things that you need for your class. I always find myself doing an F1 to search for an API for sample code at the bottom of the help file for importing these things.

Line 10: notice that the variable is static; these variables are visible to objects outside of Main.as (such as Circle.as). This is used in line 25 of Main.as when increaseCount() is called from Circle.as in line 15.

Line 12: The timer class replaces the setInterval function from AS2. The 1st param is the milliseconds per execution and the 2nd param is the number of times to execute it. Entering 0 for the 2nd param means to loop the timer forever.

Line 18: start() and stop() functions starts and stops the timer.

Line 29-30: an instance of m_circle is being created and added to the display object of Main. Think of addChild() as enabling rendering for the object.

Do a movie test run to see the results. You've successfully created an AS3 program with the Object Oriented Programming Methodology!

Ending Summary

I hope you learned a great deal about AS3 and the power behind great programming practices. I did not want to give the bare minimum that would leave readers with more questions but at the same time I did not want to provide overwhelming amounts of information that would scare readers away from AS3. As with all new things, it takes time and practice in order to get use to. Using F1 to search for API syntax is the quickest way to learn the AS3.

Grab the source files here.

You are now +1 step closer to being a pro-game developer.

Published On: July 8, 2008