List Component

List Component

Flash CS4 ActionScript 3.0 Tutorial


How to Add Pre-Built List 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 List 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.

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, ComboBox Component, DataGrid Component, Label Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

List Component with instance name list01_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 List Component icon to a add a List to the center of the stage. The List and it's assets are also added to the Library.

Step Five

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

Step Six

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

Step Seven

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

Step Eight

Click the plus sign and add the word Apples in the label row under the heading Values.

Step Nine

Click the plus sign again and enter Oranges in the Value column / label row.

Step Ten

Click the plus sign again and enter Pears in the Value column / label row. Click OK to accept your changes.

Step Eleven

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

Step Twelve

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

Step Thirteen

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.List;

var list02_mc:List=new List();

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

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

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




Step Fourteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two lists appear on the stage.

Dissecting the Code

The first line of the code at Step Fourteen imports the code necessary to talk to the List class. Line two establishes a new List variable named list02_mc. This is the second list that we are adding to the stage with ActionScript. It's dataProvider values and location are set with the next five lines of code.

The final line adds the list02_mc to the stage.

More Component Options

In this example we showed how to change the List label. You can use this same method to change the other dataProvider values shown in the Component Inspector (i.e., allowMultipleSelection, enabled, horizonalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, verticalLineScrollSize, varticalPageScrollSize, verticalScrollPolicy and visible). You can also alter the size to accommodate more text by changing the width property (i.e., list02_mc.width=200;).

Creating a List of Buttons

Once you define your list, it is possible to make each item an active button. For instance, in this example if you copy/paste the following code at the end of the code provided at Step Fourteen, each of the items in the left list would become active. By clicking a name, that value displays in the Output window.

list01_mc.addEventListener (MouseEvent.CLICK, onClick01);

function onClick01 (e:MouseEvent):void{