There are a number of useful Flex techniques I use in the Flex Apps I develop all the time and I thought that some of these might be useful for others. So here’s the first… How to replace that nasty default Flex preloader with your own Flash animated version. Here’s the result (I just downloaded a free preloader animation from the web and applied it to this tutorial:

http://www.nickkuh.com/demos/custom_preloader/

Flex source files can be downloaded from here:

http://www.nickkuh.com/demos/custom_preloader/srcview/CustomPreloader.zip

How it works:

Inside the main application MXML you can specify a custom preloader class for your application to use:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
backgroundColor=”#000000″
backgroundGradientAlphas=”[0.0,0.0]“
paddingTop=”30″
applicationComplete=”init()”
preloader=”com.nickkuh.preload.Preloader”  viewSourceURL=”srcview/index.html”>

So you’ll see I’m pointing the preloader to my com.nickkuh.preload.Preloader class. This class extends the default Flex DownloadProgressBar class: mx.preloaders.DownloadProgressBar. The Flex Framework passes the application it’s loading to preloader setter method which I’m overriding:

override public function set preloader(value:Sprite):void{
value.addEventListener(ProgressEvent.PROGRESS, progressEventHandler, false, 0, true);
value.addEventListener(Event.COMPLETE, completeEventHandler, false, 0, true);
value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressEventHandler, false, 0, true);
value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler, false, 0, true);
}

So my custom Preloader class is now able to listen to the application preloading events – halfway there…

In the constructor for the Preloader class I’m creating an instance of another custom class which deals with displaying the Flash loading animation and adding this instance to the stage:

progressBar = new ProgressBar;
this.addChild(progressBar);

The Preloader class listens to the instance of the com.nickkuh.preload.ProgressBar class for the custom event ProgressBar.FADE_OUT_COMPLETE. Only when that event is fired will the Preloader class in turn fire an Event.COMPLETE event which the Flex app listens for before it displays the loaded application and fires the applicationComplete event. So this set-up enables the custom ProgressBar to control when the Flex app changes the view from preloader to application.

The custom ProgressBar class extends Flex’s Loader class and loads in the flash loading animation. I’ve set this up so that the ProgressBar checks for the path to the preloader.swf via FlashVars:

var url:String;
if (this.stage.loaderInfo.parameters.hasOwnProperty(“preloaderURL”))
{
url = this.stage.loaderInfo.parameters.preloaderURL;
}
else
{
url = “preloader.swf”;
}
var urlRequest:URLRequest = new URLRequest(url)
this.load(urlRequest);

You’ll find the fla for the preloader in the source files in a folder called ‘design’. The fla actually includes a couple of methods on frame one:

stop();

function setProgress(n:Number)
{

}

function set ready(b:Boolean)
{
if (b) gotoAndPlay(2);
}

The custom ProgressBar class calls these methods with progress updates and sets the ready setter to true when the Flex App has finished loading. If you’re loading animation is a progress bar or needs to give percentage feedback then you can customise the setProgress(n:Number) function – n will be between 0 and 1 – 1 for fully loaded.

In my fla once the preload completes it then plays a few more frames before fading out. This animation could be changed to you requirements.

Once the internal fade out complete the fla fires off an “animationComplete” event which the ProgressBar is listening out for. At this point the closeScreen method of ProgressBar handles the event and ProgressBar fades itself out. Once complete it in turn fires the FADE_OUT_COMPLETE event which causes the main Flex app to close the preloader and display your Flex App.

Yes, it’s a bit time consuming to make a simple preloader but I now use this set-up over and over again. Feel free to do the same!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Subscribe to the comments on this post

A simple but very useful component for developing AIR applications that need to know whether the user is connected to the internet or not. Choose a reliable url as your sourceURL for the component. Then the InternetConnectionStatus component will monitor that url and keep your application informed about the internet connection status via it’s connected bindable property!

Download the example

Download the AIR application installer

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Subscribe to the comments on this post