• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Keyboard Detection

The keyboard is just as important an interface device as the mouse, and Flash lets you detect events occurring from single key presses. This arrangement opens the possibility of having navigation based on the keyboard (using the arrow keys or the number keys, for example) or having keyboard shortcuts that duplicate mouse-based navigation schemes. Flash even lets you control live text the viewer types in empty text fields in a movie; these text fields merit a separate discussion in Chapter 10. This section focuses on single or combination keystrokes that trigger things to happen using the keyPress event and the Key class.

Key presses using buttons

The keyPress event is an option for the on event handler (Figure 4.63). The keyPress event happens when a single key on the keyboard is pressed. To use the keyPress event, you need to create a button symbol and place an instance of that button on the Stage. The button instance acts as a container for the event and associated actions, so you should make the button invisible or place the instance just off the Stage so that you can’t see it in the final exported .swf file. The keyPress event is unusual in that it does not have a parallel event for an anonymous function. You must assign the keyPress event to the instance of a button.

Figure 4.63. The code hint pull-down menu lists the keyPress events.


To detect a key press with a button:

1.
Create an invisible-button symbol, as described earlier in this chapter.

2.
Place an instance of the button on or just off the Stage (Figure 4.64).

Figure 4.64. Placement of the button instance for a keyPress event, just off the Stage.


3.
Select the instance, and open the Actions panel.

4.
In the Script pane, enter on and the opening parenthesis. The code hint pull-down menu appears.

5.
Select a specific keypress event from the pull-down menu.

6.
Complete the event handler, and choose an action as a response to the keyPress event (Figure 4.65).

Figure 4.65. The keyPress key is set to the left arrow and the response is to advance to the next frame.


7.
From the Control menu, choose Test Movie to see how the keyPress event responds (Figure 4.66).

Figure 4.66. This movie has four successive images on the Stage. The on(keyPress "<right>") event handler with the response set to nextFrame allows you to advance to the next image simply by pressing the right arrow key.


To detect multiple key presses with a button:

1.
Select the button instance that contains the first keyPress event.

2.
Open the Actions panel.

3.
On a new line of the Script pane, enter another on and an opening parenthesis.

4.
From the code hint pull-down menu, select a different keyPress event.

5.
Complete the event handler and choose a different action as the response to the second key press (Figure 4.67).

Figure 4.67. Another keyPress event requires two separate on action statements. Here, the left and the right keys invoke two different responses.


Although multiple keystrokes can be handled with one button instance, each one requires a separate on statement.

To combine a keyPress event with another button event:

1.
Create a button symbol that has its Up, Over, Down, and Hit states defined.

2.
Place an instance of the button on the Stage.

3.
Select the instance, and open the Actions panel.

4.
Assign a keyPress event handler as described in the previous task and choose an action as the response to the event. For example, assign the following code:

  on (keyPress "<right>") {
    nextFrame();
  }

5.
Place your pointer directly after the keyPress event and before the closing parenthesis.

6.
Enter a comma.

The code hint pull-down menu appears (Figure 4.68).

Figure 4.68. Additional events can be added by inserting a comma.


7.
Choose another event.

8.
Test your movie (Figure 4.69).

Figure 4.69. The right arrow button is assigned two events: an on(release) event and an on(keyPress "<right>") event. Either event will advance the movie to the next frame.


Either clicking the button on the Stage or pressing the key on the keyboard will make your movie perform the action you selected.

✓ Tips

  • When your Flash movie plays inside a browser, you must click the movie before any keyPress events can be detected because the window needs focus.

  • The Esc and function keys are not valid keystrokes.

  • The keyPress event does not recognize combination keystrokes, such as Option-A and Alt-A. Flash does distinguish between uppercase and lowercase letters, however.


The Key class

The Key class handles the detection of key presses on the keyboard (Figure 4.70). In Chapter 3, you learned that you must instantiate a class before you can use it. The Key class, however, is one of a few classes that don’t require a constructor function to create an instance before you can use it. To call one of its methods, you use the class name itself (Key).

Figure 4.70. The Key class is under Built-in Classes > Movie.


The Key class has methods that allow you to retrieve the key that was pressed last or to test whether a certain key was pressed. The most common method is isDown(), whose parameter is a specific key on the keyboard. This method checks whether that key has been pressed; if so, it returns a value of true.

All keys in Flash have a specific number associated with them; this number is known as the key-code value (see Appendix B). You use these codes in conjunction with the isDown() method to construct a conditional statement that detects the keyboard interaction. Key.isDown(32) for example, returns true or false, depending on whether the spacebar (whose key-code value is 32) is pressed.

Fortunately, you don’t have to use clumsy numeric key codes all the time. The most common keys are conveniently assigned as properties of the Key class. These properties are constants that you can use in place of the key codes. The statement Key.isDown(32), for example, is the same as Key.isDown(Key.SPACE).

To detect a key press by using the Key class’s isDown method:

1.
Select the first keyframe in the Timeline, and open the Actions panel.

2.
Choose Statements > Conditions/ Loops > if.

The incomplete if statement appears in the Script pane, with the condition parameter missing (Figure 4.71).

Figure 4.71. The if statement has a condition that it tests. If that condition is true, the actions within the curly braces will be carried out.


3.
Choose Built-in Classes > Movie > Key > Methods > isDown.

The isDown() method appears as the condition parameter. The key-code parameter is required for this method (Figure 4.72).

Figure 4.72. The method isDown() expects a key-code value, as suggested by the code hint.


4.
Choose Built-in Classes > Movie > Key > Constants, and select a keyboard key from the list (Figure 4.73).

Figure 4.73. The property key.SPACE is in place as the key-code parameter for the method isDown().


5.
Choose a basic action as the response for this conditional statement (Figure 4.74).

Figure 4.74. If the spacebar is pressed, Flash goes to Frame 10.


6.
Insert a new keyframe after the first one, and assign the frame action gotoAndPlay(1).

This second keyframe loops back to the first so that the conditional statement is checked continuously. This method is the simplest way to have the if statement tested (Figure 4.75).

Figure 4.75. This movie loops between Frames 1 and 2 until the spacebar is pressed.


We’ll explore more-refined ways of dealing with conditionals and action loops later in this chapter. For now, you can use this basic loop to test the isDown() method and different Key class properties.

To create key combinations with the Key class isDown method:

1.
Select the first keyframe from the preceding task, and open the Actions panel.

2.
Place your pointer directly after the condition parameter of the if statement.

3.
Select Operators > Logical Operators > && or simply enter two ampersands (&&) manually.

The logical operator && joins two statements so that both must be true for the entire statement to be true. You can think of the operator as being the word and.

4.
Select Built-in Classes > Movie > Key > Methods > isDown.

The isDown() method appears after the && operator. Another parameter is required for this method

5.
Select Built-in Classes > Movie > Key > Constants > CONTROL.

The property key.CONTROL appears as the parameter for the second isDown() method (Figure 4.76). The if statement will perform the action within its curly braces only if both the spacebar and the Ctrl key are pressed together.

Figure 4.76. The operator && connects two statements.


Creating listeners for key events

In the preceding section, you had to create a two-frame loop on the main Timeline to test the isDown() method. A way to eliminate that loop and detect events of the Key class is to create a listener. A listener is an object that you create from the generic Object class. You can create an object called myListener with the statement myListener = new Object(). Then you use anonymous functions to assign a key event to your listener. If you want your listener to listen for the onKeyDown event and respond by going to Frame 10, you create the following function:

myListener.onKeyDown = function(){
  gotoAndStop(10);
}

When your event is assigned to your listener, you must register your listener with the Key class. Do so by using the addListener() method of the Key class, as follows:

Key.addListener(myListener)

From that point on, whenever the key event occurs, your listener object is notified. The two events that your listener can detect are onKeyDown and onKeyUp. The onKeyDown event happens when a key on the keyboard is pressed. The onKeyUp event happens when a key is released.

Listeners are required for the events of the Key, Selection, TextField, and Stage classes. They are available for the Mouse class but are not required except for the onMouseWheel event.

The keyPress Event, the Key Class, and Listeners

Why would you use the Key class and a listener instead of a button with a keyPress event? It’s really a matter of sophistication versus ease of use and simplicity. Using a listener and the Key class to detect key presses is much more powerful than using a button instance because you can construct ActionScript code that’s more complex around the Key class. You can test for key combinations, for example, by requiring two isDown() methods to be true before performing certain actions as a response. Using key-code values also opens virtually the entire keyboard. The function keys and the Esc key have key-code values, so they are available to the Key class.

The keyPress event is much easier to use, however. If your Flash movie doesn’t require much in terms of keyboard interaction, or if you simply want to have a keyboard shortcut accompany a button event, use the on(keyPress) action.


To create a listener for a key event:

1.
Select the first frame of the main Timeline, and open the Actions panel.

2.
In the Script pane, enter a name for your listener object followed by an equals sign

3.
Select Built-in Classes > Core > Object > new Object.

The completed statement creates a new, named object (Figure 4.77).

Figure 4.77. The object called myListener will be your listener to detect events of the Key class. It is created from the Object class.


4.
On a new line, enter the name of the listener object that you created in the last step followed by a period.

5.
Select Built-in Classes > Movies > Key > Listeners > onKeyDown. Complete the handler by adding =function(){}.

Flash creates an anonymous function to respond to the onKeyDown event (Figure 4.78).

Figure 4.78. The onKeyDown event is assigned to your listener.


6.
With the pointer between the curly braces of the event handler, choose an action as the response to the onKeyDown event (Figure 4.79).

Figure 4.79. When the listener detects a key being pressed, Flash goes to Frame 5 and stops there.


7.
On the next line, choose Built-in Classes > Movie > Key > Methods > addListener.

The addListener method appears. It requires a listener object as its parameter to be complete.

8.
Enter the name of the listener object that you created.

Your listener is registered to the Key class and will now respond to the onKeyDown event (Figure 4.80).

Figure 4.80. The final step in using this listener is registering it to the Key class. The stop action in line 1 has been added here to keep the movie at Frame 1 until the key is pressed.


Combine a Key listener with the Key.isDown() method to make Flash respond only to certain key presses. First, your listener detects whether any key is pressed. Then you can use the if statement to test whether a certain key has been pressed.

To listen for a specific key press:

1.
Continuing with the preceding task, select the first frame of the Timeline, and open the Actions panel.

2.
Delete the gotoAndStop(5) action in the Script pane.

3.
On the same line, Choose Statements > Conditions/Loops > if.

The if statement appears within the onKeyDown event handler (Figure 4.81).

Figure 4.81. An if statement has been placed inside of the onKeyDown event handler.


4.
Select Built-in Classes > Movie > Key > Methods > isDown.

The isDown() method appears as the condition parameter of the if statement.

5.
Enter the key code for the specific key you want to detect, or select Built-in Classes > Movie > Key > Constants.

6.
Add back the gotoAndStop(5) action within the if statement.

The final script (Figure 4.82) creates and registers a listener to detect any key that is pressed with the onKeyDown event. The if statement within the event handler makes sure that there is a response only if a certain key is pressed.

Figure 4.82. The completed script. The stop action has been added at the top to keep the movie at Frame 1 until the right arrow key is pressed.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint