Bypassing the Flex Preloader

Ahh, one of those holy grail type posts. After days of searching to answer a problem, I’ve managed to solve it by completely bypassing the preloader in Flex. It can be done, and here’s how:

Flex uses a 2-frame configuration to display its content. The Preloader is put on the first frame, and is downloaded immediately. It then waits for the rest of the content to load and fires its complete event. Then the SystemManager jumps to frame 2 and everything’s ready to go. To turn this off, we need to do two things:

1: Create a preloader shim file named PreloaderShim.as:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
 
	import mx.managers.SystemManager;
	import mx.preloaders.DownloadProgressBar;
 
	public class PreloaderShim extends DownloadProgressBar
	{
		private var delay:Timer = new Timer(1);
 
		override public function set preloader(value:Sprite):void
		{
			SystemManager(value.parent).gotoAndStop(2);
			delay.addEventListener(TimerEvent.TIMER, go);
			delay.start();
		}
 
		public function go(e:TimerEvent):void{
			delay.stop();
			delay.removeEventListener(TimerEvent.TIMER, go);
			delay = null;
			dispatchEvent(new Event(Event.COMPLETE));
		}
 
	}
}

2: Use this in our Flex file:

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

We override the set preloader function of the DownloadProgressBar class. This is automatically set to the preloader instance in Flex. This instance’s parent is the SystemManager. The SystemManager has a gotoAndStop method that allows us to skip to the next frame. Almost immediately, we can fire the complete event. I think that Flex needs a single millisecond to begin its download process, so we wait that long before firing the complete. After that, Flex loads, no preloader perceived.

The Flex part is easy–just point your Flex project to have this new class as a preloader. Just drop your PreloaderShim.as file in with your mxml files and you’re off and running!

Note, I’ve only tried this on local files, and have NO idea how it would work in a real, downloading production file. It works fine for me, but please test it before you go breaking things.

4 comments

  1. This solution has been working great for us using any SDK up to 3.3 but the 3.5 and 4.0 do not work. Serious bummer here, as we are trying to update our entire tool chain to CS5/FlashBuilder(3.5/4.0 SDK). Let me know if you come up with a solution for this. We tried to use CS4 and CS5 versions of Flash and no go. There seems to be an issue with removing the preloader as a child of the display list.

    Thanks again for your solution. It has greatly simplified the creation of our IDE component panels.

  2. I never succeeded at it. If you want to use flex components in cs5 panels, this is the only way I’ve found. The fix for cs6 is a horrible hack–just do an objectutil.tostring on the var and it causes some sort of registration. Terrible.

Leave a Reply

Your email address will not be published. Required fields are marked *