Instantiate Thumbnail Grid using only code
Updated: Jul 9, 2010
Views: 2319
Description: Learn how to instantiate and work with the Thumbnail Grid component using only Actionscript code.
1. Drag an instance of the Thumbnail Grid component in the Library.
2. Instantiate the component and add it to the stage.
import com.afcomponents.grid.ThumbnailGrid;
var myGrid:ThumbnailGrid = new ThumbnailGrid();
addChild(myGrid);
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(790, 100);
myGrid.move(20, 10);
myGrid.border = true;
myGrid.borderColor = 0x000000;
myGrid.handCursor = true;
myGrid.reflection = true;
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.afcomponents.events.GridEvent;
myGrid.addEventListener(GridEvent.ITEM_CLICK, itemClickHandler);
function itemClickHandler(event:GridEvent):void
{
myGrid.select(event.index);
}
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.afcomponents.grid.ThumbnailGrid;
import com.afcomponents.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
myScroller.xmlPath = "images.xml";
// set the dimension and position
myScroller.setSize(790, 100);
myScroller.move(20, 10);
// set some properties
myScroller.border = true;
myScroller.borderColor = 0x000000;
myScroller.handCursor = true;
myScroller.reflection = true;
// listen for item clicks
myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);
function itemClickHandler(event:ScrollerEvent):void
{
// when an item is clicked scroll to that item
myScroller.select(event.index);
}
import com.afcomponents.grid.ThumbnailGrid;
import com.afcomponents.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
myScroller.xmlPath = "images.xml";
// set the dimension and position
myScroller.setSize(790, 100);
myScroller.move(20, 10);
// set some properties
myScroller.border = true;
myScroller.borderColor = 0x000000;
myScroller.handCursor = true;
myScroller.reflection = true;
// listen for item clicks
myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);
function itemClickHandler(event:ScrollerEvent):void
{
// when an item is clicked scroll to that item
myScroller.select(event.index);
}
