TileList Component

TileList Component

Flash CS4 ActionScript 3.0 Tutorial


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



Flash ships with several Components. Components are pre-packaged elements that allow you to quickly add objects, 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 TileList 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, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

TileList Component with instance name tileList01_mc

Folder named External with three files, Image01.jpg, Image02.jpg and Image03.jpg. Each Image is 174 pixels (h) x 174 pixels (w)


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

The stage should be at the default setting of 550 pixels x 400 pixels.

Step Four

Save your .fla file (call it Main.fla) in a Project folder. Add a folder next to your Main.fla file and name it External.

Step Five

Place three images (174(h) x 174(w) @ 72ppi) in the External folder. Name the files Image01.jpg, Image02.jpg and Image03.jpg.

Step Six

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

Step Seven

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

Step Eight

Select the TileList, then open the Properties panel and change it's x and y settings to 15 and 15.

Step Nine

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

Step Ten

Change the columnCount value to 3 and the rowCount value to 1. Press Enter after inputting each value.

Step Eleven

Set both the columnWidth and rowHeight to 174. Press Enter after inputting each value.

Step Twelve

With the TileList still selected, open the Properties panel and assign it an instance name of tileList01_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.TileList;

import fl.data.DataProvider;

var externalImages:DataProvider=new DataProvider();

var tileList02_mc:TileList=new TileList();

externalImages.addItem({label:"Image01", source:"External/Image01.jpg"});

externalImages.addItem({label:"Image02", source:"External/Image02.jpg"});

externalImages.addItem({label:"Image03", source:"External/Image03.jpg"});







tileList02_mc.move(15, 206);


Step Fifteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). Two rows of images appear on the stage. A text description is also included with each image.

Dissecting the Code

The first line of the code at Step Fourteen imports the code necessary to talk to the TileList and DateProvider classes. Line three establishes a new DateProvider variable named externalImages. Line four establishes a new TileList variable named tileList02_mc. The TileList object will be added to the stage with ActionScript.

Lines five through seven specify the external images and the corresponding text for each image.

Lines eight and nine assign the DataProvider information to each of the TileList objects.

The next block of code sets the columWidth, rowCount, columnCount, rowCount and location for tileList02_mc.

The final line adds tileList02_mc to the stage.

More Component Options

In this example we showed how to change the TileList columnCount, rowCount, columnWidth and rowHeight. You can use this same method to change the other values shown in the Component Inspector.