Advertisement
  1. Code
  2. ActionScript
Code

Quick Tip: Using AS3 Keycodes

by
Difficulty:BeginnerLength:MediumLanguages:

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)


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:

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:


Step 4: Simple Test

Underneath our listeners add two functions which will be called when the user either presses or releases a key:

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:

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:

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:

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:

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.


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().

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:

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:


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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.