Components are complex Movie Clips with parameters that you define during the authoring process. In this tutorial we will talk about ComboBox Component and with a simple sample we will see how to use this component in our Movie Clips.

Step 1: Create a new Flash movie with the ActionScript version set to 3.0. The background color, frame rate and the stage size do not matter for this tutorial.

Step 2: Create one new layer, so you will have two layers. Then name the one at the bottom ComboBox and the one on top Actions.

Step 3: Select the ComboBox layer and add a ComboBox component onto the stage.

You can add a component to your Stage in the following ways:
1. Open the Components panel by going to Window> Components or by pressing Ctrl+F7.
2. Add a component to the Stage by:
- Double-clicking: You can double-click a component and it will be added to the center of your Document window’s workspace.
- Dragging: You can add an instance by clicking the component icon and dragging it onto the Stage.

Step 4: The Component Inspector panel is the central control area for component parameters and bindings. You can find this panel by choosing Window> Component Inspector or by using the Shift+F7 shortcut. Double click on the dataProvider value and add a new value to the ComboBox. Add all the values you need in the ComboBox and then click ok.

Step 5: We need to set an Instance Name for our ComboBox so we can easily refer to it using ActionScript. Use the Select Tool (V) and select the ComboBox, access the Properties Inspector and set MyComboBox as the instance name of your ComboBox component.

Step 6: We will use a dynamic text box to show the selected item from the ComboBox. Use the Text Tool (T), create a dynamic text box. You should access Properties Inspector and select Dynamic Text from Text Type drop-down list.

Step 7: Now, we need to set an Instance Name for our dynamic text box. Use the Select Tool (V) and select the dynamic text box, access the Properties Inspector and set ComboText as the instance name of that text box.

Step 8: Click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open Actions panel.

Step 9: Copy and paste this code to your Actions panel. 

MyComboBox.addEventListener(Event.CHANGE, ShowSelectedItem);

function ShowSelectedItem(event:Event):void {
 ComboText.text=MyComboBox.selectedItem.label;
}

That’s it, We are done. You can now test your movie (Ctrl+Enter).

Downloads:

Flash CS3: ComboBox :: AS3

Flash CS4: ComboBox :: AS3

6 Responses to “CS4: ComboBox Component”

1. Balaji_Getfriday says:

   October 1, 2009 at 12:13 am

   Have you given any thoughts to Use Categories to Add Functionality to Classes? I’ve been hard pressed to find good resources, and judging from this article I’m guessing you may have something valuable to say. Thanks in advance!
2. admin says:

   October 1, 2009 at 5:14 pm

   Balaji_Getfriday, thanks for your comment and ok, sure, I’ll try to add some tutorials in this field as well.
3. Hernan says:

   November 10, 2009 at 10:47 pm

   Hello! I would like learn how add five combobox in the same template.
   Thanks!
4. Hernan says:

   November 10, 2009 at 11:02 pm

   Sorry! I have discovered how to do.-
   Thanks for all!
5. Jamyu says:

   November 12, 2009 at 9:58 am

   I must be missing something. In CS4, I can not cut and paste into the actions panel. I can only choose from an array of methods and objects. I added the event listener, but don’t know how to add the actual ShowSelectedItem function. How can I do this?
6. STUART says:

   July 21, 2010 at 4:33 pm

   
   

   MedicamentSpot.com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. No prescription drugs. Order drugs online…

   Buy:Female Cialis.Prozac.Cozaar.Wellbutrin SR.Lipothin.Benicar.Acomplia.SleepWell.Zocor.Aricept.Buspar.Female Pink Viagra.Lasix.Ventolin.Zetia.Amoxicillin.Advair.Nymphomax.Lipitor.Seroquel….