ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Detecting Key Combinations
http://www.actionscript.org/resources/articles/192/1/Detecting-Key-Combinations/Page1.html
David Avila
Computer Programmer, no language preference although Actionscript is on the top of my list. Love math and science, and love to play drums.  
By David Avila
Published on March 6, 2006
 
We will be going over how to use the KeyDetection class to detect and handle key combinations.

This article assumes you have a basic understanding of actionscript in general, and that you are using Flash MX 2004 or higher.

Detecting Key Combinations
Before beginning this tutorial we will need to take care of something.  This tutorial is based off of a class written by Michael Avila...  Please download and save the following file into your default Classpath.

Saved as, KeyDetection.as in your default classpath:

KeyDetection.zip

This tutorial is not focused on the code in this class, so at no point will we be explaining it.  Instead we will be explaining how to utilize this class in your current projects.  On with it...

A look at detecting key combinations

There are actually a few important things that we can't forget, which are...
  • We should be detecting key presses in a specific order
  • And our combo should be the only keys pressed
For instance if we are wanting to listen for a combination such as the UNDO combo, we would want to listen for CONTROL and then Z, not the other way around, and CONTROL + Z should be the only keys that are pressed.

Luckily our class takes care of this...

Let's take a look at a simple working example of our class in action.

[as]
var combo_kd:KeyDetection = new KeyDetection();
combo_kd.addCombination("shift_s", Key.SHIFT, 83);

var listener_obj:Object = new Object();
listener_obj.onKeyCombination = function(name:String)
{
    trace(name + " Combination executed!");
}

combo_kd.addListener(listener_obj);
[/as]
Note
It's very important for you to know that if you are testing this code in the Flash IDE and you are using the CONTROL key, your combinations will not work, this is because the IDE will overtake the key and your swf will never recieve word of what keys are hit after.  But if you test your code with the CONTROL key in a browser or standalone flash player, you'll see it works fine.
If you have this code and you test your movie, you'll notice that once you press the SHIFT, S combination it will trace with a message notifying you of what you've done.

A look at our example

Looking at our code you'll find that it's relatively simple, and rather intuitive.

Let's disect our code line by line.

[as]var combo_kd:KeyDetection = new KeyDetection()[/as]
    Here we are simply creating a new instance of the KeyDetection class.

 
[as]combo_kd.addCombination("shift_s", Key.SHIFT, 83);[/as]
    This is the line where we are telling the KeyDetection object to listen for a specific combination of keys.  This addCombination method works in a simple way.
  •      The first parameter is the name of your key combination, this value is always a string.  This name is how you will distinguish what combination has been pressed with your listener object.
  •       The other parameters are the keys that comprise this combination.  There is not a limit to how many keys can be used, but it's important to note that you must add these keys in the order that you wish them to be pressed for the combination to be seen and executed.
 
[as]var listener_obj:Object = new Object();[/as]
    Here we are creating a new generic object that will listen for events from the KeyDetection object.

 
[as]
listener_obj.onKeyCombination = function(name:String)
{
}
[/as]
    Our listener object will be recieving notifications of when key combinations have been pressed.  The way that this works is KeyDetection calls all listeners and tells them to execute their onKeyCombination methods, the KeyDetection object will supply the name.

 
[as]trace(name + " Combination executed!");[/as]
    This is the code that gets executed when a combination has been pressed. Here we are simply tracing to output the name of the combination that has been pressed.  This is where all of your code will go that handles a key combination.  If you are listening for more than one combination you will need some sort of logic that allows you to distinguish which combination has been pressed.  We will take a look at that approach a little later in the tutorial.

 
[as]combo_kd.addListener(listener_obj);[/as]
    Lastly we register our listener object to listen for events from our KeyDetection object.

    Our KeyDetection object will listen for combination presses, but it will not execute any function based off of what combination was pressed, instead it broadcasts to any object that is listening to it.  It notifies the listeners that a combination has been pressed, and supplies them with the name of the combination that was pressed.

 
Listening for multiple combinations

As I mentioned earlier it is very likely that you will not be listening for just one combination.  Most times you'll have a number of different combinations that do a number of different thiings.  This is the very reason I chose to allow you to name your combinations, and have the names passed to the listening object. For instance...

You saw in the previous example that we traced the name of the combination that was pressed.  We could easily use this name as an expression in a control structure, a perfect example would be a switch statement...

Let's add a another combination to listen... you should know how to do this by now, but if you don't here's what your code will look like...

[as]
var combo_kd:KeyDetection = new KeyDetection();
combo_kd.addCombination("shift_s", Key.SHIFT, 83);
//added combo
combo_kd.addCombination("shift_z", Key.SHIFT, 90);

... the rest of your code
[/as]

If you run and test this you will see that we will trace either "shift_s" or "shift_z" depending on the combination pressed, using a switch statement we can react correctly to what combination was pressed, let's modify our onKeyCombination() event, utilizing a switch statement.  Here's what your new onKeyCombination() method looks like.

[as]
listener_obj.onKeyCombination = function(name:String)
{
    switch (name)
    {
        case "shift_s":
              // This is where you would execute your code
             trace("Shift S Combination Pressed!");
             break;
         case "shift_z":
              // This is where you would execute your code
              trace("Shift Z Combination Pressed!");
              break;
      }
}
[/as]

Now that you are listening for events from the KeyDetection object and you are able to react to each each combination specifically you can do anything you want with this.  Your code will appear in each case statement just below the case "combo_name:" and before the break; for that case.  In our example our code was simply a trace statement but it could've been anything.

I hope you have an understanding of how to detect and handle Key Combinations, if you have any troubles understanding, please feel free to leave your questions in the comments, or ask around in the forums.

Take Care,
    _Michael

Finished Code Listing:

 
[as]
var combo_kd:KeyDetection = new KeyDetection();
combo_kd.addCombination("shift_s", Key.SHIFT, 83);
//added combo
combo_kd.addCombination("shift_z", Key.SHIFT, 90);


var listener_obj:Object = new Object();
listener_obj.onKeyCombination = function(name:String)
{
    switch (name)
    {
        case "shift_s":
             trace("Shift S Combination Pressed!");
             break;
         case "shift_z":
              trace("Shift Z Combination Pressed!");
              break;
      }
}
combo_kd.addListener(listener_obj);
[/as]