Constructing a Flash Video Progress Bar... Part 2

In the previous example I showed you a relatively simple way of showing loading progress. In this one we use a slightly different approach to achieve the same result.

(In the above example I use a Video Object from the library that has the instance name of myVid to "hold" the video. )

  1. Create a small movie clip named "Loader".
  2. Add a rectangle that is 320 pixels wide by 5 pixels deep and fill it with a solid color or a gradient.
  3. Return to the main timeline and put the movie clip in its own layer. Give it an instance name such as mcLoad.
  4. Add an Actions layer and add the following code:

var nc:NetConnection = new NetConnection();

var ns:NetStream = new NetStream(nc);
myVid.attachVideo (ns);"Sheridans.flv")

var loaded_interval:Number = setInterval(checkBytesLoaded,100);
var amountLoaded:Number

function checkBytesLoaded () {
amountLoaded = Math.round((ns.bytesLoaded/ns.bytesTotal)* 100);
mcLoad._xscale = amountLoaded ;

As in the previous example, the checkBytesLoaded function is the key.The difference lies in how the number is obtained.

The first thing that happens is the checkBytesLoaded function will use the NetStream class as the parameter to figure out how many bytes have flowed into the video. Then, using data typing the variable amountLoaded can only be a number. The number is obtained by using the round () method of the Math class. This method simply rounds a decimal value up or down to the nearest integer.

If you do the math you can see how it works. Assume the current bytesLoaded value equals 37 and the totalBytes value is 125. The calculation would be

This value is then used to to set the ._xscale value of the progress bar to 30. This means the bar will be 30% of its width.

The Progress Bar, mcLoad, grows thanks to the setInterval function . The parameters used are the checkBytesLoaded function and a number, in milliseconds, for how often the checkBytesLoaded function is run. This means every 100 milliseconds or .1 seconds, the width of the movie clip is updated and redrawn.

Have fun.

Note: The video used in this example is a gas. I picked it up here. It is an unknown site that allows you to download the wmv, so I really can't acknowledge the source.


Creative Commons logo