Instantiate Thumbnail Scroller using only code

Instantiate Thumbnail Scroller using only code

Published: 21 August 2009

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

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

import com.flashotaku.scroller.ThumbnailScroller;

var myScroller:ThumbnailScroller = new ThumbnailScroller();

addChild(myScroller);

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

myScroller.xmlPath = "images.xml";

4. Set a few properties

myScroller.setSize(790, 100);
myScroller.move(20, 10);

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

5. When an item is selected scroll to it.

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);

function itemClickHandler(event:ScrollerEvent):void
{
myScroller.select(event.index);
}

Here's the complete code:

//import the ThumbnailScroller class
import com.flashotaku.scroller.ThumbnailScroller;

import com.flashotaku.events.ScrollerEvent;

// create an instance of the ThumbnailScroller
var myScroller:ThumbnailScroller = new ThumbnailScroller();

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

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