| All the components in Flash 8 Basic automatically support the FocusManager class, which can be used for specifying a tabbing order for components, or to disable the capability to tab to a form object altogether. Tabbing is very useful for visitors who prefer to navigate forms by tabbing, and vital for visually impaired users who partially rely on tabbing through forms as their primary or only mode of navigation. The FocusManager class is all ActionScript, which means that you will have to write some of your own script to use it. Not to panic, it's really not so tough, once you get used to it. The script you write works in conjunction with a property of most user interface components called tabIndex. With this property, you specify numbers in the order you want the keyboard to jump to when a user hits the tab key. Note It is important to remember that there is no user interface control used to define the properties and methods of the Focus Manager, so you have to enter ActionScript in the Actions panel in order to set tab order or disable tabbing to items.
In this exercise, you will add tabbing to the bookstore12.fla file you created earlier. 1. | Open bookstore12.fla, which is located in the TechBookstore folder. Double-click mcFeedback to enter symbol-editing mode and select Frame 1 of the actions layer inside the movie clip.
Open the bookstore12.fla document saved in the TechBookstore folder and select Frame 1 of the actions layer after you have double-clicked mcFeedback and entered symbol-editing mode.
| 2. | Define the tabbing order using ActionScript.
The feedback form has four primary elements in it: the From email address, the Subject, the Message TextArea, and the Send button, which sends the feedback to the server. You will define the tabbing order of the text fields and button from top to bottom, so the tiEmail instance will have a tab index of 1, tiSubject will have a tab index of 2, taMessage will have a tab index of 3, and bSend will have a tab index of 4.
Maximize or open the Actions panel (F9). You will not use Script Assist for this exercise, so turn it off by pressing the Script Assist button. Add the following code in Frame 1 of the actions layer:
tiEmail.tabIndex = 1; tiSubject.tabIndex = 2; taMessage.tabIndex = 3; bSend.tabIndex = 4;
When you test the code in a browser later on, you must test the document in a web browser by pressing F12 on your keyboard.
Note You can't test the FocusManager quite yetuntil you add the scripts to enable the navigation in Lesson 10. You can however, copy and paste this ActionScript and your components into a new Flash document if you want to test this out now. When you press Tab a few times, the cursor will tab through each of the instances on the Stage. After the focus reaches the bSend Button component, if you press Tab again it sets the focus to the tiEmail instance because there are no items with a higher tab order than the bSend, so it returns to the first item in the tab index.
Tip Tabbed movie clips and button symbols display with a yellow box around the instance. Components display the halo color. Remember that the halo is the green (default color) glow around the components that you see when you mouse over them. Note To use tabbing, the SWF file must be viewed in a browser window. Tabbing does not work with movie clips or buttons in the testing environment or in a SWF file playing in a stand-alone Player. | 3. | Set a default form button using ActionScript.
You can also set a default button instance, which simulates being clicked if a user presses the Enter or Return key while filling out the form (unless you are within the TextArea component). Being able to press the Enter key is similar to a behavior in HTML when you are filling out forms. In the Actions panel, add the following line of code to the bottom of the existing ActionScript:
focusManager.defaultPushButton = bSend;
This snippet of code sets the default push button to bSend (which happens to be the only button in the document). If a user presses Enter while they are filling out a form, the click event handler will be triggered for the sent_btn button instance. Clicking the Send button will have no effect on the SWF file until some ActionScript is added to the FLA file in the next lesson.
| 4. | Set form focus on the tiEmail instance.
Imagine that you wanted to set the focus to a certain form instance when the Flash SWF loads into the Tech Bookstore. This is a little bit more user-friendly for your visitors because they won't have to reach for the mouse and click a form field before being able to type in their e-mail address.
Add the following line of ActionScript below the existing code into the Actions panel:
focusManager.setFocus(tiEmail);
This line of code sets the current focus to the tiEmail instance on the Stage. This method could also become extremely useful if you had form validation in the SWF file and wanted to set the form focus to a TextInput field that was left blank or wasn't a valid value. You could then send the user an alert and also set the focus for the empty text field that needs their attention.
| 5. | Clean up the Library.
You have added a lot of new symbols to the bookstore, so you should take a moment to open and re-organize the Library. Move all the components you added into the components folder. You will also have a graphic, movie clips, and sounds in there. Move the movie clips into the movie clip folder and the sounds into the media folder.
| 6. | Place the new movie clips on a new layer on the Stage. Give each of the movie clips instance names of mcFeedbackForm and mcQuestionForm.
Insert a new layer on the Timeline above map and rename the new layer feedback. Insert a new keyframe on the feedback layer below the feedback label (Frame 50) on the Timeline. Remove all the frames on the layer greater than Frame 60 by selecting them, Right-clicking (or Control-clicking) and choosing Remove Frames from the contextual menu.
Open the library, locate the mcFeedback and mcQuestions symbols, and drag them onto this new layer. Place the two symbols on the empty part of the Stage and align the two instances horizontally, similar to the following figure:
 Select the feedback form and enter mcFeedbackForm into the Property inspector for its instance name. Select the questionnaire and type in mcQuestionsForm into the Property inspector.
| 7. | Save the changes you have made to the document.
Choose File > Save to save all the changes you have made to the FLA file. In Lesson 10, you will work more with ActionScript to send information out of the forms and into an server.
|
|
