FLV Streaming Video Player
Custom Flash Programming ~ Tutorial & Code Samples |
July 27, 2010 |
|
|
|
|
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! |
|