Custom Flex 3 Lightweight Preloader with source code

Sasha Dzeletovic, Thursday, August 14, 2008 @ 2:25 pm

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.

The rest you can pick up from the source code, available here.

You can see the example here.

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

tech development

Comments: 13 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Very nice !!Thank you !

   Comment by roamer, Friday, August 22, 2008 @ 5:52 am

2. 

   Is it possible to load a swf file for preloading and call a function in that swf.

   For instance, I would like to use a kind of speedometer for preloading. I’ve created a swf that has a ’setPercentageLoaded(percentage)’ function in the first frame of the movieclip. This function rotates the dial of the speedometer based on the percentage loaded.

   I’ve been trying to accomplish this, but embedding swf files causes the function to be unreachable.

   Any help would me most appreciated.

   Regards,

   Sander

   Comment by Sander, Friday, August 29, 2008 @ 10:41 am

3. 

   Hi Sander,
   To the best of my knowledge it is not possible call a method within a swf file while it’s loading because it doesn’t exist yet. Having the preloader in the swf that you are trying to load defies the purpose because your swf would need to load before showing your the preloader.

   You do not need to do that at all because there are other ways around this.
   In my experience, it is best to keep the preloader extracted so you can call on it anytime for anything and reuse it.

   Your scenario could look something like this:
   - You have a base file. It’s a default MXML.
   - In your project, you have a component that will act as your preloader and is loaded together with your application.
   - You have an external swf that you want to load after your app has loaded.

   From that starting point we go to code in base file (imports not included):

   //loader that will track the progress
   private var myLoader:Loader;
   //your custom preloader component
   public var myPreloader:Speedometer;

   //create your preloader and call the loading of the external swf file
   private function getSwf():void
   {
   //create your new preloader component
   myPreloader = new Speedometer();
   //position it where ever you want and set any other parameters you want
   myPreloader.x = 100;
   myPreloader.y = 100;
   //add your preloader to stage
   addChild(myPreloader)

   //create your loader
   myLoader = new Loader();
   //create a new URLRequest to use as with Loader
   var mySwfURL:URLRequest = new URLRequest(”URL_of_my_swf.swf”);
   //attach a listener to loader so you can track the progress using it
   myLoader.addEventListener(ProgressEvent.PROGRESS, trackProgress);
   //start loading
   myLoader.load(mySwfURL);
   }

   //trackProgress is attached to the listener and is being passed “progress” parameters in event parameter
   private function trackProgress(event:ProgressEvent):void
   {
   //this is where you can pass the progress to your custom preloader
   myPreloader.setPercentageLoaded(event.bytesLoaded / event.bytesTotal * 100 );
   //if the swf has loaded, remove your listener and custom preloader from the stage
   if(event.bytesLoaded == event.bytesTotal)
   {
   myLoader.removeEventListener(ProgressEvent.PROGRESS, trackProgress);
   removeChild(myPreloader)
   }
   }

   Comment by Sasha Dzeletovic, Tuesday, September 2, 2008 @ 2:14 pm

4. 

   Hi,
   Thanks for proving such a beatiful component code,I am trying to use this preloader for AIR application its not working and its perfectly working for Web app’s.Pls clarify me that preloder concept will work for AIr,if possible provide some sample.

   Thanks & Regards
   Kalluru

   Comment by kalluru, Wednesday, November 12, 2008 @ 8:58 am

5. 

   Hi Sasha,

   Thank you for sharing your solution with us!

   Can we use your preloader with our logo in our applications? Are there any licenses or restrictions?

   Comment by Darina, Wednesday, November 26, 2008 @ 2:41 pm

6. 

   Hi Darina,
   Thanks! You can use this preloader in your applications without any restrictions whatsoever. Also feel free to change it, extend it or whatever else that comes to your mind. Pathfinder logo is copyrighted though

   Comment by Sasha Dzeletovic, Wednesday, December 3, 2008 @ 3:33 pm

7. 

   Thanks Kalluru,
   I haven’t tried this in AIR but right of the top of my mind I would think something similar could work. Main difference that I foresee is that in AIR we are not loading but mostly initializing. I will get to it when time permits and update to this post on that topic.

   Cheers!

   Comment by Sasha Dzeletovic, Wednesday, December 3, 2008 @ 3:36 pm

8. 

   Hi Sasha,

   thanks for you sharing this custom prloader.
   Is it possible to eliminate the short blink
   before the preloader of the standard flex
   page.
   It’s only 1 second I know, but I say better gone then there.

   cheers, David

   Comment by David Testas, Monday, January 12, 2009 @ 1:01 pm

9. 

   Very good preloader!! Thnxx for sharing!!

   Comment by MechanisM, Thursday, February 12, 2009 @ 5:01 am

10. 

    Excellent Preloader with great color combination also.

    Comment by Siva, Thursday, March 5, 2009 @ 11:08 am

11. 

    I do like the preloader and the branding.

    I am curious about how it compares in speed (like load time) with the default preloader. I don’t want to introduce anything that is going make things slower but I’m guessing this one is lighter than the stock one and should go faster?

    I’d also like to use this in an external class library. How can the constructor be modified to accept different images rather than embed an default? This way it could be used for many different brands. preloader=”com.pathf.preloaders.PathfinderCustomPreloader(’assets/myimage.png’)”

    Thanks!

    Comment by Warren, Friday, May 1, 2009 @ 8:08 am

12. 

    Hi Sasha,

    This is great. Thanks for sharing. Is there a way to set a minimum time for this preloader? I’ve seen the following used elsewhere.

    MINIMUM_DISPLAY_TIME=2000;

    Would this work in your preloader. If so, where should it be added?

    Thanks!

    Comment by Fizzy, Friday, May 15, 2009 @ 9:56 am

13. 

    i implemented thi preloader for flex , quite good looking ,Took source code from this link

    http://askmeflash.com/article_m.php?p=article&id=7

    Comment by Antonio, Friday, May 22, 2009 @ 6:37 am

Leave a comment