Web games, Flash and Actionscript.

Learning AS2 Classes Part 3

In the last 2 parts we covered simple classes using object and static methods. Today I’m going to go over class extensions.Extending classes is really useful when you want to make a bunch of classes that have independent functionality but also share a lot of common functions.

One of the most useful ways to use class extensions in game development is to extend the MovieClip class, and that’s just what we’re going to do now!

MovieClips are a built in class type, so you can add all sorts of custom functionality to them.

To start, open up a new Flash Movie and just make a circle about 100 pixels wide/tall.

Select the circle then press F8 to bring up the ‘convert to symbol’ panel. Call the symbol ‘ball’ and select ‘MovieClip’. Press the ‘Advanced’ button, then check ‘Export for ActionScript.

In the AS 2.0 class box, type ‘BouncingClip’ and hit OK.

If you test your movie now you will get an error: “The class or interface ‘BouncingClip’ could not be loaded.”

I guess we better create the class then.

Save your Flash Movie somewhere like C:\flash_tutorial\bouncing_ball.fla

Open up a new ActionScript File, and put the following code in:

class BouncingClip extends MovieClip {

var gravity:Number = 10;
var velocity:Number = 0;
var terminal_velocity:Number = 100;
var friction = 90;

function onEnterFrame()
{

this._y += this.velocity
if (this._y + (this._height/2) > Stage.height) {

this._y = Stage.height - (this._height/2);
this.velocity *= -(this.friction/100);

}

this.velocity += this.gravity;
if (this.velocity > this.terminal_velocity) {

this.velocity = this.terminal_velocity;

}

}

}

As you see in the first line, we are extending the MovieClip class. All of the properties of movieclip can be accessed by our new class, but for this example all we are using is _y. We can also override any of the built-in methods. In this case we are overriding onEnterFrame, the function that is called on every frame of a movieclip.

Looking at the code you have probably figured out that we are telling this movieclip to fall and bounce when it hits the bottom of the stage.

Save the file in the same folder as your FLA and call it BouncingClip.as (C:\flash_tutorial\BouncingClip.as in this example).

Now when you test your movie, your ball will bounce.

For shits and giggle, go ahead and drag some more balls from your library.. maybe scale them do different sizes…. put them at different heights on the stage… then test again.

All the balls just work with that one common class!

So now that you have extended the MovieClip Class, let’s kick things up a notch.

In your Flash Movie, make a new circle, preferable a different color. Select it and hit F8… do the whole instance name deal again… hit advanced… etc etc…

This time, make the ActionScript 2.0 class “FlyingClip”.

Save your file, then open a new ActionScript File.

In the AS file, put the following code:

class FlyingClip extends BouncingClip {

var propulsion:Number = 12;

function onEnterFrame()
{

if (Key.isDown(Key.SPACE)) {

this.velocity -= this.propulsion;

}

}

}

Now we are extending the BouncingClip class. This means FlyingClip will have the same properties (velocity, gravity etc..) as BouncingClip, and will have access to all the MovieClip properties as well.

In this class we are overriding the onEnterFrame function again. In this function we are having the ball’s velocity decrease when the space bar is pressed making it go up.

Test your movie… you will see the ball does go up when you press space, but that’s all it does. This is because we overwrote the onEnterFrame function. Fortunately, this doesn’t completely eliminate the onEnterFrame function from the BouncingClip class, we can still call that using ’super’.

If you update your code to look like:

class FlyingClip extends BouncingClip {

var propulsion:Number = 12;

function onEnterFrame()
{

if (Key.isDown(Key.SPACE)) {

this.velocity -= this.propulsion;

}
super.onEnterFrame();

}

}

Now we are telling the clip to run the onEnterFrame function from the super class (the class that this class is extending), BouncingClip.

Test your movie now, and the new ball will fly when you press space, and will fall and bounce when you let go.

As you can imagine, extending classes this way can be very useful for developing game sprites that share common functionality such as collision detection, hit points, etc…, while having the freedom to add custom AI and user input as needed.

So there is your primer on using AS2 classes. As you can see, they are very useful in expanding the functionality of Flash, keeping your work organized and avoiding redundant and bloated code in your timelines.

Here’s the sample files, Enjoy!

No comments yet. Be the first.

Leave a reply