Integrating Flowlist 3.0 with Components: FLV Player
Updated: Jan 4, 2008
Views: 2007
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:
Set-Up and Add Content Using through XML
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.
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.
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.
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.
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);
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 XML
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.
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);
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);
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);
function nextMovie(event:VideoEvent) {
myFlow.selectNextItem();
myPlayer.source = myFlow.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);
Other Tutorials
