Publishing System Settings Logout Login Register
Progressive Flash Video Player part 2
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on September 23rd, 2005
12548 views
Adobe Flash
This is part 2 of a 2 part tutorial, if you've not seen part 1 read it HERE

okey dokey.. due to some requests of different people i'm today presenting part II of the progressive video player in Flash.
Here the list of requests that I had:

  • Loader Bar, with playhead


  • XML controlled


  • Pause / Play Switch



I'm going to show you how to enhance the player we built last time with this functions mentioned above.
You can find the first part HERE



Step 1: The LoaderBar

Let us start with the Loader bar..

First of all you need to create a new layer let's name it loader. Then let's draw a rectangle with a light-grey stroke and a dark grey fill. place it underneath your videoplaceholder, and give it a size of 320px * 5px, convert this rectangle to a movieclip by pressing F8 and assign the name loader to it.

Step 1
Our newly created bar

Now let's select the loader movieclip, and go into edit mode, by double-clicking on it.
Then select the dark-gray fill and press F8 to convert it to a movieclip, assign the name loadbar to it.
I always like to keep things clean and tidy, so select the loadbar mc and press CTRL+X, create a new layer called loadbar and press CTRL+SHIFT+V to paste in place, don't forget to give the loaderbar an instancename since we are going to use it with actionscript. I've named mine loadbar.

Go back to the main stage, and what have we done till now? 2 MC's one with loadbar and one with the stroke, both together are our loader, assign this MC also a instance name, I've named mine loader ;)

Let's move on to the actionscipt part!



Step 2: The LoaderBar Actionscript

ok, now let's get down with AS, this is always my favourite part of the whole thing..
There is one thing that we need to think about first:

The loadbar should scale itself by the amount of downloaded data, this can only be accomplished by setting an interval that calls the function every certain amount of time..

So let's create an interval using the setInterval function press F1 to get more informations about this function

First we create a variable holding the interval I've named it videoInterval, then we set the Interval to call up the function videoStatus, we will create it very soon, and we tell also that the function should be called every 100milliseconds, also every 0.1second
var videoInterval = setInterval(videoStatus, 100);


Next we create a variable that will hold the amount of data that has been loaded and define it as a number.
var amountLoaded:Number;


Now it's time to create our function called videoStatus.
function videoStatus() {


Then we just need to use the already built-in functions of the netstream class to divide the bytesLoaded by the totalsize of the file. The result of this calculation will be stored in the variable amountLoaded.
amountLoaded = ns.bytesLoaded / ns.bytesTotal;


So we have now an amountloaded that should be very accurate.
we will control the width of the loadbar via actionscript for that we need to point the script to the loader mc, that contains the loadbar mc, by multiplying the amountloaded value by 320 we get a loaderbar that we assign to the width property of our mc.
loader.loadbar._width = amountLoaded * 319;
}


Ok, with this our loaderBar is done, what we need now is a something that shows, on which position our movie is.



Step 3: The Playhead & Actionscript

So you want a playhead? Let's create one quickly, I will not invest much time to make it pretty, I will just create a square and rotate it by 45� to have a diamond, just be sure to place the square in the middle of the control point of your movieclip, otherwise it will not work very well. Here a small pic to show you what I mean:
Step 3

Now go place that square into the loader mc we've created before, again please in a new layer to keep things clean.
and give that mc a instancename of playhead.

Now we need to get back to our beloved actionscript. :o)

right after the line we created declaring the variable amountloaded:number insert this line of code:
As you already noticed this is a new variable holding the duration value of the clip.
var duration:Number;


Now we will gonna use a function that is not documented on any flash book, I've found through googling around the whole night.
ns[\"onMetaData\"] = function(obj) {


Next we set our variable to receive the data of this undeclared function of the nestream class
duration = obj.duration;


and lastly we put this line of code inside our videoStatus function that will be called every 0.1sec.
We're here defining that the playheads x position is calculated by the actualtime divided by the duration of the clip, multiplied with the 320 as that is our loaderbar width.
loader.playHead._x = ns.time / duration * 320;


okkaaaayyyyy.... test your movie to see if everything is working.



Step 4: XML is too cool

yay.. you've made it to the best part of this tutorial.. one of our p2l fellows asked for a xml controlled videoplayer. Now you get it baby.

I will not dive much into XML since this is no XML tutorial, if you want to know more about it, then visit w3schools.
Let's start by creating our XML file, that will look like this:

<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>
<movies>
<movie url=\"test1.flv\" moviename=\"After Effects Falling Letters\"/>
<movie url=\"test2.flv\" moviename=\"After Effects VideoCube\"/>
<movie url=\"test3.flv\" moviename=\"Test Movie Nr.3\"/>
<movie url=\"test4.flv\" moviename=\"Test Movie Nr.4\"/>
</movies>

Don't forget to save this file in the same location as the fla and swf file otherwise you will get an error when you test the movie.

Drag a combobox component from the components window to your stage, and place it beneath the video placeholder or whereever you like. and give it a instancename of cbMovie "standing for comboboxmovie".

Let's get back to our actionscript, go to the very last line of our script and start typing :)

First we create an XML object, create a variable named playlist, assign the XML object to it, we also tell flash to ignorewhite spaces, and we finally tell flash to work on this function as soon as the object loads.

var playlist:XML = new XML ();
playlist.ignoreWhite = true;
playlist.onLoad = function () {


Now we need to create an array that holds our movies, here I've created a variable named movies that will check hold all childNodes of the XML file we've created before.
var movies:Array = this.firstChild.childNodes;


Since there is more then just one movie, and we want to build it expandily, we create a for loops that checks how many entries are in the xml file, with the property length.
for (i = 0; i < movies.length; i++) {


Good, now let's put the labels and data dynamically with actionscript. we assign labels and data with the addItem property, we always begin with the name of the label and then with the data that it's holding.
And since our xml file is based on attributes, you can just call them by using attributes.xyz
cbMovie.addItem (movies[i].attributes.moviename, movies[i].attributes.url);
}


ok, this line tells the nestream class to play the video that is selected by default, in our case the first object with the index of 0, the .data at the end is needed so it get the attribute url otherwise it would search for the labelname.. and that wouldn't work
ns.play (cbMovie.getItemAt (0).data);
}


Our function is now closed, we need to get more things to run, if you try the movie, you will see that nothing happens when you change the combobox value, that's because you didn't told flash to LISTEN to it.
So let's create a listener.

First of all we define a variable named mostList this will be an object.
var movList:Object = new Object ();


after that we tell our listener to look for changes..
movList.change = function () {


and we tell him that he should play the selected index of the combobox named cbMovie.
ns.play (cbMovie.getItemAt (cbMovie.selectedIndex).data);
}


finally we assign the listener to our combobox and pass the arguments with it.
cbMovie.addEventListener (\"change\", movList);


You thought I would forget to load the xml file? I almost did you're right :)
playlist.load (\"movies.xml\");


Now let's do a quick test to see if it works :o)



Step 6: The Buttons

Now for the buttons, this is pretty easy comparing to what we've done before, I will not go much into detail since this very self explanatory.

Basically I'm just telling that when the playbutton is released, the function should be called that pauses the movie and hides the playbutton, and then shows the pausebutton.

The Pause button is prettymuch the same, we just switch the buttons this time, play becomes visible and pause becomes hidden.

There is actually a pause function of the netstream class.. but It doesn't work as a pause function like we know.

//PlayControl
playButton.onRelease = function() {
ns.pause()
playButton._visible = false;
pauseButton._visible = true;
}
pauseButton.onRelease = function() {
ns.pause();
playButton._visible = true;
pauseButton._visible = false;
}
stopButton.onRelease = function() {
ns.close();
}


Here you can see a Live Example of what we created together.
And here you can download a ZIP file with 2 flv files and the fla file (MX2004 format)





Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
funkysoul

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top