Custom Preloader DownloadProgressBar

The DownloadProgressBar is the thing you see while the SWF is being downloaded. It also shows a progress bar while the application is being initialized. The one we ship is pretty vanilla and boring to watch if you have a large SWF that takes a long time to download or initialize.
You can create custom ProgressBars by implements IPreloaderDisplay on a Sprite and doing whatever you want in it. The trick is that you can’t use Flex classes since they haven’t been downloaded or initialized yet, and you can’t probably don’t want to do asynchronous things like load images since you’re already in the process of getting the SWF over the network.
I’ve posted two different prototypes of custom DownloadProgressBars. Remember, these are prototypes so they probably have bugs and were only tested on FIreFox on the Mac but the I just want to give you an idea of things that are possible.
The first one displays a set of “slides” the user can read while the application is starting up. The ones in the demo are ugly, but are there to give you an idea of what capabilities I was able to code up in as little code as possible. You can’t use embedded fonts since that will take too long to download. You probably don’t want to use bitmaps either because of their size. But you can draw filled shapes and add text and format that text to some degree. Yeah, you could try to mimic as much of FXG or SVG as possible, but again, that will probably take too much code.
An interesting feature of the SlideShow preloader is that it gets its slide data from the HTML wrapper. That way the slide data isn’t baked into a SWF and you don’t have to make an additional network call to get the slide data. If you add some server logic, you can generate different slide data in the wrapper based on any other knowledge you have of the user without having to change the SWF.
I haven’t gotten the SlideShow demo to work on Safari. I’m not sure if it is because Safari doesn’t handle XML or because there is something I haven’t configured in Safari. I could re-write the wrapper to use appended strings instead of XML if I really wanted to make sure it worked on Safari.
Run SlideShow Demo
Download Source
The second one displays a screen capture taken just before the application was last shut down. It leverages the onBeforeUnload in a custom HTML wrapper. As the application shuts down, it saves its state and a screen snapshot in a local SharedObject. On startup, the custom ProgressBar grabs the snapshot and displays it right away so it appears the app is up quickly. In the demo, I purposely blur the snapshot so the user knows not to try to interact, but you don’t have to do that if you don’t want to. Then as the application finishes up, it restores the UI widgets to their last state based on the data stored in the SharedObject and then the application can be used again. You will need to run the demo twice (or refresh the page after making some changes) to see the snapshot in use.
Run SnapShot Demo
Download Source

5 Responses to Custom Preloader DownloadProgressBar

  1. Tackleguy says:

    The slideshow is great and im using Safari

  2. Janez Feldin says:

    I was trying to use this preloader for air project but i get this error if i try to halt the preloader:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at spark.components::WindowedApplication/enterFrameHandler()[E:\dev\4.x\frameworks\projects\airspark\src\spark\components\]
    And I am pulling my hair out I can’t fix it…
    Anyone has an idea..?
    Also tried with extending the SparkDownloadProgressBar and got the same resaults…
    P.S. More detaild info on link.

  3. Alex Harui says:

    I’m not sure what you mean by halt the preloader. The error indicates that the WindowedApplication is not on stage.

  4. moohoo says:

    any chance of a rss feed?