There are lots of tutorials on customising the Flex preloader … it involves sub-classing the DownloadProgressBar class or Sprite and implementing IPreloaderDisplay and then overriding a bunch of methods so you can draw your own progress bar or add a logo.
The easiest method I’ve found if your client wants something unusual is to use a MovieClip built in Flash and just target a dynamic TextField within the clip to display your percentage progress. You can also create a nice little 100 frame animation to wow your audience. Here’s how …
Firstly create a 100 frame MovieClip in Flash. You can put a stop(); on each frame if you want or control this within Flex if necessary. Add a dynamic TextField and give it an instance name. Choose Device fonts to keep the size down or if you really must embed the font at least make sure you limit the characters to numerals and add the percent sign if required. finally export your MovieClip symbol from the Library with a Class name that you can reference in Flex later.
Now in Flex create your custom preloader class. Here’s mine …
-
package
-
{
-
import flash.display.MovieClip;
-
import flash.display.Sprite;
-
import flash.events.Event;
-
import flash.events.ProgressEvent;
-
-
import mx.events.*;
-
import mx.preloaders.DownloadProgressBar;
-
-
public class CustomPreloader extends DownloadProgressBar {
-
-
[Embed(source="assets/swf/genericLoader.swf", symbol="mainLoader") ]
-
public var PreloadAnim:Class;
-
-
private var mc:MovieClip;
-
-
public function CustomPreloader()
-
{
-
super();
-
mc = new PreloadAnim();
-
this.addChild(mc);
-
}
-
-
override public function set preloader( preloader:Sprite ):void
-
{
-
preloader.addEventListener( ProgressEvent.PROGRESS , SWFDownloadProgress );
-
preloader.addEventListener( Event.COMPLETE , SWFDownloadComplete );
-
preloader.addEventListener( FlexEvent.INIT_COMPLETE , FlexInitComplete );
-
}
-
-
private function SWFDownloadProgress( event:ProgressEvent ):void
-
{
-
var prog:Number = Math.ceil((event.bytesLoaded/event.bytesTotal)*100);
-
if (mc) mc.gotoAndStop(prog);
-
-
mc.percent_txt.text = prog+"%";
-
}
-
-
private function SWFDownloadComplete( event:Event):void
-
{
-
this.removeChild(mc);
-
}
-
-
private function FlexInitComplete( event:FlexEvent ):void
-
{
-
dispatchEvent(new Event(Event.COMPLETE));
-
}
-
}
-
}
The FlexEvent.INIT_COMPLETE event is triggered after your SWF has completely loaded AND your Application has initialised. This is important because by default the COMPLETE event is called after the SWF has loaded and the initialisation is handled while displaying your Application’s guts. I tend to use runtime Flex styles so I need these loaded before displaying my Application. A great article on this is available here.
As you can see I’ve embedded the symbol into the SWF and the symbol is called ‘mainLoader’. I can then assign that symbol to the mc MovieClip variable and then target this to control the playhead and display the percentage of load. Simple. All you need to do now is tell your Flex application to use this custom class as your preloader by setting the preloader property of your Application to the name of your custom class including any package paths within the String.
I can’t seem to generate an MXML snippet anymore since I upgraded to Wordpress 2.7.1 … if anyone has a better code display plugin that handles MXML then I’d like to hear about it.
I know I’ve not made this tutorial very clear and this is purely down to laziness and work … I did intend to do screengrabs and target the newbie but I’m afraid I just aint got time. If you have any questions or want me to send you the FLA for the animation I used on a recent project then please ask.
I’ve missed loads out of this example so forgive me … you’ll need to align your clip to the Stage for example.
I’ll edit this when I get more time … promise!
April 13th, 2009 at 1:10 pm
Just one thing. I guess if you put a link where they users will be able to see a running example of this example will help a lot. Any way thanks for making it available. Regards…
April 13th, 2009 at 1:16 pm
I have seen the running example at http://lyraspace.com/. Liked it. Not only that I also liked your rotating cubes. Excellent!!! Keep it up!!!!
April 14th, 2009 at 2:14 am
Hey, thanks for the compliment. Unfortunately, my now old and creaky website doesn't have a custom preloader at all … I just changed the styles of the default component. I'm going to re-design it very soon with the intention of using a WordPress engine hack to manage the site content and rest assured it will have a wonderful preloader! It's all in the details.
Regarding the lack of examples on my blog: I have now found a decent plugin for embedding the SWF files and have a system for generating the code without too much disruption to my daily work so I will be finding time to update these posts soon. I wish I could find a really good MXML stylesheet though.
April 14th, 2009 at 6:56 am
Hey Lee,
I see Lee Brimelow has just posted a video tutorial on creating a Custom Flex Preloader.
http://www.gotoandlearn.com/play?id=108
I am so sick to death of that default progress bar. I wish people would make more effort.
April 14th, 2009 at 7:11 am
yea, his is a lot slicker … I left a comment yesterday.