I have been digging for custom Flex preloaders and they all seem to rely on the same template:
An SWC is created with Flash CS5 and then used by Flash Builder using the "preloader" application property.
I don t own Flash CS, and it feels that Flash builder should be able to do the trick.
I created a Library Project in Flash Builder with the following bare bones code:
package loader
{
import flash.display.DisplayObject;
import flash.events.Event;
import flash.utils.getTimer;
import mx.events.RSLEvent;
import mx.preloaders.DownloadProgressBar;
import mx.preloaders.SparkDownloadProgressBar;
public class Preloader extends SparkDownloadProgressBar
{
[Embed(source="loaderlogo.png")] public var logoClass:Class;
private var _displayStartCount:uint = 0;
private var _initProgressCount:uint = 0;
private var _downloadComplete:Boolean = false;
private var _showingDisplay:Boolean = false;
private var _startTime:int;
// private var preloaderDisplay:PreloaderDisplay;
private var rslBaseText:String = "loading: ";
public function Preloader()
{
super();
}
/**
* Event listener for the <code>FlexEvent.INIT_COMPLETE</code> event.
* NOTE: This event can be commented out to stop preloader from completing during testing
*/
override protected function initCompleteHandler(event:Event):void
{
dispatchEvent(new Event(Event.COMPLETE));
}
/**
* Creates the subcomponents of the display.
*/
override protected function createChildren():void
{
var img:DisplayObject = new logoClass();
img.x = Math.round( ( stageWidth - img.width) / 2);
img.y = Math.round( ( stageHeight - img.height) / 2);
addChild( img);
var dpb:DownloadProgressBar = new DownloadProgressBar();
dpb.x = img.x + 100;
dpb.y = img.x + 100;
dpb.width = 170;
dpb.height = 20;
addChild( dpb);
}
/**
* Event listener for the <code>RSLEvent.RSL_PROGRESS</code> event.
**/
override protected function rslProgressHandler(evt:RSLEvent):void {
if (evt.rslIndex && evt.rslTotal) {
//create text to track the RSLs being loaded
rslBaseText = "loading RSL " + evt.rslIndex + " of " + evt.rslTotal + ": ";
}
}
/**
* indicate download progress.
*/
override protected function setDownloadProgress(completed:Number, total:Number):void {
}
/**
* Updates the inner portion of the download progress bar to
* indicate initialization progress.
*/
override protected function setInitProgress(completed:Number, total:Number):void {
}
/**
* Event listener for the <code>FlexEvent.INIT_PROGRESS</code> event.
* This implementation updates the progress bar
* each time the event is dispatched.
*/
override protected function initProgressHandler(event:Event):void {
var elapsedTime:int = getTimer() - _startTime;
_initProgressCount++;
if (!_showingDisplay && showDisplayForInit(elapsedTime, _initProgressCount)) {
_displayStartCount = _initProgressCount;
show();
// If we are showing the progress for the first time here, we need to call setDownloadProgress() once to set the progress bar background.
setDownloadProgress(100, 100);
}
if (_showingDisplay) {
// if show() did not actually show because of SWFObject bug then we may need to set the download bar background here
if (!_downloadComplete) {
setDownloadProgress(100, 100);
}
setInitProgress(_initProgressCount, initProgressTotal);
}
}
private function show():void
{
// swfobject reports 0 sometimes at startup
// if we get zero, wait and try on next attempt
if (stageWidth == 0 && stageHeight == 0)
{
try
{
stageWidth = stage.stageWidth;
stageHeight = stage.stageHeight
}
catch (e:Error)
{
stageWidth = loaderInfo.width;
stageHeight = loaderInfo.height;
}
if (stageWidth == 0 && stageHeight == 0)
return;
}
_showingDisplay = true;
createChildren();
}
}
}
For short, it s loading a logo and a progress bar
It displays a preloader, but really late in the loading process. As if it was being loaded after Flex.
Do I need to compile this in CS5 to completely avoid use of MX/Spark?