Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Working with Images, Sound, and Video > About creating progress animations for media files > Creating a progress bar for loading MP3 files with ActionScript

Creating a progress bar for loading MP3 files with ActionScript

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.

To create a progress bar for loading MP3 files:

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 more information on using sound, see the Sound class entry, Sound, in the ActionScript 2.0 Language Reference.

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.

Flash CS3