Advanced Flash Components
Components
Tutorials
Forum
Search!
Search!
Home >  Components >  Scroll Panel >  API Documentation
View Cart (5)
Signup
Login
API Documentation
Scroll Panel V. 2.0 Documentation
Printer-friendly
Properties
Name Type Description
content Object Defines displayed content.

    1.description:String
    2.path:Mixed
    3.type:String – content type
    com.afcomponents.common.ContentType
        ContentType.IMAGE
        ContentType.INSTANCE
    4.data - Miscellaneous property

Example

import fl.data.DataProvider;
import com.afcomponents.common.ContentType;
import com.afcomponents.events.ScrollPanelEvent;

function scrollPanelInit(event:ScrollPanelEvent) {
    myScroll.addItem({path:"image.gif",description:"Test Item", data:"some_url.htm", type:ContentType.IMAGE});
}
myScroll.addEventListener(ScrollPanelEvent.INITIALIZE, scrollPanelInit);
contentXML String Path to content XML file or RSS 2.0 image feed.

XML File Format

<content>
    <item>
        <description>Image 1</description>
        <path>image.jpg</path>
        <data>url.html</data>
    </item>
</content>

Example

myScroll.contentXML = "file.xml";


Note: You can use a custom node in your XML and it becomes of property of the item.

Custom Node XML Example

<content>
    <item>
        <description>Image 1</description>
        <path>image.jpg</path>
        <data>url.html</data>
        <name>MyCustomNode</name>   
    </item>
</content>

trace(myScroll.getSelectedItem().name);
contentStyle Object Property defines image size. Please note that width and height parameters override maintainAspectRatio and scaleContent properties.

    1. width:Number
    2. height:Number
    3. maintainAspectRatio:Boolean
    4. scaleContent:Boolean
    5. padding:Number – horizontal padding
    6. autoSize:Boolean

Example

myScroll.contentStyle = {width:100, height:150, maintainAspectRatio:true, scaleContent:true, padding:10, autoSize: false};
itemContainerDefaultStyle Object Defines the default item container shape style.

    1.fill:Bolean
    2.fillColor:Number (ARGB)
    3.fillGradient:Object [ActionScript Only]
    4.stroke:Boolean
    5.strokeColor:Number (ARGB)
    6.cornerRadius:Number
    7.horizontalPadding:Number
    8.verticalPadding:Number

Example

myScroll.itemContainerDefaultStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5};
itemContainerOverStyle Object Defines the item container shape style on mouse over event.

  
    1.fill:Bolean
    2.fillColor:Number (ARGB)
    3.fillGradient:Object [ActionScript Only]
    4.stroke:Boolean
    5.strokeColor:Number (ARGB)
    6.cornerRadius:Number
    7.horizontalPadding:Number
    8.verticalPadding:Number

Example

myScroll.itemContainerOverStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5};
itemContainerSelectedStyle Object
    1.fill:Bolean
    2.fillColor:Number (ARGB)
    3.fillGradient:Object [ActionScript Only]
    4.stroke:Boolean
    5.strokeColor:Number (ARGB)
    6.cornerRadius:Number
    7.horizontalPadding:Number
    8.verticalPadding:Number

Example

myScroll.itemContainerSelectedStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5};
previewClip String Property defines a class of a placeholder movie clip.

Example

myScroll.previewClip = "MyClip";
scrollAnimation Object Property defines scroll properties.

Properties

    1. enabled:Boolean
    2. motion:fl.motion.easing
        (Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear,
        Quadratic, Quatric, Quintric, or Sine)
    3. easing:String
        (easeIn, easeInOut, easeOut, or easeNone)
    4. speed:Number

Example

import fl.motion.easing.*;

myScroll.scrollAnimation = {motion:fl.motion.easing.Back, easing:"easeIn",speed:10}
scrollLoop Boolean Defines whether the slide show is looped.

Example

myScroll.scrollLoop = true;
selectedItem Number Defines initially selected item. First item is selected by default.

Example

myScroll.selectedItem = 5;
selectedItemAlign String Defines the alignment of the selected item. If set to “CENTER” the selected item is moved to the center of the component. If set to “DYNAMIC” then the selected item is not moved.

Example

myScroll.selectedItemAlign = ItemsAlign.CENTER;
selectOnPageScroll Boolean Defines whether an item gets selected once the page scroll is activated.

Note: There was a typo for this property. This is working format.

Example

myScroll.selectOnPageSrcoll = false;
slideShow Object Defines slide show properties.

    1. enabled:Boolean
    2. loop:Boolean
    3. time:Boolean [time in seconds]

myScroll.slideShow = {enabled:true, loop:false, time:5};
transition Object Property determines whether to display image transition (true) or not (false). Fade transition is displayed after thumbnail image has been loaded.

Options

    1. enable:Boolean
    2. transition:fl.transitions
        (Blinds, Fly, Fade, Iris, Photo, PixelDissolve, Rotate, Squizee, Wipe,
        or Zoom)
    2. motion:Class
    3. easing:String
    4. duration:Number

Example

myScroll.transition = {enable:true, transition:fl.transition.PixelDissolve, motion:fl.motion.easing.Linear,duration:1}


Example

import fl.transitions.*;
import fl.transitions.easing.*;
myScroll.transition = {type:Zoom, direction:Transition.IN, duration:1, easing:Bounce.easeOut};
scrollBar String Path to an instance of the UIScrollBar component that will be used to scroll the Scroll Panel.

Example

myScroll.scrollBar = my_sb;
reflectionStyle Object Set the reflection of the Scroll Panel.

    1. enable:Boolean
    2. alpha:Number
    3. clipAlpha:Number
    4. distance:Number
    5. matrixRatio:Number
    6. matrixDropOff:Number

Example

myScroll.reflectionStyle = {enable:true, alpha: 0.8, clipAlpha: 0.5, distance: 1, matrixRatio: 1, matrixDropOff: 1};
length Number Read-only property indicates the number of items in the Scroll Panel.

Example

trace(myScroll.length);
Methods
Name Return Type Description
getItemAt( Number ) Object Returns content item object specified by Number attribute.

Example

var item:Object = new Object();

item = myScroll.getItemAt(2);
trace(item.description);
trace(item.path);
trace(item.data);
trace(item.id);
getTotalItems( ) Number Returns total number of items in the content object.

Example

var items = myScroll.getTotalItems();
getSelectedItem( ) Object Returns selected item object.

Example

var item:Object = new Object();

item = myScroll.getSelectedItem();
trace(item.description);
trace(item.path);
trace(item.data);
trace(item.id);
selectItem( Item
Object )		 Void Selects item specified by Object attribute.

Example

var item:Object = new Object();

item = myScroll.getItemNum(2);
myScroll.selectItem(item);
selectItemAt( Number ) Void Selects item specified by Number attribute.

Example

myScroll.selectItemAt(2);
selectNextItem( ) Void Selects next item.

Example

myScroll.selectNextItem();
selectPreviousItem( ) Void Selects previous item.

Example

myScroll.selectPreviousItem();
addItem( Item
Object )		 Void Adds a new item to the content list.

Example

myScroll.addItem({description:"Item", path:"image.jpg",data:"url.html"});
removeItem( Item
Object )		 Void Removes item from the content object.

Example

var item = myScroll.getItemAt(3);
myScroll.removeItem(item);
getCurrentPage( ) Number Function returns the current page number.

Example

var page:Number; page = myScroll.getCurrentPage();
displayNextPage( ) Void Displays the next page.

Example

myScroll.displayNextPage();
displayPreviousPage( ) Void Displays the previous page.

Example

myScroll.displayPreviousPage();
addGenericItemEventListener( Event
Type,
Handler )		 Void Adds event listeners to the content objects.

Generic Event Example

import flash.events.MouseEvent;

function eventHandler(event:MouseEvent){
trace(event.target);
}

myScroll.addGenericItemEventListener(MouseEvent.CLICK, eventHandler);
addItemAt( item,
index )		 Void Adds an item to the stack at the indicated index.

Example

var itemToAdd:Object ={description:"description", path:"pic.jpg", data:"url.html"};

myScroll.addItemAt(itemToAdd,1);
replaceItemAt( item,
index )		 Void Replace an item to the stack at the indicated index with the new item.

Example

var itemToAdd:Object ={description:"description", path:"pic.jpg", data:"url.html"};

myScroll.replaceItemAt(itemToAdd,3);
removeItemAt( Index ) Void Removes the item at the indicated index.

Example

myScroll.removeItemAt(3);
addItemEventListener( Event
Type,
Handler )		 Void Adds event listeners to the content objects.

Example

import flash.events.MouseEvent;
import com.afcomponents.events.ScrollPanelEvent;

function contentLoad (event:Event) {
        myScroll.addItemEventListener (4, MouseEvent.CLICK, eventHandler);
}
myScroll.addEventListener(ScrollPanelEvent.CONTENT_LOAD_START, contentLoad);

function eventHandler(event:MouseEvent){
    trace(event.target);
}
removeAll( ) Void Removes all of the items from Scroll Panel.

Example

myScroll.removeAll();
Events
Name Return Value Description
INITIALIZE target
type		 Triggered after component initializes.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollPanelEvent.INITIALIZE, eventHandler);
ERROR target
type
message		 Triggered once error occurs. If there is an error loading an image this event fired. If a wrong parameter is passed to a function this event is fired.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
trace(event.message);
}
myScroll.addEventListener(ScrollPanelEvent.ERROR, eventHandler);
CHANGE target
type		 Triggered once any of the component properties is modified or component state changes.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
trace(event.target);
}
 myScroll.addEventListener(ScrollPanelEvent.CHANGE, eventHandler);
CONTENT_LOAD_START target
type		 Triggered whenever content (images) start loading. This event helps user track general loading progress.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollPanelEvent.CONTENT_LOAD_START, eventHandler);
CONTENT_LOAD_PROGRESS target
type
itemsLoaded
itemsTotal		 Triggered during content (images) loading. Returns total and loaded number of content elements.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
trace(event.itemsLoaded);
trace(event.itemsTotal);
}
myScroll.addEventListener(ScrollPanelEvent.CONTENT_LOAD_PROGRESS, eventHandler);
CONTENT_LOAD_COMPLETE target
type		 Triggered after the content finishes loading.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollPanelEvent.CONTENT_LOAD_COMPLETE, eventHandler);
XML_LOAD_START target
type		 Triggered when XML starts loading.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollpanelEvent.XML_LOAD_START, eventHandler);
XML_LOAD_PROGRESS target
type
bytesLoaded
bytesTotal		 Triggered while XML file is being loaded.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.bytesLoaded);
trace(event.bytesTotal);
}
myScroll.addEventListener(ScrollPanelEvent.XML_LOAD_PROGRESS, eventHandler);
XML_LOAD_COMPLETE target
type		 Triggered after XML file finishes loading.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollPanelEvent.XML_LOAD_COMPLETE, eventHandler);
ITEM_LOAD_START target
type		 Triggered when item image starts loading.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_START, eventHandler);
ITEM_LOAD_PROGRESS target
type
bytesLoaded
bytesTotal		 Triggered while item image is being loaded.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
trace(event.bytesLoaded);
trace(event.bytesTotal);
}
myScroll.addEventListener(ScrollPanelEvent.XML_LOAD_PROGRESS, eventHandler);
ITEM_LOAD_COMPLETE Target
Type		 Triggered after item image finishes loading.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, eventHandler);
ITEM_SELECTED target
type		 Triggered once the item is selected. This event is triggered during the during the slide show mode.

Example

import com.afcomponents.events.ScrollPanelEvent;

function eventHandler(event:Event){
trace(event.type);
trace(event.target);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_SELECTED, eventHandler);