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.

Step Ten

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" } );

list02_mc.x=300;

list02_mc.y=100;

addChild(list02_mc);

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.