Advanced Flash Components

Building a Video Gallery: Flow List AS3.0

Updated: Jan 9, 2008 Views: 3771

Description: This tutorial will show you how integrate the Flowlist with the FLV Player Component so that the when an item in Flow List is selected then it will play in FLV Player.

Components Used in this Tutorial: Flow List AS3.0 and FLV Player AS3.0

The Completed Project:

Components Used in this Tutorial: Flow List AS3.0 and FLV Player 3.0

Complete Code:

import com.afcomponents.flowlist.FlowListEvent;
import fl.video.VideoEvent;
import flash.events.MouseEvent;

//load first item after flow is done
function contentComplete(event:FlowListEvent) {
    myPlayer.source = myFlow.getSelectedItem().data;
    myFlow.removeEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, contentComplete);
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, contentComplete);

// load selected item
function flowItemPress(event:Object) {
    myPlayer.source = event.item.data;
}
myFlow.addEventListener(FlowListEvent.ITEM_ON_PRESS, flowItemPress);

//Selects Next Video On Video Complete
function nextMovie(event:VideoEvent) {
    myFlow.selectNextItem();
    myPlayer.source = myFlow.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);

Set-Up and Add Content Using through XM into Flow ListL

Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Flow List component using XML. Also make sure that you give your Flow list an instance name of myFlow.

Inserting FLV Player

This tutorial also requires that you also have an instance of the FLV Player on the stage as well. Add a new player on the stage and give it an instance name of myPlayer.

Plan for ActionScript

Before we begin with code, it is important to understand the few things that we want to accomplish with ActionScript.

We need a event listener for when first item is completely loaded.
To cut load time down we will use a remove event listener once the first item is loaded.
We want the FLV Player to load a new corresponding video when an item in the Flow List is clicked, we do this in the function that is being called by the mouse click event listener.
The last thing we want is when a video is completed the next item in the Flow List will play in the player, so we want to add a complete event listener that calls a function to select the next video and load that video from the XML into the player.

Set Up Player to Load Play First Video On List

Initially we want the player to play first video on the Flow List. But at same time we do not want to wait for XML to completely load. We will do this by adding a event listener to remove the event listener for item_load_complete. Now the video will play when that first item is done loading and won't continue to load the rest of the items.

//load first item after flow is done
function contentComplete(event:FlowListEvent) {
    myPlayer.source = myFlow.getSelectedItem().data;
    myFlow.removeEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, contentComplete);
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, contentComplete);

On Mouse Click Play Corresponding Video

Next, we need to write the event listener for Flow List that will select item in list and play in the FLV Player. Here we are setting the source of our video to the Data in the XML for the target item of our click.

// load selected item
function flowItemPress(event:Object) {
myPlayer.source = event.item.data;
}
myFlow.addEventListener(FlowListEvent.ITEM_ON_PRESS, flowItemPress);

When Video is Done Playing Play Next Item

Lastly we will set up a event listener that tells Flow List to select and play next item when FLV Player is done playing previous video.

//Selects Next Video On Video Complete
function nextMovie(event:VideoEvent) {
myFlow.selectNextItem();
myPlayer.source = myFlow.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);

AFComponents.com