Flash CS3 Documentation

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

Creating an application with the TileList

This example uses MovieClips to fill a TileList with an array of paint colors.

To create an application with the TileList component:

1. Create a new Flash file (ActionScript 3.0) document
2. Drag a TileList component to the Stage and give it an instance name of aTl.
3. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

   import fl.data.DataProvider;
   import flash.display.DisplayObject;
   
   var aBoxes:Array = new Array();
   var i:uint = 0;
   var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00);
   var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July");
   var dp:DataProvider = new DataProvider();
   for(i=0; i < colors.length; i++) {
       aBoxes[i] = new MovieClip();
       drawBox(aBoxes[i], colors[i]);    // draw box w next color in array
       dp.addItem( {label:colorNames[i], source:aBoxes[i]} );
   }
   aTl.dataProvider = dp;
   aTl.columnWidth = 110;
   aTl.rowHeight = 130;
   aTl.setSize(280,150);
   aTl.move(150, 150);
   aTl.setStyle("contentPadding", 5);
   
   function drawBox(box:MovieClip,color:uint):void {
               box.graphics.beginFill(color, 1.0);
               box.graphics.drawRect(0, 0, 100, 100);
               box.graphics.endFill();        
   }
   

4. Select Control > Test Movie to test the application.

This next example dynamically creates a TileList instance and adds instances of the ColorPicker, ComboBox, NumericStepper, and CheckBox components to it. It creates an Array that contains labels and the names of the component to display and assigns the Array (dp) to the TileList's dataProvider property. It uses the columnWidth and rowHeight properties and the setSize() method to lay out the TileList, the move() method to position it on the Stage, and the contentPadding style to put space between the TileList instance's borders and its content, and the sortItemsOn() method to sort the content by its labels.

To create a TileList component using ActionScript:

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

   import fl.controls.CheckBox;
   import fl.controls.ColorPicker;
   import fl.controls.ComboBox;
   import fl.controls.NumericStepper;
   import fl.controls.TileList;
   import fl.data.DataProvider;
   
   var aCp:ColorPicker = new ColorPicker();
   var aCb:ComboBox = new ComboBox();
   var aNs:NumericStepper = new NumericStepper();
   var aCh:CheckBox = new CheckBox();
   var aTl:TileList = new TileList();
   
   var dp:Array = [
       {label:"ColorPicker", source:aCp},
       {label:"ComboBox", source:aCb},
       {label:"NumericStepper", source:aNs},
       {label:"CheckBox", source:aCh},
   ];
   aTl.dataProvider = new DataProvider(dp);
   aTl.columnWidth = 110;
   aTl.rowHeight = 100;
   aTl.setSize(280,130);
   aTl.move(150, 150);
   aTl.setStyle("contentPadding", 5);
   aTl.sortItemsOn("label");
   addChild(aTl);
   

4. Select Test > Control Movie to test the application.

Flash CS3