Tuesday, July 6, 2010

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.

Update: I have created a library that lets you easily and quickly add all sorts of keyboard listeners, you might want to check it out.

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

4 comments:

Eric said...

Wow, thank you! I went through 100 as3 keyboard control tutorials that all had that annoying second of delay before my friend showed me this one. It works perfectly, you rock :D

Klauser said...

Nice simple step-by-step tutorial here. Saved me many hours trying to sort out the annoying pause at the start of a key press->hold.

Thanks

Anonymous said...

Thanks a lot for this great tutorial

Mottatta said...

Cool! Thanks Man :-)

Post a Comment