Flash MX - ComboBox Component

It's pretty safe to assume (unless you're a hermit) that you've seen one of these drop-down type boxes on one website or another.

If you've had one on your own site, you know these use a form element and a select statement to manipulate the data. Well, in Flash, you're going to learn how to do the same thing, with the same basic principles. When you're through with this tutorial, you should end up with one of these spiffy looking things:

Step 1

Right off the bat we're going to add our ComboBox to the stage. So from your Components window (if you don't see it, you can enable it from the Windows menu), drag and drop a ComboBox on to the stage. In the Properties Inspector, give your ComboBox an Instance Name. I chose dropdown.

Step 2

Now to apply the labels. The labels are what you see in a standard drop-down box on websites. It can be the name of the page or website that you're linking to, or anything else you want to call it. Double click the labels field in the Properties Inspector to bring up the Values box. Use the + button to add however many values you need. Remember that 0 (zero) is going to be your default display value. So if you want 2 links, you would add 3 values, and so on. Click each value, and label it with the text of your choice. Value 0 would be something like "More Links" or "Click here to visit other sites", etc. Then 1 through (#) would be the actual clicked "links" leading to other pages/sites. Once you're done with that, click OK.

Step 3

Now you're going to add the actual links that the above values will lead to. Double click the data field in the Properties Inspector to bring up the Values box. You need to add as many values here as you did in Step 2. Since Value 0 is the default display value, it won't link to anything so you'll want to make it a blank value. Then for 1 - (#), click each value and give it the respective link for each value from Step 2. Once you've done that, click OK.

Step 4

Now that you've got that done, how will Flash know how to handle the menu when it changes? This is where that last field in the Properties falls in to place, Change Handler. Click the Change handler field, and give it a name. I chose handler. This will be the name of the function you're fixing to write that will be called to handle all the changes of the drop-down menu.

Step 5

Now we're going to get into some ActionScript. Create a new layer and name it Actions, and drag it above any other layers you might have. Right click the first frame of your Actions layer, and choose Actions from the menu to bring up the Actions window. For the benefit of teaching, I'm going to run through this in Normal Mode, so you'll know where each piece of code comes from. For the A.S. experts, you may prefer to write in Expert Mode. This can be toggled in the upper right corner of the Actions window:

In the left hand pane of the window, click the Actions book to expand it, then click User-Defined Functions to expand that as well. You will see an action called function. Double click it to apply the action. Now you need to name it. On the right hand side in the first field (Name), give it the same name you added in the Change Handler field back in Step 3. Now to add the next action for the function, which is getURL. This action is located in the Browser/Network book under the Actions book. Double click the action to apply it. Now on the right hand pane, you want to check the Expression box at the end of the URL field.

Now the menu needs to know what to do with the item selected. This requires a new action which was specifically designed for this component. In the left hand pane, click the Flash UI Components book to expand it. Then click FComboBox to expand it as well, then expand Methods. Lastly, find the getSelectedItem action. Double click it to apply it to the getURL part of the function (make sure getURL is highlighted in the right hand pane).

The dot in front of getSelectedItem indicates that the function is looking for a specific target to get the item from. In the URL field at the top of the right pane, click in front of .getSelectedItem(). Here you will apply the Instance Name you gave your ComboBox early on in this tutorial. I chose dropdown for mine earlier, but use whatever name you chose. Type that in so that it now looks like instance_name.getSelecteditem(). If you know the name you can just type it in, or you can click the Target button (the one that looks like a crosshair), to bring up the target window to find your target path. Select it from there and hit OK.

Step 6

There's one last thing that you need to do. The function needs to know which piece of information to get from the menu, the label or the data. You need the data value, or the actual web page or website address. Click inside the URL field behind the text that's already there, and type .data. You should end up with a final result of instance_name.getSelectedItem().data. (Note: If you want the links to open in a new browser window, choose _blank from the Window drop-down menu.) Your final code should look like this:

function handler() {
   getURL(instance_name.getSelectedItem().data);
}

That should do it! You can resize the ComboBox on the stage to the size you want it. Then test your movie!