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

Button Properties

Because the buttons you create are objects of the Button class, 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 a button behaves (such as its button tracking). Table 4.2 summarizes the properties of the Button class. Many of these properties are also properties of the Movie Clip class (see Chapter 7).

Table 4.2. Button Properties
PROPERTYVALUEDESCRIPTION
_alphaA number from 0 to 100Specifies the alpha transparency; 0 is transparent, and 100 is opaque.
_visibleTrue or falseSpecifies whether a button can be seen.
_nameA string-literal nameGets the instance name of the button or sets a new instance name.
_rotationA numberSpecifies the degree of rotation in a clockwise direction from the 12 o’clock position. A value of 45, for example, tips the button to the right.
_widthA number, in pixelsSpecifies the horizontal dimension.
_heightA number, in pixelsSpecifies the vertical dimension.
_xA number, in pixelsSpecifies the horizontal position of the button’s registration point.
_yA number, in pixelsSpecifies the vertical position of the button’s registration point.
_xscaleA numberSpecifies the percentage of the original button symbol’s horizontal dimension.
_yscaleA numberSpecifies the percentage of the original button symbol’s vertical dimension.
_targetA stringGets the target path of the button, using slash syntax.
useHandCursorTrue or falseDetermines whether the pointer changes to a hand icon when hovering over a button.
enabledTrue or falseDetermines whether the button can receive events.
menuA ContextMenu objectAssociates a button with a ContextMenu object.
trackAsMenuTrue or falseDetermines whether the button will track as a button or track as a menu item.
_focusRectTrue or falseDetermines whether a yellow rectangle appears around objects as you use the Tab key to select them.
tabEnabledTrue or falseDetermines whether the button can receive keyboard focus when you use the Tab key to select objects.
tabIndexA numberDetermines the order of focus when you use the Tab key to select objects. The tab order uses tabIndex in ascending order.


To change a property of a button:

1.
Create a button, and drag an instance of it to the Stage.

2.
In the Property Inspector, give the button an instance name.

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

4.
In the Script pane, enter the instance name of the button followed by a period.

If your instance name ends with _btn, the code hint pull-down menu appears.

5.
Select _alpha from the pull-down menu (Figure 4.40).

Figure 4.40. Use the code hint pull-down menu to select a property for your button called myButton_btn.


or

Choose Built-in Classes > Movie > Button > Properties > _alpha, and replace the placeholder instanceName with the name of your button instance.

6.
Enter an equals sign after _alpha and a value for the property (Figure 4.41).

Figure 4.41. The value 50 is assigned to the _alpha property of the button called myButton_btn.


The completed statement assigns a new value to the property of your button.

To disable a button:

  • Set the enabled property to false.

    If you name your button instance myButton_btn, enter the following statement:

    myButton_btn.enabled = false;

    Your button will no longer receive any events.

To disable the hand pointer:

  • Set the useHandCursor property to false (Figure 4.42).

    Figure 4.42. The hand pointer is disabled for the button called myButton_btn. Only the arrow pointer will show up.

    If you name your button instance myButton_btn, enter the following statement:

    myButton.useHandCursor = false;

Changing button focus with the Tab key

The last several properties listed in Table 4.2-_focusRect, tabEnabled, and tabIndex—deal with controlling the button focus. 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 boxes, and movie clips. The currently focused button displays its Over state with a yellow rectangular border (Figure 4.43). Pressing the Enter key (or Return key on the Mac) is equivalent to clicking the focused button. The button property _focusRect determines whether the yellow rectangular border is visible. If _focusRect is set to false, a focused button will display its Over state but will not display the yellow rectangular highlight. The property _tabEnabled, if set to false, will disable a button’s capability to receive focus from the Tab key.

Figure 4.43. 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 box 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 had a row of buttons at the top of your movie and a column of buttons on the left side below it, the Tab key would focus each of the buttons in the top row first and then focus on each of the buttons in the column (Figure 4.44). After the last button receives the focus, the tab order begins again from the top row.

Figure 4.44. 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 button 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 boxes 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 expression myButton_btn._focusRect = false.

✓ Tip

You can also hide the yellow rectangular highlight for all your buttons in one statement. Set the _focusRect property to false, and target the main Timeline by using the keyword _root. Use the expression _root._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 expression myButton_btn.tabEnabled = false.

To change the tab order of button focus:

1.
Give each button instance a name in the Property Inspector.

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

3.
Enter your first button instance name followed by a dot.

4.
Select tabIndex from the code hint pull-down menu (Figure 4.45).

Figure 4.45. Use the code hint pull-down menu to select the tabIndex property.


or

Choose Built-in Classes > Movie > Button > Properties > tabIndex and replace the placeholder instanceName with the name of your button instance.

5.
After tabIndex, you must declare where in the tab order this object will be when the user presses the Tab key. Enter the equals sign (=) followed by a numerical value (Figure 4.46).

Figure 4.46. The button called myButton1_btn will receive the first focus with the Tab key.


This button instance will be first in the tab order.

6.
Continue to assign numbers in sequence to the tabIndex property of your button instances (Figure 4.47).

Figure 4.47. This block of code declares the tabIndex properties for myButton1_btn through myButton6_btn.


7.
Choose Publish Preview > Default-(HTML) 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 rely on Flash’s automatic ordering.


✓ Tip

  • Some browsers intercept key presses, so you may have to click the Flash movie in your browser window before you can use the Tab key to focus on buttons.


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