Creating a Progress Bar for Loading MP3 Files With ActionScript In Adobe Flash

The Following example loads several songs into a SWF file. A progress bar, created using the Drawing API, shows the loading progress. When the music starts and completes loading, information appears in the Output panel. For information on loading MP3 files, see Loading an MP3 file.

See The Tutorial Video

 

1. Create a new Flash document called loadSound.fla.

2. Select Frame 1 on the Timeline and type the following code in the Actions panel.

var pb_height:Number = 10;
var pb_width:Number = 100;
var pb:MovieClip = this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
pb.createEmptyMovieClip("bar_mc", pb.getNextHighestDepth());
pb.createEmptyMovieClip("vBar_mc", pb.getNextHighestDepth());
pb.createEmptyMovieClip("stroke_mc", pb.getNextHighestDepth());
pb.createTextField("pos_txt", pb.getNextHighestDepth(), 0, pb_height, pb_width, 22);

pb._x = 100;
pb._y = 100;

with (pb.bar_mc) {
   beginFill(0x00FF00);
   moveTo(0, 0);
   lineTo(pb_width, 0);
   lineTo(pb_width, pb_height);
   lineTo(0, pb_height);
   lineTo(0, 0);
   endFill();
   _xscale = 0;
}
with (pb.vBar_mc) {
   lineStyle(1, 0x000000);
   moveTo(0, 0);
   lineTo(0, pb_height);
}
with (pb.stroke_mc) {
   lineStyle(3, 0x000000);
   moveTo(0, 0);
   lineTo(pb_width, 0);
   lineTo(pb_width, pb_height);
   lineTo(0, pb_height);
   lineTo(0, 0);
}

var my_interval:Number;
var my_sound:Sound = new Sound();
my_sound.onLoad = function(success:Boolean) {
   if (success) {
      trace("sound loaded");
   }
};
my_sound.onSoundComplete = function() {
   clearInterval(my_interval);
   trace("Cleared interval");
}
my_sound.loadSound("http://www.helpexamples.com/flash/sound/song2.mp3", true);
my_interval = setInterval(updateProgressBar, 100, my_sound);

function updateProgressBar(the_sound:Sound):Void {
   var pos:Number = Math.round(the_sound.position / the_sound.duration * 100);
   pb.bar_mc._xscale = pos;
   pb.vBar_mc._x = pb.bar_mc._width;
   pb.pos_txt.text = pos + "%";
}

 

3. Select Control > Test Movie to load the MP3 file and watch the progress bar.

NOTE

If you test this code a second time, the image will be cached and the progress bar will complete right away. To test multiple times, use different images and load them from an external source. A local source might cause problems with testing your application because the content loads too quickly.

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.

For a sample source file that loads MP3 files, jukebox.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ComponentsAS2/Jukebox folder to access this sample. This sample demonstrates how to create a jukebox by using data types, general coding principles, and several components.

 

Note: In address http://www.helpexamples.com/flash/sound/song2.mp3, you can change to your MP3 URL.