Integrating Grid With Components: FLV Player
Updated: Dec 31, 2007
Views: 1625
Description: This tutorial will show you how to use the Grid as a Navigation for the FLV Player.
Components Used in this Tutorial: Grid 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 Grid component using XML. Also make sure that you give your Grid an instance name of myGrid. Your preview images for the Grid should be stored in Path and the video (flv) should be stored in Data.
These 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 Grid
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 Grid
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 Grid and plays the video that is stored as this Item's Data in the XML document.
Extend the Grid to Include More then One Page of Videos
A very nice feature of the Grid is that it can organize a large collection of videos and has built in paging features. In our example we only show one page of video but you could have multiple pages. See this tutorial on adding Next and Last Page Buttons.
The Completed Project:
Complete Code:
import fl.video.VideoEvent;
import flash.events.MouseEvent;
import com.afcomponents.events.GridEvent;
//After XML Loads add Click event and select first video
function loadComplete(event:GridEvent){
myGrid.addGenericItemEventListener(MouseEvent.CLICK, playOnClick);
myPlayer.source = myGrid.getSelectedItem().data;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);
//Switches Video when Item is Clicked
function playOnClick(event:MouseEvent) {
myPlayer.source = event.target.data;
}
//Selects Next Video On Video Complete
function nextMovie(event:VideoEvent) {
myGrid.selectNextItem();
myPlayer.source = myGrid.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);
import flash.events.MouseEvent;
import com.afcomponents.events.GridEvent;
//After XML Loads add Click event and select first video
function loadComplete(event:GridEvent){
myGrid.addGenericItemEventListener(MouseEvent.CLICK, playOnClick);
myPlayer.source = myGrid.getSelectedItem().data;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);
//Switches Video when Item is Clicked
function playOnClick(event:MouseEvent) {
myPlayer.source = event.target.data;
}
//Selects Next Video On Video Complete
function nextMovie(event:VideoEvent) {
myGrid.selectNextItem();
myPlayer.source = myGrid.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);
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 Grid component using XML. Also make sure that you give your Grid an instance name of myGrid. Your preview images for the Grid should be stored in Path and the video (flv) should be stored in Data.
These 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 Grid 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 Grid is click, 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 grid's video is 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.
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 flash.events.MouseEvent;
import com.afcomponents.events.GridEvent;
//After XML Loads add Click event and select first video
function loadComplete(event:GridEvent){
myGrid.addGenericItemEventListener(MouseEvent.CLICK, playOnClick);
myPlayer.source = myGrid.getSelectedItem().data;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);
import com.afcomponents.events.GridEvent;
//After XML Loads add Click event and select first video
function loadComplete(event:GridEvent){
myGrid.addGenericItemEventListener(MouseEvent.CLICK, playOnClick);
myPlayer.source = myGrid.getSelectedItem().data;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);
Set up Player to Automatically Load First Video from Grid
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.
//After XML Loads add Click event and select first video
function loadComplete(event:GridEvent){
myGrid.addGenericItemEventListener(MouseEvent.CLICK, playOnClick);
myPlayer.source = myGrid.getSelectedItem().data;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);
function loadComplete(event:GridEvent){
myGrid.addGenericItemEventListener(MouseEvent.CLICK, playOnClick);
myPlayer.source = myGrid.getSelectedItem().data;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);
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.
//Switches Video when Item is Clicked
function playOnClick(event:MouseEvent) {
myPlayer.source = event.target.data;
}
function playOnClick(event:MouseEvent) {
myPlayer.source = event.target.data;
}
On Video Complete Play next Video in Grid
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 Grid and plays the video that is stored as this Item's Data in the XML document.
import fl.video.VideoEvent;
//Selects Next Video On Video Complete
function nextMovie(event:VideoEvent) {
myGrid.selectNextItem();
myPlayer.source = myGrid.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);
//Selects Next Video On Video Complete
function nextMovie(event:VideoEvent) {
myGrid.selectNextItem();
myPlayer.source = myGrid.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);
Extend the Grid to Include More then One Page of Videos
A very nice feature of the Grid is that it can organize a large collection of videos and has built in paging features. In our example we only show one page of video but you could have multiple pages. See this tutorial on adding Next and Last Page Buttons.
Other Tutorials
