The amazing adventures of Doug Hughes

I’d like to encourage the general Flex community to take a second to build a quick custom preloader for the project that they are currently working on. It doesn’t take but a minute or two and it will distinguish your application from the sea of other Flex applications out there right from the start.

One of the easiest ways I’ve found to build a custom preloader for your Flex application is to start in Flash Professional. I usually just build a nice animation over 100 frames. If you are using some text that gives the amount loaded then you’ll need to make sure you set that to dynamic text so that we can manipulate that information later. Make sure you export your Custom Preloader class for action script. ( I’m in CS3 and you just go to the Library, right click on the preloader and change the linkage to export for ActionScript. Next export that same Library preloader object as a SWC.

Now over in Flex Builder we’ll need to import that SWC. You can do this by dropping the SWC in your libs folder. Or you can specify the location of the SWC in the project properties section. File – Properties – Build Path – Library path – Add SWC.

Keeping this quick, I’d suggest just extending the DownloadProgressBar Your preloader class will be able to take advantage of some of the code that’s already baked into that component.

In the class constructor add the custom preloader. When the ‘on added to stage’ event fires center the preloader and be sure to stop the preloader from running.

We’ll use the pre-baked ‘set preloader’ method to listen for some events. The preloader class passes in a reference to itself so that it can listen for events like progress or completion.

The last thing to do is quickly add the class that we made to our main application tag.

If your looking for inspiration for preloaders then you need to check out Big Spaceships new site called PrettyLoaded (http://www.prettyloaded.com)

If your looking for a nice video tutorial covering some of the stuff in this blog post, be sure to check out Lee Brimelow’s website http://gotoandlearn.com where he shows off how to build a custom Flex Preloader in this episode.