Introduction
With the arrival of AS3, a lot of focus have been put on Object-Oriented Programming (OOP).
You might or might not know it, but ActionScript has more than one programming methodology; procedural and OOP. Procedural is what most of you have been doing; it's when you simply write code sequentially on the frame... And OOP is when you split your code into several ".as Class files."
Now you might be wondering why you would bother doing OOP, well, I can think of one major reason: Organization. Now you might say; "well, my code is well organized," well, you could have well-organized procedural code, but it's never going to be quite as effective as OOP will make it.
Once you start programming in OOP, you will notice that you will perform better as a programmer; and it's not because you would have learned more functions, it's because you will be able to use the language in more depth than you ever thought possible. OOP will allow you to build up your code progressively whilst keeping all the various components separate. Personally, I like to compare OOP with a whole industrial process; for example, if you're building a car from scratch, first, you need to make the different parts for it, each part is quite independent and does different things, then, you put together all these parts to make the final product and interconnect them to make them work together... And that's your car.
Main
Ok, to start off this tutorial, you need to have flash open. From the main Flash menu, create a new .fla.
Now, the thing with OOP in AS3 is that you NEED to save your project and all .as files before you compile it... Now that's a GOOD thing, trust me! Also, I strongly recommend that each of your projects has its own folder (because a project entails mroe than one file).
Ok, so assuming that you still have your blank .fla open, save your file inside an empty folder on your computer name it whatever you like, it's not important.
Then, go to File -> New, and select "Actionscript File."
Now, you might or might not know about classes (other than the one that contains a teacher and students), so I'm going to tell you what they are: A Class is basically an Object-type in programming. So; Array, MovieClip, Number, Object, etc...
Basically, it's anything which you instantiate, either using the "new" keyword or through alternative methods;
To create a new Array for example, you just write:
var myarray:Array = new Array();
or
var myarray:Array = [];
a new Number:
var mynum:Number = 3
(you instantiate new numbers by using literals)
And in AS3, you instantiate a new MovieClip like this:
var mclip:MovieClip = new MovieClip()
but in AS2, it used to be like this:
var mclip:MovieClip = attachMovie();
or using createEmptyMovieClip or Duplicate (so there were many ways in which you could make a new MovieClip object)
Ok, but my point is that you have ALL used classes before; classes are just types for your objects; but you should look at them as "structured groups" of functions.
Now, a Class has a a structure to it, so, let's just get started and see what it is:
In your .as file which you created, write or copy/paste the following code:
package {
import flash.display.Sprite;
public class TheAwesomeSprite extends Sprite{
}
}
^ Ok, so that is the skeleton for pretty much all classes, but I'd like to explain what each part does;
package - Every .as file which contains a class needs to start with a package block, this is because, in AS3, you can have multiple classes in a single file. Now you can add a name after the package statement, just before the "{" but you don't need to wory about that for now. Basically, a package is a container for your classes.
import flash.display.Sprite - When you're building a class, you have to do a bit more work, if you code in the frame, this statement is called automatically, but in a class, you need to call it. What it does is tell the compiler that you are going to be using the Sprite class; now the Sprite class is a ligh-weight class which is basically just a MovieClip without a timeline; it's the equivalent of a movieclip with only one frame. I would suggest that you use it whenever you can. The Sprite class is situated in the "flash.display" package along with many other classes; such as MovieClip and BitmapData... If you want to import ALL the classes from the "flash.display" package, you can add a * in the place of the class name, so; import "flash.display.*"
public class TheAwesomeSprite extends Sprite - What this does is instantiate a new class called "TheAwesomeSprite," now at the end, you can see that it says "extends Sprite"; all this means is that "TheAwesomeSprite" IS a Sprite, but you can define extra methods (class-specific functions) and properties (like ._x, _visible, _y in AS2). In programming terms; "TheAwesomeSprite" is a "sub-class" of the Sprite class; it is just more specific version of it. Also, note the capitalization of "TheAwesomeSprite;" this is the convention which you might want to follow and I strongly suggest that you do so.
(Now, if you don't know what "public" is all about; i'll describe it at the end of the tutorial, so far, don't worry about it).
Now, what we need to do from our .fla file, is create an "instance" of "TheAwesomeSprite" Class using the "new" keyword like this: (please note that I'm using strict data typing)
var awesome:TheAwesomeSprite = new TheAwesomeSprite();
BUT... Don't compile yet!
You haven't finished to define your class's skeleton. (now, it wouldn't throw an error because flash player automatically manages the rest of your class's skeleton, but your class has no point yet; it's just exactly the same as a Sprite)
There is ONE more IMPORTANT thing that all classes which can be instantiated with the "new" keyword need; it's called a "constructor" function.
... Before I go on, I'd like to describe verbally what I want TheAwesomeSprite to do; I want it to be a blue circle with variable width.
Now this is getting exciting; the constructor is a function that is going to process any variables which you will pass to the class in this format:
new TheAwesomeSprite(argument1, argument2);
(this is like when you create a new Array("text",23,"hello world"); you're passing arguments to the contructor of the Array class).
Even if you don't have any arguments to pass to your Class, you should still have a constructor because you might need to execute some functions and set some variables for the instance of your class at instantiation.
Ok, so let's create that constructor; in our case, we're going to pass 2 arguments to our constructor; wid (width) and hei (height).
so, Here's the code now (go back to your .as file):
package {
import flash.display.Sprite;
public class TheAwesomeSprite extends Sprite{
function TheAwesomeSprite (wid:Number, hei:Number) {
}
}
}
Now, you have officially completed the skeleton of your first class (maybe).
Now, you need to know that the constructor is just a function that is called when you create a new instance of your class.
Ok, but right now, your class is still just a simple Sprite, but that's not what you want, you want your class to be a Sprite that is a blue circle. We need to implement the constructor to do what we want, so here is our class.
package {
import flash.display.Sprite;
public class TheAwesomeSprite extends Sprite{
function TheAwesomeSprite (wid:Number, hei:Number) {
super();
this.graphics.beginFill(0x0000FF);
this.graphics.drawEllipse(0,0,wid,hei);
this.graphics.endFill();
}
}
}
Continues Next Page…
Bla
