RIA Shanghai | Adobe上海用户组

This article gives ideas for developing loading screens for Flex applications. The loading sequence for a typical RIA application could be:

[0. Downloading the runtime binary] -> [1. Application initializing] -> [2. Application started]

For Flex/flash application, the preloader will be displayed at step 0. At step 1, application is running and it's up the application to display any loading screen. One of our RIA app needs to load metadata from server thus we do need a loading screen at step 1.

Make loading screens for step 0 and step 1 identical or similar enough

If you use two very different loading screens for step 0 and step 1, the end users will get confused. So use identical screens or similar enough that users hardly notice the difference. It's easy to say, but it requires considerable effort to implement. The difficulty comes from the fact that Flex is not running in step 0 yet but running in step 1 -  you can only use Flash sprites in step 0 while you can use whatever Flex components in step 1.

Due to lack of experience with Flash sprite, I run into a lot of troubles. Here's one lesson: do not set size or position sprites unless it's absolutely necessary; otherwise you'll got zoomed or missed sprites. I managed to have two version of the loading screen: a Flex version and its Flash counterpart using sprites.

I use Flash version to implement the preloader for step 0 and display the Flex version for step 1. Below are their screen shots respectively:

Some facts found

• preloader is only for Flex applications running in browsers, which means you can only set preloader attribute for <Application> but not <WindowedApplication>. If you set preloader attribute for WindowedApplication, runtime error could be thrown.
• ProgressEvent.bytesTotal could be 0 in case the total size of SWF is unspecified by the HTTP server. If you calculate percentage using event.bytesLoaded/event.bytesTotal*100, the percentage could be at value of Infinity - display percentage selectively.

Development tips

- If you are developing a step 0 preloader for a large application: create a light testing Flex application and develop the preloader at this small application - you may like code folders from the large application.

- Use SwfRrefreshFilter and set the send delay to 5 seconds or higher to have a grace period for testing loading:

<init-param>
    <param-name>send-delay-seconds</param-name>
    <param-value>5</param-value>
</init-param>

When you are done, set send delay to 0.

- Use ANT to compile and build when you develop an application targeting both AIR and browsers.

- To code preloader, refer to LW's Flex 预载界面美化 Flex's preloader is not so flex.