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.

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

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.

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.

Next we initialize some variables which will be used/discussed later.
 
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.

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.
 
Step #10 - Define the function "loadClip"
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.
 
Step #12 - Define the function "showMovie"
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"
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"
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.

For the sake of continuity, I'm including the complete code for the file controller.fla here:
 
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