FLV Streaming Video Player - Custom Flash Programming

FLV Streaming Video Player
Custom Flash Programming ~ Tutorial & Code Samples

July 27, 2010

Note:This page is a continuation of my training series regarding how to create a custom user interface for interacting with streaming FLV videos.

To go back to the beginning (Step #1) of this training series, click the following link:

<<< How Adobe Captivate 4 interacts with Adobe Flash Media Streaming Server

Step #6 - Start building a Table Of Contents (TOC)

At this point you should have several SWF files, each related to a different FLV video. Now we need to build a user interface so that the user can select which video they want to watch. Furthermore, this user interface will automatically call the next video once the current video has finished playing.

Create a new Flash FLA file (named controller.fla). For now you can save this FLA file locally on your hard drive. Modify the Flash document size to be 983px by 498px This gives us some room to the left of the video to place the TOC controls (for the user to pick which video they want to watch).

On the stage, pick a color and draw a box measuring 275px wide by 498px high. Move the box to the far left of the stage. This box will contain your TOC. The rest of the stage (to the right) will contain your streaming FLV video and playback controls.

Tip: Your controller.fla file will later be converted to a SWF file. Upon user action, controller.swf will call to (and embed) another SWF (such as vid1.swf). Therefore, the stage of controller.swf will contain vid1.swf which in turn will contain myvid1.flv

Step #7 - Finish building a Table Of Contents (TOC)

Now use the text tool to enter the word "My first video" on the stage (inside the TOC box you drew earlier). Then use the Selection Tool to right-click the text and convert it to a symbol. Give this symbol a name of Item1 and set the type to be Button. Navigate to the Properties tab and give this symbol an instance name of Item1 as well. Repeat this process to create the buttons "My second video" and "My third video". Give them symbol/instance names of Item2 and Item3 respectively.

Tip: Instead of using a single frame on the timeline to house your buttons, you could put each button in its own keyframe. Therefore, once the user clicks a button, they will be brought to that keyframe and the chosen button will remain highlighted (indicating that it is the currently selected button). This of course would require some extra AS3 programming as well.

Step #7 - Add some initial Actionscript (AS3) code

Navigate to the Actions tab. First we need to import a couple libraries so that we can use code from them.


						import flash.utils.*;
import flash.display.LoaderInfo;

Next we need to create an array to hold the names of all of our SWF files which will in-turn call the FLVs.


						var myclips:Array = ["","vid1.swf", "vid2.swf", "vid3.swf"];

Tip: By leaving the first value of the array blank "", it is easier for us to know which video we are calling in our code. For example, to call vid1.swf we would use myclips[1]

Next we need to add a Loader object which will be used later to call to each SWF. Then we put a listener onto the Loader object so that once the Loader finds the SWF, we will call the function showMovie which controls the SWF playback and positioning.


						var myloader:Loader = new Loader();
myloader.contentLoaderInfo.addEventListener(Event.INIT, showMovie);

Now we create a MovieClip object which will receive and control the SWF which was fetched by the Loader object. Then we put a listener onto the MovieClip object so that we can detect when the movie is finished playing. This tells us when we should queue the next movie. The function findEnding will queue the next movie.


						var mymovie:MovieClip = new MovieClip();
	stage.addChild(mymovie);
	mymovie.addEventListener(Event.ENTER_FRAME, findEnding);

Next we initialize some variables which will be used/discussed later.


						var lastindex:int = 0;
var playedmovie:int = 0;

Step #8 - Add functionality to your buttons

Remember that we gave our buttons the names Item1, Item2, Item3. Here we are simply enabling the buttons and applying listeners to each of them so that a function is called upon the user clicking a button. For example, when the user clicks the first button then the function my1 will be called.


						function enableEm():void {
			trace("$$$ enableEm ENABLING BOOK --> ");
		Item1.mouseEnabled = true;
		Item1.addEventListener(MouseEvent.CLICK, my1);
		Item2.mouseEnabled = true;
		Item2.addEventListener(MouseEvent.CLICK, my2);
		Item3.mouseEnabled = true;
		Item3.addEventListener(MouseEvent.CLICK, my3);
}

Tip:We use trace to help with debugging. Anything that is traced will appear in the Ouput window in Flash CS4 upon previewing the FLA as a SWF. To preview the FLA, just press Ctrl+Enter on your keyboard. Then use the Control menu to manage your file. As you manage your file you will see that the Output window dynamically displays any traced items that have been arrived at thus far. This way we are assured that certain functions have actually been called.

Step #9 - Define the functions called by the buttons

When the user clicks one of the buttons in your TOC, we will call the function loadClip to take appropriate action.


						function my1(event:MouseEvent):void {
	loadClip(1);  		
}

function my2(event:MouseEvent):void {
	loadClip(2);  		
}

function my3(event:MouseEvent):void {
	loadClip(3);  		
}

Step #10 - Define the function "loadClip"


						function loadClip(myindex:Number):void {
	trace("function loadClip has been called");			
	if (myindex > 0 && myindex < 4) {  
		SoundMixer.stopAll();  
		disableEm();  
		playedmovie = 0;  
	trace("attempting to play file " + myclips[myindex]);  
		myloader.load( new URLRequest(myclips[myindex]) );
	}else{
		enableEm();
		}	
	lastindex = myindex;	
}

1)This function is called by the user clicking a button in the TOC. Also this function is called automatically one time upon page load (to be defined later), in order to trigger the the TOC buttons to become enabled.
2) loadClip receives a variable myindex which tells it which SWF to fetch.
3)Check to see if the requested SWF (myindex) exists among the SWFs we have defined earlier in myclips array.
4)If true, then stop all current sounds.
(Note: This resolves the issue that if another video is currently playing and we load a new video, sometimes the audio from the previous video continues to play)
5)Call the function disableEm to disable all buttons in the TOC.
(Note: This resolves the issue that if the user clicks too many buttons too quickly, then potentially two videos can play at the same time and conflict with eachother)
6)Indicate that we have not yet played the currently requested movie.
(Note: This value is used later by the function findEnding)
7)Use the Loader object to call the chosen SWF (based on the SWF name found in our array)
8)If the requested SWF does not exist, then call the function enableEM to enable all of the TOC buttons, so that the user can make a valid choice.
9)Record the value of the chosen SWF. This will be used later by the function findEnding in order to determine if we have reached the final video in the series.

Step #11 - Define the function "disableEm"

This function is called by function loadClip. Here we are simply disabling the buttons so that the user cannot click on them for the time being.


						function disableEm():void {
	trace("function disableEm has been called");			
		Item1.mouseEnabled = false;
		Item2.mouseEnabled = false;
		Item3.mouseEnabled = false;
}

Step #12 - Define the function "showMovie"


						function showMovie(e:Event):void {
	trace("$$$ showMovie $$$");
	playedmovie = 1;  
	mymovie.removeEventListener(Event.ENTER_FRAME, findEnding);
	stage.removeChild(mymovie);  
	mymovie = MovieClip(myloader.content);  
	myloader.unload();
	stage.addChild(mymovie);  
	mymovie.x = 279;
	mymovie.y = 5;
	mymovie.gotoAndPlay(1);  
	mymovie.addEventListener(Event.ENTER_FRAME, findEnding);
}

1)This function is called when function loadClip tells the Loader object to load a new SWF. Remember earlier we added a listener to the Loader object myloader which calls the function showMovie upon the SWF loading.
2)Indicate that we are now playing the movie. This is used later by function findEnding which detects if the played movie is the last one in the series.
3)Remove the current listener off the Movie object. Also remove the current movie from the stage.
4)Load the new SWF into the Movie object. Also clear the Loader object at this time.
5)Add the new movie to the stage so that the user can see it.
6)Position the movie in the desired location on the stage by setting the x and y coordinates.
7)Begin playing the movie (at frame 1 of the SWF)
8)Add a listener to the Movie object so that we can detect when the movie has finished playing. (Remember that we established 3 frames in each SWF file. Every time a frame is accessed, then the findEnding function is called to determine which frame we're on and what action to take.)

Step #13 - Define the function "findEnding"


						function findEnding(e:Event):void {
	if (mymovie.currentFrame == 2) {
		myDuration();
	}
	if (mymovie.currentFrame == 3 && playedmovie == 1) {  
		if ((lastindex+1) >= myclips.length) {        
			gotoAndStop(1);								
		} else {
			while(myclips[lastindex+1] == "") {
				lastindex++;						
			}
			loadClip(lastindex+1);                    
		}
	}
}

1)This function is called by the listener on the Movie object. Every time a new frame is accessed in the SWF, this function is called.
2)If the SWF is currently on frame 2 (which is the frame that calls to the FLV file), then call function myDuration to set a delay on when the TOC buttons will be re-enabled for the user to click on.

Note:Especially for users with slow internet connections, if the current movie is taking a while to load, and the user decides to click on another button in order to load a different movie, then both movies will be loading at the same time. Eventually both movies will start playing at the same time and create an aweful audio overlay effect. Therefore we need to disable all TOC buttons until the currently chosen movie has finished loading and has begun playing for a least a couple seconds.

3)If the current movie has finished playing, and if this is the last movie in the series of SWFs that exist, then stop everything.
4)Else find the next movie in the series.
5)Then call the function loadClip in order to automatically start playing the next movie in the series.

Tip: When the final movie in the series finishes playing, if you would like the interface to loop back to the very first movie in the series and automatically start playing it, just replace the code gotoAndStop(1); with the code loadClip(1);

Step #14 - Define the function "myDuration"


						function myDuration():void {
	var mytime = mymovie.videoInstructions.playheadTime;
	trace("Playback duration: " + mytime);
	if (mytime > 1.0 && mytime < 2.0) {		
		enableEm();  
	}
}

1)This function is called by the function findEnding.
2)Via the Movie object, access the instance of the FLVPlayback object that we named videoInstructions in each of our SWFs. From this instance we are able to fetch the amount of time that the current movie has been playing.
3)If the current movie has been playing for approximately 2 seconds, then it is safe for us to re-enable the TOC buttons so that the user can choose another video to watch (if they so desire).

Step #15 - Finish up the AS3 code

Finally we call the function loadClip with a value of 0. This call occurs upon page load and is used to trigger the function enableEm the first time the user visits your site.


						loadClip(0);

For the sake of continuity, I'm including the complete code for the file controller.fla here:


									// Import the class containing the Timer object, for timed actions
import flash.utils.*;
import flash.display.LoaderInfo;

// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@  INITIALIZE ALL VARIABLES  @@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

			// Load all external movies into an array so that they can play in succession
			// Each swf contains a call to a streaming FLV from the server
			// Add blank items so that Array index number corresponds to frame number of the TOC button.  This helps to know which movie to load.
var myclips:Array = ["","vid1.swf", "vid2.swf", "vid3.swf"];

			// Create a container (loader) to hold a given movie at a time from the array
			// The loader will load the movie into the movie object
			// Add a listerner to know when the movie has finished downloading into the loader
var myloader:Loader = new Loader();
myloader.contentLoaderInfo.addEventListener(Event.INIT, showMovie);

			// Create a movie object to display the movie to the user
			// Add a listener to know when the movie has finished playing so that we can cue the next movie
var mymovie:MovieClip = new MovieClip();
	stage.addChild(mymovie);  // Initialize the object onto the stage so users can see the object
	mymovie.addEventListener(Event.ENTER_FRAME, findEnding);

			// Create a variable to track which movie was last played
var lastindex:int = 0;

			// Create a variable to know whether or not the currently chosen movie has been displayed to the user yet
var playedmovie:int = 0;

// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@  FUNCTIONS  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

			// This function recieves the users choice of movie and begins loading it
			// This function is either called by clicking an item in the Table Of Contents (TOC)
			// Or this function is called automatically after the current movie has finished playing
function loadClip(myindex:Number):void {
			trace("$$$ loadClip $$$");			
	if (myindex > 0 && myindex < 4) {  // if the requested SWF is in the range of SWFs available in our array
		SoundMixer.stopAll();  // stop all current sounds.  When navigating away from the currently playing movie, the sound continues to be heard.  This line resolves the issue.
		disableEm();  // Call custom function to disable all TOC buttons temporarily to prevent double-click which creates echo effect in audio stream
		playedmovie = 0;  // Reset the value.  The movie is still being loaded.
			trace("@@@ attempting to play file --> " + myclips[myindex]);  // All trace calls appear in the Output/Debugging window when testing/launching this controller.swf file within Flash CS4.
		myloader.load( new URLRequest(myclips[myindex]) );
	}else{
			enableEm();
		}	
	lastindex = myindex;	// Keep track of the most recent index
}

			// This function displays the movie to the user once it has finished loading
			// This function is called by the listener put on the MYLOADER object
function showMovie(e:Event):void {
			trace("$$$ showMovie $$$");
	playedmovie = 1;  // Update the value because the movie has finished loading an will be displayed to the user now
	mymovie.removeEventListener(Event.ENTER_FRAME, findEnding);
	stage.removeChild(mymovie);  // Remove the currently playing movie from the screen
	mymovie = MovieClip(myloader.content);  // Initialize the new movie
	myloader.unload();
	stage.addChild(mymovie);  // Display the new movie to the user
	mymovie.x = 279;
	mymovie.y = 5;
	mymovie.gotoAndPlay(1);  // Autoplay the movie
	mymovie.addEventListener(Event.ENTER_FRAME, findEnding);
}

			// This function determines when the currently playing movie comes to an end
			// This then cues the next movie to start loading
			// This function is called by the listener put on the MYMOVIE object
function findEnding(e:Event):void {
	if (mymovie.currentFrame == 2) {
		myDuration();
	}
	if (mymovie.currentFrame == 3 && playedmovie == 1) {  // If we've reached the end of the played movie.
		if ((lastindex+1) >= myclips.length) {        // If it is the last movie of the TOC, then loop back to the beginning of the TOC
/** UNCOMMENT THIS CODE IF YOU'D LIKE TO LOOP BACK TO THE VERY BEGINNING
			loadClip(1);                              // Load the first movie of the TOC
*/	
			gotoAndStop(1);								// The final movie has finished playing, so we go back to the very beginning and stop everything
		} else {
			while(myclips[lastindex+1] == "") {
				lastindex++;						// Skip past any empty slots in our array of videos
			}
			loadClip(lastindex+1);                    // If it is not the last movie in the TOC, then load the next movie of the TOC automatically
		}
	}
}

function myDuration():void {
	var mytime = mymovie.videoInstructions.playheadTime;
trace("Playback duration: " + mytime);
	if (mytime > 1.0 && mytime < 1.2) {		// If the movie has played for at least 1 second
		enableEm();  // Calls custom function to re-enable all TOC buttons
	}
}

			// This function temporarily disables any buttons on the screen
			// The buttons are later re-enabled by the function enableEm
			// This function is called by the funtion loadClip
function disableEm():void {
			trace("$$$ disableEm DISABLING BOOK ---> ");
		Item1.mouseEnabled = false;
		Item2.mouseEnabled = false;
		Item3.mouseEnabled = false;
}

			// This function starts the timer to trigger the listener on the MYTIMER object
			// Once the listener is triggered, the function timedAction is automatically called
			// This function is called by the funtion showMovie
function enableEm():void {
			trace("$$$ enableEm ENABLING BOOK --> ");
		Item1.mouseEnabled = true;
		Item1.addEventListener(MouseEvent.CLICK, my1);
		Item2.mouseEnabled = true;
		Item2.addEventListener(MouseEvent.CLICK, my2);
		Item3.mouseEnabled = true;
		Item3.addEventListener(MouseEvent.CLICK, my3);
}



// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@  TABLE OF CONTENTS (TOC)  @@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@


			// This function is called by the user clicking on the Book in the TOC
function my1(event:MouseEvent):void {
	loadClip(1);  		// Autoplay the first chapter in this book
}

function my2(event:MouseEvent):void {
	loadClip(2);  		// Autoplay the first chapter in this book
}

function my3(event:MouseEvent):void {
	loadClip(3);  		// Autoplay the first chapter in this book
}

			// Call loadClip initially so that it in turn calls enableEm initially
loadClip(0);

Step #16 - Try it

Click the following link to try it out!

FLV Demo

If you desire a more complex TOC (including expanding/collapsing menu system; and automatically highlighting the item in the TOC that is currently playing) just send me an email and I'll provide you with the additional code.

Step #17 - Enjoy!

I hope this tutorial has been helpful, clear, and concise. Feel free to send me feedback at the email address shown at the very top of this page. Happy coding!

Articles

click to read . . .

Services

Project Management

Full SDLC Management,
Vendor Management,
Resource Management,
Timeline Management,
Risk Management

Business Analysis

Requirements Gathering, Systems Analysis, Design, Testing, Implementation, Documentation

Application Development

Paperless Information Systems,
Point of Sale Systems,
Gift Card Systems,
Human Resource Systems,
Medical Patient Tracking,
Digital Medical Patient Charts,
Online Shopping Carts,
Smartphone Apps (Palm Pre)

Systems Administration

Computer Network Installation,
Server Maintenance & Backup, Database Management,
Computer Maintenance & Repair

Graphic Design

Websites, Logos, Brochures, Magazine Ads, Business Cards