Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






An Introduction to OOP in Flash and ActionScript, Part 2
Pages: 1, 2, 3

Extending Classes

A powerful feature of classes is the ability to extend them. This means that a new class can inherit all the functionality of another class. We call the parent class the superclass, and the class that inherits from the superclass is a subclass. Creating subclasses can be very valuable when, for example, you want to create a group of related classes that share common functionality, but that also have their own, unique functionality as well. For example, consider the following classes: Dog, Cat, Bird. Each of these classes might share some of the same functionality. For example, they each might have a walk() and sleep() method. But clearly each class would also have some functionality that the others don't. The Dog class might have a bark() method. The Cat class might have a meow() method. And the Bird class might have a fly() method.



In such a case you could recreate the shared functionality in each of the classes. Or you could create a superclass, Animal, for which each of the three classes is a subclass. The Animal class defines the walk() and sleep() methods and the subclasses inherit these methods without having to have them explicitly defined within them.

In order to create a subclass all you need to do is set the class's prototype equal to a new instance of the superclass. For example, here's how you can define the Dog class to extend Animal:

function Dog() {
}

Dog.prototype = new Animal();

Now that you've had the chance to see the line of code that tells Flash that one class extends another, let's take a look at the full example with the Animal, Dog, Cat, and Bird classes. We'll create this example so that it simply illustrates that the subclassing is working. For that purpose we'll place simple trace() actions within the methods. Obviously, therefore, these classes would not be useful in an actual production environment, and if you intend to follow along you'll need to make sure you use the test player. Also, as a note, should you want to follow along, you can add all this code to the first frame of the default layer of the main timeline of a new Flash document.

First, here's the Animal class that defines the walk() and sleep() methods.

function Animal() {
}

Animal.prototype.walk = function() {
  trace("walking");
};

Animal.prototype.sleep = function() {
  trace("sleeping");
};

Now, here's the Dog, Cat, and Bird classes. Each extends the Animal class, and in addition to the inherited methods, each defines one more additional method.

function Dog() {
}

Dog.prototype = new Animal();

Dog.prototype.bark = function() {
  trace("barking");
};
 function Cat() {
}

Cat.prototype = new Animal();

Cat.prototype.meow = function() {
  trace("meowing");
};

function Bird() {
}

Bird.prototype = new Animal();

Bird.prototype.fly = function() {
  trace("flying");
};

Once you've defined these classes, you can test them by creating some instances and calling the methods. You should be able to invoke both the inherited methods and the method that is defined explicitly for each class.

spot = new Dog();
kitty = new Cat();
wings = new Bird();
spot.walk();  // Displays: walking
spot.sleep(); // Displays: sleeping
spot.bark(); // Displays: barking
kitty.walk();  // Displays: walking
kitty.sleep(); // Displays: sleeping
kitty.meow();  // Displays: meowing
wings.walk();  // Displays: walking
wings.sleep();  // Displays: sleeping
wings.fly();  // Displays: flying

You should notice that even though the walk() and sleep() methods are not explicitly defined within the subclasses, those methods are accessible to instances of the subclasses.

Creating External Class Files

Once you start creating a lot of classes you may find it useful to store the classes in external files. This can have several benefits. First of all, it allows you to use the classes in multiple Flash applications. Secondly, it is a good way of organizing your code. Rather than cluttering your timelines with classes you can simply define the class in an external file and load it when you want to use it in an application.

When you store ActionScript code in external files, the files should be plain text documents saved with the file extension .as. For example, you can save the Dog class in a file named Dog.as. You can save the file in the same directory as the .fla file, or a subdirectory of that directory. That is useful for classes that you plan to use in that application only. For classes that you want to use in multiple applications you will find it helpful to save them to the Flash Include directory. The Include directory can be found in the Configuration directory of the Flash MX installation. Regardless of what directory the .fla file is saved in, Flash will be able to load an .as file from the Include directory. Flash always looks to the local directory first. Therefore, if you have an .as file with the same name saved in both the local and the Include directories, Flash will load the local version.

Tip: Add an extra blank line to the end of your .as files. Sometimes, if you don't add an extra line Flash will generate errors.

Once you have saved your code into an external .as file you need to tell Flash to load the code into the application. You can accomplish this with the #include directive. The #include directive includes the name of the file to load. For example:

#include "Dog.as"

Notice that the name of the file to load is in double quotes. Also, the #include directive should not end in a semi-colon. If you place a semi-colon at the end of a #include directive you will receive an error.

If the .as file is in a subdirectory of either the .fla directory or the Include directory then you need to specify that directory as part of the file name in the #include directive. For example, if the Dog.as file is saved in a subdirectory named classes then the #include directive will look like this:

#include "classes/Dog.as"

Don't forget that if you want to load an external subclass you also need to load the external superclass. In the case of the Dog class you also need to load Animal.

#include "Animal.as"
#include "Dog.as"

Note: The code from an external .as file is loaded and compiled into the .swf when you export the movie. Therefore, it is unnecessary to copy the .as files along with your .swf files when distributing the application. Also, this means that if you make changes to the .as file, you will need to re-export the .swf.

Pages: 1, 2, 3

Next Pagearrow