I know that ActionScript 3.0 is the big thing now, but for a lot of flash developers who started out as hobbyists with more art background than programming, a strict/rigid language is really imposing.

Because of this intimidation factor, many of today’s most creative flash developers still work with ActionScript 1 and 2, coding everything on their timelines and in #include files, but with AS3 looming overhead, they are looking to get their feet wet in the pool of structured programming.

For me, if I hadn’t learned how to work with AS2 classes, AS3 would definitely be way over my head, so I thought I’d take a little trip back in time today and write a long overdue tutorial for my olschool homeboys out there that want to learn what classes are all about.

Before you learn how to make a class, I should probably explain what a class is. Essentially a class is a type of object that has properties and methods for handling some sort of functionality.

Some of you are just blinking at the screen saying “durr.. wut?” right now, so let me compare it to something you SHOULD be familiar with… a movieclip.

In Flash, MovieClips have properties (_x, _y, _width, etc…), and they have methods (play, stop, gotoAndPlay, gotoAndStop, etc…). Properties have a value you can look at and sometimes change, and methods preform some kind of action.

Classes are a lot like this, only you have to create all the properties and methods, define how they can be accessed, and handle how they return things.
So now you have an over simplified idea of what a class is, lets go ahead and make one.

Open up flash and start a new Actionscript File.

The class we are going to create is going to be called ‘Calculation’, so we need to define this by typing:

class Calculation {

}

Anyone who has ever made a decent flash game has probably had to use the pythagorean theorem at some point to figure out the distance between two movie clips or points. We are going to add a method to our class that handles this for us.

class Calculation {

public static function getDistance(obj1, obj2)
{

var x1:Number;
var x2:Number;
var y1:Number;
var y2:Number;if (typeof(obj1) == ‘movieclip’) {

x1 = obj1._x;
y1 = obj1._y;

} else {

x1 = obj1.x;
y1 = obj1.y;

}

if (typeof(obj2) == ‘movieclip’) {

x2 = obj2._x;
y2 = obj2._y;

} else {

x2 = obj2.x;
y2 = obj2.y;

}

var xd:Number = x1-x2;
var yd:Number = y1-y2;
var zd:Number = Math.sqrt((xd*xd)+(yd*yd));

return (zd);

}

}

You are probably familiar with how functions work, so for the most part this method should make sense to you. What you probably don’t quite follow yet is what ‘public static’ is needed for.

In class functions there are 2 levels of function access: Public and Private.
Public functions can be called from any actionscript, be it on your timeline or in another class

Private functions can only be called from inside the class itself.

There are also 2 methods of function use: object and static.

A static function can be used directly like a command, where an object function only works on an instance of a class (we’ll get into that later).

Inside this function you will also see lines like “var x1:Number;”.

In a class all variables need to be declared. This strict coding is one of the things that makes classes hard to learn for some people, but there are reasons for why this is necessary.

Classes are basically a set of rules and procedures that only need to be loaded once. In order for the one-time load to be effective, the rules need to be crystal clear and flash needs to know what variables the class will be using in any given function.

By simply typing “var x1″ we tell flash that this class will be using a variable called ‘x1′ inside the function. By adding “:Number” we are also telling flash that x1 will always be a number datatype.

You don’t need to assign a datatype to a variable, but if you know for certain it will always be a certain data type it’s a good practice to get into and it helps define the rules of your class for faster performance.

If you don’t know how the value of a variable is going to be set, it’s a good idea to define them at the start of the function. In this example, we don’t know if we are pulling from a movieclip or a point object, so I pre-declared x1, x2, y1 and y2.

Once I do get those variables set, you will see I declare xd, yd and zd while giving them a value. I call this declaring on the fly, and I did it this way because those equations will ALWAYS be how these vars are set.

Finally, at the end of the function we return ‘zd’ wich is our distance value. Whenever you use a return statement the function will always end no matter how much code you have typed afterward.

So there we have it, our first class. So how the fuck do we use it?

First we need to save the file as ‘Calculation.as’ (and yes it’s case sensitive). The name of the file must be an exact match for the class name. For this tutorial we will save this as “C:\flash_tutorial\Calculation.as” (but you can use any folder you want).

To use the class, open a new Flash Movie, and on frame 1, add the following code:

import flash.geom.Point;
point1 = new Point(0,0);
point2 = new Point(100,100);
pointDistance = Calculation.getDistance(point1, point2);

trace(”the distance between the 2 points is “+pointDistance);

We are using the bundled point class to compare 2 points, but you could also pass in two instance names for 2 movieclips and it would pass the distance between their _x/_y values.

If you test your new movie without saving it, you will get an ‘undefined’ value for pointDistance. This is because flash can’t find your class.

Save the .fla file to “C:\flash_tutorial\test_class.fla” (or whatever folder you saved your class to).

Now when you test it, you will get “the distance between the 2 points is 141.42135623731″ in your output window.

When you type “Calculation.getDistance” in your script, flash knows you do not have an object or movieclip called Calculation, so it looks first in the working folder for Calculation.as, and if it finds it, it automatically includes it.

If it can’t find the file in the working folder, it moves on to the global folders. By default this is: C:\Documents and Settings\{USER}\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Classes

That’s a rather deep location to be saving your work to. Fortunately Flash lets you add custom class paths.

In Flash, click Edit->Preferences, then select ActionScript from the category list. Press the ActionScript 2.0 Settings button at the bottom of the panel and hit the + button to add a class path. Type “C:\AS2 Classes” and hit OK.

Now you can make a folder called “AS2 Classes” on your C: drive, and move Calculation.as to the new folder.

Now, no matter what flash movie you are working in, you will be able to use the new class. You never have to type out code for the pythagorean theorem again!

Okay, so let’s open Calculation.as back up and add in another function:

class Calculation {

public static function getDistance(obj1, obj2)
{

var x1:Number;
var x2:Number;
var y1:Number;
var y2:Number;if (typeof(obj1) == ‘movieclip’) {

x1 = obj1._x;
y1 = obj1._y;

} else {

x1 = obj1.x;
y1 = obj1.y;

}

if (typeof(obj2) == ‘movieclip’) {

x2 = obj2._x;
y2 = obj2._y;

} else {

x2 = obj2.x;
y2 = obj2.y;

}

var xd:Number = x1-x2;
var yd:Number = y1-y2;
var zd:Number = Math.sqrt((xd*xd)+(yd*yd));

return (zd);

}

public static function getAngle(obj1, obj2)
{

var x1:Number;
var x2:Number;
var y1:Number;
var y2:Number;

if (typeof(obj1) == ‘movieclip’) {

x1 = obj1._x;
y1 = obj1._y;

} else {

x1 = obj1.x;
y1 = obj1.y;

}

if (typeof(obj2) == ‘movieclip’) {

x2 = obj2._x;
y2 = obj2._y;

} else {

x2 = obj2.x;
y2 = obj2.y;

}

var radians:Number = Math.atan2(y2-y1, x2-x1);
var degrees:Number = radians * 180/Math.PI;

return(degrees);

}

}

Now we have a method for figuring out the angle that 2 items are at from each other. You can see the basic function structure and declarations are the same. You can also see the chunk of code I am using to set x1, x2, y1 and y2 is the same.

For that matter, the methods to look at obj1 and obj2 and determine if they are movieclips or not is also the same.

Redundant code like this is rather inefficient, so we are going to make a new function to handle that routine and clean our code up a bit.

class Calculation {

public static function getDistance(obj1, obj2):Number
{

var firstItem:Object = getCoords(obj1);
var secondItem:Object = getCoords(obj2);

var xd:Number = firstItem.x-secondItem.x;
var yd:Number = firstItem.y-secondItem.y;
var zd:Number = Math.sqrt((xd*xd)+(yd*yd));

return (zd);

}

public static function getAngle(obj1,obj2):Number
{

var firstItem:Object = getCoords(obj1);
var secondItem:Object = getCoords(obj2);

var radians:Number = Math.atan2(secondItem.y-firstItem.y, secondItem.x-firstItem.x);
var degrees:Number = radians * 180/Math.PI;

return(degrees);

}

private static function getCoords(obj):Object
{

var coords:Object = new Object();

if (typeof(obj) == ‘movieclip’) {

coords.x = obj._x;
coords.y = obj._y;

} else {

coords.x = obj.x;
coords.y = obj.y;

}

return(coords);

}

}

First thing you should notice in our new getCoords function is that is is a PRIVATE function. If you try calling Calculation.getCoords() from your timeline, you will get an error. This function is only going to be used by this class.

Now our code is clean and efficient and, in a round-about way, we have added new commands to Flash. We can use Calculation.getDistance() and Calculation.getAngle() in any movie we want without ever having to type those bits of code again!

Congratulations, you have taken the first step into the land of writing classes. In the next tutorial I will talk about object classes. Before you go, feel free to download the samples that go with this tutorial!