Tutorial details:
Written by: Gabriel Gittings
Time: 45 minutes
Difficulty Level: Intermediate
Requirements: Flash 5 and higher
Topics Covered: Learn about inheritance in Flash's OOP structure.
Assumed knowledge: Variables, Paths, Functions, Objects, Methods, basic OOP.
Download FLA

Intro

The most difficult thing to grasp in Flash for the non-programmer is Object-Oriented Programming techniques. Luckily for us in the latest release of Flash, Flash MX. Object Oriented programming techniques have become easier than ever to start using. There are many reasons that OOP is helpful in flash, from the designer to the application developer we can all benefit from this technique of programming. The Main advantages to using OOP techniques in flash can be summarized with two terms - encapsulation and centralization. Encapsulation gets to the heart of why OOP in all programming languages is beneficial. By "encapsulating" your code into a code structure that can be reused and be unaffected by changes in the rest of your program you are saving your self time in the current project because you aren't breaking already working code with changes and you don't have to rewrite code that you use frequently. Encapsulation also helps to organize your code so it is easier for others to understand ( which doesn't mean your code shouldn't be well documented! ). Centralization is really a term that really only relates to flash. The biggest difficulty that programmers have when they start using flash is that the code can easily be scattered every where, nested deep with in movie clip after movie clip, which can make it very difficult to track down bugs. This tutorial is aimed at introducing everyone to OOP in Flash MX and hopefully being able to use it right away. Some of the concepts can be used in Flash 5 though it requires a little bit more in depth knowledge of flash 5 actionscript and OOP to accomplish the same tasks. You will soon realize once you start down this path of using and learning OOP that the more you learn the more you realize you don't know about the subject. But don't get discouraged it takes time, patience, and good ole' fashion trial and error.

O-O Basics

First things first. What makes OOP Object Oriented? Luckily for most Flash users this concept is already in front of us and being used even if we don't know we are using Object Oriented principles. When we define a Movie Clip in the Symbol Library and drag it to our stage we are creating an object. This process in O-O terms is known as instanciation. I will cover this term a little more shortly. This tutorial is meant as a starter for your OOP endeavors. There is a great tutorial that you should read either before or after this one that will either scramble your brain or make it all come clear. Robin Debrieul has written an incredible tutorial on the subject that you can find at his site http://www.debreuil.com/docs/ch01_Intro.htm. We will begin this discussion from the top down. So, lets talk about classes.

Classes

Actionscript is based on an ECMA standard for scripting languages. This is the same standard that JavaScript is based on so if you have and understanding or seek more info on O-O in an ECMA language pick up a good JavaScript book. I recommend the definitive guide for JavaScript from O'Reilly. So, what does this have to do with classes? Well since ActionScript is a ECMA language it actually doesn't technically have classes (huh?). For those of you who have been learning or spending time in the forums talking about OOP this may come as a shock to you, it did to me. ActionScript and JavaScript are what are known as prototype based languages. This means that you have a constructor and the prototype object for the constructor, these two objects basically make up your "Class" (which is how I will refer to them for the rest of the tutorial). The prototype object is where flash looks for all you methods and variables. ( For example ever used .getBytesLoaded? This method is defined in the prototype of the MovieClip "class")

The constructor is like a template for the objects that you want to create for your program. Think of it as your blue print for how to create an object (not how you will use it, that comes later in the prototype section). A brief example..

MyCircleClass = function(){
        this.color = red;
        this.size = big;
        this.name = "myCircle";
}

Now I always have hated these abstract examples that don't directly relate to flash so for those like me here is an example. ( don't use this in flash without reading the whole tutorial yet cause it won't do anything)

CircleClass = function (){
        this._x = 200;
        this._y = 400;
        this.alpha = 60;
}

Sounds easy enough right? But how and when does flash know when to set these variables and what does "this" refer to. Since this is a template you have to build your object from it or rather you have to instanciate the constructor ("class"). This is accomplished in several ways depending on whether you are subclassing a MovieClip class or creating an internal object for handleing data. I will start with the non-subclassed type because it shows how O-O is supposed to work. ( Subclassing MovieClips can be tricky business and it is usually what people want to use first in the O-O endeavors Flash MX makes it much easier with the new Object.registerClass() method which I will cover later). Before the example the keyword this when used in a constructor or a prototype refers to the instance that is created from the class. Lets look at an example.

MyCustomClass = function(){
        this.name = "customclass";
        this.description = "this is my first class";
}
customClassInstance = new MyCustomClass();

Whala! That sure was easy right? By using the global method "new" you are instanciating your constructor ("class") and creating an object with the identifier of customClassInstance. And encase you are wondering the keyword "this" that precedes all the properties refers to your instance in scope. So once you instanciate your class, "this" refers to customClassInstance. Easy enough, I will cover the use of Object registerClass() after a brief explanation of prototypes.

Prototypes

So, what is this thing you keep hearing about called a prototype? And how do you use it. Well a prototype is an object that is part of all classes in flash that holds all of the methods for that class. What does this mean you ask? Well think of the prototype as a holding place for all the methods and properties for the class and the objects that are created from the class. Instead of copying the methods to each instance of the class and creating a lot of memory over head flash keeps all the methods (assuming that is where you put them) in the prototype.

Lets say you define a function in the first frame of a movie clip. You are effectively attaching a method to the movie clip object. So when you call this method flash first looks at the object (your movie clip) for that method. When it finds it it goes no further.

onClipEvent(load){
        moveMe = function(){
                this._x+=5;
        }
}

onClipEvent(enterFrame){
        this.moveMe()
}

So what is different when you put your method in the prototype. First lets look at some of the built in methods. A good example of this is .getBytesLoaded(). When you call this method for a movie clip you say myMC.getBytesLoaded() and it returns the number of bytes that have loaded in your movie clip. When you call this method flash first looks in the object myMC. When it doesn't find it there it looks at its constructor (which is a property you can access via __proto__ or .constructor) property which tells flash that the class that created this object is the MovieClip class. So, it then looks at it's prototype object, MovieClip.prototype, where it find the method getBytesLoaded(). The great thing about flash (and most languages) is that you can change the prototype properties of the built in classes. Here's an example.

MovieClip.prototype.getBytesBackUp = MovieClip.prototype.getBytesLoaded;

MovieClip.prototype.getBytesLoaded = function(){
        trace("gotcha sucka!!");
}

_root.getBytesLoaded();

Cool Huh!! Of course you don't have to ruin all the built in methods with the prototype object you can add to all the classes in flash as well. There was a big fad (and some people still do it) when people started to discover the benefits of putting methods in MovieClip.prototype when Flash 5 was out for about 6 months. This is a handy but poor OOP way to code. It is handy because then those methods are available to all the movie clips in your movie. It is poor OOP in that you pollute all your movie clips with methods that they may not need. So what is the solution? Well in comes inheritance and subclassing.

Continued overleaf...