How To Creating a Progress Animation For Loading SWF and Image Files ~ design

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 images files.

See The Tutorial Videos

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

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: