| The ComboBox component lets you add a scrollable drop-down list to your Flash movie. Once you have added an instance of the ComboBox component, you can modify several values in the Property inspector to customize that instance and have the combo box contain the information you want to display. When you select a component instance, the Property inspector displays two tabsProperties and Parameters. The Parameters allow you to customize the contents of the component instancein the case of a ComboBox instance, the labels, data, and more. -
Select the instance of the ComboBox component on the stage, and look at the Property inspector.  Make sure the Parameters tab is selected in the Property inspector. You should see several settings, including the usual Width, Height, X, Y, and Instance Name . The extra settings are called parameters. The ComboBox component's parameters are Editable , Labels , Data , Row Count , and Change Handler . The parameters for a component are all specified in the component's Component Definition. You can see these parametersand modify them, if you're feeling braveby right-clicking (Windows) or Control-clicking (Macintosh) the component in the library and choosing Component Definition. The Component Definition dialog box opens, displaying the parameters and a few other settings.  Parameters are really just variables used in the ActionScript built into each component. If you look at the parameters in the Component Definition dialog box, you'll see that each one has a Name, Variable, Value, and Type setting. The Name is the label that appears in the Property inspector when the component is selected. The Variable is the name used in the ActionScript built into the component. The Value is the default value for the parameter, and the Type is the type of data required for the parameter. Types that can be used are Default, Array, Object, List, String, Number, Boolean, Font Name, and Color . Notice that many of these Types correspond with the data types a variable can holdthat's because each of the parameters is a variable. -
Select the Labels parameter in the Property inspector, and click the Edit button that appears on the far right. In the Values dialog box that opens, type the following values for the Labels setting: Which of the following is your favorite animal?, Cheetah, Elephant, Gorilla , Mara, Orangutan, Sea Lion, Yeti . When you select the Labels parameter, an Edit button should appear at the far right. Click the Edit button to open the Values dialog box.  The Labels parameter provides the labels that appear when the combo box is viewed in the exported movie. This parameter contains an array, so you can give it multiple values. Remember, an array is simply a list of variables.  You can add a value to the Values dialog box by clicking the Add (+) button. Then click the name and edit the new value. Notice when you add the first value, a 0 appears next to it. The 0 is that value's index for the array. If you need to remove a value, simply select it and click the Delete (-) button. You can also change the order of the values by clicking the Move Up and Move Down buttons . When you've finished adding values, click OK to close the Values dialog box. After you click OK, notice that the first value you entered in the Values dialog box appears in the ComboBox instance on the stage. If it doesn't appear, choose Control > Enable Live Preview. When that command is checked, the Flash UI components update automatically, so you can preview the components on the stage. You should also notice that the Property inspector displays the values you entered in the Values dialog box for the Labels parameter.  -
Double-click the Data parameter. In the Values dialog box, delete defaultValue , the first value (labeled 0). Add the following values: cheetah, elephant, gorilla, mara, orangutan, sea lion, yeti .  You can open the Values dialog box for the Data parameter the same way you opened it for the Labels parameter. Or you can double-click the default value at the right of the parameter's name. Both methods open the Values dialog box. When you add the first value, make sure to delete the default value ( defaultValue ) listed, or that value will be used for the first option in the combo box. The Data parameter, like the Labels parameter, contains an array and holds the values for the data array in the ActionScript that controls the ComboBox component. These values can be used in other parts of the movie, or they can be sent to the server, as you will do in Lesson 9. All the values in the Data and Labels parameters are strings. -
Set the Row Count to 5 .  You can set the row count by clicking the default value to the right of that parameter and then typing the number 5 in the text box that appears. Press Enter or Return after you type the value to make sure that it takes effect. The Row Count specifies the number of values shown in the combo box before a scroll bar appears. You have eight values in your combo box that you set in the Labels and Data parameters, so a scroll bar will appear. The scroll bar is an instance of the ScrollBar component that's automatically included with and controlled by the ComboBox component. -
Choose Control > Test Movie.  When you test the movie, click the combo box. You can use the scroll bar on the right side of the combo box to move through the options. Notice that each option is one of the values you listed in the Labels parameter. The ComboBox component has several built-in keyboard controls. The Up and Down Arrow keys move the selection up or down one line in the scroll list. The Page Up and Page Down keys move the selection up or down one page. The size of the page is set by the Row Count parameter, so a single page in this combo box will be five items. The Home key selects the first item in the list, and the End key selects the last item in the list. When you're finished testing the combo box, close the Test Movie window. -
Save the file as guestbook3.fla in the FlashTFS folder on your hard drive. You still have more UI components to customize. So save the file in the FlashTFS folder and keep it open for the next exercise. |
