• 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 object.

Key presses using buttons

The keyPress event is an option in the Parameters pane of the on action (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 Parameters pane for the on action contains the Key Press checkbox.


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.
Choose Actions > Movie Control > on.

The on(release) event handler appears in the Script pane.

5.
In the Parameters pane, uncheck the Release checkbox and check the Key Press checkbox.

6.
Choose a specific keyboard character or symbol by typing it in the field next to the Key Press checkbox (Figure 4.65).

Figure 4.65. The Key Press field lets you enter a single character—in this case, the right arrow.


7.
Select an action that will be executed upon detection of the key press (Figure 4.66).

Figure 4.66. The goto action is selected, with the type set to Next Frame.


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

Figure 4.67. 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.
Add a separate on action (Figure 4.68).

Figure 4.68. A new on action is added after the ending curly brace of the first on action.


4.
In the Parameters pane of the second on action, change the event to Key Press, and select another key.

5.
Add a different action to be executed upon detection of the second key press (Figure 4.69).

Figure 4.69. Another keyPress event requires two separate on action statements.


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.
Choose Actions > Movie Control > on.

5.
In the Parameters pane for the on action, make sure that the Release checkbox is checked, and also check the Key Press checkbox.

6.
Select an action for the event handler.

7.
Test your movie (Figure 4.70).

Figure 4.70. 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 object

The Key object is an ActionScript class that handles the detection of key presses on the keyboard (Figure 4.71). In Chapter 3, you learned that you must instantiate a class before you can use it. The Key object, however, is one of a few objects 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 object name itself (Key).

Figure 4.71. The Actions toolbox in the Actions panel contains the actions that handle the Key object.


The Key object 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 object. 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 object’s isDown method:

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

2.
Choose Actions > Conditions/Loops > if.

The incomplete if statement appears in the Script pane, with an empty Condition field in the Parameters pane (Figure 4.72).

Figure 4.72. 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.
Put your pointer in the empty Condition field in the Parameters pane.

4.
Choose Objects > Movie > Key > Methods > isDown.

The isDown() method appears in the Condition field. The key-code parameter is required for this method (Figure 4.73).

Figure 4.73. The Condition field in the Parameters area of the if statement. The method isDown() expects a key-code value, as suggested by the code hint.


5.
Choose Objects > Movie > Key > Constants > SPACE.

The property Key.SPACE appears as the parameter for the isDown() method (Figure 4.74).

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


6.
Choose a basic action as the response for this conditional statement (Figure 4.75).

Figure 4.75. The Script pane shows the response if the spacebar is pressed.


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

Figure 4.76. 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-object properties.

To create key combinations with the Key object’s isDown method:

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

2.
Select the if statement.

The Parameters pane shows the condition, with the Key object’s method and property.

3.
In the Parameters area, click the Condition field and type a space; choose Operators > Logical Operators > &&; and type another space (Figure 4.77).

Figure 4.77. Add the operator && from the Actions toolbox or simply enter it in the Condition field after the first Key method.


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.
In the Condition field after the && operator, choose Objects > Movie > Key > Methods > isDown.

The isDown() method appears in the Condition field after the && operator. Another parameter is required for this method (Figure 4.78).

Figure 4.78. The second isDown() method follows the first, connected by the && operator.


5.
Choose Objects > Movie > Key > Constants > CONTROL (Figure 4.79).

Figure 4.79. Both the spacebar and the Ctrl key have to be pressed before this condition can be met.


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

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 object 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 object. Do so by using the addListener() method of the Key object, 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 objects. They are available for the Mouse object but not required.

To create a listener for a key event:

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

2.
Choose Actions > Variables > set variable.

3.
In the Variable field, enter a name for your listener object (Figure 4.80).

Figure 4.80. The object called myListener will be your listener to detect events of the Key object.


The keyPress Event, the Key Object, and Listeners

Why would you use the Key object 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 object to detect key presses is much more powerful than using a button instance, because you can construct more-complex ActionScript code around the Key object. You can test for key combinations, for example, by requiring two isDown() methods to be true before performing certain actions as a response. Using keycode 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 object.

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.


4.
Put your pointer in the Value field, choose Objects > Core > Object > new Object, and check the Expression checkbox.

The constructor function new Object() appears in the Value field (Figure 4.81). Flash instantiates a new generic object, using the name in the Variable field.

Figure 4.81. The object called myListener is created from the Object class.


5.
Choose Objects > Movie > Key > Listeners > onKeyDown.

6.
In the Object field, enter the name of your listener that you created in the preceding statement (Figure 4.82).

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


The onKeyDown event handler for your listener is created.

7.
Now choose an action as the response to the onKeyDown event (Figure 4.83).

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


8.
Select the closing curly brace of the function.

9.
Choose Objects > Movie > Key > Methods > addListener.

10.
As the parameter, enter the name of your listener (Figure 4.84).

Figure 4.84. The final step in using this listener is registering it to the Key object. The stop action has been added here to keep the movie at frame 1 until the event happens.


Your listener is registered and will now listen and respond to the onKeyDown event.

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.
Select the onKeyDown event handler in the Script pane.

4.
Choose Actions > Conditions/Loops > if.

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

Figure 4.85. Add an if statement within the onKeyDown event handler.


5.
Put your pointer in the Condition field, and choose Objects > Movie > Key > Methods > isDown.

The isDown() method appears in the Condition field of the if statement.

6.
Enter the key code for the specific key you want to detect, or choose a Key property from the category Objects > Movie > Key > Constants (Figure 4.86).

Figure 4.86. The if statement tests whether the right-arrow key is pressed.


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

The final script (Figure 4.87) 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.87. 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