Advanced Flash Components
Components
Tutorials
Forum
Search!
Search!
Home >  Components >  Media List (AS 3.0) >  API Documentation
View Cart
Signup
Login
API Documentation
Media List (AS 3.0) V. 2.0 Documentation
Printer-friendly
Properties
Name Type Description
content Collection Collection of items to display in the list.
  1. title:String
  2. path:String
  3. description:String
  4. data:String
Example:

import fl.data.DataProvider;

function onListInit(event:MediaListEvent) {
var dp:DataProvider = new DataProvider();
dp.addItem({title:"title", path:"path.jpg", data:"someurl.com", description:"description"};);
dp.addItem({title:"title", path:"path.jpg", data:"someurl.com", description:"description"};);
dp.addItem({title:"title", path:"path.jpg", data:"someurl.com", description:"description"};);

myList.content = dp;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);
contentXML String Path to content XML file or RSS 2.0 image feed.

XML File Format

<content>
    <item>
        <title>Video 1</title>
        <description>This is video 1</description>
        <path>image.jpg</path>
        <data>url.html</data>
    </item>
</content>

Example

myList.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>
        <title>Video 1</title>
        <description>This is video 1</description>
        <path>image.jpg</path>
        <data>url.html</data>
        <name>MyCustomNode</name>   
    </item>
</content>

trace(myList.getSelectedItem().name);
contentStyle Object Style of each Media List item. Should be similar to contentSyle on Media List.
  1. width:Number
  2. height:Number
  3. padding:Number
Example

myList.contentStyle = {width:40, height:40, padding:10};
descriptionTextDefaultStyle Object Customizes the description text for positioning, color, font style, embedded fonts, and HTML capabilities.
  1. x:Number
  2. y:Number
  3. textWidth:Number
  4. wordWrap:Boolean
  5. bold:Boolean
  6. italic:Boolean
  7. underline:Boolean
  8. align:String (left,center or right)
  9. font:String
  10. color:Number(RGB)
  11. size:Number
  12. embed:Boolean
  13. isHTML:Boolean
Example:

myList.descriptionTextDefaultStyle = {x:40, y:50, textWidth:250, wordWrap:true, bold:true, italic:false, underline:false, align:"left", font:"FFF Corp", color:0x000000, size:8, embed:true, isHTML:true};
descriptionTextOverStyle Object Customizes the mouse over state for the description.
  1. x:Number
  2. y:Number
  3. textWidth:Number
  4. wordWrap:Boolean
  5. bold:Boolean
  6. italic:Boolean
  7. underline:Boolean
  8. align:String (left,center or right)
  9. font:String
  10. color:Number(RGB)
  11. size:Number
  12. embed:Boolean
  13. isHTML:Boolean
Example:

myList.descriptionTextOverStyle = {x:40, y:50, textWidth:250, wordWrap:true, bold:true, italic:false, underline:false, align:"left", font:"FFF Corp", color:0x000000, size:8, embed:true, isHTML:true};
descriptionTextSelectedStyle Object Customizes the selected state of the description.

  1. x:Number
  2. y:Number
  3. textWidth:Number
  4. wordWrap:Boolean
  5. bold:Boolean
  6. italic:Boolean
  7. underline:Boolean
  8. align:String (left,center or right)
  9. font:String
  10. color:Number(RGB)
  11. size:Number
  12. embed:Boolean
  13. isHTML:Boolean
Example:

myList.descriptionTextSelectedStyle = {x:40, y:50, textWidth:250, wordWrap:true, bold:true, italic:false, underline:false, align:"left", font:"FFF Corp", color:0x000000, size:8, embed:true, isHTML:true};
imageDefaultStyle Object Set the default style of thumbnails for the media list.
  1. width:Number
  2. height:Number
  3. x:Number
  4. y:Number
  5. maintainAspecRatio:Boolean
  6. scaleContent:Boolean
Example:
myList.imageDefaultStyle = {width:30, height:20, x:5, y:5, maintainAspectRatio:false, scaleContent:true};
imageOverStyle Object Set the over state style of thumbnails for the media list.
  1. width:Number
  2. height:Number
  3. x:Number
  4. y:Number
  5. maintainAspecRatio:Boolean
  6. scaleContent:Boolean
Example:
myList.imageOverStyle = {width:30, height:30, x:10, y:50, maintainAspectRatio:true, scaleContent:false};
imageSelectedStyle Object Set the selected state style for thumbnails in media list.
  1. width:Number
  2. height:Number
  3. x:Number
  4. y:Number
  5. maintainAspecRatio:Boolean
  6. scaleContent:Boolean
Example:
myList.imageSelectedStyle = {width:30, height:30, x:10, y:50, maintainAspectRatio:true, scaleContent:false};
itemContainerDefaultStyle Object Set the default style for the container of objects.

  1. fill: Boolean
  2. fillcolor: Number (ARGB)
  3. stroke: Boolean
  4. strokeColor: Number (ARGB)
  5. strokeWidth: Number
  6. cornerRadius: Number
Example:

myList.itemContainerDefaultStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2};
itemContainerOverStyle Object Set the over state style for the container.
  1. fill: Boolean
  2. fillcolor: Number (ARGB)
  3. stroke: Boolean
  4. strokeColor: Number (ARGB)
  5. strokeWidth: Number
  6. cornerRadius: Number
Example:

myList.itemContainerOverStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2};
itemContainerSelectedStyle Object Set the selected state style for the container.
  1. fill: Boolean
  2. fillcolor: Number (ARGB)
  3. stroke: Boolean
  4. strokeColor: Number (ARGB)
  5. strokeWidth: Number
  6. cornerRadius: Number
Example:

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

Example:

myList.previewClip = "myClip";
reflectionStyle Object Set the reflection of the Media List.

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

Example

myList.reflectionStyle = {enable:true, alpha: 0.8, clipAlpha: 0.5, distance: 1, matrixRatio: 1, matrixDropOff: 1};
scrollAnimation Object Property defines scrolling properties.

Properties

    1. enabled:Boolean
    2. duration: Number
    3. easing:String
        (easeIn, easeInOut, easeOut, or easeNone)
    4. scrollDirection:String

Example

myList.scrollAnimation = {enabled:true, duration:10, easing:"easeIn",scrollDirection:"vertical"};
scrollLoop Object Sets Media List's looping capabilities.

scrollLoop: Boolean

Example:

myList.scrollLoop = true;
selectedItem Object Selects initial item.

selectedItem: Number

Example:

myList.selectedItem = 2;
scrollBar Object Attaches  ScrollBar to Media List

Example:
myList.scrollBar = myScrollBar;
selectedItemAlign String Defines the alignment of the selected item.
  1. bottom
  2. center
  3. dynamic
  4. top
Example:

myList.selectedItemAlign = "dynamic";
selectOnPageScroll Object Defines whether an item gets selected once the page scroll is activated.

selectOnPageScroll: Boolean

Example:

myList.selectOnPageScroll = false;
slideShow Object Defines slide show properties.

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

Example:

myList.slideShow = {enabled:true, loop:false, time:5};
titleTextDefaultStyle Object Sets default text style.
  1. x:Number
  2. y:Number
  3. textWidth:Number
  4. wordWrap:Boolean
  5. bold:Boolean
  6. italic:Boolean
  7. underline:Boolean
  8. align:String (left,center or right)
  9. font:String
  10. color:Number(RGB)
  11. size:Number
  12. embed:Boolean
  13. isHTML:Boolean
Example:

myList.titleTextDefaultStyle = {x:40, y:50, textWidth:250, wordWrap:True, bold:true, italic:false, underline:false, align:"left", font:"FFF Corp", color:0x000000, size:8, embed:true, isHTML:true};
titleTextOverStyle Object Sets over state text style.
  1. x:Number
  2. y:Number
  3. textWidth:Number
  4. wordWrap:Boolean
  5. bold:Boolean
  6. italic:Boolean
  7. underline:Boolean
  8. align:String (left,center or right)
  9. font:String
  10. color:Number(RGB)
  11. size:Number
  12. embed:Boolean
  13. isHTML:Boolean
Example:

myList.titleOverDefaultStyle = {x:40, y:50, textWidth:250, wordWrap:true, bold:true, italic:false, underline:false, align:"left", font:"FFF Corp", color:0x000000, size:8, embed:true, isHTML:true};
titleTextSelectedStyle Object Sets selected text style.
  1. x:Number
  2. y:Number
  3. textWidth:Number
  4. wordWrap:Boolean
  5. bold:Boolean
  6. italic:Boolean
  7. underline:Boolean
  8. align:String (left,center or right)
  9. font:String
  10. color:Number(RGB)
  11. size:Number
  12. embed:Boolean
  13. isHTML:Boolean
Example:

myList.titleSelectedStyle = {x:40, y:50, textWidth:250, wordWrap:true, bold:true, italic:false, underline:false, align:"left", font:"FFF Corp", color:0x000000, size:8, embed:true, isHTML:true};
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. type: String (Blinds, Fly, Fade, Iris, Photo, PixelDissolve, Rotate, Squizee, Wipe, or Zoom)
    3. direction:String (IN, OUT)
    4. easing:String
    5. duration:Number

Example

myList.transition = {enable:true, type:PixelDissolve, direction:IN, easing:easeIn, duration:1};
visible Object Sets visibility of Media List
  1. visible:Boolean

Example:

myList.visible = true;
Methods
Name Return Type Description
getItemAt( Number ) Object Returns content item object specified by Number attribute.

Example

var item:Object = new Object();

item = myList.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 = myList.getTotalItems();
getSelectedItem( ) Object Returns selected item object.

Example

var item:Object = new Object();

item = myList.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 = myList.getItemAt(2);
myList.selectItem(item);
selectItemAt( Number ) Void Selects item specified by Number attribute.

Example

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

Example

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

Example

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

Example

myList.addItem({title:"My Title", description:"My Description", path:"image.jpg",data:"movie.flv"});
removeItem( Item
Object )		 Void Removes item from the content object.

Example

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

Example

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

Example

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

Example

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

Direct Event Example

import flash.events.MouseEvent;

var item = myList.addItem({....});

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

item.addEventListener(MouseEvent.CLICK, eventHandler);
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);
}

myList.addGenericItemEventListener(MouseEvent.CLICK, eventHandler);
addItemAt( item,
index )		 Void Adds an item to the media list at the indicated index.

Example

var itemToAdd:Object ={title:"title", description:"description", path:"pic.jpg", data:"movie.flv"};

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

Example

var itemToAdd:Object ={title:"title", description:"description", path:"pic.jpg", data:"name.flv"};

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

Example

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

Example

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

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

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

Example

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

Example

import com.afcomponents.events.MediaListEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myList.addEventListener(MediaListEvent.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.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
    trace(event.target);
}
myList.addEventListener(MediaListEvent.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.MediaListEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myList.addEventListener(MediaListEvent.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.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

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

Example

import com.afcomponents.events.MediaListEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myList.addEventListener(MediaListEvent.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.MediaListEvent;

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