Overview
Allowing users to use the keyboard as well as the mouse is a great way to incite interaction with your flash. This tutorial will show how to code it and what you can do with some keyboard events. This changed with actionscript 3, note this tutorial is AS3.
altKeY (Boolean) Indicates whether the Alt key is active (true) or inactive (false).
charCode (uint) Contains the character code value of the key pressed or released.
ctrlKey (Boolean) Indicates whether the Control key is active (true) or inactive (false).
keyCode (uint) The key code value of the key pressed or released. KeyboardEvent
keyLocation (uint) Indicates the location of the key on the keyboard. KeyboardEvent
shiftKey (Boolean) Indicates whether the Shift key modifier is active (true) or inactive (false).
Steps
- import KeyboardEvent,
import flash.events.KeyboardEvent;
- assign any keycodes
//keycodes var left:uint = 37; var up:uint = 38; var right:uint = 39; var down:uint = 40;
- add event listener KeyboardEvent.KEY_DOWN
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
- respond to keys
function keyDownListener(e:KeyboardEvent) { trace(e.keyCode.toString()); }or
function keyDownListener(e:KeyboardEvent) { if (e.keyCode==left){ ship.x-=10; ship.rotation = 90; } if (e.keyCode==up){ ship.y-=10; ship.rotation = 180; } if (e.keyCode==right){ ship.x+=10; ship.rotation = 270; } if (e.keyCode==down){ ship.y+=10; ship.rotation = 0; } }
Example
Here we have a swf with the keyboard event listener on the stage, and feedback boxes to give us all we can know about the event. It will tell us about certain keys (alt, ctrl (cmd), and shift) with a Boolean, it will tell us the keyCode and the charCode. The keyCode is the number that is tied to the actual button pressed or key, and the charCode relates to the character represented by the button(s) pressed. So hitting ‘s’ and then hitting ‘shift + s’ will tell you different charCodes, ‘s’ and ‘S’. but you’ll see that the s key has the same keyCode (you’ll also see the ‘shift’ keyCode as well). If needed you can use the String.fromCharCode function to determine what the charCode for something is. The location on the keyboard is even reported, this helps distinguish between the left shift and the right shift and even the numbers across the qwerty and the numpad on the right of the screen.
Actionscript
//keycodes
var left:uint = 37;
var up:uint = 38;
var right:uint = 39;
var down:uint = 40;
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
function keyDownListener(e:KeyboardEvent) {
feedbackAlt.text = e.altKey.toString();
feedbackCharCode.text = e.charCode.toString();
feedbackChar.text = String.fromCharCode(feedbackCharCode.text);
feedbackCtrl.text = e.ctrlKey.toString();
feedbackKey.text = e.keyCode.toString();
feedbackLoc.text = e.keyLocation.toString();
feedbackShift.text = e.shiftKey.toString();
if (e.keyCode == left){
ship.x-=10;
ship.rotation = 90;
}
if (e.keyCode == up){
ship.y-=10;
ship.rotation = 180;
}
if (e.keyCode == right){
ship.x+=10;
ship.rotation = 270;
}
if (e.keyCode == down){
ship.y+=10;
ship.rotation = 0;
}
}
Download
source file download: key-listener.fla
17 Comments
The source file download links to: http://circlecube.com/wp-content/uploads/2008/07/key-listener.flv I think It should be http://circlecube.com/wp-content/uploads/2008/07/key-listener.fla
Thanks for pointing that out, Twanneman! My bad… link is fixed now. Enjoy
Seems the ALT key is intercepted by the OS or app (Flash, browser, etc) in many cases and thus does not generate an event.
Hi Evans,
Great article! It seems like DJC is correct about Mac OS alt(option) key does not respond to the flashplayer. It works with firefox browser, but it does not work in Safari. Is there a way to fix that issue?
Thanks.
Nice post! Thanks for writing this up. Just a little suggestion though… might be more efficient to replace your multiple if() conditional statements with a switch-case statement inside keyDownListener. That way you will perform a minimum number of checks every time the listener is called.
True. I guess I just copied pasted the first if statement, should at least be else ifs, but a switch would be the best for the job. Thanks!
I was just wondering why you are storing left, right, up & down and not using Keyboard.LEFT, Keyboard.RIGHT, Keyboard.UP & Keyboard.DOWN?
I don’t understand that at all. I did exactly like what you’ve shown and it reports error like “1120: Acceess of undefined property “.
what should I put into the property of the movie clip.
In the demo on this webpage I have ‘Alt’ key ‘False’ with all keys except Alt + Ctrl
@Kirill – interesting, what browser + OS are you using?
Notice how when you hold an arrow the ship moves once, then there is a pause, then it begins moving quickly again… How do I remove the pause for smoothness?
Number two, How do you register two keypresses at once???
Any help would be excellent
Hey Gus,
Check out this discussion, the pause isn’t the “fault” of flash, but the OS. I’m guessing it was by design so if you’re typing and are slow to lift your finger on a key, you don’t end up having the character repeaaaated. There is a suggestion listed that may help that looks ok, but I haven’t tried it: http://board.flashkit.com/board/showthread.php?threadid=815876
Regarding having multiple keys pressed simultaneously, it seems to me that they work, but when it doesn’t (and I suspect this is what you’re after) is when you hold two keys down and are expecting them to both continue firing. Like moving left and up together to go diagonally. The above link may still help and it seems the reasoning is the same per the OS controlling the actual keyboard events of the UI apparatus.
Thanks anyway, but I found an AS3 package that re-creates the old AS2 Key.isDown functionality, but with AS3. Its at
If anyone is looking for it, (and my god its useful), find it here
com.senocular.utils.KeyObject.as
Your online version works perfectly. It gives different keycodes for the number pad versus the same character on the main keyboard. However, when I use the code and build my own .fla and then publish it, it the keycodes for the same character are identical on both the keypad and the main keyboard. How can I make the code work correctly like your online version does?
Are you sure you’re looking at the charCode vs the keyCode? If you hit the ’1′ key in the keyboard and the ’1′ key on the number pad you should get the same charCode but a different keyCode.
This is exactly what I’ve been looking for! Thank you…someone finally wrote it in a way that makes sense to me.
Nice to see a simple tutorial that actually works.