Custom Preloader with RSL Support


/ Published in: ActionScript 3
Save to your folder(s)



Copy this code and paste it in your HTML
  1. package
  2. {
  3. import flash.display.MovieClip;
  4. import flash.display.Sprite;
  5. import flash.events.Event;
  6. import flash.events.ProgressEvent;
  7.  
  8. import mx.events.FlexEvent;
  9. import mx.events.RSLEvent;
  10. import mx.preloaders.DownloadProgressBar;
  11.  
  12. /**
  13.   * This class extends the lightweight DownloadProgressBar class. This class
  14.   * uses an embedded Flash 8 MovieClip symbol to show preloading.
  15.   * For handling both, SWF and RSL download, it separated its download progress
  16.   * by handling the appropriate events, i.e. RSLEvent
  17.   *
  18.   * @author jessewarden
  19.   * @author Bernhard Hirschmann (http://coding.bhirschmann.de)
  20.   */
  21. public class Preloader extends DownloadProgressBar
  22. {
  23.  
  24. /**
  25.   * The Flash 8 MovieClip embedded as a Class.
  26.   */
  27. [Embed(source="../assets/flash/preloader.swf", symbol="Preloader")]
  28. private var FlashPreloaderSymbol:Class;
  29.  
  30. private var clip:MovieClip;
  31.  
  32. private var isRslDownloading:Boolean = false;
  33.  
  34. private var rslPercent:Number = 0;
  35. private var swfPercent:Number = 0;
  36.  
  37. private var rslBytesTotal:Number;
  38. private var rslBytesLoaded:Number = 0;
  39.  
  40. private var swfBytesTotal:Number;
  41. private var swfBytesLoaded:Number = 0;
  42.  
  43. public function Preloader()
  44. {
  45. super();
  46.  
  47. // instantiate the Flash MovieClip, show it, and stop it.
  48. // Remember, AS2 is removed when you embed SWF's,
  49. // even "stop();", so you have to call it manually if you embed.
  50. clip = new FlashPreloaderSymbol();
  51. addChild(clip);
  52. clip.gotoAndStop("start");
  53. }
  54.  
  55. public override function set preloader(preloader:Sprite):void
  56. {
  57. trace("starting...");
  58.  
  59. // runtime shared library
  60. preloader.addEventListener( RSLEvent.RSL_PROGRESS, onRSLDownloadProgress );
  61. preloader.addEventListener( RSLEvent.RSL_COMPLETE, onRSLDownloadComplete );
  62. preloader.addEventListener( RSLEvent.RSL_ERROR, onRSLError );
  63.  
  64. // application
  65. preloader.addEventListener( ProgressEvent.PROGRESS, onSWFDownloadProgress );
  66. preloader.addEventListener( Event.COMPLETE, onSWFDownloadComplete );
  67.  
  68. // initialization
  69. preloader.addEventListener( FlexEvent.INIT_PROGRESS, onFlexInitProgress );
  70. preloader.addEventListener( FlexEvent.INIT_COMPLETE, onFlexInitComplete );
  71.  
  72. clip.preloader.rsl_amount_txt.text = clip.preloader.app_amount_txt.text = "0%";
  73.  
  74. centerPreloader();
  75. }
  76.  
  77. /**
  78.   * Makes sure that the preloader is centered in the center of the app.
  79.   *
  80.   */
  81. private function centerPreloader():void
  82. {
  83. x = (stageWidth / 2) - (clip.width / 2);
  84. y = (stageHeight / 2) - (clip.height / 2);
  85. }
  86.  
  87. /**
  88.   * Updates the progress bar.
  89.   */
  90. private function updateProgress():void
  91. {
  92. var p:Number = Math.round( (rslPercent + swfPercent) / 2 );
  93. clip.preloader.gotoAndStop(p);
  94. }
  95.  
  96. /**
  97.   * As the RSL (runime shared library) (frame 2 usually) downloads, this event gets called.
  98.   * You can use the values from this event to update your preloader.
  99.   * @param event
  100.   *
  101.   */
  102. private function onRSLDownloadProgress( event:ProgressEvent ):void
  103. {
  104. isRslDownloading = true;
  105.  
  106. rslBytesTotal = event.bytesTotal;
  107. rslBytesLoaded = event.bytesLoaded;
  108. rslPercent = Math.round( (rslBytesLoaded / rslBytesTotal) * 100);
  109. trace("onRSLDownloadProgress: rslBytesLoaded " + rslBytesLoaded);
  110. trace("onRSLDownloadProgress: rslBytesTotal " + rslBytesTotal);
  111. trace("onRSLDownloadProgress: " + rslPercent + "%");
  112. clip.preloader.rsl_amount_txt.text = String(rslPercent) + "%";
  113.  
  114. updateProgress();
  115. }
  116.  
  117. /**
  118.   * When the download of frame 2
  119.   * is complete, this event is called.
  120.   * This is called before the initializing is done.
  121.   * @param event
  122.   *
  123.   */
  124. private function onRSLDownloadComplete( event:RSLEvent ):void
  125. {
  126. trace("onRSLDownloadComplete: 100% - bytes total: " + event.bytesTotal);
  127. clip.preloader.gotoAndStop(100);
  128. clip.preloader.rsl_amount_txt.text = "100%";
  129. rslPercent = 100;
  130. }
  131.  
  132. private function onRSLError( event:RSLEvent ):void
  133. {
  134. trace("onRSLError: " + event.errorText + " - " + event.url);
  135. clip.preloader.status_txt.text = event.errorText;
  136. }
  137.  
  138. /**
  139.   * As the SWF (frame 2 usually) downloads, this event gets called.
  140.   * You can use the values from this event to update your preloader.
  141.   * @param event
  142.   *
  143.   */
  144. private function onSWFDownloadProgress( event:ProgressEvent ):void
  145. {
  146. swfBytesTotal = event.bytesTotal;
  147. swfBytesLoaded = event.bytesLoaded;
  148.  
  149. if ( isRslDownloading ) {
  150. // as soon as RSL starts downloading the SWF data are added by the RSL values
  151. swfBytesTotal -= rslBytesTotal;
  152. swfBytesLoaded -= rslBytesLoaded;
  153. }
  154. swfPercent = Math.round( (swfBytesLoaded / swfBytesTotal) * 100);
  155. trace("onSWFDownloadProgress: " + swfPercent + "%");
  156. trace("onSWFDownloadProgress: swfBytesLoaded " + swfBytesLoaded);
  157. trace("onSWFDownloadProgress: swfBytesTotal " + swfBytesTotal);
  158. clip.preloader.app_amount_txt.text = String(swfPercent) + "%";
  159.  
  160. updateProgress();
  161. }
  162.  
  163. /**
  164.   * When the download of frame 2
  165.   * is complete, this event is called.
  166.   * This is called before the initializing is done.
  167.   * @param event
  168.   *
  169.   */
  170. private function onSWFDownloadComplete( event:Event ):void
  171. {
  172. trace("onSWFDownloadComplete: 100%");
  173. clip.preloader.gotoAndStop(100);
  174. clip.preloader.app_amount_txt.text = "100%";
  175. swfPercent = 100;
  176. }
  177.  
  178. /**
  179.   * When Flex starts initilizating your application.
  180.   * @param event
  181.   *
  182.   */
  183. private function onFlexInitProgress( event:FlexEvent ):void
  184. {
  185. //trace("onFlexInitProgress: Initializing...");
  186. try {
  187. clip.preloader.gotoAndStop(100);
  188. clip.preloader.status_txt.text = "Initializing...";
  189. }
  190. catch (e:Error) {
  191. }
  192. }
  193.  
  194. /**
  195.   * When Flex is done initializing, and ready to run your app,
  196.   * this function is called.
  197.   *
  198.   * You're supposed to dispatch a complete event when you are done.
  199.   * I chose not to do this immediately, and instead fade out the
  200.   * preloader in the MovieClip. As soon as that is done,
  201.   * I then dispatch the event. This gives time for the preloader
  202.   * to finish it's animation.
  203.   * @param event
  204.   *
  205.   */
  206. private function onFlexInitComplete( event:FlexEvent ):void
  207. {
  208. trace("onFlexInitComplete");
  209. clip.addFrameScript(21, onDoneAnimating);
  210. clip.gotoAndPlay("fade out");
  211. }
  212.  
  213. /**
  214.   * If the Flash MovieClip is done playing it's animation,
  215.   * I stop it and dispatch my event letting Flex know I'm done.
  216.   * @param event
  217.   *
  218.   */
  219. private function onDoneAnimating():void
  220. {
  221. trace("onDoneAnimating");
  222. clip.stop();
  223. dispatchEvent( new Event( Event.COMPLETE ) );
  224. }
  225.  
  226. }
  227. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.