Constructing a Flash Video Progress Bar.

In the above example, you can see a very simple Progress Bar in play.

It isn't really difficult to construct. 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();
nc.connect(null);

var ns:NetStream = new NetStream(nc);
myVid.attachVideo (ns);
ns.pause();

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

function checkBytesLoaded () {
amountLoaded = ns.bytesLoaded / ns.bytesTotal;
mcLoad._width = amountLoaded * 320;
}

The checkBytesLoaded function is the key. it divides the bytesLoaded property of the NetStream class by the bytesTotal property of the NetStream class. The result is given the name amountLoaded. That number is used to determine the width of the Progress Bar.

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.

The rest of the code will be for the buttons.

btnClose.onRelease = function() {
ns.close();
}

btnPlay.onRelease = function () {
ns.play("Cigars.flv");
}

Have fun.

Here's another approach to this project....

Creative Commons logo