• 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 object. Many of the properties also control the Movie Clip object (see Chapter 7).

Button Properties
Property Value Description
_alpha A number from 0 to 100 Specifies the alpha transparency; 0 is transparent, and 100 is opaque.
_visible True or false Specifies whether a button can be seen.
_name A string-literal name Gets the instance name of the button or sets a new instance name.
_rotation A number Specifies 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.
_width A number, in pixels Specifies the horizontal dimension.
_height A number, in pixels Specifies the vertical dimension.
_x A number, in pixels Specifies the horizontal position of the button’s registration point.
_y A number, in pixels Specifies the vertical position of the button’s registration point.
_xscale A number Specifies the percentage of the original button symbol’s horizontal dimension.
_yscale A number Specifies the percentage of the original button symbol’s vertical dimension.
_target A string Gets the target path of the button, using slash syntax.
useHandCursor True or false Determines whether the pointer changes to a hand icon when hovering over a button.
enabled True or false Determines whether the button can receive events.
trackAsMenu True or false Determines whether the button will track as a button or track as a menu item.
_focusrect True or false Determines whether a yellow rectangle appears around objects as you use the Tab key to select objects.
tabEnabled True or false Determines whether the button can receive keyboard focus when you use the Tab key to select objects.
tabIndex A number Determines 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 a name.

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

4.
Choose Actions > Variables > set variable (Esc + sv).

A new line appears in the Script pane, with empty Variable and Value fields in the Parameters pane.

5.
In the Variable field, enter the name of your button instance.

6.
Choose a property by making a choice from the Properties list or by choosing Objects > Movie > Button > Properties. If you make a choice from the Properties list, be sure to add a dot to separate the property and the name of your button. The Variable field is complete (Figure 4.42).

Figure 4.42. The _alpha property of the button called myButton controls its transparency.


7.
In the Value field, enter a value for your property.

8.
Check the Expression checkbox for all properties except _name, which takes a string (Figure 4.43).

Figure 4.43. The value 50 is assigned to the _alpha property of the button called myButton.


The completed statement assigns a new value to the property of your button (Figure 4.44).

Figure 4.44. The completed statement appears in the Script pane.


Tip

  • You can also choose Actions > Miscellaneous Actions > evaluate to create a dot-syntax expression that assigns a value to a property of a button.


To disable a button:

  • Set the enabled property to false.

    If you name your button instance myButton, for example, choose Actions > Variables > set variable or Actions > Miscellaneous Actions > evaluate to create the expression myButton.enabled = false.

To disable the hand pointer:

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

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


    If you name your button instance myButton, for example, choose Actions > Variables > set variable or Actions > Miscellaneous Actions > evaluate to create the expression 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.46). 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.46. 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.47). After the last button is focused, the tab order begins again from the top row.

Figure 4.47. 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, for example, use the expression myButton._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, for example, use the expression myButton.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.
Choose Actions > Variables > set variable.

4.
In the Variable field, enter the name of the button instance you want to receive focus from the Tab key first.

5.
Choose Objects > Movie > Button > Properties > tabIndex.

6.
In the Value field, type the number 1, and check the Expression checkbox (Figure 4.48).

Figure 4.48. The button called myButton1 will receive the first focus with the Tab key.


This button instance will be first in the tab order.

7.
Again, choose Actions > Variables > set variable.

8.
In the Variable field, type the name of another button instance, and choose the tabIndex property.

9.
In the Value field, type the number 2, and check the Expression checkbox (Figure 4.49).

Figure 4.49. The button called myButton2 will receive the second focus with the Tab key.


10.
Continue to assign sequential numbers to the tabIndex property of your button instances.

11.
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.50).

Figure 4.50. 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