Extends, Override and Super

Photo by Neeku.

AS3 enforces the ideas of Object Oriented Programming (OOP) a lot more than AS2 ever did. One of the fundamental concepts of OOP is *inheritance*, allowing classes to take the properties and methods of other classes and build upon them further.

In this post, I’ll explain the three most important keywords for using class inheritance in AS3: *extends*, *override* and *super*.

###An Example: MovieClip

Let’s take a look at the *MovieClip* class to see an example of inheritance at work. If you check out the LiveDocs for this class, you’ll see this line in the description:

**Inheritance:** MovieClip -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

The arrows simply mean “inherits from”, so *MovieClip* inherits from *Sprite*, which in turn inherits from *DisplayObjectContainer*, and so on, right down to *Object*.

The Object class is extremely basic, containing just a handful of properties and methods. It’s an empty shell, but because it allows for the possibility of properties and functions to be added, it’s an excellent base for more complex classes.

The EventDispatcher class builds upon *Object* by adding event-related methods (functions), like *addEventListener()* and *dispatchEvent()*.

Now, because DisplayObject inherits from *EventDispatcher*, it also contains *addEventListener()*, *dispatchEvent()*, and so on. It then builds upon this by adding methods, properties, and interfaces that allow instances to be displayed on screen — for example, *x* and *y* properties for positioning, and the *hitTestObject()* method for checking for overlaps.

The InteractiveObject class allows for user interaction, adding properties like *mouseEnabled* and *tabIndex*, and events like *click* and *keyDown*.

Then we have the DisplayObjectContainer class, which can contain other *DisplayObjects* (and descendents of *DisplayObject*, like *InteractiveObject* and *DisplayObjectContainer*) with methods like *addChild()*.

The Sprite class adds, among other things, the *graphics* property, which itself is an instance of the Graphics class that allows for the drawing of vector shapes within the object. So the *Sprite* adds vector drawing capability, and some miscellaneous interface features.

Finally we reach the MovieClip class, whose main addition is that of a timeline, allowing for animation. Therefore, it has methods like *nextFrame()*, *play()* and *goToAndStop()*, and properties like *currentFrame* and *totalFrame*.

If you want the full details of what each class does, take a look at their corresponding LiveDocs page, and turn off “Show Inherited Public Properties/Methods”.

So that’s a concrete example of how Flash uses inheritance to structure its own classes. How can we use it?

###Extends

One thing that bugs me about the MovieClip class is that, if it’s on the last frame and I call *nextFrame()*, it **stays** on the last frame. I’d much prefer it to go back to the first frame, to make it easier to loop.

Rather than just complaining, let’s make our own class, *LoopingMovieClip*, that has this feature.

We’ll need to use the *extends* keyword for this. Create a new class file like so:

package  
{
	import flash.display.MovieClip;
	
	public class LoopingMovieClip extends MovieClip
	{
		public function LoopingMovieClip() 
		{
			
		}
	}
}

By writing *extends MovieClip* in line 5 (and importing the MovieClip class in line 3), our new class inherits every public (or protected — more on that here) method and property. Of course, this means that at the minute *LoopingMovieClip* has no functionality other than that which *MovieClip* already has.

I’m going to add a new function, *nextFrameOrLoopToFirst()*, that’ll do what I want:

package  
{
	import flash.display.MovieClip;
	
	public class LoopingMovieClip extends MovieClip
	{
		public function LoopingMovieClip() 
		{
			
		}
		
		public function nextFrameOrLoopToFirst():void 
		{
			if ( currentFrame == totalFrames )
			{
				gotoAndStop( 1 );
			}
			else
			{
				gotoAndStop( currentFrame + 1 );
			}
		}
	}
}

Very simple. If you want to test it out in the Flash IDE, just create a new movie clip symbol as usual, right-click it in the library, select *Properties*, export it for ActionScript, and set its **Base** class to *LoopingMovieClip*. You can give its class any name you want, and it’ll inherit from the base class. Now add a few frames to the symbol, and try running our new function.

It works, but wouldn’t it be better if we could make the *nextFrame()* method itself do this?

###Override

If you try to do the same as before, but call the function *nextFrame()* instead of *nextFrameOrLoopToFirst()*, like so:

package  
{
	import flash.display.MovieClip;
	
	public class LoopingMovieClip extends MovieClip
	{
		public function LoopingMovieClip() 
		{
			
		}
		
		public function nextFrame():void 
		{
			if ( currentFrame == totalFrames )
			{
				gotoAndStop( 1 );
			}
			else
			{
				gotoAndStop( currentFrame + 1 );
			}
		}
	}
}

…you’ll get the following error:

1024: Overriding a function that is not marked for override.

This is telling us that *nextFrame()* is already a function in one of the classes that *LoopingMovieClip* inherits from (and therefore in *LoopingMovieClip* itself), and we can’t have two functions with the same name. You will probably have guessed that we can use the *override* keyword to get around this. Change your function like so:

override public function nextFrame():void 
{
	if ( currentFrame == totalFrames )
	{
		gotoAndStop( 1 );
	}
	else
	{
		gotoAndStop( currentFrame + 1 );
	}
}

By adding the *override* keyword, we’ve told Flash that we’re aware of the inherited *nextFrame()* function, but we’d like to replace it with our own. If you test it out now, you’ll see we don’t get any errors, and that our *nextFrame()* function acts just like our *nextFrameOrLoopToFirst()* function did before.

One thing to bear in mind here is that we need to match the “signature” of the function that we are overriding — i.e., whether it’s *public* or *protected*, the parameters it accepts, and the type of variable it returns.

For example, we might like to add an optional parameter to the function that allows it to be backwards-compatible:

override public function nextFrame( p_loop:Boolean = false ):void 
{
	if ( ( p_loop ) && ( currentFrame == totalFrames ) )
	{
		gotoAndStop( 1 );
	}
	else
	{
		gotoAndStop( currentFrame + 1 );
	}
}

The idea here is that calling *nextFrame()* will not cause any looping, so our existing code will act the same with LoopingMovieClips as it did with MovieClips. Trouble is, when we test this, this error occurs:

1023: Incompatible override.

In other words, because we changed the signature of our function (in this case by altering the parameters allowed), it’s no longer identical to the original and so can’t override it. Watch out for this.

Next, let’s tackle *gotoAndStop()*. If I call *gotoAndStop( 7 )* on a 5-frame movie clip, I’d like it to go to frame 2. Sounds simple, but there’s a snag…

###Super

In theory this should be similar to what we did before. Start by defining the function:

override public function gotoAndStop( frame:Object, scene:String = null ):void 
{
	
}

(FlashDevelop tells me the signature, but you can look it up in the LiveDocs.)

To work out which frame we actually want, we can use the *modulo* operator, represented by a percentage sign %. This is like division, but it gives us the **remainder** of the expression.

If you’re rusty on remainders, here’s a quick recap.

– 7 = ( 5 * 1 ) + 2, so 7 divided by 5 is 1 remainder 2, and 7 % 5 = 2
– 14 = ( 5 * 2 ) + 4, so 14 divided by 5 is 2 remainder 4, and 14 % 5 = 4
– 20 = ( 5 * 4 ) + 0, so 20 divided by 5 is 4 remainder 0, and 20 % 5 = 0
– 126 = ( 5 * 25 ) + 1, so 126 divided by 5 is 25 remainder 1, and 126 % 5 = 1
– 3 = ( 5 * 0 ) + 3, so 3 divided by 5 is 0 remainder 3, and 3 % 5 = 3

So if we call *gotoAndStop( someFrame )* the frame we want to actually go to is *someFrame % totalFrames*. (Well, unless the result is zero — in that case, we want to go to *totalFrames*, but let’s ignore this detail for now.)

When we try to put this in, however, there’s a problem:

override public function gotoAndStop( frame:Object, scene:String = null ):void 
{
	var requestedFrame:int = frame as int;
	var actualFrame:int = requestedFrame % totalFrames;
	gotoAndStop( actualFrame )
}

(Line 26 isn’t a real problem; Flash expects the frame to be input as an *Object* rather than an *int* — most likely so that we can pass a frame label through as a String, as RedRail points out — so here we convert the *frame* parameter to an *int* so that we can use the modulo operator on it.)

In line 28 we need to call *gotoAndStop()*, but… we’ve already overriden it! What we need to call is the **original** *gotoAndStop()* method, the one defined by *MovieClip*. This is where *super* comes in.

The *super* keyword allows us to access the methods and functions of the inherited class. It’s used like this:

override public function gotoAndStop( frame:Object, scene:String = null ):void 
{
	var requestedFrame:int = frame as int;
	var actualFrame:int = requestedFrame % totalFrames;
	super.gotoAndStop( actualFrame )
}

Also, the constructor function — the function with the same name as the class that is run when an instance of that class is created — acts like an automatically overridden function, in the sense that the constructor of the inherited class can be accessed using *super*. To do this, just call *super()*, rather than *super.constructor()* or *super.MovieClip()* or whatever. Remember to make sure the list of parameters match!

Note: if you don’t include a call to *super()* in your class’s constructor, then Flash will call *super()* **before** your constructor is run, anyway – so there’s no getting away from it.

###Wrapping Up

Admittedly the functions we’ve created here could do with some improvement. Calling *gotoAndStop( 5 )* on a five-frame movie clip will actually attempt to go to frame #0 with the code I’ve written, so be sure to change that if you want to use this in a real project. Also, *nextFrame()* could just call *gotoAndStop( currentFrame + 1 )* to simplify things, and you might want to add *prevFrame()* and *gotoAndPlay()* functions. Plus, *gotoAndStop()* needs to be edited to handle frame labels and scenes. It’s a work in progress 😛

Hopefully you find the actual concepts clear, though 🙂 If you’ve any questions, please post them in the comments.

Tagged as: AS3, extends, oop, override, super