Advanced Flash Components

Adding Content to Media List: Using Action Script

Updated: Jan 25, 2008 Views: 934

Description: This tutorial will show you how to use ActionScript inside of flash to load various types of content (images, movie clips, .swfs) into the Media List AS3.0 Component.

Components Used in this Tutorial: Media List AS3.0.

The Completed Project:

Complete Code:

import fl.data.DataProvider;
import com.afcomponents.events.MediaListEvent;

//Content added using data provider
function onListInit(event:MediaListEvent) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({title:"Some Text", description:"More Text", path:"name.jpg", data:"name.flv"});
    myList.content = dp;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

Getting the Media List Set-up

To begin make sure that you have the Media List Component installed using the extension manager. Create a new Flash ActionScript 3.0 File and have dragged an instance of the Media List onto the stage from the Component Panel (Window > Components).

Also make sure that you give your Media List an instance name of myList in the properties panel (Window > Properties > Properties)

Event Listener for Media List Initialize

Items can only be loaded through ActionScript after the component has initialized. We do this by creating an event listener and calling a function in which we will use to add our content.

import fl.data.DataProvider;
import com.afcomponents.events.MediaListEvent;
function onListInit(event:MediaListEvent) {
//we will add data provider and content here

}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

Creating the Data Provider

Next inside of function, we need to create our data provider this is where we add all our items to.

import fl.data.DataProvider;
import com.afcomponents.events.MediaListEvent;

//Content added using data provider
function onListInit(event:MediaListEvent) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({title:"Some Text", description:"More Text", path:"name.jpg", data:"name.flv"});
    myList.content = dp;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

Adding Image to Data Provider

import fl.data.DataProvider;
import com.afcomponents.events.MediaListEvent;

//Content added using data provider
function onListInit(event:MediaListEvent) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({title:"Some Text", description:"More Text", path:"name.jpg", data:"name.flv"});
    myList.content = dp;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

Adding SWF to Data Provider

import fl.data.DataProvider;
import com.afcomponents.events.MediaListEvent;

//Content added using data provider
function onListInit(event:MediaListEvent) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({title:"Some Text", description:"More Text", path:"name.swf", data:"name.flv"});
    myList.content = dp;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

Adding a Movie Clip to Data Provider

This is a two step process. First, you need to add the item to your data provider. The path will be the class name you give the movie clip in linkage. (We go through this in the next step). The type will now change from image to instance.

import fl.data.DataProvider;
import com.afcomponents.events.MediaListEvent;

//Content added using data provider
function onListInit(event:MediaListEvent) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({title:"Some Text", description:"More Text", path:"DisplayObjectExample", data:"name.flv"});
    myList.content = dp;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

The other important step is exporting the Movie Clip for ActionScript. Now, inside of flash create you movie clip however you would like. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class as the same name you used in the XML document - DisplayObjectExample. Also make sure Export for ActionScript and Export in First Frame are both selected.

Setting Media List's Content to Data Provider

import fl.data.DataProvider;
import com.afcomponents.events.MediaListEvent;

//Content added using data provider
function onListInit(event:MediaListEvent) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({title:"Some Text", description:"More Text", path:"name.jpg", data:"name.flv"});
    myList.content = dp;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

Component Info

Media List (AS 3.0)

Knowledge Base

Forum