Flash CS3 Documentation

Using ActionScript 3.0 Components > Using the UI Components > Using the ComboBox > Creating an application with the ComboBox

Creating an application with the ComboBox

The following procedure describes how to add a ComboBox component to an application while authoring. The ComboBox is editable and if you type Add into the text field, the example adds an item to the drop-down list.

To create an application with the ComboBox component:

1. Create a new Flash file (ActionScript 3.0) document.
2. Drag a ComboBox to the Stage and give it an instance name of aCb. On the Parameters tab, set the editable parameter to true.
3. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following code:

   import fl.data.DataProvider;
   import fl.events.ComponentEvent;
   
   var items:Array = [
   {label:"screen1", data:"screenData1"},
   {label:"screen2", data:"screenData2"},
   {label:"screen3", data:"screenData3"},
   {label:"screen4", data:"screenData4"},
   {label:"screen5", data:"screenData5"},
   ];
   aCb.dataProvider = new DataProvider(items);
    
   aCb.addEventListener(ComponentEvent.ENTER, onAddItem);
     
   function onAddItem(event:ComponentEvent):void {
       var newRow:int = 0;
       if (event.target.text == "Add") {
           newRow = event.target.length + 1;
            event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow}, 
               event.target.length); 
       }
   }
   

4. Select Control > Test Movie.

The following example creates a ComboBox with ActionScript and populates it with a list of universities in the San Francisco, California, area. It sets the ComboBox's width property to accommodate the width of the prompt text and sets the dropdownWidth property to be slightly wider to accommodate the longest university name.

The example creates the list of universities in an Array instance, using the label property to store the school names and the data property to store the URLs of each school's website. It assigns the Array to the ComboBox by setting its dataProvider property.

When a user selects a university from the list, it triggers an Event.CHANGE event and a call to the changeHandler() function, which loads the data property into a URL request to access the school's website.

Notice that the last line sets the ComboBox instance's selectedIndex property to -1 to redisplay the prompt when the list closes. Otherwise, the prompt would be replaced by the name of the school that was selected.

To create a ComboBox using ActionScript:

1. Create a new Flash file (ActionScript 3.0) document.
2. Drag the ComboBox component from the Components panel to the Library panel.
3. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

   import fl.controls.ComboBox;
   import fl.data.DataProvider;
   import flash.net.navigateToURL;
   
   var sfUniversities:Array = new Array(
          {label:"University of California, Berkeley", 
                   data:"http://www.berkeley.edu/"},
          {label:"University of San Francisco", 
                   data:"http://www.usfca.edu/"},
          {label:"San Francisco State University", 
                   data:"http://www.sfsu.edu/"},
          {label:"California State University, East Bay", 
                   data:"http://www.csuhayward.edu/"},
          {label:"Stanford University", data:"http://www.stanford.edu/"},
          {label:"University of Santa Clara", data:"http://www.scu.edu/"},
          {label:"San Jose State University", data:"http://www.sjsu.edu/"}
   );
   
   var aCb:ComboBox = new ComboBox();
   aCb.dropdownWidth = 210;
   aCb.width = 200; 
   aCb.move(150, 50);
   aCb.prompt = "San Francisco Area Universities";
   aCb.dataProvider = new DataProvider(sfUniversities);
   aCb.addEventListener(Event.CHANGE, changeHandler);
   
   addChild(aCb);
   
   function changeHandler(event:Event):void {
          var request:URLRequest = new URLRequest();
          request.url = ComboBox(event.target).selectedItem.data;
          navigateToURL(request);
          aCb.selectedIndex = -1;
   }
   

4. Select Control > Test Movie.

   You can implement and run this example in the Flash authoring environment but you will receive warning messages if you attempt to access the university web sites by clicking items in the ComboBox. To access the fully functional ComboBox on the Internet, access the the following location:

   http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html

Flash CS3