DougHughes.net

I’d like to encourage the general Flex community to take a second to build a quick custom preloader for the project that they are currently working on. It doesn’t take but a minute or two and it will distinguish your application from the sea of other Flex applications out there right from the start.

One of the easiest ways I’ve found to build a custom preloader for your Flex application is to start in Flash Professional. I usually just build a nice animation over 100 frames. If you are using some text that gives the amount loaded then you’ll need to make sure you set that to dynamic text so that we can manipulate that information later. Make sure you export your Custom Preloader class for action script. ( I’m in CS3 and you just go to the Library, right click on the preloader and change the linkage to export for ActionScript. Next export that same Library preloader object as a SWC.

Now over in Flex Builder we’ll need to import that SWC. You can do this by dropping the SWC in your libs folder. Or you can specify the location of the SWC in the project properties section. File – Properties – Build Path – Library path – Add SWC.

Keeping this quick, I’d suggest just extending the DownloadProgressBar Your preloader class will be able to take advantage of some of the code that’s already baked into that component.

In the class constructor add the custom preloader. When the ‘on added to stage’ event fires center the preloader and be sure to stop the preloader from running.

We’ll use the pre-baked ‘set preloader’ method to listen for some events. The preloader class passes in a reference to itself so that it can listen for events like progress or completion.

public override function set preloader(preloader:Sprite):void
{
	preloader.addEventListener(ProgressEvent.PROGRESS, onProgress);
	preloader.addEventListener(FlexEvent.INIT_COMPLETE, intComplete);
}

After the application has loaded we just need ot fire the complete event. Otherwise our viewers will be able to see our preloader but not ever view the application.

protected function intComplete(event:FlexEvent):void
{
	dispatchEvent(new Event(Event.COMPLETE));
}

We’re also listening for the progress event. We use that to update the current frame of our flash preloader, additionally we can update our dynamic text input. (here called ‘percent’)

protected function onProgress(event:ProgressEvent):void
{
	customPreloader.percent.text = Math.ceil(event.bytesLoaded / event.bytesTotal *100).toString() + '%';
	customPreloader.gotoAndStop( Math.ceil(event.bytesLoaded / event.bytesTotal *100));
}

Here’s the entire preloader class:

package com.alagad.view.preloader {

import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;

import mx.events.FlexEvent;
import mx.preloaders.DownloadProgressBar;

public class RedPreloader extends DownloadProgressBar {

	protected var customPreloader:CustomPreloader;

	public function RedPreloader() {
		customPreloader = new CustomPreloader();
		addEventListener(Event.ADDED_TO_STAGE, onAdded);
		addChild(customPreloader);
	}

	protected function onAdded(event:Event):void {
		customPreloader.stop();
		/put in in the upper middle
		customPreloader.x = stage.stageWidth * 0.5 + 65;
		customPreloader.y = stage.stageHeight * 0.5 - 160;
	}

	public override function set preloader(preloader:Sprite):void {
		preloader.addEventListener(ProgressEvent.PROGRESS, onProgress);
		preloader.addEventListener(FlexEvent.INIT_COMPLETE, intComplete);
	}

	protected function intComplete(event:FlexEvent):void {
		dispatchEvent(new Event(Event.COMPLETE));
	}

	protected function onProgress(event:ProgressEvent):void {
		customPreloader.percent.text = Math.ceil(event.bytesLoaded / event.bytesTotal * 100).toString() + '%';
		customPreloader.gotoAndStop(Math.ceil(event.bytesLoaded / event.bytesTotal * 100));
	}
}
}

The last thing to do is quickly add the class that we made to our main application tag.

If your looking for inspiration for preloaders then you need to check out Big Spaceships new site called PrettyLoaded (http://www.prettyloaded.com)

If your looking for a nice video tutorial covering some of the stuff in this blog post, be sure to check out Lee Brimelow’s website http://gotoandlearn.com where he shows off how to build a custom Flex Preloader in this episode.