Creating a key catcher button

If your application must handle several different keypress events you could either create a single button for each keypress event, or use a single button to handle all keypress events. This type of button is commonly called a key catcher (or key listener) button. Because the key catcher button isn't supposed to be visible to the user, it usually sits off the Stage (in the work area).

The following procedures demonstrate how to use a key catcher button to handle keypress events in a simple application. The application lets the user move a circle around the Stage by pressing the four arrow keys on their device.

To create and use a key catcher button:

  1. Create a new document from the Flash Lite 1.1 Series 60 template, and save it as keycatcher.fla.

    For more information on creating documents from the Flash Lite templates, see Using Flash Lite document templates in Getting Started with Flash Lite 1.x.

  2. Select the layer in the Timeline named Content.
  3. Using the Oval tool, create a oval or circle on the Stage and convert it to a movie clip.
  4. With the new movie clip selected, in the Property inspector, type circle in the Instance Name text box.
  5. Using the Text tool, create a text field that contains the text key catcher, and convert it to a button symbol.
  6. Position the new button symbol in the work area around the Stage. To view the work area around the Stage, select View > Work Area.



  7. Select the key catcher button instance, and open the Actions panel (Window > Actions).
  8. Enter the following code in the Actions panel:
    on(keyPress "<Left>") {
        circle._x -= 10;
    }
    on(keyPress "<Right>") {
        circle._x += 10;
    }
    on(keyPress "<Up>") {
        circle._y -= 10;
    }
    on(keyPress "<Down>") {
        circle._y += 10;
    }
    
  9. Test the application by selecting Control > Test Movie.

    Press the four arrow keys on the keypad of the Adobe Device Central emulator to make the circle move around the Stage.

For another example of using a key catcher button, see Creating a simple menu using movie clips.


Flash CS3