Actionscript 3 Keyboard events

The Keyboard class is used to build an interface that can be controlled by a user with a standard keyboard. It might sound complicated at first, but once you understand what are you doing - it's as easy as creating buttons.

Flash doesn't know any of the keys on your keyboard by names, it can only recognize a key by its key code - a unique number that each cell has. Take a look at this little flash example (click on it first to focus, then you'll be able to interact):



The code is quite simple:

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
function downKey(event:KeyboardEvent){
 outp.text="You pressed key: " + event.keyCode.toString();
}

Using the "keyCode" method, we are able to tell if a person is press a specific key:

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
function downKey(event:KeyboardEvent){
 if(event.keyCode==65){outp.text="You pressed A"}
else{outp.text="You didn't press A"}
}

However, if we connect an action (like character movement) to a key, it might not work like you probably want it to work (use left and right arrow keys to move square in the example):

var mc:MovieClip = new MovieClip();
addChild(mc);
mc.graphics.beginFill(0xFF00CC);
mc.graphics.drawRect(0, 0, 50, 50);
mc.graphics.endFill();
mc.x = 150;
mc.y = 0;

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
function downKey(event:KeyboardEvent){
 if(event.keyCode==39){
 if(mc.x<350){mc.x+=4}}
 if(event.keyCode==37){
 if(mc.x>0){mc.x-=4}}
}

As you can see, when you hold down an arrow key, there's like a second delay. We can fix that by creating another variable:

var mc:MovieClip = new MovieClip();
addChild(mc);
mc.graphics.beginFill(0xFF00CC);
mc.graphics.drawRect(0, 0, 50, 50);
mc.graphics.endFill();
mc.x = 150;
mc.y = 0;
var movespeed=0

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
function downKey(event:KeyboardEvent){
 if(event.keyCode==39){
 movespeed=4}
 if(event.keyCode==37){
 movespeed=-4}
}
 
stage.addEventListener(Event.ENTER_FRAME, loop);
function loop(Event){
 mc.x+=movespeed
 if(mc.x>350){mc.x-=movespeed}
 if(mc.x<0){mc.x-=movespeed}
 }

Now we experience no delay, however once we hit an arrow key, the square keeps moving into that direction without stopping. To prevent that, we will need to add a KEY_UP listener, that turns the pressed key's variable back to false. We will also add a loop that checks if a key variable is true, and if it is - our movie clip moves. Lets apply the code to all 4 arrow keys and let our heroic square move in 8 directions:

var mc:MovieClip = new MovieClip();
addChild(mc);
mc.graphics.beginFill(0xFF00CC);
mc.graphics.drawRect(0, 0, 50, 50);
mc.graphics.endFill();
mc.x = 150;
mc.y = 150;

var isRight:Boolean=false
var isLeft:Boolean=false
var isUp:Boolean=false
var isDown:Boolean=false

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
function downKey(event:KeyboardEvent){
 if(event.keyCode==39){
 isRight=true}
 if(event.keyCode==37){
 isLeft=true}
 if(event.keyCode==38){
 isUp=true}
 if(event.keyCode==40){
 isDown=true}
}
 
stage.addEventListener(KeyboardEvent.KEY_UP, upKey);
function upKey(event:KeyboardEvent){
 if(event.keyCode==39){
 isRight=false}
 if(event.keyCode==37){
 isLeft=false}
 if(event.keyCode==38){
 isUp=false}
 if(event.keyCode==40){
 isDown=false}
}

stage.addEventListener(Event.ENTER_FRAME, loop);
function loop(Event){
 if(isRight==true && mc.x<350){mc.x+=4}
 if(isLeft==true && mc.x>0){mc.x-=4}
 if(isUp==true && mc.y>0){mc.y-=4}
 if(isDown==true && mc.y<350){mc.y+=4}
 }

We simply set 4 Booleans (true or false) and attach them to Key_down functions, Key_up functions, and a loop that keeps object moving if a boolean is true. Here is the result:

That's the basic object movement using keyboard. Thanks for reading!

Related:

Smooth character movement using AS3