Instantiate Thumbnail Grid using only code

Instantiate Thumbnail Grid using only code

Published: 21 August 2009

1. Drag an instance of the Thumbnail Grid component in the Library.

2. Instantiate the component and add it to the stage.

import com.flashotaku.grid.ThumbnailGrid;

var myGrid:ThumbnailGrid = new ThumbnailGrid();

addChild(myGrid);

3. Create an XML file, as explained in this tutorial, and pass it to the xmlPath property.

myGrid.xmlPath = "images.xml";

4. Set a few properties

myGrid.setSize(500, 250);
myGrid.move(20, 10);

myGrid.border = true;
myGrid.borderColor = 0x000000;
myGrid.handCursor = true;
myGrid.reflection = true;

5. When an item is selected scroll to it.

import com.flashotaku.events.GridEvent;

myGrid.addEventListener(GridEvent.ITEM_CLICK, itemClickHandler);

function itemClickHandler(event:GridEvent):void
{
myGrid.select(event.index);
}

Here's the complete code:

//import the ThumbnailGrid class
import com.flashotaku.grid.ThumbnailGrid;

import com.flashotaku.events.GridEvent;

// create an instance of the ThumbnailGrid
var myGrid:ThumbnailGrid = new ThumbnailGrid();

// add the instance to the display list
addChild(myGrid);

// set the source
myGrid.xmlPath = "images.xml";

// set the dimension and position
myGrid.setSize(790, 100);
myGrid.move(20, 10);

// set some properties
myGrid.border = true;
myGrid.borderColor = 0x000000;
myGrid.handCursor = true;
myGrid.reflection = true;

// listen for item clicks
myGrid.addEventListener(GridEvent.ITEM_CLICK, itemClickHandler);

function itemClickHandler(event:GridEvent):void
{
// when an item is clicked scroll to that item
myGrid.select(event.index);
}