View Demo Preloader App (right click for source view)

The preloader may fly by, so lets first take a look at how this progress bar looks as it is loading the Flex app:

The next screenshot shows the progress as RSLs are being loaded:

Finally the progress of initialization, with a second progress bar:

Creating the Preloader SWC in Flash Pro

In Flash professional we create a custom preloader. In this example there are several layers which the design is created from.
The layer 'prog_bar' and 'initilize_bar" hold shapes that we will use to resize to show progress.
The 'loading text' layer contains some dynamic text that has Character Embedding for upper/lower/numbers.
The layers look like this:

The custom preloader FLA can be found in the example by viewing source.

The FLA preloader is a movie clip and its properties are set for "Export for ActioScript" the "Class" property is set to "PreloaderDisplay" this allows us to have a PreloaderDisplay.swc created when this FLA is published.

In the first frame of the FLA "actions" layer we create the functions to set the two different progress bars:

 
//reset
setMainProgress(0);
setInitalizeProgress(0);
loading_txt.text = "";
 
//function for setting main prgress bar
function setMainProgress(percent:Number):void {
	prog_bar.width = percent * 275;
}
 
//function for setting the initilize bar
function setInitalizeProgress(percent:Number):void {
	initialize_bar.width = percent * 275;
}
 

The final step is to "Publish" the FLA so that the SWC file is create, this SWC will be used in Flash Builder.

Creating the Custom Preloader in Flex 4

The first step is to place the PreloaderDisplay.swc in the "libs" folder, this will make the PreloaderDisplay and its methods available to Flex:

To define a custom preloader we will do this in the Flex application's Application file, we simply specify the preloader class:

 
<s:Application preloader="com.themorphicgroup.preload.Preloader" ...
 

In the Preloader class we will extend "SparkDownloadProgressBar".

The SparkDownloadProgressBar class displays download progress.

From Flex 4 docs: It is used by the Preloader control to provide user feedback while the application is downloading and loading.
The download progress bar displays information about two different phases of the application: the download phase and the initialization phase.

The Preloader.as extends "SparkDownloadProgressBar" and we will use the FLA PreloaderDisplay.swc by creating a variable called "preloaderDisplay":

 
public class Preloader extends SparkDownloadProgressBar {
	private var preloaderDisplay:PreloaderDisplay;
	...
 

To add the PreloaderDisplay we will override the SparkDownloadProgressBar's "createChildren" method, in this method we will create a new PreloaderDisplay and
use the "addChild" method (SparkDownloadProgressBar inherits addChild from DisplayObjectContainer):

 
override protected function createChildren():void
{
	if (!preloaderDisplay) {
		preloaderDisplay = new PreloaderDisplay();
 
		var startX:Number = Math.round((stageWidth - preloaderDisplay.width) / 2);
		var startY:Number = Math.round((stageHeight - preloaderDisplay.height) / 2);
 
		preloaderDisplay.x = startX;
		preloaderDisplay.y = startY;
		addChild(preloaderDisplay);
	}
}
 

There are several methods that we will override so that we can make updates to the PreloaderDisplay.swc.
The rslProgressHandler method will be called each time a RSL is being loaded. We will use this method to set text indicating the current count of RSL being loaded:

 
private var rslBaseText:String = "loading: ";
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 + ": ";
	}
}
 

The next method we will override is setDownloadProgress. This method indicateds the current download progress. in this method we will set the
PreloaderDisplay.swc main progress bar and set the text:

 
override protected function setDownloadProgress(completed:Number, total:Number):void {
	if (preloaderDisplay) {
		//set the main progress bar inside PreloaderDisplay
		preloaderDisplay.setMainProgress(completed/total);
		//set percetage text to display, if loading RSL the rslBaseText will indicate the number
		setPreloaderLoadingText(rslBaseText + Math.round((completed/total)*100).toString() + "%");
	}
}
 

Finally we will look at overriding setInitProgress, this method indicates the progress of the Flex app as it initializes.
We will set the text in PreloaderDisplay.swc and change the progress of the second initialize progress bar:

 
override protected function setInitProgress(completed:Number, total:Number):void {
	if (preloaderDisplay) {
		//set the initialization progress bar inside PreloaderDisplay
		preloaderDisplay.setInitalizeProgress(completed/total);
		//set loading text
		if (completed > total) {
			setPreloaderLoadingText("almost done");
		} else {
			setPreloaderLoadingText("initializing " + completed + " of " + total);
		}
	}
}
 

This blog entry does not cover every bit of code used in the preloader, so
View Demo Preloader App right click for source view

fix_content_assist.bat

@echo off
REM The following will delete the prefs file in Flash Builder 4 Beta 2 that caused content assist to break
RMDIR C:\work\dev\morphic\myproject\trunk\code\as_fb4\.metadata\.plugins\com.adobe.flexbuilder.codemodel /s /q