Advanced Flash Components

Integrating Stack With Components: FLV Player

Updated: Jan 16, 2008 Views: 1399

Description: This tutorial will show you how to use the Stack AS3.0 component as a navigation for the FLV Player.

Components Used in this Tutorial: Stack AS3.0 and FLV Player (AS 3.0) Basic Skins.

The Completed Project:

Complete Code:

import com.afcomponents.events.StackEvent;
import fl.video.VideoEvent;
import flash.events.MouseEvent;

//load first item after Stack is done
function contentComplete(event:Event) {
    for (var i:Number = 0; i<=myStack.length-1; i++) {
        myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
    }
    myPlayer.source = myStack.getSelectedItem().data;
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentComplete);

// load selected item
function itemClick(event:MouseEvent) {
    myPlayer.source = event.target.data;
}

//Selects Next Video On Video Complete
function nextMovie(event:VideoEvent) {
    myStack.selectNextItem();
    myPlayer.source = myStack.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 Stack component using XML. Also make sure that you give your Stack an instance name of myStack. Your preview images for the Stack should be stored in Path and the video (flv) should be stored in Data.

Creating a Dynamic Text Field

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 Stack 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 Stack is clicked, we do this in the function that is being called by the mouse click event listeners.
The last thing we want is when a video is completed the next item in the Stack'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.

XML Load complete

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.StackEvent;
import flash.events.MouseEvent;

//load first item after Stack is done
function contentComplete(event:Event) {
    for (var i:Number = 0; i<=myStack.length-1; i++) {
        myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
    }
    //Where we set the player source to initial video
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentComplete);

Set up Player to Automatically Load First Video from Stack

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.

import com.afcomponents.events.StackEvent;
import flash.events.MouseEvent;

//load first item after Stack is done
function contentComplete(event:Event) {
    for (var i:Number = 0; i<=myStack.length-1; i++) {
        myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
    }
    myPlayer.source = myStack.getSelectedItem().data;
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentComplete);

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.

// load selected item
function itemClick(event:MouseEvent) {
myPlayer.source = event.target.data;
}

On Video Complete Play next Video in Stack

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 Stack 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) {
myStack.selectNextItem();
myPlayer.source = myStack.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, nextMovie);

Component Info

Stack (AS 3.0)

Knowledge Base

Forum