Integrating Media List With Components: FLV Player
Updated: Jan 28, 2008
Views: 4179
Description: This tutorial will show you how to use the Media List as a Navigation for the FLV Player.
Components Used in this Tutorial: Media List AS3.0 and FLV Player (AS 3.0) Basic Skins.
The Completed Project:
Complete Code:
Set-Up and Add Content Using XML
Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Media List component using XML. Also make sure that you give your Media List an instance name of myList. Your preview images for the Media List should be stored in Path and the video (flv) should be stored in Data.
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.
As discussed in our plan our first step is to wait for the component to initialize and then calling a function that will add our mouse event listeners for click.
Set up Player to Automatically Load First Video from Media List
We also want our initially selected item's video to start playing on load. We do this in the same function that is called on initialization. We set the source of our video player to the path to the video that is stored in Data in the XML for this first item.
On Mouse Click Play Corresponding Video
Next, we need to write the function that is called in the previous code for the mouse click event listener. Here we are setting the source of our video to the Data in the XML for the target item of our click.
}
On Video Complete Play next Video in Media List
Lastly, we need to add an event listener for when a video in our player has completed and then call a function that selects the next item in the Media List and plays the video that is stored as this Item's Data in the XML document.
The Completed Project:
Complete Code:
import com.afcomponents.events.MediaListEvent;
import flash.events.MouseEvent;
import fl.video.VideoEvent;
//Handle List Load
function onListInit(event:MediaListEvent) {
myPlayer.source = myList.getItemAt(0).data;
myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);
//Hand Mouse Click
function onListItemSelected (event:MouseEvent) {
myPlayer.source = event.target.data;
}
// play next item on complete
function onPlayerComplete(event:VideoEvent) {
myList.selectNextItem();
myPlayer.source = myList.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, onPlayerComplete);
import flash.events.MouseEvent;
import fl.video.VideoEvent;
//Handle List Load
function onListInit(event:MediaListEvent) {
myPlayer.source = myList.getItemAt(0).data;
myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);
//Hand Mouse Click
function onListItemSelected (event:MouseEvent) {
myPlayer.source = event.target.data;
}
// play next item on complete
function onPlayerComplete(event:VideoEvent) {
myList.selectNextItem();
myPlayer.source = myList.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, onPlayerComplete);
Set-Up and Add Content Using XML
Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Media List component using XML. Also make sure that you give your Media List an instance name of myList. Your preview images for the Media List should be stored in Path and the video (flv) should be stored in Data.
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.
- Since mouse event listeners for the items in Media List have to be added after the component initializes, we first want to add an event listener for when the component initializes that calls a function that adds the mouse event listeners for click.
- We also want to an initial video to play on load, and we want to add this inside the function that is called on initialization
- We want the FLV Player to load a new corresponding video when an item in the Media 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 Media List's video is played, 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.
As discussed in our plan our first step is to wait for the component to initialize and then calling a function that will add our mouse event listeners for click.
import com.afcomponents.events.MediaListEvent;
import flash.events.MouseEvent;
//Handle List Load
function onListInit(event:MediaListEvent) {
myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
//Where we will set the player source to load the first video
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);
import flash.events.MouseEvent;
//Handle List Load
function onListInit(event:MediaListEvent) {
myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
//Where we will set the player source to load the first video
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);
Set up Player to Automatically Load First Video from Media List
We also want our initially selected item's video to start playing on load. We do this in the same function that is called on initialization. We set the source of our video player to the path to the video that is stored in Data in the XML for this first item.
//Handle List Load
function onListInit(event:MediaListEvent) {
myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
myPlayer.source = myList.getItemAt(0).data;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);
function onListInit(event:MediaListEvent) {
myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
myPlayer.source = myList.getItemAt(0).data;
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);
On Mouse Click Play Corresponding Video
Next, we need to write the function that is called in the previous code for the mouse click event listener. Here we are setting the source of our video to the Data in the XML for the target item of our click.
//Hand Mouse Click
function onListItemSelected (event:MouseEvent) {
myPlayer.source = event.target.data;
function onListItemSelected (event:MouseEvent) {
myPlayer.source = event.target.data;
}
On Video Complete Play next Video in Media List
Lastly, we need to add an event listener for when a video in our player has completed and then call a function that selects the next item in the Media List and plays the video that is stored as this Item's Data in the XML document.
// play next item on complete
function onPlayerComplete(event:VideoEvent) {
myList.selectNextItem();
myPlayer.source = myList.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, onPlayerComplete);
function onPlayerComplete(event:VideoEvent) {
myList.selectNextItem();
myPlayer.source = myList.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, onPlayerComplete);
Other Tutorials
