Flash MX2004 Actionscript 2.0 class Tutorial

In this Flash Tutorial I will address the huge amount of confusion and misinformation about creating classes in ActionScript 2, the new upgrade to the Flash mx2004 programming language. Why should I use classes? Good question. You probably dont need to. Maybe it is the latest fad. You decide. Some people assert that procedural programming, as opposed to OOP(Object Oriented Programming), is perfectly acceptable. You do the research and you make a decision based on your needs.

OOP - Object Oriented Programming is based on the concept that classes or modular objects, are like black boxes. You dont need to know what is inside them . You only need how to use them and how to connect to them. A computer is composed of separate modules. Hard-drive, Ram, motherboard, cpu, cd-rom, monitor, etc etc. Each module is a self-contained unit. We only care about how these units interact with each other and how to hook them up and use it.
When you use OOP, your overall program is made up of different self-contained units , each of which has a specific job and they communicate with each other in a prescribed manner.
When you use OOP , you write classes. These are our templates and instances(concrete usable things) are the objects that we will use to get things done.

This tutorial is based on the Box example in the AS 2.0 Reference Document. Well lets get stuck into it and create a usable class. The class we are going to create is called the "Box" class and you guessed it, it's a box! Whoopee !
Open your Flash mx2004 Professional and Select "File" - "New" - "Actionscript file". This will open flash's new inbuilt text editor.
If you dont have the Pro version , open up your favourite text editor. I use Boxer Text Editor
Then start writing:

class Box{
}

And save it as "Box.as". Save it in the same directory that your .fla file is going to be in. It is very important that the filename is the same as the class name. Otherwise it wont work! You have just created your first class. Congratulations. Too bad it doesnt do anything. End of Lesson , bye...
Just joking, LOL.

Inheritance and extends

What we want to do is stick all the properties and power of a MovieClip onto it. So how do we do that? We use the new AS2 keyword "extends" which means to incorporate into our class all the attributes and methods of the MovieClip class. The technical term for it, in OOP terms, is Inheritance. Or the way that some people describe it - Box is a subclass of its superClass MovieClip. I will go into more detail in a further tutorial in a later lesson.
In our Box class we will have a MovieClip(box_mc) as a class variable. The reason for this will be apparent as we go on. Let's do that then:

class Box extends MovieClip{
	// declare class members
	var box_mc:MovieClip;
}

Class Constructor Method

It still won't do anything but we are getting there. Have patience, grasshopper. We need to be able to create an instance of our class so that we can use it in our .fla. All classes have an inbuilt method called a "constructor" which allows us to create an instance of a class. The default constructor takes the form of :
var instanceName:ClassName = new ClassName();
so in our case we could create a new Box instance by going :
var myBox:Box = new Box();
But our class still wont do nothing. doh! Let's make a constructor method that takes as an argument an instahce of a movieClip that we have created in Flash. And we will assign that passed movieClip to our variable "box_mc". Which is of type:MovieClip. Let's make our constructor :

class Box extends MovieClip{
	// declare class members
	var box_mc:MovieClip;
	// Constructor that takes mc as argument
	public function Box(passed_mc:MovieClip){
		// assign passed mc to our class member
		box_mc = passed_mc;
	}
}

Implement OOP in Flash

Now open flash mx2004 and create a square, make it a Movie, and call it "TheBox".
In the instance name textfield in the properties window call it "box1".
Open your library and right click on "TheBox" mc and select "Linkage".
Tick "Export for ActionScript" and "Export in First frame".
In the "Identifier" Textfield call it "box".
AND, very importantly , write "Box" in the "AS 2.0 class" textfield. This connects our Box class with this movieClip.
Now to use our class, create a new layer in our fla and call it actions, open the Actions window and type this in:

var flashBox:Box = new Box(box1);

N.B. By writing the above line in our actions window does not create a Movieclip. Drawing a box on the stage, giving it the instance name of box1 and linking it to the Box class creates our MovieClip subclass instance flashbox.
In Flash we have implemented our Box class and used an instance of that class, flashBox. True, it still doesnt do much.
So lets get it to do something. How about we make it move up. whooow. How exciting i hear you say. Wait till you see it move using OOP programming. It will knock your socks off.

Class Methods

Classes can have methods which usually "Do" things. Like move up or move down. Write some methods that will allow our Box class to do just that:

class Box extends MovieClip{
	// declare class members
	var box_mc:MovieClip;
	// Constructor that takes mc as argument
	public function Box(passed_mc:MovieClip){
		// assign passed mc to our class member
		box_mc = passed_mc;
	}
	// Methods 
	public function moveUp(){
		box_mc._y -= 1;
	}
	
	public function moveDown(){
		box_mc._y += 20;
	}
}

has everyone recognised the use of MovieClip variable "_y" . We have access to all the properties of the inbuilt flash class MovieClip.
Now open your fla file again and add the code to what was there:

// create an instance of Box
var flashBox:Box = new Box(box1);
// use a method of Bx
_root.onEnterFrame = function(){
	flashBox.moveUp();
}

Save and run it(hit Ctrl+Enter). Did your box move up ? But you say that I could have coded that in 2 lines and not have to write any classes. You are absolutely right. You could have just coded it this way:

_root.onEnterFrame = function(){
	_root.box2._y -= 1;
}

You have a very valid point. But humour me for a little while. There may be some use in this OOP business. We hope!
What have we got by now in OOP terms. We have a Box class with a member variable, a constructor that initialises that variable, and two methods.

Interfaces - "implements"

Interfaces are devices that allow unrelated classes to interact with each other. An interface defines a set of methods but does not implement them. A class that implements the interface agrees to implement all the methods defined in the interface. Let's do an example to see what we mean. Write this in a script file and call it Moving.as:

interface Moving{
	function moveUp(py:Number);
	function moveDown(py:Number);
	function moveLeft(px:Number);
	function moveRight(px:Number);
}

Notice that to declare an interface we write :
interface InterfaceName in the declaration section.
Then in the body , between the brackets, we simple declare the name and arguments of the methods of the interface. There is no bracketed section. That gets done in the impementing class.
So, lets make a class that implements an interface.

class Enemy implements Moving {
	var x:Number;
	// constructor
	function Enemy(px:Number) {
		x = px;
	}
	function moveLeft(lx:Number) {
		x -= lx;
		trace("moveLeft = " + x);
	}
	function moveRight(rx:Number) {
		x += rx;
		trace("moveRight = " + x);
	}
	function moveUp(uy:Number) {
		// leave it empty , dont need it
		// but must implement it.
	}
	function moveDown(dy:Number) {
		// empty again
	}
}

Notice the keyword "implements". (class Enemy implements Moving). By saying we implement an interface, we are agreeing to use all the methods declared in our interface. We dont have to use them all, we just leave the ones empty that we dont want to use. In the Enemy class, we only want to move left and right. So we provide code for those methods and leave the move up and down methods empty. But we must write them down. Try leaving out moveUp or moveDown and see what happens. Double dare you!

Create another separate class. It will be our Ship class. This class we want to only move left and right.

class Ship implements Moving{
	var y;
	// constructor
	function Ship(py:Number){
		y = py;
	}
	function moveUp(uy:Number){
		y *= uy;
		trace("moveUp = "+y);
	}
	function moveDown(dy:Number){
		y *= dy;
		trace("moveDown = "+y);
	}
	function moveLeft(lx:Number){
		// empty
	}
	function moveRight(rx:Number){
		// empty
	}
}

Put the following code in our fla.

var ship:Moving = new Ship(200);
var enemy:Moving = new Enemy(56);
ship.moveDown(0.5);
ship.moveUp(0.2);
enemy.moveRight(230);
enemy.moveLeft(100);

Go to the Sun Java Tutorial on interfaces

Go on to the next Tutorial