Thursday, March 19, 2009

Another Custom Preloader

I've been playing around with preloaders a bit recently, and thought I'd share my custom preloader. I originally found this very useful article:
http://www.pathf.com/blogs/2008/08/custom-flex-3-lightweight-preloader-with-source-code/

My CustomPreloader class is copied from the example above, and modified to be more easily customizable (I hope!). The colors and sizes are mostly defined at the top of the class.

The important functions inside CustomPreloader are as follows (they are all near the top of the class):
  • clear() - draws the background color/gradient
  • createAssets() - creates the assets (logo, progress bar, loading textfield) and positions them on the stage
  • draw() - draws the progress bar as the application is loading

  • Here is a screenshot of the preloader, click on the image to view the flex application in a new window:

    CustomPreloader


    ** I've subsequently written a test application which is very useful when designing your custom preloader, check it out here: Showing the preloader again after loading.

    Quick links:
  • CustomPreloader (View Source HTML)
  • CustomPreloader.as (direct download)

  • More Custom Preloaders and Tutorials
  • Wisebisoft Custom Flex 3 Preloader (Example)
  • A Preloader Museum
  • JesseWarden: Making A Cooler Flex Preloader (Example)
  • Totally Custom Preloader
  • Cool Loading Animated Gifs
  • Ted On Flash: Flex 2 Preloaders


  • 4 comments:

    Anonymous said...

    Awesome, thanks!

    Sabrina Meyer said...

    Vielen Dank, einfach spitze!
    Thanks from Bremen, Germany.

    Chris Callendar said...

    Bitte sehr, es war mir eine Freude!

    And no, I don't speak German but I have a colleague who does!

    web tasarımı said...

    A very nice page. I think the effort has passed, we have to thank you:))
    aw.