Creating a progress bar for loading FLV files with ActionScript

You can create a progress bar to display the loading progress of an FLV file. For information on loading FLV files into a SWF file, see Preloading FLV files. For other information about FLV files and Flash, see About using FLV video.

The following example uses the Drawing API to create a progress bar. The example also uses the bytesLoaded and bytesTotal properties to show the loading progress of video1.flv into the video object instance called my_video. The loaded_txt text field is dynamically created to show information about the loading progress.

To create a progress bar that shows loading progress:

Create a new FLA file called flvProgress.fla.
In the Library panel (Window > Library), select New Video from the Library
pop-up menu.
In the Video Properties dialog box, name the video symbol and select Video (ActionScript controlled).
Click OK to create a video object.
Drag the video object from the Library panel to the Stage to create a video object instance.
With the video object selected on the Stage, type my_video in the Instance Name text box in the Property inspector (Window > Properties > Properties).
With the video instance selected, type 320 into the width text box and 213 into the height text box.

Select Frame 1 in the Timeline and type the following code in the Actions panel:

var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
my_video.attachVideo(stream_ns);
stream_ns.play("http://www.helpexamples.com/flash/video/typing_short.flv");

this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 160, 22);
this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
with (progressBar_mc.bar_mc) {
   beginFill(0xFF0000);
   moveTo(0, 0);
   lineTo(100, 0);
   lineTo(100, 10);
   lineTo(0, 10);
   lineTo(0, 0);
   endFill();
   _xscale = 0;
}
progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
with (progressBar_mc.stroke_mc) {
   lineStyle(0, 0x000000);
   moveTo(0, 0);
   lineTo(100, 0);
   lineTo(100, 10);
   lineTo(0, 10);
   lineTo(0, 0);
}

var loaded_interval:Number = setInterval(checkBytesLoaded, 500, stream_ns);
function checkBytesLoaded(my_ns:NetStream) {
   var pctLoaded:Number = Math.round(my_ns.bytesLoaded / my_ns.bytesTotal * 100);
   loaded_txt.text = Math.round(my_ns.bytesLoaded / 1000) + " of " + Math.round(my_ns.bytesTotal / 1000) + " KB loaded (" + pctLoaded + "%)";
   progressBar_mc.bar_mc._xscale = pctLoaded;
   if (pctLoaded>=100) {
      clearInterval(loaded_interval);
   }
}

Select Control > Test Movie to test your code.

The video loads and an animating bar and changing text values communicate the loading progress. If these elements overlap your video, move the video object on the Stage. You can customize the color of the progress bar by modifying beginFill and lineStyle in previous code snippet.

NOTE

If your progress bar loads instantly, the video is cached on your hard disk (either from testing this example already, or loading it in a different procedure). If this occurs, upload a FLV file to your server and load it instead.

For a sample source file that uses scripted animation to create a progress bar animation, tweenProgress.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/Tween Progressbar folder to access this sample.