Showing Flex Preloader near the top of your Application

Flex comes with a reasonably good preloader (DownloadProgressBar) that shows in application center while the swf is loading and initializing. I had an application that is taller than browser’s view port height. This means the preloader will show below the fold – making it invisible to users who don’t scroll down. Even when the preloader is visible, it “feels” it’s just not in the right position.

I knew I could write some custom preloader, but I did not have the time / need for it. After reading a bit of documentation and diving in the DownloadProgressBar source code, I figured the solution was actually very easy.

Here’s the custom preloader source code that shows download progress bar for your Flex application near its top.

MyDownloadProgressBar.as

package com.components
{
  import flash.events.ProgressEvent;
  import mx.preloaders.DownloadProgressBar;
  
  public class MyDownloadProgressBar extends DownloadProgressBar
  {
    public function MyDownloadProgressBar()
    {
      super();
      // Set the download label.
      downloadingLabel="Downloading..."
      // Set the initialization label.
      initializingLabel="Initializing..."
    }
        
    // Override to return true so progress bar appears during initialization.       
    override protected function showDisplayForInit(elapsedTime:int, count:int):Boolean {
      return true;
    }

    // Override to return true so progress bar appears during download.     
    override protected function showDisplayForDownloading(elapsedTime:int, event:ProgressEvent):Boolean {
      return true;
    }

    // Override initialize so that we can position the loader
    override public function initialize():void {
      super.initialize();
      center(stageWidth, (stageHeight > 250) ? 250 : stageHeight);      
    }
  }
}

The critical part is initialize function. super.initialize(); calls DownloadProgressBar‘s initialization routine – which centers the preloader. We then call center again, but modifying the height parameter. If application size is more than 250 pixels, the preloader will be centered vertically within 250 pixels from top.

The only other code you need to write to make this work, is to tell your Application to use this preloader.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	preloader="com.components.MyDownloadProgressBar">

Note: Remember to place the first code as MyDownloadProgressBar.as within a com/components folder under your main application.mxml file.

That made me happy! But if you are looking for more, you can also check out:

• Custom Flex 3 Lightweight Preloader with source code
• Custom Preloaders and Showing the preloader again after loading is finished on Flex and ActionScript Development Tips blog
• Flex Application Bootstrapping and Totally Custom Preloader
• And the trusted Flex Documentation on DownloadPreogressBar

Hope you enjoy!