Creating an application with the List

The following example describes how to add a List component to an application while authoring. In this example, the List consists of labels that identify car models and data fields that contain prices.

To add a simple List component to an application:

Create a new Flash file (ActionScript 3.0) document.

Drag a List component from the Components panel to the Stage.

In the Property inspector, do the following:

Enter the instance name aList.
Assign a value of 200 to the W (width).

Use the Text tool to create a text field below aList and give it an instance name of aTf.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.List;
import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;

// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}

This code uses the addItem() method to populate aList with three items, assigning each one a label value, which appears in the list, and a data value. When you select an item in the List, the event listener calls the showData() function, which displays the data value for the selected item.

Select Control > Test Movie to compile and run this application.

The following example also creates a List of car models and their prices. It uses a data provider to populate the List, however, rather than the addItem() method.

To populate a List instance with a data provider:

Create a new Flash file (ActionScript 3.0) document.

Drag a List component from the Components panel to the Stage.

In the Property inspector, do the following:

Enter the instance name aList.
Assign a value of 200 to the W (width).

Use the Text tool to create a text field below aList and give it an instance name of aTf.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.List;
import fl.data.DataProvider;
import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;

var cars:Array = [
{label:"1956 Chevy (Cherry Red)", data:35000},
{label:"1966 Mustang (Classic)", data:27000},
{label:"1976 Volvo (Xcllnt Cond)", data:17000},
];
aList.dataProvider = new DataProvider(cars);
aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}

Select Control > Test Movie to see the List with its items.

The following example creates a List of color names and when you select one, it applies the color to a MovieClip.

To use a List component to control a MovieClip instance:

Create a Flash file (ActionScript 3.0) document.

Drag the List component from the Components panel to the Stage and give it the following values in the Property inspector:

Enter aList for the instance name.
Enter 60 for the H value.
Enter 100 for the X value.
Enter 150 for the Y value.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

aList.addItem({label:"Blue", data:0x0000CC});
aList.addItem({label:"Green", data:0x00CC00});
aList.addItem({label:"Yellow", data:0xFFFF00});
aList.addItem({label:"Orange", data:0xFF6600});
aList.addItem({label:"Black", data:0x000000});

var aBox:MovieClip = new MovieClip();
addChild(aBox);

aList.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event) {
    drawBox(aBox, event.target.selectedItem.data);
};

function drawBox(box:MovieClip,color:uint):void {
            box.graphics.beginFill(color, 1.0);
            box.graphics.drawRect(225, 150, 100, 100);
            box.graphics.endFill();        
}

Select Control > Test Movie to run the application.

Click colors in the List to see them displayed in a MovieClip.

The following example uses ActionScript to create a simple list that it populates using the addItem() method.

To create a List component instance using ActionScript:

Create a new Flash file (ActionScript 3.0) document.

Drag the List component from the Components panel to the Library panel.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.List;

var aList:List = new List();
aList.addItem({label:"One", data:1});
aList.addItem({label:"Two", data:2});
aList.addItem({label:"Three", data:3});
aList.addItem({label:"Four", data:4});
aList.addItem({label:"Five", data:5});
aList.setSize(60, 40);
aList.move(200,200);
addChild(aList);
aList.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event):void {
    trace(event.target.selectedItem.data);
}

Select Control > Test Movie to run the application.

Flash CS3

Comments

No screen name said on Apr 7, 2008 at 11:01 PM :

How do I check what item I am on?
And depend on the item do an "action"?

MikeTheVike1 said on Jun 26, 2008 at 8:45 AM :

Can there be more than one "data:" field?

For example...

aList.addItem({label:"One", data:3500, data2: 2400, caption:"caption text"});

No screen name said on Jul 1, 2008 at 8:55 PM :

How can I use AS to control the selection of the listbox?

djtechwriter said on Jul 10, 2008 at 12:09 PM :

MikeTheVike1,

Not per item. I'm not sure I understand why you would want individual items to represent more than one piece of data. If someone selects that item, how would you know which piece of data they want? Each item in a list represents one piece of data, by design.

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00000447.html