Actionscript Key Listener Tutorial AS3

Google Buzz

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

  1. import KeyboardEvent,
    import flash.events.KeyboardEvent;
  2. assign any keycodes
    //keycodes
    var left:uint = 37;
    var up:uint = 38;
    var right:uint = 39;
    var down:uint = 40;
  3. add event listener KeyboardEvent.KEY_DOWN
    stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
  4. 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.

Get Adobe Flash player

Actionscript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import flash.events.KeyboardEvent;

//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

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
This entry was posted in tutorial and tagged , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

8 Comments

  1. Twanneman
    Posted 2 August 2008 at 4:45 am | Permalink
  2. Posted 2 August 2008 at 10:59 am | Permalink

    Thanks for pointing that out, Twanneman! My bad… link is fixed now. Enjoy

  3. DJC
    Posted 1 September 2008 at 7:36 pm | Permalink

    Seems the ALT key is intercepted by the OS or app (Flash, browser, etc) in many cases and thus does not generate an event.

  4. Darwin M
    Posted 29 October 2008 at 9:04 am | Permalink

    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.

  5. Posted 1 May 2009 at 2:58 pm | Permalink

    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.

  6. Posted 2 May 2009 at 12:02 pm | Permalink

    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!

  7. WORMSS
    Posted 27 August 2009 at 2:35 am | Permalink

    I was just wondering why you are storing left, right, up & down and not using Keyboard.LEFT, Keyboard.RIGHT, Keyboard.UP & Keyboard.DOWN?

  8. Nguyen Ho Thanh
    Posted 12 January 2010 at 3:58 pm | Permalink

    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.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>