Actionscript Key Class and Listener (AS 2.0)

I find myself using a crap load of key listeners when working with flash applications for things like form validation, restricting characters, and more. Here’s a quick tutorial and a reference list to get you started.

First, let’s setup a basic key listener. On frame 1 of your timeline, name a layer “code” and slap this crap in the actions panel:

keyListener = new Object();
keyListener.onKeyDown = function() {
    x = Key.getAscii();
    trace("You hit: " + x);
};
Key.addListener(keyListener);

When you run this (CTRL + ENTER on PC or APPLE+Enter on Mac) and then hit a buncha keys, you’ll get a trace that will probably look like :

You hit: j
You hit: k
You hit: l
You hit: ;etc...

It’s worth noting here that you could also listen for “onKeyUp” if you wanted to wait for the key to be released, or you could run something like the following if you want to listen for both (for whatever reason)

keyListener = new Object();
keyListener.onKeyDown = keyListener.onKeyDown = function() {
    x = Key.getAscii();
    trace(”You hit: ” + x);
};
Key.addListener(keyListener);

Now. That’s great, and you can probably see where it can go from here, but in case you can’t (or just need some inspiration), here’s a few ideas.

First of all, I always like to run a switch statement for finding which key got pressed, and running different functions for each key. Let’s say we had a ball_mc on the first frame (in a different layer from our “code” layer), and we want to just move it around. Here’s how we’d do it.

// set the number of pixels we want the ball to move each frame
var speed:Number = 10;

keylistener = new Object();
keylistener.onKeyDown = function() {
   switch (Key.getCode()) {
      case Key.RIGHT:
         ball_mc._x += speed;
      break;
      case Key.LEFT:
         ball_mc._x -= speed;
      break;
      case Key.UP:
         ball_mc._y -= speed;
      break;
      case Key.DOWN:
         ball_mc._y += speed;
      break;
   }
};
Key.addListener(keylistener);

If you haven’t already, paste this code in your “code” layer (replacing the old code completely), and throw a square on the screen, make it a movie clip, and name it’s Instance “ball_mc”. (why a square? ’cause we can, that’s why). Now run the code, and hit the arrow keys.

NOTE: If nothing happens first, you may need to click inside the movie once to “focus” the flash movie.

It’s worth noting here that I’ve now used two different methods of the Key listener class to check for the key. In the first set of code, I used “Key.getAscii()” which returns the ASCII code for the key (duh). In the second example, I used “Key.getCode()” which returns a simple, and easy to use name for the key. The reason there are two is simply because the Key.getAcsii() doesn’t have the full list of keys available to it (and the Key.getCode() does), and since it’s easier to read, I use it. For a complete list (as far as I can tell), refer to the end of this post. For now, let’s move on.

We’ll make one final modification to this code before I send you off to play with this and break it all to hell (’cause that’s the fun part). What if you wanted to add a Photoshop-like quality, and move the movieclip further if the Shift key was held down with the arrow key? I call this “power-nudge”. Here’s how.

// set the number of pixels we want the ball to move each frame
var speed:Number = 10;
var power:Number;
keylistener = new Object();
keylistener.onKeyDown = function() {
  if (Key.isDown(Key.SHIFT)) {
    power = speed * 10;
  } else {
    power = 0;
  }

 switch (Key.getCode()) {
  case Key.RIGHT:
    ball_mc._x += speed + power;
  break;
  case Key.LEFT:
    ball_mc._x -= speed + power;
  break;
  case Key.UP:
    ball_mc._y -= speed + power;
  break;
  case Key.DOWN:
    ball_mc._y += speed + power;
  break;
 }
};

Key.addListener(keylistener);

All we’ve done here is add a new variable (power:Number), and we check on key press if the Shift key is down, then we set the power to either 0 or speed*10. Finally, we simply always add speed + power to every action (which will be zero, and therefore not effect our equation if Shift is up).

G’head. Run it. Try nudging with the regular keys, then try it with Shift down. Enjoy!

Jimminy Cricket!
- M to the Eshach.

For a “complete” list, go to the Flash 8 Live Docs site here:
But for now, here’s a nice little table that can be found (with another great tutorial) at: flash-creations.com

Ascii()	String	Code
27	.(esc)	27
8	.(backspace)	8
0	(capslock)	20
0	(shift)	16
	(alt)	18
0	(ctrl)	17
13	(enter)	13
32	(space)	32
function keys
0	(F1)	112
0	(F2)	113
0	(F3)	114
0	(F4)	115
0	(F5)	116
0	(F6)	117
0	(F7)	118
0	(F8)	119
0	(F9)	120
0	(F10)	121
0	(F11)	122
0	(F12)	123
letters and other main keybd w/shift key on
126	~	192
33	!	49
64	@	50
35	#	51
36	$	52
37	%	53
94	^	54
38	&	55
42	*	56
40	(	57
41	)	48
95	_	189
43	+	187
124	|	220
81	Q	81
87	W	87
69	E	69
82	R	82
84	T	84
89	Y	89
85	U	85
73	I	73
79	O	79
80	P	80
123	{	219
125	}	221
65	A	65
83	S	83
68	D	68
70	F	70
71	G	71
72	H	72
74	J	74
75	K	75
76	L	76
58	:	186
34	“	222
90	Z	90
88	X	88
67	C	67
86	V	86
66	B	66
78	N	78
77	M	77
60	<	188
62	>	190
63	?	191
letters and other main keybd, no shift
96	`	192
49	1	49
50	2	50
51	3	51
52	4	52
53	5	53
54	6	54
55	7	55
56	8	56
57	9	57
48	0	48
45	-	189
61	=	187
92	\	220
113	q	81
119	w	87
101	e	69
114	r	82
116	t	84
121	y	89
117	u	85
105	i	73
111	o	79
112	p	80
91	[	219
93	]	221
97	a	65
115	s	83
100	d	68
102	f	70
103	g	71
104	h	72
106	j	74
107	k	75
108	l	76
59	;	186
39	‘	222
122	z	90
120	x	88
99	c	67
118	v	86
98	b	66
110	n	78
109	m	77
44	,	188
46	.	190
47	/	191
keypad keys w/numlock on
47	/	111
42	*	106
45	-	109
55	7	103
56	8	104
57	9	105
52	4	100
53	5	101
54	6	102
49	1	97
50	2	98
51	3	99
48	0	96
46	.	110
13		13
43	+	107
keypad keys w/numlock off
47	/	111
42	*	106
45	-	109
0	(Home)	36
0	(up arrow)	38
0	(PgUp)	33
0	(left arrow)	37
0		12
0	(right arrow)	39
0	(End)	35
0	(down arrow)	40
0	(PgDown)	34
0	(Ins)	45
127	(Del)	46
13	(Enter)	13
43	+	107
middlekeys
0	(ScrollLock)	145
0	(Pause)	19
0	(Ins)	45
0	(Home)	36
0	(PageUp)	33
127	(Delete)	46
0	(End)	35
0	(PageDown)	34
arrowkeys
0	(left)	37
0	(up)	38
0	(down)	40
0	(right)	3