Thumbnail Scroller > API

Properties

Property Type Default Description
xmlPath String "" (Empty String) The location of the XML file.

Example:
myScroller.xmlPath = "files/xml/images.xml";
items Array [] An array of objects, each object containing the source of the content and other additional data.

Example:
myScroller.items = [{source:"images/img0.jpg"}, {source:"images/img1.jpg"}, {source:"images/img2.jpg"}];
itemsArray Array [] An array of strings, each string containing the source of the content.

Example:
myScroller.itemsArray = ["images/img0.jpg", "files/img1.jpg", "images/img2.jpg"];
itemWidth Number 150 The maximum width of each item.

Example:
myScroller.itemWidth = 200;
itemHeight Number 100 The maximum height of each item.

Example:
myScroller.itemHeight = 70;
scaleMode String "exactFit" The scaling of each item. "exactFit" will resize all items to the maximum width and height. "maintainAspectRatio" will resize the items to the maximum width or height, maintaining the aspect ratio. "noScale" will ignore the maximum width and height, maintaining the items at the original dimensions.

Example:
myScroller.scaleMode = "maintainAspectRatio";
currentPosition Number 0 A number between 0 and 1 representing the current position of the scroller.

Example:
myScroller.currentPosition = 0.5;
currentPositionStrength Number 50 Indicates the strength of the easing when the position of the scroller is set using the currentPosition property.

Example:
myScroller.currentPositionStrength = 50;
direction String "horizontal" The direction of the carousel.

Example:
myScroller.direction = "vertical";
layers uint 1 The number of layers represents the number of rows when direction is set to "horizontal" or the number of columns when direction is set to "vertical".

Example:
myScroller.layers = 4;
verticalAlign String "middle" The vertical alignment of each item when the direction is set to "horizontal".

Example:
myScroller.verticalAlign = "bottom";
horizontalAlign String "center" The horizontal alignment of each item when the direction is set to "vertical".

Example:
myScroller.horizontalAlign = "left";
handCursor Boolean false Indicates whether a hand cursor will be displayed when the mouse rolls over an item.

Example:
myScroller.handCursor = true;
cornerRoundness Number 0 The amount by which the corners of the items will be rounded.

Example:
myScroller.cornerRoundness = 50;
overSkinReference String "" The name of a Class associated to a library symbol that will be displayed on top of each item. This property can be used to create a gloss effect or to add a watermark.

Example:
myScroller.overSkinReference = "GlossEffect";
inactiveArea Number 0 The width (or height if "direction" is set to "vertical") of the area in which the mouse scrolling will be inactive.

Example:
myScroller.inactiveArea = 150;
smoothing Boolean true Indicates whether the images will be smoothened.

Example:
myScroller.smoothing = false;
interactiveItems Boolean false Indicates whether the items will be interactive. Set this property to true if the items contain objects that need to respond to mouse interaction.

Example:
myScroller.interactiveItems = true;
border Boolean false Indicates whether a border will be added for each item.

Example:
myScroller.border = true;
borderColor uint 0xFFFFFF The color of the border.

Example:
myScroller.borderColor = 0xFF00FF;
borderAlpha Number 1.0 The alpha of the border.

Example:
myScroller.borderAlpha = 0.5;
borderThickness Number 5 The thickness of the border.

Example:
myScroller.borderThickness = 0xFF00FF;
preloaderType String "bar" The type of preloader. Values: "bar", "pie", "circular1", "circular2", "circular3" and "none".

Example:
myScroller.preloaderType = "circular2";
preloaderSize Number 100 The width of the preloader if preloaderType is set to "bar" and the radius of the preloader if preloaderType is set to "pie", "circular1", "circular2" or "circular3".

Example:
myScroller.preloaderSize =15;
preloaderFillAlpha Number 0.5 The alpha of the preloader's fill portion.

Example:
myScroller.preloaderFillAlpha = 0.7;
preloaderLineAlpha Number 1.0 The alpha of the preloader's line portion.

Example:
myScroller.preloaderLineAlpha = 0.2;
preloaderFillColor uint 0xFFFFFF The color of the preloader's fill portion.

Example:
myScroller.preloaderFillColor = 0x0000FF;
preloaderLineColor uint 0xFFFFFF The color of the preloader's line portion.

Example:
myScroller.preloaderLineColor = 0xFF0000;
reflection Boolean false Indicates whether a reflection will be added for the scroller.

Example:
myScroller.reflection = true;
reflectionDistance Number 0 The distance of the reflection from the bottom edge of the item.

Example:
myScroller.reflectionDistance = 5;
reflectionAlpha Array [0.7, 0] An array of two numbers representing the alpha values at the beginning and at the end of the reflection.

Example:
myScroller.reflectionAlpha = [1.0, 0.0];
reflectionRatio Array [0, 127] An array of two numbers containing the ratio values of the reflection.

Example:
myScroller.reflectionRatio = [0, 255];
animatedReflection Boolean false Indicates whether the reflection will be animated. If the scroller has some animated content and you want the reflection to constantly refresh so that the animation will be visible in the reflection too, you need to set this property to true.

Example:
myScroller.animatedReflection = true;
useCacheAsBitmap Boolean false Indicates the value of the cacheAsBitmap property for each item. Setting this property to true might result in better performance but it could also be a problem if the component has too many items.

Example:
myScroller.useCacheAsBitmap = true;
temporaryClipReference Object null The name of a Class associated to a library symbol that will be displayed for each item until the content of the item is loaded. If no value is specified, automatically a rectangle will be used with a specified alpha and color. If you don't want a temporary clip to be displayed at all, simply set the temporaryClipAlpha property to 0.

Example:
myScroller.temporaryClipReference = "TempClip";
temporaryClipAlpha Number 0.5 The alpha of the temporary clip. This property will be ignored if a reference to a temporary clip is set.

Example:
myScroller.temporaryClipAlpha = 1.0;
temporaryClipColor uint 0xCCCCCC The color of the temporary clip. This property will be ignored if a reference to a temporary clip is set.

Example:
myScroller.temporaryClipColor = 0x000000;
skipBrokenPath Boolean false Indicates whether the component will ignore invalid sources when external content is loaded.

Example:
myScroller.skipBrokenPath = true;
mouseScroll Boolean false Indicates whether the component's items will be scrolled when the mouse rolls over the component.

Example:
myScroller.mouseScroll = true;
mouseScrollType String "relative" "relative" will scroll the items based on the pointer's position and the total number of items while "absolute" will scroll the items based only on the pointer's position.

Example:
myScroller.mouseScrollType = "absolute";
mouseScrollSpeed Number 5 The speed of the scrolling when mouseScroll is set to true. A higher value indicates a higher speed.

Example:
myScroller.mouseScrollSpeed = 30;
mouseScrollEasing Boolean false Indicates whether easing will be used when the scroller stops after the user moves the mouse away from the component.

Example:
myScroller.mouseScrollEasing = true;
mouseScrollEasingStrength Number 1.2 Indicates whether strength of the easing when the scroller stops.

Example:
myScroller.mouseScrollEasingStrength = 1.4;
mouseBlur Boolean false Indicates whether the component will be blurred during the scrolling process.

Example:
myScroller.motionBlur = true;
mouseBlurStrength Number 2 Indicates the strength of the blur if motionBlur is set to true.

Example:
myScroller.motionBlurStrenght = 4;
mouseBlurQuality Number 1 Indicates the quality of the blur if motionBlur is set to true.

Example:
myScroller.motionBlurQuality = 4;
scrollAmount Number 200 The amount of scrolling when scrollRight(), scrollLeft(), scrollUp(), scrollDown() methods are used.

Example:
myScroller.scrollAmount = 100;
scrollDuration Number 1 The scroll duration in seconds.

Example:
myScroller.scrollDuration = 3;
scrollEasing String "exponentialOut" The scroll easing.

Example:
myScroller.scrollEasing = "backOut";
autoScroll Boolean false Indicates whether the component's items will be scrolled automatically.

Example:
myScroller.autoScroll = true;
autoScrollDelay Number 3 Indicates the delay of the auto scroll, in seconds.

Example:
myScroller.autoScrollDelay = 4;
autoScrollDirection String "next" Indicates the direction in which the items will be scrolled.

Example:
myScroller.autoScrollDirection = "previous";
selectOver uint 1 Indicates over how many items the scrolling will be executed when selectNext() and selectPrevious() methods are used.

Example:
myScroller.selectOver = 3;
selectedAlign String "center" The alignment of the selected item

Example:
myScroller.selectedAlign = "left";
effect Object null An instance of an Effect component.

Example:
var greyEffect:GreyEffect = new GreyEffect();
myScroller.effect = greyEffect; or myScroller.effect = "greyEffect";
livePreviewItems uint 10 The number of items used for the live preview.

Read-only Properties

Property Type Description
numItems uint Returns the total number of items.

Example:
trace(myScroller.numItems);
isScrolling Boolean Indicates whether the component is currently scrolling.

Example:
trace(myScroller.isScrolling);
selectedIndex uint Returns the index of the selected item.

Example:
trace(myScroller.selectedIndex);

Methods

Method Implementation Description
addItem() addItem(data:Object):void Adds a new item at the end of the component.

Example:
myScroller.addItem({source:"images/image1.jpg", title:"Flower", description:"Image description"});
addItemAt() addItemAt(data:Object, index:uint):void Adds a new item at the specified index.

Example:
myScroller.addItemAt({source:"images/image1.jpg", title:"Flower", description:"Image description"}, 3);
addItems() addItems(items:Array):void Adds an array of items to the end of the component.

Example:
var myItems:Array = [{source:"images/image0.jpg"}, {source:"images/image1.jpg",title:"Bird"}, {source:"images/image2.jpg",title:"Sky"}, {source:"images/image3.jpg"}]; myScroller.addItems(myItems);
addItemsAt() addItems(items:Array, index:uint):void Adds an array of items at the specified index.

Example:
var myItems:Array = [{source:"images/image0.jpg"}, {source:"images/image1.jpg",title:"Bird"}, {source:"images/image2.jpg",title:"Sky"}, {source:"images/image3.jpg"}]; myScroller.addItems(myItems, 5);
removeItem() removeItem(item:IDisplayItem):void Removes the specified item.

Example:
myScroller.removeItem(myScroller.getItemAt(4));
removeItemAt() removeItemAt(index:uint):void Removes the item at the specified index.

Example:
myScroller.removeItemAt(1);
removeItemsAt() removeItemsAt(startIndex:uint, removeCount:uint) Removes a specified number of items starting at a specified index.

Example:
myScroller.removeItemsAt(0, 3);
removeAllItems() removeAllItems():void Removes all items.

Example:
myScroller.removeAllItems();
replaceItem() replaceItem(data:Object, item:IDisplayItem) Replace an existing item with a new item.

Example:
var data:Object = {source:"images/image1.jpg", desc:"Bird"}; myScroller.replaceItem(data, myScroller.getItemAt(5));
replaceItemAt() replaceItemAt(data:Object, index:uint) Replace an existing item at a specified index with a new item.

Example:
var data:Object = {source:"images/image1.jpg", desc:"Bird"}; myScroller.replaceItem(data, 2);
spliceItems() spliceItems(startIndex:uint, removeCount:uint, items:Array = null):void Removes a specified number of items, starting at a specified index and adds an array of items at the specified index.

Example:
var newItems:Array = [{source:"images/image0.jpg"}, {source:"images/image1.jpg",title:"Bird"}, {source:"images/image2.jpg",title:"Sky"}, {source:"images/image3.jpg"}]; myScroller.spliceItems(0, 3, newItems);
getItemAt() getItemAt(index:uint):IDisplayItem Returns the item at the specified index.

Example:
trace(myScroller.getItemAt(2).index);// output 2
getItemIndex() getItemIndex(item:IDisplayItem):int Returns the index of the specified item.

Example:
var nr:int = myScroller.getItemIndex(myScroller.getItemAt(7)); trace(nr); // output 7
select() select(index:uint):void Selects the item at the specified index.

Example:
myScroller.select(5);
deselect() deselect(index:uint):void Deselects the item at the specified index.

Example:
myScroller.deselect(myScroller.selectedIndex);
selectNext() selectNext():void Selects the next item.

Example:
myScroller.selectNext();
selectPrevious() selectPrevious():void Selects the previous item.

Example:
myScroller.selectPrevious();
scrollRight() scrollRight():void Scrolls the component to the right by a certain amount, given by the scrollAmount property.

Example:
myScroller.scrollRight();
scrollLeft() scrollLeft():void Scrolls the component to the left by a certain amount, given by the scrollAmount property.

Example:
myScroller.scrollLeft();
scrollUp() scrollUp():void Scrolls the component to the top by a certain amount, given by the scrollAmount property.

Example:
myScroller.scrollUp();
scrollDown() scrollDown():void Scrolls the component to the bottom by a certain amount, given by the scrollAmount property.

Example:
myScroller.scrollDown();
setSize() setSize(width:Number, height:Number):void Sets the component's size at the specified width and height.

Example:
myScroller.setSize(700, 500);
move() move(x:Number, y:Number):void Moves the component at the specified position.

Example:
myScroller.move(100, 100);

Events

Event type Description
ITEMS_LOAD_START Dispatched when the loading of a group of items begins.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEMS_LOAD_START, eventHandler)

function eventHandler(event:ScrollerEvent):void
{
trace("loading begins");
}
ITEMS_LOAD_PROGRESS Dispatched every time an items was loaded, during the loading of a group of items.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEMS_LOAD_PROGRESS,eventHandler)

function eventHandler(event:ScrollerEvent):void
{
trace("Loaded " + event.itemsLoaded + " out of " + event.itemsTotal);
}
ITEMS_LOAD_COMPLETE Dispatched when the loading of a group of items is complete.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEMS_LOAD_COMPLETE,eventHandler)

function eventHandler(event:ScrollerEvent):void
{
trace("loading complete");
}
XML_LOAD_START Dispatched when the loading of the XML file begins.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.XML_LOAD_START, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("XML loading begins");
}
XML_LOAD_PROGRESS Dispatched during the loading of the XML file.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.XML_LOAD_PROGRESS, eventHandler);
function eventHandler(event:ScrollerEvent):void
{
trace("Loaded " + event.bytesLoaded + " out of " + event.bytesTotal);
}
XML_LOAD_COMPLETE Dispatched when the loading of an XML file is complete.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.XML_LOAD_COMPLETE,eventHandler)
function eventHandler(event:ScrollerEvent):void
{
trace("XML file loaded");
}
ITEM_ADD Dispatched when a new item was added.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_ADD, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace(event.index); // output 3
trace(event.data); // output ,source:"images/image1.jpg", title:"Flower", desc:"Sun flower"
trace(event.data.title); // output "Flower"
}

myScroller.addItemAt({source:"images/image1.jpg", title:"Flower", desc:"Sun flower"}, 3);
ITEM_REMOVE Dispatched when an item was removed.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_REMOVE, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace(event.index); // output 1
}

myScroller.removeItemAt(1);
ITEM_CLICK Dispatched when an item was clicked.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace(event.index);
}
ITEM_DOUBLE_CLICK Dispatched when an item was double-clicked.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_DOUBLE_CLICK, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace(event.data);
}
ITEM_MOUSE_UP Dispatched when the mouse is released over an item.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_MOUSE_UP, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace(event.index);
}
ITEM_MOUSE_DOWN Dispatched when the mouse is pressed over an item.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_MOUSE_DOWN, eventHandler);
function eventHandler(event:ScrollerEvent):void
{
trace(event.index);
}
ITEM_MOUSE_OVER Dispatched when the mouse pointer is moved over an item.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_MOUSE_OVER, eventHandler);
function eventHandler(event:ScrollerEvent):void
{
trace(event.index);
}
ITEM_MOUSE_OUT Dispatched when the mouse pointer is moved away from an item.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_MOUSE_OUT, eventHandler);
function eventHandler(event:ScrollerEvent):void
{
trace(event.index);
}
ITEM_START Dispatched when the content of an item begins to load.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_START, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("Item at index: " + event.index + " has started loading");
}
ITEM_PROGRESS Dispatched during the loading of an item's content.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_PROGRESS, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("Loaded " + event.bytesLoaded + " out of " +event.bytesTotal);
}
ITEM_COMPLETE Dispatched when the content of an item is completely loaded.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_COMPLETE, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("Item at index: " + event.index + " has finished loading");
}
ITEM_ERROR Dispatched when an error has occurred during the loading process.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_ERROR, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("Item at index: " + event.index + " could not be loaded");
}
ITEM_SELECTED Dispatched when an item was selected.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_SELECTED, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("Index of the selected item: " + event.index);
}
ITEM_DESELECTED Dispatched when an item was deselected.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.ITEM_DESELECTED, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("Index of the deselected item: " + event.index);
}
UPDATE Dispatched after the component was updated because a property changed or an item was added or removed.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.UPDATE, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("Something changed!");
}
SCROLL_START Dispatched when the scrolling starts.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.SCROLL_START, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("scroll started");
}
SCROLL_PROGRESS Dispatched during the scrolling process.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.SCROLL_PROGRESS, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("is scrolling");
}
SCROLL_COMPLETE Dispatched when the scrolling is finished.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.SCROLL_COMPLETE, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("scroll complete");
}
REACHED_TOP Dispatched when the component has reached the top edge after scrollUp() method was called.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.REACHED_TOP, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("reached top");
}
REACHED_BOTTOM Dispatched when the component has reached the top edge after scrollDown() method was called.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.REACHED_BOTTOM, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("reached bottom");
}
REACHED_LEFT Dispatched when the component has reached the left edge after scrollLeft() method was called.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.REACHED_LEFT, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("reached left");
}
REACHED_RIGHT Dispatched when the component has reached the right edge after scrollRight() method was called.

Example:

import com.flashotaku.events.ScrollerEvent;

myScroller.addEventListener(ScrollerEvent.REACHED_RIGHT, eventHandler);

function eventHandler(event:ScrollerEvent):void
{
trace("reached right");
}