AS3 Classes Using Inheritance
Inheritance: Linking a Library MovieClip to a Custom Class
package com.mysite.mouse {
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class ClipDragger2 extends MovieClip {
public function ClipDragger2() {
buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);
}
private function drag(event:MouseEvent) {
parent.setChildIndex(this, this.parent.numChildren - 1);
startDrag();
}
private function drop(event:MouseEvent) {
stopDrag();
}
}
}
Save the file. Choose File, Save. If you followed the first two tutorials, you know what's coming next: navigate to the folder you designated in your classpath, then to com, then mysite, then mouse. Save the file there as ClipDragger2.
The first thing to notice about ClipDragger2 is that it extends MovieClip. This means that the class we're defining here IS a MovieClip. Remember, this is the difference between inheritance and composition. Since this class is a MovieClip, all instances of this class will be MovieClips, and will automatically have all the properties and methods that MovieClips have. This makes a difference in the way you compose the class itself. Notice that in the constructor, I can say:
buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);
Since this class represents a MovieClip directly, any instance of this class IS a MovieClip, so the above first line is saying, "Hey, I'm a MovieClip instance. That's understood. So, set my buttonMode property to true, will ya?" Same thing with the next line, which is like saying, "Add an event listener to me." Same thing with the last line, which is like saying "Hey, add an event listener to my stage property." In every case, it's not necessary to preface the property or method with anything, because those are all properties and methods that MovieClips have, and our class IS a MovieClip (can't emphasize enough, haha).
The same could be said for every reference throughout the class. When "parent" is used, it means "my parent." When startDrag is used, it means "start dragging me." When stopDrag is used "stop dragging me." If you did put anything in front of any of these properties or methods, it might be the keyword "this" with a dot, but that's not really necessary either, as, if it's omitted, it's understood.
Next, open a new FLA file. Draw a filled circle on the stage. I drew a circle with a red fill. Select it and press F8 to convert it to a symbol. Choose MovieClip, give it the name Circle. Don't click OK yet, hang on. If this dialog box is in basic mode, click the advanced button. If you're already in advanced mode, you'll see a "basic" button instead. Having the dialog box in advanced mode means you can also set some linkage properties while you're here. Click the box that says Export for Actionscript. This will open up the other fields "Class" and "Base Class." Leave the Base Class field alone for now, but in the one that says Class, type:
com.mysite.mouse.ClipDragger2 (see below).
There is one problem, though, that won't become evident until you attempt to create an instance of your class programmatically instead of adding it to the stage manually in the authoring environment. To demonstrate, remove every instance of your MovieClip from the stage, so that the stage is empty. Click on the timeline's first frame and press F9 to get the actions panel. Type in the following:
import com.mysite.mouse.ClipDragger2;
var cd2:ClipDragger2 = new ClipDragger2();
addChild(cd2);
When you try this, you will get the following error message:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.mysite.mouse::ClipDragger2$iinit()
at Untitled_fla::MainTimeline/Untitled_fla::frame1()
What could be the problem here? It says that we're getting a null object reference, but it doesn't say what's causing it. Whenever you get a null object reference, it means that your code has referred to an object that isn't there. But why does the class work when we drag an instance from the library to the stage, but not when we make one programmatically? The answer is the third line of the constructor, where we refer to the stage property of the clip. The stage property will be null if the clip hasn't been added to the display list yet (with addChild).
So what happens is this: Our code on the main timeline tells flash to create a new instance of our ClipDragger2 class. As soon as the new keyword is encountered, flash starts making a new instance. That means that the constructor of our class is run immediately. Inside that constructor, we refer to the stage property, and in fact we attempt to add a listener to it. But since the addChild command in the main timeline hasn't run yet (although probably only a nanosecond or two behind--haha), our MovieClip hasn't yet been placed on the stage, and so its stage property is null. Since flash has no reference to the stage at this point, it rightly refuses to add a listnener to something that isn't there, and we get a nasty error message instead of joy.
The reason it worked before was because the MovieClip was placed on the stage manually. This is basically the equivalent of addChild, albeit a manual one. Since the addChild came before the constructor was run, there was already a reference to the stage, and it worked. So how do we fix our class so that it just works, regardless of whether we want to add the clip manually or programmatically? I'm glad you asked, haha. And I won't keep you in suspense forever.
It turns out there's an event we can use called "ADDED_TO_STAGE" (handy, eh?). This requires that we import the Event class to ClipDragger2. Then we have to listen for the ADDED_TO_STAGE event to happen. This event will fire as a result of our timeline "addChild" command. At that point, we can safely add the event listener to the clip's stage property. Here's the revised class (notice that the command that adds the event listener to the stage has been moved, and now happens after we detect that the clip has been added to the stage):
package com.mysite.mouse {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;
public class ClipDragger2 extends MovieClip {
public function ClipDragger2() {
buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(Event.ADDED_TO_STAGE, addedListener);
}
private function addedListener(event:Event) {
stage.addEventListener(MouseEvent.MOUSE_UP, drop);
}
private function drag(event:MouseEvent) {
parent.setChildIndex(this, this.parent.numChildren - 1);
startDrag();
}
private function drop(event:MouseEvent) {
stopDrag();
}
}
}
Save the class file, and test the movie again. With the stage empty, the code in the fla file's main timeline programmatically creates an instance of our class, adds it to the display list, and this time it just works. The freshly minted circle appears on the stage, and you can drag it around at will. Joy!
And now you should know how to get rid of a lot of those pesky null object reference error messages. Be sure and tell all your friends!
On the next page, I'll explain the difference between the fields "Class" and "Base Class" in the linkage dialog box.
