Learn how to use key codes in ActionScript 3.0 to detect when the user presses a specific key.
Final Result Preview
Let's take a look at the final result we will be working towards:
Test the responses by pressing the keys on your keyboard..
Step 1: Add Text Boxes
Open a new Flash document. Add static text boxes on the left which have the names of the keys you will detect and dynamic text boxes with the text "No" inside them.
Give your dynamic text boxes instance names with the following format: "keyname_txt". Mine are ctrl_txt, shift_txt, left_txt, up_txt, right_txt, down_txt and space_text respectively.
Step 2: Create Base Code
Go File 〉 New and select Actionscript File.
Now set up the base document class like so: (If you want to learn about document classes read Michael's Quick Tip)
1 |
|
2 |
package
|
3 |
{
|
4 |
import flash.display.MovieClip; |
5 |
|
6 |
public class KeyCodes extends MovieClip |
7 |
{
|
8 |
public function KeyCodes() |
9 |
{
|
10 |
|
11 |
}
|
12 |
}
|
13 |
}
|
Step 3: Create the Listener Events
To detect when the user presses a key with AS3 we need to add event listeners which listen for a user pressing and releasing keys. We can do this by adding the following piece of code inside our KeyCodes() constructor function:
1 |
|
2 |
public function KeyCodes() |
3 |
{
|
4 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed |
5 |
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released |
6 |
}
|
Before we proceed we need to add a line of code to import the KeyboardEvent. Add this line of code below where we import the MovieClip class on line 3:
1 |
|
2 |
package
|
3 |
{
|
4 |
import flash.display.MovieClip; |
5 |
import flash.events.KeyboardEvent; |
Step 4: Simple Test
Underneath our listeners add two functions which will be called when the user either presses or releases a key:
1 |
|
2 |
public function KeyCodes() |
3 |
{
|
4 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed |
5 |
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released |
6 |
|
7 |
function onKeyPress(e:KeyboardEvent):void { |
8 |
|
9 |
}
|
10 |
|
11 |
function onKeyRelease(e:KeyboardEvent):void { |
12 |
|
13 |
}
|
14 |
}
|
Now we can add a trace() to each function so when you press a key it will trace "key pressed" into the output panel and "key released" when the key is released. To do this we can add the following code into our functions:
1 |
|
2 |
public function KeyCodes() |
3 |
{
|
4 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed |
5 |
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released |
6 |
|
7 |
function onKeyPress(e:KeyboardEvent):void { |
8 |
trace("key pressed"); |
9 |
}
|
10 |
|
11 |
function onKeyRelease(e:KeyboardEvent):void { |
12 |
trace("key released"); |
13 |
}
|
14 |
}
|
Test your movie (Ctrl+Enter). When you press a key it should trace "key pressed" into your output panel and "key released" when you release it.
Step 5: Detect Keycodes
You can detect which key has been pressed by tracing the keycode. Change your trace from trace("key pressed") to trace(e.keyCode) and remove the key released trace. Your code should now look like this:
1 |
|
2 |
public function KeyCodes() |
3 |
{
|
4 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed |
5 |
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released |
6 |
|
7 |
function onKeyPress(e:KeyboardEvent):void { |
8 |
trace(e.keyCode); |
9 |
}
|
10 |
|
11 |
function onKeyRelease(e:KeyboardEvent):void { |
12 |
|
13 |
}
|
14 |
}
|
Now when you press a key it will trace out the code that relates to that specific key. If I press the left arrow it will trace 37 into the output panel and the spacebar will trace 32.
With this information literally at your fingertips you can execute different events for different keys, all with one event listener. Try adding this code to your function and see what happens when you press the spacebar:
1 |
|
2 |
function onKeyPress(e:KeyboardEvent):void { |
3 |
trace(e.keyCode); |
4 |
|
5 |
if(e.keyCode == 32) { //If the keycode is equal to 32 (spacebar) |
6 |
trace("spacebar pressed"); |
7 |
}
|
8 |
}
|
Now if you press the spacebar it will not only trace out 32, it will trace "spacebar pressed". You can use this to deal with many different keys separately within the one function.
Step 6: Change Text on Key Press
Go ahead and delete the trace inside the "if" statement. Replace it with this:
1 |
|
2 |
function onKeyPress(e:KeyboardEvent):void { |
3 |
trace(e.keyCode); |
4 |
|
5 |
if(e.keyCode == 32) { //If the keycode is equal to 32 (spacebar) |
6 |
space_txt.text = "Yes"; //Change the spacebar text box to "Yes" |
7 |
}
|
8 |
}
|
Now when you press the spacebar, you should see the spacebar label change from "No" to "Yes".
Do this for all of the keys except control and shift, as they have special ways of being detected.
1 |
|
2 |
function onKeyPress(e:KeyboardEvent):void { |
3 |
if(e.keyCode == 37){ //37 is keycode for left arrow |
4 |
left_txt.text = "Yes"; |
5 |
}
|
6 |
if(e.keyCode == 38){ //38 is keycode for up arrow |
7 |
up_txt.text = "Yes"; |
8 |
}
|
9 |
if(e.keyCode == 39){ //39 is keycode for right arrow |
10 |
right_txt.text = "Yes"; |
11 |
}
|
12 |
if(e.keyCode == 40){ //40 is keycode for down arrow |
13 |
down_txt.text = "Yes"; |
14 |
}
|
15 |
if(e.keyCode == 32){ //32 is keycode for spacebar |
16 |
space_txt.text = "Yes"; |
17 |
}
|
18 |
}
|
Step 7: Detect Control and Shift
How do we detect whether the control or shift buttons are pressed? Each one has an easy built-in variable which is automatically changed when the keys are pressed. You can detect them using the following code. Put this code below the other "if" statements in onKeyPress().
1 |
|
2 |
if(e.ctrlKey == true) { |
3 |
ctrl_txt.text = "Yes"; |
4 |
}
|
5 |
if(e.shiftKey == true) { |
6 |
shift_txt.text = "Yes"; |
7 |
}
|
Note: there is also altKey, which will detect whether the alt key is pressed. This will only work in Adobe AIR applications as pressing alt while focused in a Flash file will almost always take focus from the SWF and therefore not work.
Step 8: Write the Release Function
To create the release function all we need to do is copy the code inside the onKeyPress() function and just change a few things.
We need to change all the text to say "No" instead of "Yes" and check if ctrlKey and shiftKey are false not true. This is what the final code should look like:
1 |
|
2 |
package
|
3 |
{
|
4 |
import flash.display.MovieClip; |
5 |
import flash.events.KeyboardEvent; |
6 |
|
7 |
public class KeyCodes extends MovieClip |
8 |
{
|
9 |
public function KeyCodes() |
10 |
{
|
11 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed |
12 |
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released |
13 |
|
14 |
function onKeyPress(e:KeyboardEvent):void { |
15 |
if(e.keyCode == 37){ //37 is keycode for left arrow |
16 |
left_txt.text = "Yes"; |
17 |
}
|
18 |
if(e.keyCode == 38){ //38 is keycode for up arrow |
19 |
up_txt.text = "Yes"; |
20 |
}
|
21 |
if(e.keyCode == 39){ //39 is keycode for right arrow |
22 |
right_txt.text = "Yes"; |
23 |
}
|
24 |
if(e.keyCode == 40){ //40 is keycode for down arrow |
25 |
down_txt.text = "Yes"; |
26 |
}
|
27 |
if(e.keyCode == 32){ //32 is keycode for spacebar |
28 |
space_txt.text = "Yes"; |
29 |
}
|
30 |
if(e.ctrlKey == true) { |
31 |
ctrl_txt.text = "Yes"; |
32 |
}
|
33 |
if(e.shiftKey == true) { |
34 |
shift_txt.text = "Yes"; |
35 |
}
|
36 |
}
|
37 |
|
38 |
function onKeyRelease(e:KeyboardEvent):void { |
39 |
if(e.keyCode == 37){ //37 is keycode for left arrow |
40 |
left_txt.text = "No"; |
41 |
}
|
42 |
if(e.keyCode == 38){ //38 is keycode for up arrow |
43 |
up_txt.text = "No"; |
44 |
}
|
45 |
if(e.keyCode == 39){ //39 is keycode for right arrow |
46 |
right_txt.text = "No"; |
47 |
}
|
48 |
if(e.keyCode == 40){ //40 is keycode for down arrow |
49 |
down_txt.text = "No"; |
50 |
}
|
51 |
if(e.keyCode == 32){ //32 is keycode for spacebar |
52 |
space_txt.text = "No"; |
53 |
}
|
54 |
if(e.ctrlKey == false) { |
55 |
ctrl_txt.text = "No"; |
56 |
}
|
57 |
if(e.shiftKey == false) { |
58 |
shift_txt.text = "No"; |
59 |
}
|
60 |
}
|
61 |
}
|
62 |
}
|
63 |
}
|
Declare the functions inside the constructor means that they'll be garbage collected if the event listeners are removed. If you'd rather this didn't happen, you can declare them as methods, like so:
1 |
|
2 |
package
|
3 |
{
|
4 |
import flash.display.MovieClip; |
5 |
import flash.events.KeyboardEvent; |
6 |
|
7 |
public class KeyCodes extends MovieClip |
8 |
{
|
9 |
public function KeyCodes() |
10 |
{
|
11 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed |
12 |
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released |
13 |
}
|
14 |
|
15 |
public function onKeyPress(e:KeyboardEvent):void { |
16 |
if(e.keyCode == 37){ //37 is keycode for left arrow |
17 |
left_txt.text = "Yes"; |
18 |
}
|
19 |
if(e.keyCode == 38){ //38 is keycode for up arrow |
20 |
up_txt.text = "Yes"; |
21 |
}
|
22 |
if(e.keyCode == 39){ //39 is keycode for right arrow |
23 |
right_txt.text = "Yes"; |
24 |
}
|
25 |
if(e.keyCode == 40){ //40 is keycode for down arrow |
26 |
down_txt.text = "Yes"; |
27 |
}
|
28 |
if(e.keyCode == 32){ //32 is keycode for spacebar |
29 |
space_txt.text = "Yes"; |
30 |
}
|
31 |
if(e.ctrlKey == true) { |
32 |
ctrl_txt.text = "Yes"; |
33 |
}
|
34 |
if(e.shiftKey == true) { |
35 |
shift_txt.text = "Yes"; |
36 |
}
|
37 |
}
|
38 |
|
39 |
public function onKeyRelease(e:KeyboardEvent):void { |
40 |
if(e.keyCode == 37){ //37 is keycode for left arrow |
41 |
left_txt.text = "No"; |
42 |
}
|
43 |
if(e.keyCode == 38){ //38 is keycode for up arrow |
44 |
up_txt.text = "No"; |
45 |
}
|
46 |
if(e.keyCode == 39){ //39 is keycode for right arrow |
47 |
right_txt.text = "No"; |
48 |
}
|
49 |
if(e.keyCode == 40){ //40 is keycode for down arrow |
50 |
down_txt.text = "No"; |
51 |
}
|
52 |
if(e.keyCode == 32){ //32 is keycode for spacebar |
53 |
space_txt.text = "No"; |
54 |
}
|
55 |
if(e.ctrlKey == false) { |
56 |
ctrl_txt.text = "No"; |
57 |
}
|
58 |
if(e.shiftKey == false) { |
59 |
shift_txt.text = "No"; |
60 |
}
|
61 |
}
|
62 |
}
|
63 |
}
|
Conclusion
Test your movie and all should be well! If you have any comments or issues just post them in the comments section and I (or someone else) will answer your question.
Thanks for reading and I hope it helped you learn more about key presses in Flash.
By
