Capturing keypresses

You can use the methods of the built-in Key class to detect the last key pressed by the user. The Key class does not require a constructor function; to use its methods, you simply call the methods on the class itself, as shown in the following example:

Key.getCode();

You can obtain either virtual key codes or ASCII (American Standard Code for Information Interchange) values of keypresses:

A virtual key code is assigned to every physical key on a keyboard. For example, the Left Arrow key has the virtual key code 37. By using a virtual key code, you ensure that your SWF file's controls are the same on every keyboard, regardless of language or platform.

ASCII values are assigned to the first 127 characters in every character set. ASCII values provide information about a character on the screen. For example, the letter "A" and the letter "a" have different ASCII values.

To decide which keys to use and determine their virtual key codes, use one of these approaches:

The key code of the desired key appears in the Output panel.

A common place to use Key class methods is within an event handler. In the following SWF file, you move the car using the arrow keys. The Key.isDown() method indicates whether the key being pressed is the right, left, up, or down arrow. The event handler, onEnterFrame, determines the Key.isDown(keyCode) value from the if statements. Depending on the value, the handler instructs Flash Player to update the position of the car and to display the direction.

The following procedure shows how to capture keypresses to move a movie clip up, down, left, or right on the Stage, depending on which corresponding arrow key (up, down, left, or right) is currently pressed. The movie clip is confined to an arbitrary area that is 400 pixels wide and 300 pixels high. Also, a text field displays the name of the pressed key.

To create a keyboard-activated movie clip:

  1. On the Stage, create a movie clip that will move in response to keyboard arrow activity.

    In this example, the movie clip instance name is car.

  2. On the Stage, create a dynamic text box that will be updated with the direction of the car. Using the Property inspector, give it an instance name of display_txt.

    Note: Don't confuse variable names with instance names. For more information, see About text field instance and variable names.

  3. Select Frame 1 in the Timeline; then select Window > Development Panels > Actions to open the Actions panel if it is not already visible.
  4. To set how far the car moves across the screen with each keypress, define a distance variable and set its initial value to 10.
    var distance = 10;
    
  5. To create the event handler for the car movie clip that checks which arrow key (left, right, up, or down) is currently pressed, add the following code to the Actions panel:
    car.onEnterFrame = function() {
      
    }
    
  6. Add a with statement to the body of the onEnterFrame handler, and specify car as the object of the with statement.

    Your code should look like this:

    var distance = 10;
    car.onEnterFrame = function() {
        with (car) {
        }
    }
    
  7. To check if the Right Arrow key is being pressed, and to move the car movie clip accordingly, add code to the body of the with statement. Your code should look like this:
    distance = 10;
    car.onEnterFrame = function() {
      with (car) {
        if (Key.isDown(Key.RIGHT)) {
          _x += distance;
          if (_x >= 400) {
            _x = 400;
          }
          _root.display_txt.text = "Right";
        }
      }
    }
    

    If the Right Arrow key is down, the car's _x property is increased by the amount specified by the distance variable. The next if statement tests if the value of the clip's _x property is greater than or equal to 400 (if(_x >=400)); if so, its position is fixed at 400. Also, the word Right should appear in the SWF file.

  8. Use similar code to check if the Left Arrow, Up Arrow, or Down Arrow key is being pressed. Your code should look like this:
    var distance = 10;
    car.onEnterFrame = function() {
      with (car) {
        if (Key.isDown(Key.RIGHT)) {
          _x += distance;
          if (_x >= 400) {
            _x = 400;
          }
          _root.display_txt.text = "Right";
        } else if (Key.isDown(Key.LEFT)) {
            _x -= distance;
            if (_x < 0) {
              _x = 0;
            }
            _root.display_txt.text = "Left";
        } else if (Key.isDown(Key.UP)) {
        _y -= distance;
          if (_y < 0) {
            _y =   0 ;
          }
        _root.display_txt.text = "Up";
        } else if (Key.isDown(Key.DOWN)) {
          _y += distance;
          if (_y > 300) {
            _y = 300;
          }
        _root.display_txt.text = "Down";
        }
      }
    }
    
  9. Select Control > Test Movie to test the file.

For more information about the methods of the Key class, see Key class.