ptg 434 Chapter 18 The ComboBox component creates a drop-down list of selectable options. They can be either static or editable. The static ComboBox component allows a user to make a single selection from a drop-down list. An editable ComboBox component lets users enter text into a text field located at the top of the list, as well as selecting an item from a drop-down list. A ComboBox component is composed of three subcom- ponents: Button, TextInput, and List components. When a visitor selects an item, the label of the selection is automatically copied to the text field at the top of the combo box. The ComboBox component is an excellent way to offer several choices to a user, without the necessity of them having to type in a response. For example, a ComboBox could be used to list all of the states in the union in a drop-down box, giving the user the chance to select his home state. When the ComboBox dis- plays in a Flash document, it appears as a single line; clicking the trian- gle to the right of the line expands the box and displays all the available options. Adding a Combo Text Box Add a ComboBox Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the ComboBox component onto the Stage, and then select the component. Open the Properties panel, and then click the Component Parameters arrow to expand it. Select from the following ComboBox parameters: ◆ data (2.0) or dataProvider (3.0). Click the Edit button, and then enter an array in the Values dialog box. Click the plus (+) sign to add values and the minus sign (-) to remove a value. Data values are used to populate the drop-down list. ◆ editable. When you select the check box, the field can be edited. If you select false, the field can be selected but not edited. 5 4 3 2 1 1 2 3 ComboBox component From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 435 ◆ labels (2.0). Click the Edit button, and then enter an array in the Values dialog box. Click the plus (+) sign to add values, and the minus sign (-) to remove a value. Data values are used as the selectable items in the list. ◆ rowCount. Click the Value field, and then enter a number to determine the maximum height of the drop-down list. ◆ enabled. When you select the check box, the items in the list can be selected. If you select false, the field appears grayed out and is not selectable. ◆ prompt (3.0). Click the Value field, and then enter a prompt message text. ◆ visible. When you select the check box, the field can be viewed. If you select false, the field is invisible. ◆ minHeight (2.0). Click the Value field, and then enter a minimum height for the ComboBox box. ◆ minWidth (2.0). Click the Value field, and then enter a minimum width for the ComboBox box. IMPORTANT If there is not enough room for the ComboBox to open without hitting the bottom of the document, it will open up instead of down. Click the Control menu, point to Test Movie, and then click Test. When you click the Select Your Country list arrow, the list will open, and a selection can be made by clicking on one of the available options. 6 6 Use to add, remove and order values Enter values 5 4 Click to add values From the Library of Wow! eBook ptg 436 Chapter 18 A check box is simply a square box that the user can select or dese- lect. When it is selected, a check mark appears in the box. When a selected check box is clicked, the check mark is removed. The state of a CheckBox component does not change until the mouse is released over the component. Adding a Check Box Add a CheckBox Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the CheckBox component onto the Stage, and then select the component. 3 2 1 1 2 3 CheckBox component Did You Know? You can control the state of a CheckBox component without the mouse. If the CheckBox component has focus (selected), pressing the Spacebar selects or deselects the check mark. From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 437 Open the Properties panel, and then click the Component Parameters arrow to expand it. Select from the following CheckBox parameters: ◆ enabled (3.0). When you select the check box, the items in the list can be selected. If you select false, the field appears grayed out and is not selectable. ◆ label. Click the Value field, and then enter a label for the check box. ◆ labelPlacement. Click the Value field, and then select between right, left, top, or bottom for the placement of the label text. ◆ selected. When you select the check box, the field appears with a checkmark, or deselect the check box, the field appears without a check mark. ◆ visible (3.0). When you select the check box, the field can be viewed. If you select false, the field is invisible. To change the wid th a nd h ei gh t of the check box component, select the component, and then drag a resize handle to change the width and height. Click the Control menu, point to Test Movie, and then click Test. Click in the CheckBox component to add a check mark, and then click a second time to remove the check mark. 7 6 5 4 7 5 4 From the Library of Wow! eBook ptg 438 Chapter 18 The RadioButton component lets you do something that the CheckBox component cannot do: force a user to make a single choice within a set of choices. The RadioButton component must be used in a group of at least two RadioButton instances, and only one member of the group can be selected at any given time. Selecting one radio button in a group will deselect the currently selected radio button in the group. For example, a radio button options for Gender can be Male, Female. There can be only one answer to that question, so you would group the two items using RadioButton components. Adding a Radio Button Add a RadioButton Component Open the Components panel. Click the User Interface arrow to expand the list. Drag one or more RadioButton components onto the Stage, and then select one at time. Open the Properties panel, and then click the Component Parameters arrow to expand it. 4 3 2 1 1 2 3 RadioButton component Did You Know? A visitor can control a radio button selection with the keyboard. Click the Tab key until one of the buttons within the group receives focus (is selected), and then use the left and right arrow keys to change the selection within the group. Having the ability to use the keyboard makes Flash components compliant with the current rules on accessibility as set by the U.S. Congress. From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 439 Select from the following RadioButton parameters: ◆ data (2.0) or value (3.0). Click the Value field, and then enter a value that will be used to populate the RadioButton. ◆ groupName. Click the Value field, and then enter a group name for the button. When you associate a group name to several RadioButton components, the visitor will only be able to select one button in the group. ◆ label. Click the Value field, and then enter a label for the RadioButton. ◆ labelPlacement. Click the Value field, and then select between right, left, top, or bottom for the placement of the label text. ◆ selected. When you select the check box, the field appears selected. If you deselect the check box, the field appears unselected. ◆ enabled (3.0). When you select the check box, the items in the list can be selected. If you deselect the check box, the field appears grayed out and is not selectable. ◆ visible (3.0). When you select the check box, the field can be viewed. If you deselect the check box, the field is invisible. Click the Control menu, point to Test Movie, and then click Test. Since the RadioButton components both use the same Group name, you can only select one button. 6 5 6 5 4 From the Library of Wow! eBook . Button Add a RadioButton Component Open the Components panel. Click the User Interface arrow to expand the list. Drag one or more RadioButton components onto the Stage, and then select one. button in the group. For example, a radio button options for Gender can be Male, Female. There can be only one answer to that question, so you would group the two items using RadioButton components. Adding. The RadioButton component must be used in a group of at least two RadioButton instances, and only one member of the group can be selected at any given time. Selecting one radio button in a group