Posted By

LeeProbert on 04/15/10


Tagged

preloader sprite IPreloaderDisplay


Versions (?)

Custom preloader for Flex


 / Published in: ActionScript 3
 

Here's a simple way to create a custom preloader for Flex apps. It extends the Sprite class and implements IPreloaderDisplay and loads in an asset from a SWC of a MovieClip that you can use as an animation and display the load progress.

  1. package com.cravens.nr.preloader
  2. {
  3. import com.cravens.nr.model.Config;
  4.  
  5. import flash.display.GradientType;
  6. import flash.display.Sprite;
  7. import flash.events.Event;
  8. import flash.events.ProgressEvent;
  9. import flash.events.TimerEvent;
  10. import flash.geom.Matrix;
  11. import flash.utils.Timer;
  12.  
  13. import mx.events.FlexEvent;
  14. import mx.preloaders.IPreloaderDisplay;
  15.  
  16. public class NRPreloader extends Sprite implements IPreloaderDisplay
  17. {
  18. protected var loadingPanel:BusyPanel;
  19. protected var timer:Timer;
  20.  
  21. public function NRPreloader()
  22. {
  23. super();
  24. }
  25. //------------------------------------------------------------------------------
  26. public function set preloader(preloader:Sprite):void
  27. {
  28. preloader.addEventListener(ProgressEvent.PROGRESS, handleProgress);
  29. preloader.addEventListener(Event.COMPLETE, handleComplete);
  30.  
  31. preloader.addEventListener(FlexEvent.INIT_PROGRESS, handleInitProgress);
  32. preloader.addEventListener(FlexEvent.INIT_COMPLETE, handleInitComplete);
  33. }
  34. //------------------------------------------------------------------------------
  35. public function initialize():void
  36. {
  37. var matrix:Matrix = new Matrix(0,1,1,0,0,0);
  38.  
  39. graphics.beginGradientFill(GradientType.LINEAR,[0x000000,0x89265a],[1,1],[125,205],matrix);
  40. graphics.drawRect(0,0,Config.VIEWPORT_WIDTH,Config.VIEWPORT_HEIGHT);
  41.  
  42. loadingPanel = new BusyPanel();
  43.  
  44. try
  45. {
  46. loadingPanel.heading_txt.text = "LOADING ... PLEASE WAIT";
  47. loadingPanel.message_txt.text = "0/100%";
  48. }
  49. catch(e:Error)
  50. {
  51. throw new Error("Asset does not contain the relevant textField objects");
  52. }
  53. finally
  54. {
  55. loadingPanel.x = Config.VIEWPORT_CENTER_X-150;
  56. loadingPanel.y = Config.VIEWPORT_CENTER_Y;
  57.  
  58. addChild(loadingPanel);
  59. }
  60. }
  61.  
  62.  
  63. //------------------------------------------------------------------------------
  64. // Define empty event listeners.
  65. private function handleProgress(event:ProgressEvent):void
  66. {
  67. var prog:Number = Math.ceil((event.bytesLoaded/event.bytesTotal)*100);
  68.  
  69. loadingPanel.message_txt.text = prog+"/100%";
  70. }
  71. //------------------------------------------------------------------------------
  72. private function handleComplete(event:Event):void
  73. {
  74. loadingPanel.message_txt.text = "LAUNCHING";
  75. }
  76. //------------------------------------------------------------------------------
  77. private function handleInitProgress(event:FlexEvent):void
  78. {
  79. }
  80. //------------------------------------------------------------------------------
  81. private function handleInitComplete(event:Event):void
  82. {
  83. timer = new Timer(500,1);
  84. timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
  85. timer.start();
  86. }
  87.  
  88. //------------------------------------------------------------------------------
  89. private function dispatchComplete(event:TimerEvent):void
  90. {
  91. timer.removeEventListener(TimerEvent.TIMER, dispatchComplete);
  92. timer = null;
  93. dispatchEvent(new Event(Event.COMPLETE));
  94. }
  95.  
  96. //------------------------------------------------------------------------------
  97. // Implement IPreloaderDisplay interface
  98.  
  99. public function get backgroundColor():uint
  100. {
  101. return 0;
  102. }
  103. //------------------------------------------------------------------------------
  104. public function set backgroundColor(value:uint):void
  105. {
  106.  
  107. }
  108. //------------------------------------------------------------------------------
  109. public function get backgroundAlpha():Number
  110. {
  111. return 0;
  112. }
  113. //------------------------------------------------------------------------------
  114. public function set backgroundAlpha(value:Number):void
  115. {
  116. }
  117. //------------------------------------------------------------------------------
  118. public function get backgroundImage():Object
  119. {
  120. return undefined;
  121. }
  122. //------------------------------------------------------------------------------
  123. public function set backgroundImage(value:Object):void {
  124. }
  125. //------------------------------------------------------------------------------
  126. public function get backgroundSize():String {
  127. return "";
  128. }
  129. //------------------------------------------------------------------------------
  130. public function set backgroundSize(value:String):void {
  131. }
  132. //------------------------------------------------------------------------------
  133. public function get stageWidth():Number
  134. {
  135. return Config.VIEWPORT_WIDTH;
  136. }
  137. //------------------------------------------------------------------------------
  138. public function set stageWidth(value:Number):void
  139. {
  140. }
  141. //------------------------------------------------------------------------------
  142. public function get stageHeight():Number
  143. {
  144. return Config.VIEWPORT_HEIGHT;
  145. }
  146. //------------------------------------------------------------------------------
  147. public function set stageHeight(value:Number):void
  148. {
  149. }
  150. }
  151. }

Report this snippet  

You need to login to post a comment.