AS3 Classes Using Inheritance
The Linkage Dialog: Setting the Class vs. Setting the Base Class
Jody Hall
My interest in Flash started mostly because of a Jib-Jab cartoon ("This Land") in 2004. I'm the author of a feature I call "Mazoons," which are a combination of mazes and cartoons. In 2002, I even had a book published, "Super Silly Mazes." I'm not a professional programmer, but making my mazes interactive by programming them with Flash has become a hobby/obsession of mine in recent years. My efforts so far can be seen at http://www.mazoons.com/Flash_mazes.htm.
View all articles by Jody Hallimport com.mysite.mouse.ClipDragger2;
for (var i:int = 0; i < 20; i++) {
var cd2:ClipDragger2 = new ClipDragger2();
addChild(cd2);
}
Test the movie. This creates 20 instances of ClipDragger2 and stacks them atop one another. You can confirm that there's more than one if you start dragging them around. While making too many copies of this clip might be a frightful waste of memory and bad practice, it just might be starting to spark some cool ideas for you, as well.
But back to the topic at hand. Delete that fun code and let's get back to business. Let's suppose that you're ecstatic about being able to create draggable clips just by linking them to this class. Draw a blue square on the stage, select it, and press F8 to convert it to a symbol. Next, you attempt to enter the same information as before, to link your symbol to the custom class:
Only this time, when you click the OK button, you get a message from Flash that looks like this:
So, it seems to be that the rule is this: Each library symbol can only have one custom class linked to it. What to do, what to do? It turns out that in this case, the Base Class field is going to come in quite handy. Change the two fields so that they look like this instead:
This time, when you click the OK button, Flash replies with this:
Click OK. What this dialog means is that flash couldn't find any class called "Square" in the classpath. It further explains that a class with that name will be automatically created for us at compile time, and by clicking OK we accept this generous offer. I recommend you never check "Don't warn me again," as this dialog box is really a great indicator of whether or not Flash finds a class of the same name in the classpath. If you don't get this warning, better choose a different name!
Really, what's happening here is that by having both Class and Base Class fields, we are given the opportunity to use yet another level of inheritance. That way, we can link more than one symbol to the same class, by just using the Base Class field instead, and just giving the Class field some more generic name, and letting flash create the Class.
In this case, Flash has made a class for us called "Square." The base class of Square is our custom class (long name com.mysite.mouse.ClipDragger2). And since our custom class extended MovieClip, the base class of that is flash.display.MovieClip. Can you see the chain of inheritance here? If not, think about it some more:
Our class extends MovieClip (this is written in the class file itself)
The Base Class extends our class (Base Class field of dialog box)
The Square class extends the Base Class (flash makes a Square class if you don't define one elsewhere).
Now, let's go back and change the linkage of the Circle clip, too, changing the base class to our custom class and letting Flash create a "Circle" class for us! This has the further advantage that we no longer need to import anything in the fla file's code. We can make new instances of the Circle and Square by just writing:
It should be obvious why we no longer need to import anything. Now we aren't dealing with ClipDragger2 directly anymore. Now we're dealing with classes called Circle and Square, and they are in turn are based on ClipDragger2. Flash has no trouble finding the Circle and Square classes, because it creates them for us. And the information about where to find the ClipDragger2 class was entered in the dialog box. Clear?
Obviously, you could define Circle and Square classes yourself instead of having Flash create them for you, and still use ClipDragger 2 as the base class. But in that case, you might as well do everything manually, and just have the Circle and Square classes extend ClipDragger2, and give them empty constructors. Why do all that, when Flash will do it for you? It's too much work! (If anyone knows a good reason, be sure and let me know. I can't think of one at the moment).
Once again, I hope this tutorial has sparked your imagination. If you enjoyed it, won't you write and tell me so? Or, just post a comment here. Thanks!
Jody Hall (Mazoonist)
Really, what's happening here is that by having both Class and Base Class fields, we are given the opportunity to use yet another level of inheritance. That way, we can link more than one symbol to the same class, by just using the Base Class field instead, and just giving the Class field some more generic name, and letting flash create the Class.
In this case, Flash has made a class for us called "Square." The base class of Square is our custom class (long name com.mysite.mouse.ClipDragger2). And since our custom class extended MovieClip, the base class of that is flash.display.MovieClip. Can you see the chain of inheritance here? If not, think about it some more:
Our class extends MovieClip (this is written in the class file itself)
The Base Class extends our class (Base Class field of dialog box)
The Square class extends the Base Class (flash makes a Square class if you don't define one elsewhere).
Now, let's go back and change the linkage of the Circle clip, too, changing the base class to our custom class and letting Flash create a "Circle" class for us! This has the further advantage that we no longer need to import anything in the fla file's code. We can make new instances of the Circle and Square by just writing:
var circle:Circle = new Circle();
var square:Square = new Square();
addChild(circle);
addChild(square);
It should be obvious why we no longer need to import anything. Now we aren't dealing with ClipDragger2 directly anymore. Now we're dealing with classes called Circle and Square, and they are in turn are based on ClipDragger2. Flash has no trouble finding the Circle and Square classes, because it creates them for us. And the information about where to find the ClipDragger2 class was entered in the dialog box. Clear?
Obviously, you could define Circle and Square classes yourself instead of having Flash create them for you, and still use ClipDragger 2 as the base class. But in that case, you might as well do everything manually, and just have the Circle and Square classes extend ClipDragger2, and give them empty constructors. Why do all that, when Flash will do it for you? It's too much work! (If anyone knows a good reason, be sure and let me know. I can't think of one at the moment).
Once again, I hope this tutorial has sparked your imagination. If you enjoyed it, won't you write and tell me so? Or, just post a comment here. Thanks!
Jody Hall (Mazoonist)
Spread The Word
3 Responses to "AS3 Classes Using Inheritance"
|
said this on 11 Jan 2008 3:59:04 PM CDT
I have tried this with the kaymover class, but keep getting this error: 1120 Access of undefined propert keyCode.
Here is the code: [code] package com.mysite.keyboard { import flash.display.MovieClip; import flash.events.Event; import flash.events.KeyboardEvent; import flash.ui.Keyboard; public class KeyInheriter extends MovieClip { private var uKey:Boolean; private var dKey:Boolean; private var lKey:Boolean; private var rKey:Boolean; private var speedSetter:uint = 5; public function KeyInheriter() { stage.addEventListener(Event.ENTER_FRAME, run); stage.addEventListener(KeyboardEvent.KEY_DOWN, pressed); stage.addEventListener(KeyboardEvent.KEY_UP, unPressed); } private function pressed(event:KeyboardEvent) { if(keyCode == Keyboard.UP) { uKey = true; } if(keyCode == Keyboard.DOWN) { dKey = true; } if(keyCode == Keyboard.LEFT) { lKey = true; } if(keyCode == Keyboard.RIGHT) { rKey = true; } } private function unPressed(event:KeyboardEvent) { if(keyCode == Keyboard.UP) { uKey = false; } if(keyCode == Keyboard.DOWN) { dKey = false; } if(keyCode == Keyboard.LEFT) { lKey = false; } if(keyCode == Keyboard.RIGHT) { rKey = false; } } private function run(event:Event) { if(uKey) { this.y -= speedSetter; } if(dKey) { this.y -= speedSetter; } if(lKey) { this.y -= speedSetter; } if(rKey) { this.y -= speedSetter; } } } } [/code] Any ideas? |
Author/Admin)|
said this on 11 Jan 2008 6:59:20 PM CDT
Great tutorial! I tried to apply this to the KeyMover class, but I keep getting the null error (even though it works). I tried adding the ADDED_TO_STAGE command, but to no avail. Here's the code I worked up:
[code] package com.mysite.keyboard { import flash.display.MovieClip; import flash.events.Event; import flash.events.KeyboardEvent; import flash.ui.Keyboard; public class KeyInheriter extends MovieClip { private var uKey:Boolean; private var dKey:Boolean; private var lKey:Boolean; private var rKey:Boolean; private var speedSetter:uint = 5; public function KeyInheriter() { stage.addEventListener(KeyboardEvent.KEY_DOWN, pressed); stage.addEventListener(KeyboardEvent.KEY_UP, unPressed); stage.addEventListener(Event.ENTER_FRAME, run); } private function pressed(event:KeyboardEvent) { if(event.keyCode == Keyboard.UP) { uKey = true; } if(event.keyCode == Keyboard.DOWN) { dKey = true; } if(event.keyCode == Keyboard.LEFT) { lKey = true; } if(event.keyCode == Keyboard.RIGHT) { rKey = true; } } private function unPressed(event:KeyboardEvent) { if(event.keyCode == Keyboard.UP) { uKey = false; } if(event.keyCode == Keyboard.DOWN) { dKey = false; } if(event.keyCode == Keyboard.LEFT) { lKey = false; } if(event.keyCode == Keyboard.RIGHT) { rKey = false; } } private function run(event:Event) { if(uKey) { this.y -= speedSetter; } if(dKey) { this.y += speedSetter; } if(lKey) { this.x -= speedSetter; } if(rKey) { this.x += speedSetter; } } } } [/code] Any ideas? |
|
said this on 23 Jan 2008 7:32:19 PM CDT
Jody,
Excellent tutorial (impressive that you are new to ActionScript...I wish I picked it up that quickly!). Here's my question: At the end of your tutorial you state that you can't think of a reason why you would manually want to create the Circle and Square classes. Well I have a need (I think) and it is driving me crazy trying to figure it out. What if there is something unique about the Circle that the Square doesn't have? So I think you would need to define a Circle class and define those items there instead of using the generated Flash Circle class. Well I thought this would be simple. Just put Circle as the Class and use the ClipDragger as the Base Class (ClipDragger would still have to extend the MovieClip class). I can not get it to work at all. This is the error I get if I try to create my own Circle class: 5000: The class 'Circle' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type. |
