Article

Custom Flex 3 Lightweight Preloader with source code

Sasha Dzeletovic

Published on: August 14th, 2008

This post was previously on the Pathfinder Software site. Pathfinder Software changed its name to Orthogonal in 2016. Read more.

Here we have a demonstration to an age old problem in Flash (inherited in Flex) – the Preloader. I think that the Flex community has long ago grown bored with the default preloader, which I am very thankful to Adobe engineers for providing us in the first place. It’s just that we keep seeing it over and over and over…

Another important thing that the default preloader naturally doesn’t provide is some branding while the user is waiting for the loading to complete.

There are some great examples out there like Ted’s and the one that I’m using as a base for this demonstration from Andrew.

Andrew’s example allows us to have a lightweight preloader base that we can extend and solve the following problems that I think every preloader should:

– What is the status of loading – both numerically and graphically

– Some branding to show what are we waiting for that would involve some imagery, like a logo

– Possibility of actually making the preloader entertaining enough to keep the users attention

Problem in Flex more so than in Flash is keeping the preloader lightweight. So we have to achieve the visual appeal, animation, some basic text rendering without all the convenient native Flex components that would make the delay before seeing the preloader too long. So we have to keep it simple. Kudos to Andrew for publishing a great way to do this.

I would like to point out a couple things:

1. So we want to show the percentage loaded, right? Well, the Label component just won’t work out. Label comes with following inheritance:

Label -> UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject DisplayObject -> EventDispatcher -> Object

That is a good part of the Flex framework that we want to avoid for the preloader. Instead, because we just want to render the text, we can use the TextField object which comes with following inheritance:

TextField -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

And another thing is that we want to avoid any custom fonts in the preloader because that will surely blow it up.

2. Any imagery that we want to show up should naturally be in the single digit kilobytes to begin with. Photoshop offers a lot of ways to optimize the size of the image.

Than again, we don’t want to use the convenient Image component because it comes with the following inheritance:

Image -> SWFLoader -> UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

Instead, we can fill up a DisplayObject that comes with following inheritance:

DisplayObject -> EventDispatcher -> Object

To do this you:

– embed your small image in the preloder like so:

[Embed("Assets/Pathfinder_Logo_Blue.png") ]
[Bindable] public var Logo:Class;

– pass the Logo class to DisplayObject and add it to stage, like so:

var b:DisplayObject=new Logo();
addChild(b);

and then set it’s size and position parameters.

We only want to show the image pixel, so this will do. We can still make our logo DisplayObject available throughout the whole preloader class so we can play with it a little, like making it follow the progress bar by changing it’s X parameter.

Again, thanks to Andrew, Ted and Adobe Flex Team.