Flash CS3 Tutorial, Making Event Listeners

Key Strokes, make an object move
When working in Flash CS3 the key board is just as important as the mouse. However, many web sites over look keyboard intractability. If you want your site to stand out, use keyboard controls. If you test the code below you will see that whenever you press a key Flash CS3 tells you a key has been press. Thats great, but what if you want to know when a specific key is pressed. Well then you need to know the key codes. I have included a list of these codes in the appendix. Or you can download them at keyCodes

This sample of code will detect when a key is pressed then if that key was the space bar, it will output that you pressed the space bar.

function hearKey(yourEvent:KeyboardEvent):void{
	if (yourEvent.keyCode==32){ trace(“you pressed the space bar”); };
}; stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

Make an Object Move (Arrow Keys)
Ok, so are you ready to do something useful with keyboards events. Let us start with a basic element that any flash game needs, the ability to move an object around the stage.

In this Flash CS3 Tutorial I will teach you how to move a Movie Clip around the stage. In future Flash Tutorials, I will teach you how to detect if an object has hit another object but for now lets just work on getting control of an object. You will need the source files for this tutorial.

In this file you will find three layer. The actions layer which will as always contain the code or ActionScript you are going to use. The balloon layer which in this case has an instance of a hot air balloon name balloon_mc. and he last layer, background which contains a nice sky scene for the balloon to travel in. Some of he work has once again been done for you. The instance of the balloon is properly named balloon_mc. If you try this project on your own remember that all objects must be named in the properties panel for ActionScript to be able to use them. Please add the example code to the first key frame in the actions panel.

function hearKey(yourEvent:KeyboardEvent):void{
	if (yourEvent.keyCode==Keyboard.RIGHT){ trace(“ballon is moving“); };
}; stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

First we need to create a function to listen for the key strokes. Listeners need to be applied to an object, but this time the object is the stage. So, we will use stage.addEventListener. We have already covered this code so lets continue to the fun stuff. Please add the new code inside the function you just created, see example. If you test your movie at this point you will see the out panel say the balloon is moving when you press the right arrow key. We use the trace feature to test that the function and if statement is working properly.

Now, we need to actually make the balloon move. We are going to do this by telling balloon_mc to move 5 pixels to the right. In ActionScript 3.0 that looks like balloon_mx.x += 5. That means add 5 pixels to the current x position. Please remove the trace tag and add the code in the example. Press control-enter to test the movie. If your code is correct the balloon will move to the right when the right arrow key is pressed.

function hearKey(yourEvent:KeyboardEvent):void{
	if (yourEvent.keyCode==Keyboard.RIGHT){ balloon_mc.x+=5 };
}; stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

We are almost done, all that needs to be done is to add an if statement for the other three arrow keys. Remember that in Flash the stage is made up of x and y coordinates. To move an object you will either add or subtract from it current position. That means to go left you will subtract 5 not add. Look closely at the finished code and you will see how the math works. Look closely at the up and down keys, the math it opposite of what you would first think. That is because in Flash 0 is not the center it is the top left corner to Flash 10 is farther towards the bottom of the stage then 5. Therefore, adding makes the object go down.

function hearKey(yourEvent:KeyboardEvent):void{
	if (yourEvent.keyCode==Keyboard.RIGHT){ balloon_mc.x+=5 }; if (yourEvent.keyCode==Keyboard.LEFT){ balloon_mc.x-=5 }; if (yourEvent.keyCode==Keyboard.UP){ balloon_mc.y-=5 }; if (yourEvent.keyCode==Keyboard.DOWN){ balloon_mc.y+=5 };
}; stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

Press control-enter to see the finished movie.

Congratulations,
You now have a a Flash CS3 Movie with Interactive Arrow Keys.

Download Flash CS3 Source Files