Laydo.net Webmaster Blog

PREREQUISITE:
Solid knowledge of functions. My previous functions tutorial will function as a nice filler. Read it here.

Object Oriented Programming (OOP) has been around for a while and has hit the Flash scene within the past 2-3 years. The good thing about this programming method is that it gives you the tools to organize your code extremely well, make it easy to apply, and cluster your objects into groups with similar properties. Obviously, this is more useful when you are working with concrete objects that must be represented in code. A good example (and the main one we will be working with) is when making a game with players. Other examples of this type of code could be an dynamic content website. You could have a button object, a main movie object, a background sound management object, and a preloader object. One can also extend the conventional Actionscript objects, such as Array, String, Math, Number, XML, LoadVars, MovieClip, etc?

To start, lets suppose that we are creating an evil monster for a game. The monster will have to have movement, location, speed, vision, attack power and range, energy, and health. We will begin by creating the function that will be used whenever we want to create this monster:

    ActionScript:

    function UglyBeast(x, y, speed, vision, aPower, aRange) {
            //This line ensures that you are calling the function using
            //the "new Function (arguments)" syntax.
            //If the function is simply called from a movieclip timeline
            // it creates no variables.
            if (typeof this == "object") {
                    //I now take the arguments sent to the function
                    //and assign them to my new object
                    this.xPos = x;
                    this.yPos = y;
                    this.speed = speed;
                    this.vision = vision;
                    this.aPower = aPower;
                    this.aRange = aRange;
                    //these need not be sent as arguments
                    //all UglyBeast objects start with 100 energy and health points
                    this.energy = 100;
                    this.health = 100;
                    //You called it incorrectly, try again? hehe
            } else {
                    trace("this method is not being called correctly");
            }
    }
    myBeast = new UglyBeast(10, 10, 5, 20, 15, 15);

So what?s happening here? Well, the function is similar to any other function. However, since we are calling it with the ?new ? in front of it, the function is operating as part of an object chain. This is verified by the ?if (typeof this == "object")? check. So what?s special about the object nature? By using it, we can assign variables to the object being created. In this example, it?s ?myBeast. You can see how this works by listing the variables:

    code:
    Level #0:
    Variable _level0.$version = "WIN 6,0,21,0"
    Variable _level0.UglyBeast = [function 'UglyBeast']
    Variable _level0.myBeast = [object #2, class 'UglyBeast'] {
    xPos:10,
    yPos:10,
    speed:5,
    vision:20,
    aPower:15,
    aRange:15,
    energy:100,
    health:100
    }

myBeast became an object of the ?UglyBeast? class. Also, as the function was running, ?myBeast? became ?this?, allowing the variables to be assigned properly.

Looking at this example will help us define some OOP terminology:
Object ? a ‘tangible’ piece of code that has its own properties and methods. (myBeast is an object.)
Instance ? a particular object created using the word ‘new’ before the type of object being created. An instance is said to be instantiated when it is created.(myBeast is an instance.)
Class ? a type of object, described by the template function that creates it. Instances belonging to a class are said to be class members.(myBeast is an instance of the UglyBeast object class. It is an UglyBeast class member.)
Constructor ? the function run when an object is created.(UglyBeast is the constructor of myBeast.)
Argument ? information sent to the constructor, telling it how to create and shape the specific instance. ( x, y, speed, vision, aPower, and aRange were all arguments sent to UglyBeast, the constructor of myBeast)
Property ? variable that belongs to an instance or class and that describes its nature.(xPos, yPos, speed, vision, aPower, aRange, energy, and health are properties of the UglyBeast class{in general} and the myBeast instance{specifically}.)

Now, what is a prototype? In the real world, we know that prototypes represent the first of something to ever be created. We also know that prototypes are then duplicated during the production process. Programming prototype are quite similar. If you give your constructor function a prototype, it will be ‘copied’ to all of its children. Lets modify our example a little to show prototypes in use:

    ActionScript:

    function UglyBeast(x, y, speed, vision, aPower, aRange) {
            //This line ensures that you are calling the function using
            //the "new Function (arguments)" syntax.
            //If the function is simply called from a movieclip timeline
            // it creates no variables.
            if (typeof this == "object") {
                    //I now take the arguments sent to the function
                    //and assign them to my new object
                    this.xPos = x;
                    this.yPos = y;
                    this.speed = speed;
                    this.vision = vision;
                    this.aPower = aPower;
                    this.aRange = aRange;
            }
            //these need not be sent as arguments
            //You called it incorrectly, try again? hehe
            else {
                    trace("this method is not being called correctly");
            }
    }
    //all UglyBeast objects start with 100 energy and health points
    UglyBeast.prototype.energy = 100;
    UglyBeast.prototype.health = 100;
    myBeast = new UglyBeast(10, 10, 5, 20, 15, 15);

As before, all instances of the UglyBeast class will have an energy and health of 100. There are, however, a few differences when prototype is used. First of all, UglyBeast can control all of its own prototypes. Suppose, for example, that you have 10 instances of the UglyBeast class. If you change UglyBeast.prototype.energy to 50, then the energy property of all of the instances is immediately affected. At the same time, however, you do have control of the individual instance values. If you set them later on in the code, they will only change their version of the prototype property, not all of the instances. This is getting slightly jumbled, so let me show you an example:

    ActionScript:

    // this changes the energy value for all instances of the UglyBeast class
    UglyBeast.prototype.energy = 50;
    // this affects only myBeast and none of the other instances of UglyBeast
    myBeast.energy = 25;
    // now all instances of the UglyBeast class have an energy of 50 except myBeast

Furthermore, the setting of an instance’s variable does not destroy the link to the prototype. As a matter of fact, its very easy to access again:

    ActionScript:

    UglyBeast.prototype.energy = 50;// all UglyBeast instances have 50
    myBeast.energy = 25;// myBeast now has 25
    delete myBeast.energy;// myBeast now has 50

What’s the logic in that? This feature is called ’scope’, and works like a chain of command. If an instance has its own method or property, then it does not check its prototype. If the instance, however, has no such method or property, it checks the prototype of its constructor.

Speaking of methods, we have not use any in our code. What is a method? Well, its simply a function that belongs to a class. This function serves to change the properties of the class. Lets expand our code to include a few methods:

    ActionScript:

    function UglyBeast(x, y, speed, vision, aPower, aRange) {
            //This line ensures that you are calling the function using
            //the "new Function (arguments)" syntax.
            //If the function is simply called from a movieclip timeline
            // it creates no variables.
            if (typeof this == "object") {
                    //I now take the arguments sent to the function
                    //and assign them to my new object
                    this.xPos = x;
                    this.yPos = y;
                    this.speed = speed;
                    this.vision = vision;
                    this.aPower = aPower;
                    this.aRange = aRange;
                    //these need not be sent as arguments
                    //You called it incorrectly, try again? hehe
            } else {
                    trace("this method is not being called correctly");
            }
    }
    //all UglyBeast objects start with 100 energy and health points
    UglyBeast.prototype.energy = 100;
    UglyBeast.prototype.health = 100;
    UglyBeast.prototype.injure = function (severity){
            this.health -= severity;
    };
    UglyBeast.prototype.moveUp = function (distance){
            this.yPos += distance;
    };
    UglyBeast.prototype.moveDown = function (distance){
            this.yPos -= distance;
    };
    UglyBeast.prototype.moveRight = function (distance){
            this.xPos += distance;
    };
    UglyBeast.prototype.moveLeft = function (distance){
            this.xPos -= distance;
    };
    myBeast = new UglyBeast(10, 10, 5, 20, 15, 15);
    myBeast.moveUp(20); // yPos = 30
    myBeast.moveRight(4); // xPos = 14
    myBeast.moveLeft(7); // xPos = 7
    myBeast.moveDown(13); // yPos = 17
    myBeast.injure(12); // health = 88

I think we’ve hashed enough code for one sitting. Let these examples set in, and do some experimenting with the code. When you feel comfortable with it, come back, because soon enough I will be describing object inheritance. In other words, you can have parent and children classes that, just like real families, receive their structure and properties from their parents. In the mean time, drop in on our forums, we’d be glad to see your face(or avatar anyway).