Preloading using the MovieClipLoader Class

What do I need to preload an external file using the MovieClipLoader Class?

  • a MovieClipLoader Object
  • the loadClip() method
  • a listener Object
  • at least the onLoadInit() or onLoadComplete() method
  • other useful methods such as the onLoadStart() and onLoadProgress()

Now we'll use a Listener. This Object listens / watches all the steps and progress related to loading the external file. It can warn you when the file starts loading, what's its size and how many bytes have loaded already; When it has finished loading, when you can control it and even if there's an error.

We'll always use the same image:

PLAIN TEXT
Actionscript:
  1. var url:String;
  2. url =  "http://www.nunomira.com/tutorials/files_mcl/image1.jpg";

but feel free to use a different one such as

PLAIN TEXT
Actionscript:
  1. var url:String;
  2. url =  "http://www.helpexamples.com/flash/images/image1.jpg";

The basic example is:

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. // when the image finishes loading
  11. listener.onLoadInit = function(mc:MovieClip)
  12. {
  13.     trace ("external file loaded!");
  14. }
  15.  
  16. // load the external file:
  17. mcl.loadClip(url, my_mc);
  18.  
  19. // add the listener to the MovieClipLoader Object
  20. mcl.addListener(listener);

Done! We've just preloaded a file.

Now that we can preload an external file, we can also fade it, resize it, make it clickable, etc.... We can control it as we wish!

Fade:

PLAIN TEXT
Actionscript:
  1. listener.onLoadInit = function(mc:MovieClip)
  2. {
  3.     mc._alpha = 50;
  4. }

Resize:

PLAIN TEXT
Actionscript:
  1. listener.onLoadInit = function(mc:MovieClip)
  2. {
  3.     mc._xscale = 30;
  4.     mc._yscale = 30;
  5. }

Convert to button:

PLAIN TEXT
Actionscript:
  1. listener.onLoadInit = function(mc:MovieClip)
  2. {
  3.     mc.onRelease = function()
  4.     {
  5.         trace ("I'm a button!");
  6.     }
  7. }

Now that we already know how to take advantage of the loaded file, lets see how to use the percentage while it's loading:

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 and output it
  11. listener.onLoadProgress = function(mc:MovieClip, bl:Number, bt:Number)
  12. {
  13.     var percentage = Math.round(bl / bt * 100);
  14.     trace(percentage);
  15. };
  16.  
  17. // when it finishes loading
  18. listener.onLoadComplete = function(mc:MovieClip)
  19. {
  20.     trace("finished loading!");
  21. }
  22.  
  23. // load the external file:
  24. url += "?un="+new Date().getTime(); // add cache killer
  25. mcl.loadClip(url, my_mc);
  26.  
  27. // add the listener to the MovieClipLoader Object
  28. mcl.addListener(listener);

And that's it. Using onLoadProgress() we have what it takes to start dreaming about an animated preloader.
Extracting the percentage from this method is accomplished with a single line of code:

PLAIN TEXT
Actionscript:
  1. var percentage = Math.round(bl / bt * 100);

Comments are closed.