Progress Bars with the MovieClipLoader Class

April 29th, 2007 · 2 Comments

Using a nice loader can help keep guests entertained during the times when they will have to wait while your work is loading. Some good uses for the movieClipLoader class, or mcl, include loading thumbnails or images in a photo gallery or portfolio, or loading swfs that are used as new pages or content areas of your website.

The MovieClipLoader is a variable that will broadcast events to a listener object that you assign to the loader. This listener object has functions assigned to different event names. When the listener catches one of the broadcasted events that it has been assigned a function for (in other words: told to listen for), the assigned function will be executed.

To get started, insert a new symbol (ctrl + F8) and name it loader_mc. This will be the graphical half of your MovieClipLoader. Give loader_mc an instance name, in this case, just use loader_mc again. Inside loader_mc, create 3 layers, as in the picture below. On the top layer, create a circle. Give it a black outline to the thickness of your preference. Now select the inside of the circle and cut it (ctrl + x), be sure not to cut the outline, and then select the keyframe on your 2nd layer and paste it in place (ctrl + shift + v).

Step one of the MCL Tutorial. Shows the layout of layers and symbols.

Select the black outline and press F8 to make it a new symbol. Choose a movieclip and name it “border_mc” - no quotes. Give the outline an instance name of “border_mc” as well. Again, no quotes.

Make the 2nd layer a mask of the 3rd (right click > mask). On the bottom, or 3rd layer, draw a square large enough to cover your circle. Give it a nice gradient, or colour and then turn it into a movieclip (F8). You may give it any name you like, I named mine square_mc (because it’s a square and I turned it into a movie clip). Once you have turned the square into a movieclip, give that instance of the square an instance name, I used grad_mc (for gradient, and mc so in the code I know what type of element it is).

Next step is to make a dynamic text field in a new layer above “black_outline”. In the text field just type 100% to make sure the characters fit so you don’t get any word wrap with your numbers. This can be controlled through code, but for sake of simplicity and clean code, we won’t do that this time. Give this text field an instance name of “loader_txt” - no quotes.

Final step of the design portion of this is to embed the fonts used in your text field (loader_txt). To do this select the text field and find the embed button. Once this has been pressed a little window should come up. Select “Numerals” and “Punctuation”, then press “OK”. This step is critical, without it, your text may not show up when you compile your movieclip. You only need to include punctuation and numerals in your embed, because your text field is only going to be showing the loading percent, so numbers, and if you desire, the % sign. In the picture below, I have the fonts bolded, this caused some problems when embedding the text. If you have bold text and it does not show up, try removing the bold.

Step two of the MCL tutorial. Image shows embedding of fonts in the fla.

Right now you should have one movieclip created with the components inside. Everything is now ready for the actionscript.

Go back to your root level (Scene 1) and create a new layer for your actionscript. Give the layer the name AS or actions and lock it. We lock it so we don’t accidentally place elements on the code layer. In that code layer, add the code below. The code looks very long due to the fact that I put many comments in to explain it to you. It’s really not as bad as it looks!

 

Code (actionscript)
  1. //     Stop action to prevent the playhead from moving on.
  2. stop();// Import classes for tweening
  3. import mx.transitions.Tween;
  4. import mx.transitions.easing.*;
  5.  
  6. // Declare the listener object
  7. var oListener:Object = new Object();
  8.  
  9. /*    Assign a value to "r" for root.  Functions executed
  10. from an object (like we will be doing) lose the scope
  11. of ‘this’.  I prefer using ‘this’ rather than ‘_root’
  12. because if I were to bring this code into another .fla,
  13. I would not be able to garuntee that ‘_root’ will be what
  14. I need it to be.  It is also helpful to assign values for
  15. the loader_mc, and the textfield inside the loader.
  16. */
  17. oListener.r = this;
  18. oListener.loaderMc = this.loader_mc;
  19. oListener.loaderTxt = this.loader_mc.loader_txt;
  20. oListener.gradMc = this.loader_mc.grad_mc;
  21. oListener.borderMc = this.loader_mc.border_mc;
  22.  
  23. /*  Assign a function to the first event to listen for
  24. onLoadStart gets broadcast by the movieclip loader
  25. when the specified has begun to be loaded.
  26. */
  27. oListener.onLoadStart = function(targetMC:MovieClip):Void{
  28. //  For information on what this tween means, check out the tutorial on tweening.
  29. //    at www.SanctifiedStudios.com
  30. var loadAlphaTween:Tween = new Tween(this.loaderMc, "_alpha", Strong.easeOut, 0, 100, 2, true);
  31. }
  32.  
  33. /*  onLoadProgress gets broadcast by the movieclip loader
  34. when download progress has been made on the target.
  35. */
  36. oListener.onLoadProgress = function(targetMC:MovieClip, nLBytes:Number, nTBytes:Number):Void{
  37. // nLBytes is loaded bytes, nTBytes is total bytes to be loaded.
  38.  
  39. /*  Declare a new variable nPer (the n is the variable type.  n is for Number) the Per
  40. stands for percent.
  41. To find the percent loaded, you need to divide the loaded bytes by the total bytes.
  42. We then need to multiply it by 100, becuase this will return a decimal value.  To
  43. finish it off, we round it.  This prevents us from getting large ammounts of decimal
  44. places.
  45. */
  46. var nPer:Number = Math.round((nLBytes/nTBytes)*100);
  47. //     This refers to the oListener object, where we assigned the values for the loader mc
  48. //    as well as the textfield that we had in the loader.
  49. this.loaderTxt.text = nPer + "%"; // With the % sign.
  50.  
  51. /* remove this line to remove the % sign on your loader
  52.  
  53. this.loaderTxt.text = nPer; // Without the % sign.
  54.  
  55. remove this line as well*/
  56.  
  57. /*  Time to move the gradient up!
  58.  
  59. The Math:
  60. The _y property is the y axis (up and down) value.
  61.  
  62. "this.borderMc._height * (nPer/100)"
  63. This line finds the relative location to put the gradient clip.
  64. So if the loader has loaded 50%, it would find the pixel at the 50% point of the
  65. loader circle.  For example, if our loader is 80 pixels high, and 43% of the target
  66. has been loaded, we would put the gradient at 80 * (43/100), which = 34.4
  67.  
  68. We add the "this.borderMc._height - " to the start of the equation to make the
  69. gradient appear at the bottom and move up.  Without that part on the start of the code
  70. the gradient will move from the top down.
  71. */
  72. this.gradMc._y = this.borderMc._height - (this.borderMc._height * (nPer/100));
  73. }
  74.  
  75. /*    The final event to listen for is the onLoadInit.  This is when the item
  76. has been fully loaded and initialized on the stage.
  77. */
  78. oListener.onLoadInit = function(targetMC:MovieClip):Void{
  79. // Just some animations to get rid of the loader and transition the image on
  80. var loaderTween:Tween = new Tween(this.loaderMc, "_alpha", Strong.easeOut, 100, 0, 1.5, true);
  81. var targetTween:Tween = new Tween(targetMC, "_alpha", Strong.easeOut, 0, 100, 1.5, true);
  82. }
  83.  
  84. /*    Create the moviecliploader variable  */
  85. var mcl:MovieClipLoader = new MovieClipLoader();
  86.  
  87. /*    Assign the listener we made above to the moviecliploader.  When the mcl broadcasts events
  88. the listener will now pick them up and react.
  89. */
  90. mcl.addListener(oListener);
  91.  
  92. /*     Create a new movieclip to load the image into, and then tell the mcl to load an image.
  93. The first parameter is the path to what you are loading, the second is the target mc
  94. to load into.  Example:  mcl.loadClip(path, target_toLoadIn);
  95. */
  96. this.createEmptyMovieClip("imageHolder_mc", this.getNextHighestDepth()); // creates an empty mc
  97.  
  98. //     step2.gif is an image I have local to my fla.  Replace this with any image you desire.
  99. //    The mc we just made above will be our target.  It resides at 0,0 on the stage by default.
  100. mcl.loadClip("step2.gif", this.imageHolder_mc);
Bookmark this with: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • Slashdot
  • Furl
  • Ma.gnolia
  • NewsVine
  • Spurl
  • StumbleUpon
  • Reddit
  • Netscape
  • YahooMyWeb

Tags: Flash Tutorials · Actionscript 2.0 · Tutorials

2 responses so far Comments

  • 1 John // May 17, 2007 at 6:50 am

    Thanks I needed this.

  • 2 hb // Sep 7, 2007 at 2:36 pm

    the code didn’t help but the picture did!!!!!

Leave a Comment