SynerCoding

Object Orientated Programming

First you need to know: What is Object Orientated Programming? Object Orientated Programming (I’ll reference to it as OOP) is making a class and then make multiple objects of it so you don’t have to program every object again.

To illustrate this I’ll give you an example. In a strategy game like Command&Conquer you can create soldiers. Rather then the programmer has programmed thousands of soldier objects they have made one soldier class. If the player buys a soldier the game will instantiate a object of the soldier class. The soldier class could have a generic look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class Soldier{
	health = 100;
	firePower = 5;
	rank = 1;
 
	function takeDamage(amount) {
		health = health - amount;
	}
 
	function rankUp() {
		rank++;
	}
 
	function fire(target) {
		target.takeDamage(firePower*rank);
	}
}

For the sake of the tutorial I have let out everything that is just going to make things more difficult. It is also not a real programming language cause then I had to define things a bit more strict. I have done this so it would be more easier to understand. In the next part we will discuss actionscript classes.

If an object of this class is instantiated it will copy all of the settings and functions therefor if one object loses health only that object is afflicted.

Say the player orders a soldier to fire at another soldier controlled by the computer. At first both soldiers are standard (100 health, 5 firepower, rank1).

1

playersSoldier.fire(computerSoldier);

In the fire function is written that the targets takeDamage function will be opened with firePower*rank. So now the computerSoldier will take 5*1=5 damage. In the takeDamage function is written that it will adjust the health of the object. So it will do health = health – amount // health = 100 – 5 = 95.

At this point the playerSoldier object has 100 health, 5 firePower and rank 1.
The computerSoldier object has 95 health, 5 firePower and rank 1.

Lets say the computerSoldier has found a rank up item. That invokes the rankUp function of an object.

At this point the playerSoldier object has 100 health, 5 firePower and rank 1.
The computerSoldier object has 95 health, 5 firePower and rank 2.

If the computerSoldier object now fires at the playerSoldier it will do :

1

computerSoldier.fire(playerSoldier);

Therefor it will do in that function:

1

playerSoldier.takeDamage(firePower*rank);

For the computerSoldier firePower is 5 but the rank is 2. Therefor what happens is:

1

playerSoldier.takeDamage(5*2);

Now the playerSoldier loses 10 health.

At this point the playerSoldier object has 90 health, 5 firePower and rank 1.
The computerSoldier object has 95 health, 5 firePower and rank 2.

The player could buy another soldier. Then a new object of the soldier class is instantiated lets just say it is called playerSoldier2.

Now the player has 2 soldiers:
playerSoldier(90 health, 5 firePower and rank 1),
playerSoldier2(100 health, 5 firePower and rank 1).

The computer has 1 soldier:
computerSoldier(95 health, 5 firePower and rank 2).

With OOP you can just set the layout for a class and then make as much objects of it as you like. This meaning you don’t have to program every object you are going to use yourself. Instead you write a class for it.

In this part I have introduced some new things. Classes have functions(takeDamage, rankUp and fire) and variables (health, firePower and rank). In the next parts I’m going to discuss those in the context of Actionscript. How to use them and how you can make your own first class that displays just a “Hello world” on screen.

Properties

You have saw a general example of a class now. If you want to access a function of a class you need to say objectName.functionName([optional parameters]), if you want to access an variable of an object you say objectName.variable. Things you see on screen all have an X and Y property. You can get those in actionscript by saying objectName.x or objectName.y. Standard those properties are 0 (= top left corner). If I want to move the object to position x = 10 and y = 20 then I typ:

1
2

objectName.x = 10;
objectName.y = 20;

Now the object is at position is changed. It is that easy in Actionscript. If I want to add a green circle object to the screen I need to add it to the stage (I’ll explain the display list later).
So therefor we call the addChild(displayObject) function of the stage. Lets say we already have a variable that contains a green circle called “gCircle”.

1

stage.addChild(gCircle);

This code adds the green circle to the stage. And therefor it appears on your screen. Using functions is that simple in flash. Just typ object.functionName().

First things first

First things first. In order you can test things self you must prepare some things first. Open up windows explorer and go to c:\ make a directory called “Actionscript”. This will become your Actionscripting home directory. Now make the directory com. In there make one with your own name. And in that one make one called tests.
You should now have the directory: “c:\Actionscript\com\yourName\tests\”.
Browse back to the Actionscript directory. And make an directory called “compiler”.
You should now have the directorys:
“c:\Actionscript\com\yourName\tests\” and
“c:\Actionscript\compiler\”.

Were almost done now. Only thing now to do is to get the compiler. (so you can turn your .as files in .swf that you can use)
You can get the compiler on http://www.adobe.com/products/flex/. On the right side of the page you can see a menu called “Next Steps”. Select “Get the Free Flex 3.4 SDK” from that menu. When you have downloaded the file unzip it in “c:\Actionscript\compiler\”.
You should now have the directorys:
“c:\Actionscript\com\yourName\tests\”,
“c:\Actionscript\compiler\ant\”,
“c:\Actionscript\compiler\asdoc\”,
“c:\Actionscript\compiler\bin\”,
“c:\Actionscript\compiler\frameworks\”,
“c:\Actionscript\compiler\lib\”,
“c:\Actionscript\compiler\runtimes\”,
“c:\Actionscript\compiler\samples\” and
“c:\Actionscript\compiler\templates\”.

You are now ready to start programming in Actionscript. You can do this in just normal notepad. But you need to save the files as .as files. So in notepad when saving dialog is open select by file type: “All files” and behind the name you typ .as

Classes

A class in actionscript has this layout:

• Package
  • [Imports]
  • [swf meta data]
  • Class
    • [Global variables]
    • Constructor
    • [Other functions]

Everything in the [] is optional

The setup for a simple hello world example:
Test.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package {
	//All imports needed:
	import com.yourName.tests.HelloWorld;
	import flash.display.Sprite;
 
	//The swf meta data
	[SWF(width='200', height='200', backgroundColor='#FFFFFF', frameRate='30')]
 
	public class Test extends Sprite{
		//no global variables
		public function Test() {
 			var helloObject:HelloWorld = new HelloWorld();
 			addChild(helloObject);
 		}
 
		//no other functions
 
	}
 }

HelloWorld.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package com.yourName.tests{
	//all imports needed
	import flash.text.TextField;
	import flash.display.Sprite;
 
	//no swf meta data
	public class HelloWorld extends Sprite{
		//no global variables
		public function HelloWorld() {
 			var helloField:TextField = new TextField();
 			helloField.text = "Hello World.";
 			addChild(helloField);
 		}
 
		//no other functions
 
	}
 }

First I’ll explain this code step by step.

You always start with a base class. The one from which you are going to call the rest of the objects. In this case our base class is Test.as. This class then makes an object of the HelloWorld class and places it on the screen.

As you can see many things stands between {}. That is so you can make a code block.

Packages

First you define the package. We put the Test.as class in the directory “c:\Actionscript\” and we put HelloWorld.as in the directory: “c:\Actionscript\com\yourName\tests\”. Because Test.as is in the main directory the package is empty.

1
2
3

package {
//code of this package
}

HelloWorld.as on the other hand is in a subdir of the main dir (c:\actionscript\com\yourName\tests\). There for the package is the same as all the names of the subdirs separated with a dot. So the package for HelloWorld.as is: com.yourName.tests

In code you define it like this:

1
2
3

package com.yourName.tests{
//code of this package
}

Now you can see I have defined the package and then I have opened the code block for that package (“{“) then we can write the content of the package and after that we close the code block for the package (“}”).

Packages are simply the reference to that file with the main actionscript dir as the point of view.

After you have made the package you tell your script what classes you are going to use. Those classes need to be imported into the actionscript file. In Test.as we are going to use the HelloWorld.as class. Now we typ:

1

import com.yourName.tests.HelloWorld;

This line tells the actionscript that it need to go to the package “com.yourName.tests” and then get the HelloWorld class. You can leave the .as out here. The word after the last dot is always the class name. So everything in front of it is the reference to the package. As class name you could also use a *:

1

import com.yourName.tests.*;

This statement imports the complete content of the package com.yourName.tests (all of the classes in that directory).

In Test.as we also import the Sprite class. This is because our classes is going to extend this class (I’m explaining that in a moment).

SWF meta data

After all the imports you can set swf meta data. with swf meta data you can tell the compiler how big the swf is going to be(width,height), the framerate and the background color of the flash. If you don’t set any of the propperties the compiler will use the default settings: width 550, height 400, a grey background and a frame rate of 24fps. To set custom meta data you only have to put this line into the file you are going to compile: Test.as

1

[SWF(width='200', height='200', backgroundColor='#FFFFFF', frameRate='30')]

With this code we tell the compiler we want the swf to be 200px width, 200px height, background color must be white (FFFFFF = hexadecimal for white) and it must run at 30fps.

Classes

Now you have set all the things prior to the class. So now you can create a code block about the class:

1
2
3
4
5
6
7
8
9
10
11
12

package {
	//All imports needed:
	import com.yourName.tests.HelloWorld;
	import flash.display.Sprite;
 
	//The swf meta data
	[SWF(width='200', height='200', backgroundColor='#FFFFFF', frameRate='30')]
 
	public class Test extends Sprite{
		//the class content
	}
 }

In that code you say the next code block is a public class with name Test and it is an extension of Sprite (public is irrelevant cause AS3 doesn’t support protected or private classes (yet)). By saying it extends Sprite we inherit all of the properties and functions of the Sprite class. Now we can call the addChild() function just as if it was defined in that class! And also now again you open the code block and close it after the content.

In this code block we can declare the global variables that we are going to be using and all of the functions. After you have declared all of the global variables (none in the Test.as) you can declare all the functions.

In a class you always need to make a public function with the same name as the class. When you make a object of that class that function is being called. We call this type of function the Constructor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package {
	//All imports needed:
	import com.yourName.tests.HelloWorld;
	import flash.display.Sprite;
 
	//The swf meta data
	[SWF(width='200', height='200', backgroundColor='#FFFFFF', frameRate='30')]
 
	public class Test extends Sprite{
		//no global variables
		public function Test() {
 			var helloObject:HelloWorld = new HelloWorld();
 			addChild(helloObject);
 		}
 
		//no other functions
 
	}
 }

Variables

In the constructor of the Test.as we define a new variable. We name it helloObject and the type of the object is HelloWorld (the other class we are going to create). We then say that this variable is a new HelloWorld.

1

var helloObject:HelloWorld = new HelloWorld();

In the () behind it you can set parameters for the HelloWorld class. Those parameters are then passed to the constructor of the HelloWorld class. Since the HelloWorld class doesnt require constructor values we leave it empty.
Basically we can instantiate a variable by typing:

1

var [name]:[type] = [content];

After we have created this object we want to show it on the screen of the user. We use the addChild() function that we inherited from the Sprite class:

1

addChild(helloObject);

As parameter of the addChild() function we pass in the name of the object. The object now added to the display list of the Test class. Since we are useing the Test class as Stage the object also appears on the screen.

The HelloWorld class

In the HelloWorld class we do other things in the constructor:

1
2
3

var helloField:TextField = new TextField();
helloField.text = "Hello World.";
addChild(helloField);

In here we define a new variable. Call it helloField of type TextField and make a new one (to use the TextField class you need to import it. Actionscript has a lot of predefined classes see the reference). The TextField class has a property called text. When we change this the text that it displays will change accordingly. And last but not least we add the helloField to the HelloWorld class displaylist. Since we dont use this class as the stage the user doesnt see it yet. As soon as we add an object of this class to the main class (now Test.as) then we can see it. Since we indeed make an object of this class and add it to Stage the user can see it.

Now the classes are ready to be tested. Save both files in the right directory

c:\Actionscript\Test.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package {
	//All imports needed:
	import com.yourName.tests.HelloWorld;
	import flash.display.Sprite;
 
	//The swf meta data
	[SWF(width='200', height='200', backgroundColor='#FFFFFF', frameRate='30')]
 
	public class Test extends Sprite{
		//no global variables
		public function Test() {
 			var helloObject:HelloWorld = new HelloWorld();
 			addChild(helloObject);
 		}
 
		//no other functions
 
	}
 }

c:\Actionscript\com\yourName\tests\HelloWorld.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package com.yourName.tests{
	//all imports needed
	import flash.text.TextField;
	import flash.display.Sprite;
 
	//no swf meta data
	public class HelloWorld extends Sprite{
		//no global variables
		public function HelloWorld() {
 			var helloField:TextField = new TextField();
 			helloField.text = "Hello World.";
 			addChild(helloField);
 		}
 
		//no other functions
 
	}
 }

Now you need to compile those. Start cmd:
In windows xp: Start>Execute cmd.
In windows vista: Start> typ in search box cmd and press enter.

Now you see a dos like window. First you need to go to your actionscript dir. From there to your compiler dir and that holds the bin dir. In dos the command to move to a dir is: cd [the directory].

Or you can simply say: “cd c:\Actionscript\compiler\bin\”.
In this map is a programm called mxmlc. This is the compiler. To start compile our project you need to typ: “mxmlc c:\Actionscript\Test.as”. Now you just simply gave the commando to compile Test.as. If there are compile errors you will see them in the dos box. Else it will just output the name and size in bytes of you .swf file.

If we now start our swf you see this: