MGAS3FD 5: Enter the frame

Welcome to the fifth part of Making Games in ActionScript 3 using FlashDevelop.

Wow, when I  got started on this whole tutorial thing I never expected it’d take four parts just to get to the enter-frame part. But here we are.

This post will be about making stuff move. But before that we’ll need a quick primer on Events. They is one of the mainstays of actionscript, especially version 3.

The basic concept is that an event can come from any place at any time and whoever listens gets notified. This is what drives Flash at it’s core, everything that is done is in response to an event.  There are events for alot of things and they’ll come back in pretty much every step from here on, so listen up.

To get things moving about we need to run some code each frame. The way to do this is to set up an even listener for the ENTER_FRAME event:

addEventListener(Event.ENTER_FRAME, handleEnterFrame);

If you type this out in the constructor for your Main class you will notice that FlashDevelop gives you a whole bunch of suggestions, these are all events you can listen for, but right now we want the ENTER_FRAME one.

The second parameter is the function that will handle this, you can name these whatever you please, but I find it good practice to prefix them with handle just to make it clear what they do.

Next we need to add this function we are refering to, if you want to you can place your cursor over the function name and press CTRL+1, this will invoke the contextual code generator that will create that little snippet for you. If not just type this code out below the constructor:

private function handleEnterFrame(e:Event):void {
	trace("enter the frame!");
}

Now run your code, if everything’s okay you should get a flood of enter the frame in your output window.

Now we can start making stuff move around, try adding to one of your enemies properties:

enemy.x = enemy.x + 1;

When doing things like this i normally use the shorthand for adding to a property, it does the exact same things, it’s just a little bit less long winded:

enemy.x += 1;

If you run the code now, you should have a moving gnome!

While this is very neat, it’s not very interactive. Let’s get my favourite input method involved.

Each DisplayObject (in this case your Main- and Enemy class) has a pair of properties called mouseX and mouseY, these are the relative position of the mouse pointer to their registration point:

enemy.x = mouseX;

Now it should be a walk in the park to get the gnome to rotate and follow the mouse pointer. For an added challenge try making him rotate around his nose instead of upper left corner.