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 animation for loading SWF and image files

Creating a progress animation for loading SWF and image files

When you load large SWF or image files into an application, you might want to create an animation that shows the loading progress. You might create a progress bar that shows increases as the animation loads. You might also create an animation that changes as the file loads. For information on loading SWF and image files, see Loading external SWF and image files.

The following example shows how to use the MovieClipLoader class and the Drawing API to show the loading progress of an image file.

To create a progress bar for loading image or SWF files:

1. Create a new Flash document called loadImage.fla.
2. Select Modify > Document, and type 700 into the width text box and 500 into the height text box to change the document's dimensions.
3. Select Frame 1 of the Timeline, and then type the following code in the Actions panel:

   //create clips to hold your content
   this.createEmptyMovieClip("progressBar_mc", 0);
   progressBar_mc.createEmptyMovieClip("bar_mc", 1);
   progressBar_mc.createEmptyMovieClip("stroke_mc", 2);
   //use drawing methods to create a progress bar
   with (progressBar_mc.stroke_mc) {
      lineStyle(0, 0x000000);
      moveTo(0, 0);
      lineTo(100, 0);
      lineTo(100, 10);
      lineTo(0, 10);
      lineTo(0, 0);
   }
   with (progressBar_mc.bar_mc) {
      beginFill(0xFF0000, 100);
      moveTo(0, 0);
      lineTo(100, 0);
      lineTo(100, 10);
      lineTo(0, 10);
      lineTo(0, 0);
      endFill();
      _xscale = 0;
   }
   progressBar_mc._x = 2;
   progressBar_mc._y = 2;
   // load progress
   var mclListener:Object = new Object();
   mclListener.onLoadStart = function(target_mc:MovieClip) {
      progressBar_mc.bar_mc._xscale = 0;
   };
   mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
      progressBar_mc.bar_mc._xscale = Math.round(bytesLoaded/bytesTotal*100);
   };
   mclListener.onLoadComplete = function(target_mc:MovieClip) {
      progressBar_mc.removeMovieClip();
   };
   mclListener.onLoadInit = function(target_mc:MovieClip) {
      target_mc._height = 500;
      target_mc._width = 700;
   };
   //Create a clip to hold the image.
   this.createEmptyMovieClip("image_mc", 100);
   var image_mcl:MovieClipLoader = new MovieClipLoader();
   image_mcl.addListener(mclListener);
   /* Load the image into the clip.
   You can change the following URL to a SWF or another image file. */
   image_mcl.loadClip("http://www.helpexamples.com/flash/images/gallery1/images/pic3.jpg", image_mc);
   

4. Select Control > Test Movie to see the image load 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 samples of photo gallery applications, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/Galleries folder to access these samples:

• gallery_tree.fla
• gallery_tween.fla

These samples provide information on how to use ActionScript to control movie clips dynamically while loading image files into a SWF file.

Flash CS3