• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 16. Using Components > Task: Use the ComboBox Component

Task: Use the ComboBox Component

In this task, you learn how to insert, modify, and use a Component that ships with Flash.

In a new file, open the Components panel by selecting Window, Components. It's possible to install sets of Components, so make sure that Flash UI Components appears in the drop-down list right under the Components panel title—as in Figure 16.1.

Figure 16.1. The Components panel displays all the Flash UI Components that ship with Flash.

Drag the ComboBox Component onto the Stage as if you were dragging an instance from the Library. With the instance on the Stage still selected, open the Properties panel and notice two tabs: Properties and Parameters as in Figure 16.2.

Figure 16.2. The Properties panel displays both Properties and Parameters when a Component instance is selected.

Before we populate the parameters, let's give this instance a unique name (for later). Type myComboBox into the Properties panel <Instance Name> field. Click the Parameters tab so that we can populate this Component uniquely. (For your information, the Properties tab will make the Properties panel appear as normal, and all the details in the Parameters tab are repeated in another panel called Component Parameters.)

In the Parameters section of the Properties panel, select the line Labels. Click the magnifier button at the right of this line (or anywhere to the right of Labels—see Figure 16.3).

Figure 16.3. Each named property (in the left column) can be populated with unique values (in the right column).

In the Values dialog box that appears, click the plus button and then replace the text “defaultValue” with “Macromedia”. This will be the first item to appear in the ComboBox. Repeat the process of clicking the plus button and create two more items—one for “Microsoft” and another for “Sams”. You can click any value you created and move it up or down in the list by pressing the arrow buttons. Click OK when you're finished.

At this point, you can test the movie, and you'll see the ComboBox function. This is a pretty sophisticated piece of code, and all you had to do was provide unique data. You can likely use this in future projects. The only problem is that nothing happens when the user selects an item. To make this ComboBox act like a jump-menu (where the user navigates to the selected Web site), we need to provide extra data (namely, the Web site addresses), and we need to link this Component to a function that handles changes.

To provide the Web site addresses, we can populate the Data parameter like you did with the Label parameter in step 5. Click the right side of the Data row and add three values—one for each item in the ComboBox. You may need to reorganize the values (with up and down arrow buttons), but in the end you'll want the Macromedia row number to read http://www.macromedia.com; Microsoft to read http://www.microsoft.com; and Sams to read http://www.samspublishing.com as shown in Figure 16.4. (Note, in the end you should have two parallel sets of values—three for the Labels parameter and three for the Data parameter.)

Figure 16.4. After populating the Data Parameter's values, each item in your ComboBox will have its associated Web addresses saved.

Finally, linking this Component to a function that handles changes to the ComboBox is simple. Just type jump into the value field adjacent to the Change Handler parameter. (Unlike the Labels and Data parameters, Change Handler accepts only a single value.)

We're not finished yet! Typing jump simply tells this component to invoke a function called jump any time the ComboBox changes. I just made up “jump.” Now we have to write the function. To do so, click the keyframe in frame 1 and open the Actions panel. Change the panel to Expert Mode (from the panel's Option menu). Type the following code verbatim:

function jump(){

That's the skeleton for a function. Click after the open curly brace ({) and press Enter. We're about to type inside the function. Click the Actions panel plus button and select Flash UI Components, FComboBox, Methods, getSelectedIndex. This method determines which line is currently selected. You should see the following code:

function jump(){
   <not set yet>.getSelectedIndex()

The part that reads <not set yet> must be replaced with the instance name for your ComboBox Component. Realize that you could have several instances, and if you expect Flash to tell you which item is selected, you have to specify which instance you're talking about. Anyway, replace <not yet set> with myComboBox—the instance name we gave this instance back in step 3. Finally, type theItem= to the left of myComboBox so that this line reads as follows:


After the line of code you just typed—but before the closing curly brace (})—insert the following line of code:


Then test the movie. Try selecting the different items in the ComboBox. The Output window should appear with 0,1,2 for the first, second, and third items. (Items start counting with 0—as you may have noticed when populating the parameters.) Anyway, we want to use the variable theItem to determine the Web address.

Back inside your jump function, make a new line after the trace statement and type the following:


getValue() is another built-in method for this Component that will tell you the value in any particular index (or “spot”) of the ComboBox. getValue() requires you to provide a number for a parameter, but we're just supplying the variable theItem that is calculated earlier. The entire line of code added translates to “Set the homemade variable theURL to the value in index theItem (which itself was calculated earlier).”

Finally, add one more line of code before the closing curly brace: getURL(theURL). This causes the Flash movie to jump to whatever value was found previously. You can remove the line with the trace statement and add a semicolon after each line (for style) so that the complete function looks like this:

function jump(){

Test it out. It should jump the user to another Web site when he makes a selection. (If yours appears to take the user to a Web site—but the wrong one—you may need to reorder the values in the Labels or Data parameters.)



Not a subscriber?

Start A Free Trial

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