ComboBox Component

ComboBox Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built ComboBox Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a ComboBox Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library. When the ComboBox is added to your project, ComboBox, List and TextInput symbols are added to the Library.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

ComboBox Component with instance name comboBox01_mc

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the ComboBox Component icon to a add a ComboBox to the center of the stage. The ComboBox and it's assets are also added to the Library.

Step Five

With the ComboBox selected open the Properties panel and change it's x and y settings to 100 and 100.

Step Six

With the ComboBox still selected, open the Component Inspector (Window > Component Inspector).

Step Seven

Click the blank area in the Value column next to the word prompt and add the text Select Choice, then press Enter. The ComboBox prompt updates.

Step Eight

Double-click the blank area in the Value column next to the word dataProvider to open the data window.

Step Nine

Click the plus sign and enter Apples in the Value column in the label row.

Step Ten

Click the plus sign two more times and enter Oranges in the Value column in the next label row.

Step Eleven

Add the word Pears in the final label row, then click OK.

Step Twelve

With the ComboBox still selected, open the Properties panel and assign it an instance name of comboBox01_mc..

Step Thirteen

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Fourteen

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.ComboBox;

var comboBox02_mc:ComboBox=new ComboBox();

comboBox02_mc.prompt="Select Choice";

comboBox02_mc.addItem( { label: "Apples" } );

comboBox02_mc.addItem( { label: "Oranges" } );

comboBox02_mc.addItem( { label: "Pears" } );

comboBox02_mc.x=300;

comboBox02_mc.y=100;

addChild(comboBox02_mc);

comboBox01_mc.addEventListener(Event.CHANGE, onSelect01);

function onSelect01(e:Event):void {

trace(e.target.selectedItem.label);

}

comboBox02_mc.addEventListener(Event.CHANGE, onSelect02);

function onSelect02(e:Event):void {

trace(e.target.selectedItem.label);

}

Step Fifteen

Click the Auto Format button to format the code

Step Sixteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two pull-down menus appear on the stage. Whenever a menu item is selected, that value displays in the Output panel.

Dissecting the Code

The first line of the code at Step Fourteen imports the code necessary to talk to the ComboBox class. Line two establishes a new ComboBox variable named comboBox02_mc. This is the second combo box that we are adding to the stage with ActionScript. It's prompt, label values and location are set with the next six lines of code.

Line nine adds the comboBox02_mc to the stage.

Line ten adds an event listener to comboBox01_mc. Whenever a menu item is selected, the function onSelect01 is run. The function displays the selected value in the Output panel.

The final block of code repeats the process for the second Combo Box.

More Component Options

In this example we showed how to change the ComboBox prompt and label. You can use this same method to change the other ComboBox values shown in the Component Inspector (i.e., editable, enabled, restrict, rowCount and visible). You can also alter the size to accommodate more text by changing the width property (i.e., comboBox01_mc.width=200;).

 

Lynda.com career skills