AS3 Guide Keyboard Events

Sep 15th 2008
3 Comments
respond
trackback

What are Keyboard Events?

Well it's simple really keyboard events allow our applications to react to a key being hit on the keyboard. This can help increase the usability of your application and is especially handy if you are creating a game which requires direction with the arrow keys.

Show Navigation || Hide Navigation

Below we have a square on the stage that we've created in actionscript. We can move the square by using the up, down, left and right arrow keys.

Make sure you click on the square first.

Let's go through the code in the application

First we dynamically create a square, give it some properties and add it to the stage.

var square:Sprite = new Sprite();
addChild(square);
square.graphics.beginFill(0×222222);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;

stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyPressed);

function KeyPressed(evt:KeyboardEvent):void {
switch (evt.keyCode) {
case Keyboard.UP :
square.y -= 5;
break;
case Keyboard.DOWN :
square.y += 5;
break;
case Keyboard.LEFT :
square.x -= 5;
break;
case Keyboard.RIGHT :
square.x += 5;
break;
}
}

When using keyboard events make sure you add the event listener to the stage instead of the object. Inside the parameters we use tell the application what we are listening for. In this case we are listening for a KeyboardEvent and the KeyboardEvent we are listening for is a KEY_DOWN event. We give the event listener a unique name of our own in this case we've used KeyPressed, finally we close off the parameters and finish with a semi-colon.

stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyPressed);

Now we want our square on the stage to move up, down, left and right when we press the respective keys. We need to create a function for our KeyPressed event listener but inside our function we create a switch statement to determine what the function should do when a certain key is pressed. Inside our parameters we have the argument evt.KeyCode this gets the key code for the key that was pressed to trigger the event. A key code is a numeric value that identifies the key that was pressed. Inside each statement you'll notice we have Keyboard.UP, Keyboard.DOWN ect… This is to select what key we want to use for the application, we always type keyboard first to enter the keyboard class then we select the respective key. We then change the squares X and Y properties to move the square the direction we what it to move for that particular key strike.

stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyPressed);

Conclusion
So that's it pretty simple on the face of it. If you're not sure about switch statements you can visit our conditional chapter that explains how to use them.

This post is tagged AS3, events, Keyboard Events, switch

Jobs

3 Comments

Oct 21st, 2009

Trudy

hello!

first of thanks for the tutorials on this side. It is very good that someone explains the basics for once.

but I have a problem with this particular one.
in all the 4 lines f.e. square.x - =5;
my flash tells me that there is an indentifier missing. I really think I copied the code correctly - do you maybe know what is still wrong?
Do I maybe need to import something?

I´d be very thankfull if you'd find the time to answer.

many greetings
Trudy

Flash Essential