Macromedia Director MX for Windows and Macintosh. Visual QuickStart Guide

Keyboard navigation an alternative to the point-and-click style of user interfacemakes Director movies accessible to users with motor and visual impairments. If there are buttons on the Stage that the user would ordinarily click with the mouse, he or she has the option of using the Tab key to move from button to button, then pressing the Enter or Return key to "click" the currently selected button. (For blind users, keyboard navigation must be accompanied by an audible means of identifying each button. See "Adding Text-to-Speech Capability," later in this chapter.)

In order for keyboard navigation to work properly, all the available buttons must be on the screen at the same time, and the movie must be designed to pause or loop until the user has clicked a button that will make the movie continue ( Figure 20.1 ). (For instructions on designing this type of interaction, see "Scripting Navigation" in Chapter 15.) The buttons and other objects that the user may navigate at any given time constitute an accessibility group . A movie may contain any number of accessibility groups, each of which appears on the Stage at a different time ( Figure 20.2 ).

To implement keyboard navigation, you apply behaviors from the Library palette to the sprites you want to make accessible from the keyboard. If you're not familiar with using the behaviors in the Library palette, see Chapter 14, "Adding Behaviors."

While many of the tasks in this chapter may seem rather lengthy, don't be intimidated by the number of steps involved in adding accessibility features to your Director movie. You'll find that the steps described in each task are simple and straightforward.

To add keyboard navigation to a Director movie:

1. In an empty channel of the Score, select the frame where you want the keyboard navigation to begin.

   All of the buttons that will be accessible to the user should be visible on the Stage.

2. Click the Rectangle, Rounded Rectangle, or Ellipse tool on the Tool palette ( Figure 20.3 ).

   Figure 20.3. You'll need these tools from the Tool palette to set up keyboard navigation.

   You'll be using this tool to create a focus ring an outline that surrounds the currently selected button each time the user presses the Tab key ( Figure 20.4 ).

   Figure 20.4. A focus ring highlights a button to show that it's selected.

3. Select a line thickness from the Tool palette.

   For best results, choose the heaviest line ( Figure 20.5 ).

   Figure 20.5. The Tool palette offers very few options for line thickness; the heaviest line works best for a focus ring.

4. Select a color from the Foreground Color menu on the Tool palette.

   This will be the color of the focus ring.

5. Drag the mouse anywhere on the Stage to create a shape.

   The shape's size and proportions don't matterDirector will resize it on the fly when the movie is played so for convenience, you'll probably want to keep it relatively small.

6. Drag the shape off the Stage into the gray offstage area ( Figure 20.6 ).

   Figure 20.6. Drag the shape into the gray area that surrounds the Stage.

   Its exact position doesn't matter.

7. Click the Text tool on the Tool palette.

   You'll be creating an editable text sprite that will eventually intercept the user's keystrokes when he or she presses the Tab or Enter keys.

8. Drag the mouse anywhere on the Stage to create a text-entry box.

   Its size doesn't matter ( Figure 20.7 ).

   Figure 20.7. The size of the text box doesn't matter, but a smaller box is usually more convenient .

9. Without entering any text in the box, click outside its boundaries to take it out of editing mode.

10. Drag the newly created text sprite off the Stage into the gray offstage area ( Figure 20.8 ).

    Figure 20.8. Drag the text sprite into the offstage area.

    Its exact position doesn't matter.

11. With the text sprite still selected, click the Text tab in the Property Inspector.

12. Make the following selections in the Property Inspector ( Figure 20.9 ):

    Figure 20.9. The Text tab of the Property Inspector, showing appropriate settings for the text sprite.

    • From the Framing menu, choose Fixed.

    • Select the Editable check box.

    • Make sure the Tab check box is not selected.

13. Choose Window > Library Palette to open the Library palette.

14. Choose Accessibility from the Library List pop-up menu.

    The list of accessibility behaviors appears ( Figure 20.10 ).

    Figure 20.10. The accessibility behaviors in the Library palette let you add keyboard navigation, captioning, and text-to-speech capabilities to your movie.

15. Drag the Accessibility Target behavior from the Library palette to the Stage, and drop it on the shape you created in step 5.

    (For these purposes, the Stage includes the gray offstage area, where you dragged the shape.)

    A Parameters dialog box appears ( Figure 20.11 ).

    Figure 20.11. Parameters for the Accessibility Target behavior, which is used to create a focus ring.

16. In the "Name of this Accessibility Group?" field, type a group name ( Figure 20.12 ).

    Figure 20.12. Type an easily identifiable name for the accessibility group.

    This name will be used to identify the current set of buttons that can be accessed from the keyboard. (If you set up keyboard navigation for another set of buttons later in the movie, you'll need to give that group a different name.)

    Deselect the "Speech initially enabled?" check box if you want to disable the text-to-speech feature (it's enabled by default).

    If you disable text-to-speech, you can allow the user to enable it later by means of a button. See "To create an on/off switch for speech-to-text," later in this chapter.

17. Click OK to close the dialog box.

18. Drag the Accessibility Keyboard Controller behavior from the Library palette to the Stage, and drop it on the empty text sprite you created in steps 8 and 9.

    A Parameters dialog box appears ( Figure 20.13 ).

    Figure 20.13. Shown here are the parameters for the Accessibility Keyboard Controller behavior, which allows a user's keystrokes to be intercepted from the keyboard and used to navigate sprites on the Stage.

19. From the "Which Accessibility Group does this belong to?" pop-up menu, choose the group name that you entered in step 16. (In most cases, that will be the only name on the menu.)

20. Click OK to close the dialog box.

21. Drag the Accessibility Item behavior from the Library palette to the Stage, and drop it on one of the buttons that you want to make keyboard-accessible.

    A Parameters dialog box appears ( Figure 20.14 ).

    Figure 20.14. Parameters for the Accessibility Item behavior, which make a sprite navigable from the keyboard.

22. From the "Which Accessibility Group does this belong to?" pop-up menu, choose the group name that you entered in step 16. (In most cases, that will be the only name on the menu.)

    In compiling this menu, Director looks at the group names of all focus-ring spritesthat is, all sprites with the Accessibility Target behavior applied to themthat are currently on the Stage. (The "Stage," for this purpose, includes the offstage area.) Since there should be only one focus-ring sprite on the Stage at any given time, there will generally be only one group name on the menu.

    Type a command in the "Command to execute?" field if you want a Lingo command to be executed when the button is "clicked" (that is, when the user navigates to this button and presses the Enter key). Most often, this will be a simple go to command ( Figure 20.15 ),

    Figure 20.15. This Lingo command makes the playhead jump to frame 20 when this button is highlighted and the user presses the Enter key.

    For information on writing Lingo commands and handlers, see Chapter 15, "Scripting Lingo."

23. Click OK to close the dialog box.

24. Repeat steps 21 through 23 for each of the remaining buttons that you want to make keyboard-accessible.

25. Drag the Accessibility Group Order behavior from the Library palette to the Stage, and drop it on one of the buttons to which you've applied the Accessibility Item behavior.

    A Parameters dialog box appears ( Figure 20.16 ).

    Figure 20.16. Parameters for the Accessibility Group Order behavior, which determines the sequence in which sprites will be highlighted by pressing the Tab key.

26. From the "Which Accessibility Group does this belong to?" pop-up menu, choose the group name you entered in step 16. (In most cases, that will be the only name on the menu.)

27. In the "Tab order?" field, type a number corresponding to the order in which you want the buttons to be highlighted by the Tab key.

    For example, if this is the first button that you want to be highlighted, type 1; if this is the second button, type 2; and so on.

28. Click OK to close the dialog box.

29. Repeat steps 25 through 28 for each of the remaining buttons. Be sure that the buttons are numbered in consecutive order, and that no numbers are skipped or repeated.

30. Click on the Stage to make it the active window.

31. Test the movie.

    When the buttons appear on the Stage, the first button (the one you numbered "1" in step 27) is highlighted by the focus ring you created in step 5. When you press the Tab key, the focus ring moves to the next button ( Figure 20.17 )and so on, until it returns to the first button.

    Figure 20.17. Now that keyboard navigation has been added to this movie, pressing the Tab key makes the focus ring move from button to button.

Tips

• You can use the same cast member in more than one accessibility group, but you can't use the same sprite in more than one accessibility group. If you want to include a particular cast member in multiple accessibility groups, drag it anew to the Stage or Score each time you use it.

• As you'll see in the next section, keyboard navigation can be used with any kind of spritenot just buttons. The preceding steps will work with all kinds of sprites except editable text fields. To make editable text fields navigable from the keyboard, follow the same directions, but use the Accessibility Text Field Item behavior in steps 21 through 23 instead of the Accessibility Item behavior.