- Listening for Events
- Mouse Detection
- The SimpleButton Class
- Invisible Buttons
- Animated Buttons and the Movie Clip Symbol
- Complex Buttons
- Button-tracking Options
- Changing Button Behavior
- Creating Buttons Dynamically
- Keyboard Detection
- The Contextual Menu
- Creating Continuous Actions
- A Summary of Events
This chapter is from the book
This chapter is from the book
This chapter is from the book
Changing Button Behavior
Because the buttons you create are objects of the SimpleButton class and objects of the larger class InteractiveObject, you can control their properties by using dot syntax. Many button properties control the way a button looks (such as its width, height, and rotation) as well as the way the button behaves (such as its button tracking). In Chapter 7, “Controlling and Displaying Graphics,” you will explore the ways to manipulate graphics, including buttons. Here, you will learn to change properties that affect a button’s behavior.
To disable a button:
Set the mouseEnabled property to code font.
If you name your button instance mybutton_btn, enter the following statement:
mybutton_btn.mouseEnabled = false;
Your button will no longer interact with the mouse pointer and will no longer display its Over or Down keyframes. In addition, mouse events won’t be captured on this button.
To remove an event listener:
Use the removeEventListener() method with its two parameters set identical to the ones used in the addEventListener() method.
If you name your button instance mybutton_btn, enter the following statement:
mybutton_btn.removeEventListener (MouseEvent.CLICK, myfunction);
Although your button will still interact with the mouse pointer, the listener will no longer detect a mouse click and call on the function called myfunction.
To disable the hand pointer:
Set the useHandCursor property to code font (Figure 4.43).
Figure 4.43 When the normal hand pointer (above) is disabled, only the arrow pointer will show up (below).
If you name your button instance mybutton_btn, enter the following statement:
mybutton_btn.useHandCursor = false;
)
Changing button focus with the Tab key
The button focus is a way of selecting a button with the Tab key. When a Flash movie plays within a browser, you can press the Tab key and navigate between buttons, text fields, and movie clips. The currently focused button displays its Over state with a yellow rectangular border (Figure 4.44). Pressing the Enter key (or Return key on the Mac) is equivalent to clicking the focused button. Several properties of the InteractiveObject class (of which the SimpleButton is a subclass)—focusRect, tabEnabled, and tabIndex—deal with controlling the button focus. The property focusRect determines whether the yellow rectangular border is visible. If focusRect is set to false, a focused button displays its Over state but doesn’t display the yellow rectangular highlight. The property tabEnabled, if set to false, disables a button’s capability to receive focus from the Tab key.
)
Figure 4.44 When you use the Tab key, buttons show their focus with a yellow rectangular border in their Over state.
The order in which a button, movie clip, or text field receives its focus is determined by its position on the Stage. Objects focus from left to right and then from top to bottom. So, if you have a row of buttons at the top of your movie and a column of buttons on the left side below it, the Tab key will focus each of the buttons in the top row first and then focus on each of the buttons in the column (Figure 4.45). After the last button receives the focus, the tab order begins again from the top row.
)
Figure 4.45 The automatic order of button focusing with the Tab key is by position. The numbers show the order in which the buttons will receive focus.
You can set your own tab order with the property tabIndex. Assign a number to the tabIndex for each button instance, and Flash will organize the tab order using the tabIndex in ascending order. Take control of the tab order to create more helpful forms, allowing the user to use the Tab and Enter keys to fill out multiple text fields and click multiple buttons.
To hide the yellow rectangular highlight over focused buttons:
-
Set the focusRect property to false.
If you name your button instance mybutton_btn, for example, use the statement mybutton_btn.focusRect = false;
To disable focusing with the Tab key:
-
Set the tabEnabled property to false.
If you name your button instance mybutton_btn, for example, use the statement mybutton_btn.tabEnabled = false;
To change the tab order of button focus:
- Give each button instance a name in the Property inspector.
- Select the first frame of the main Timeline, and open the Actions panel.
- In the Script pane, enter your first button’s instance name followed by a dot.
- Type tabIndex after the dot.
For the value, you must indicate where in the tab order this object should be when the user presses the Tab key. Enter an equals symbol (=) and then a value (Figure 4.46).
Figure 4.46 The button called male_btn will receive the first focus with the Tab key.
This button instance will be in the tab order in the specified index.
Repeat steps 3–5 for each of your button instances. Continue to assign numbers in sequence to the tabIndex property of each button instance (Figure 4.47).
Figure 4.47 This block of code assigns the tabIndex properties for 13 different buttons.
Choose File > Publish Preview > Default to view your movie in a browser.
When you press the Tab key, Flash follows the tabIndex in ascending order for button focusing (Figure 4.48).
Figure 4.48 Control the order of button focusing to provide easier tab navigation through forms and questionnaires. This movie focuses buttons in columns to follow the question numbers rather than relying on Flash’s automatic ordering.
)
)
)