Building a Preloader using the MovieClipLoader Class

Using the previous piece of code we can build a preloader with a progress bar and show the loaded content's percentage.
This should be all you need to know as all the other preloaders are variations of this.
If you understand how to build one, you can build your own.

Create a movie clip - preloader_mc - with:

  • a 100 frames animation movie clip inside it - bar_mc
  • a dynamic text field inside it - percentage_txt
PLAIN TEXT
Actionscript:
  1. // create an empty movie clip
  2. this.createEmptyMovieClip("my_mc", this.getNextHighestDepth());
  3.  
  4. // create the MovieClipLoader Object
  5. var mcl:MovieClipLoader = new MovieClipLoader();
  6.  
  7. // create the listener Object
  8. var listener:Object = new Object();
  9.  
  10. // get the percentage
  11. listener.onLoadProgress = function(mc:MovieClip, bl:Number, bt:Number)
  12. {
  13.     var percentage = Math.round(bl / bt * 100);
  14.     // play the animation accordingly
  15.     preloader_mc.bar_mc.gotoAndStop(percentage);
  16.     // show the percentage in the text field
  17.     preloader_mc.percentage_txt.text = percentage + "% loaded";
  18. };
  19.  
  20. // when it finishes loading
  21. listener.onLoadInit = function(mc:MovieClip)
  22. {
  23.     // remove to animation
  24.     preloader_mc.swapDepths(preloader_mc._parent.getNextHighestDepth());
  25.     preloader_mc.removeMovieClip();
  26.     // make the image draggable
  27.     mc.onPress = function()
  28.     {
  29.         this.startDrag();
  30.     }
  31.     mc.onRelease = function()
  32.     {
  33.         this.stopDrag();
  34.     }
  35. }
  36.  
  37. // load the external file:
  38. mcl.loadClip("http://www.nunomira.com/tutorials/files_mcl/" + "image.jpg?un="+new Date().getTime(), my_mc);
  39.  
  40. // add the listener to the MovieClipLoader Object
  41. mcl.addListener(listener);
  42.  
  43. // stop the progress bar animation and initialize the text
  44. preloader_mc.bar_mc.stop();
  45. preloader_mc.percentage_txt.text = "contacting server...";

Download sample .fla.

I've created two more examples.

These examples simulate loading a real website and two possible approaches:

  1. external.swf has content on the first frame. main.swf has to hide that content.
  2. external.swf has no content on the first frame. main.swf has to send the playhead to the frame with content after the file finishes loading.

Here's example 1 with the reload button.

Download sample .fla.

Comments are closed.