Flex custom preloader not working


Lately,

I encountered a problem involving flex custom preloaders.

The context I was using was as follows:
- I created a preloader.swf in flash with a 100 frames to show a progressbar evolution.
- I embedded that preloader.swf in my flex app. Read more about this here

This all worked fine when I ran my application locally.
However, the problem showed itself when deploying my app to my webserver (thus no longer running it locally).
The unintended behavior was that the preloader would not show up until my app was nearly fully loaded, and it then popped up for about a second @ 100% full.

I tried all sorts of different approaches.
- Extending mx.preloaders.DownloadProgressBar
- Creating a new MovieClip that implemented IPreloaderDisplay. More about this here
- Creating a loader .swf that contained the preloader, and loading in my app from there
- Using Charles to monitor request and responses

However none of these solutions seemed to work.

After searching a long time for what the fudge could be causing this problem, I stumbled upon the following blog posts:
http://patrickmcd.com/2009/04/20/flash-preloading-errors-turn-off-gzip/
http://www.flash-db.com/Board/index.php?topic=19252.0

As it turns out, the problem isn’t caused by Flash Player or by Flex. It is caused by your server setup.
If you have gzip compression enabled on your server (for speeding up requests and responses), the problem occurs.
What the gzip compression does is compress your already compressed binary .swf file, thus screwing up the loading procedure from an actionscript point of view.
Actually gzip compression doesn’t enhance performance in any way because a .swf is as compressed as it can be.
This also counts for numerous other already compressed files that can’t be compressed any further (.jpg,.gif,.flv,.png,..)

So the solution is rather simple. You can just add a .htaccess file to the root of your public directory to ensure that .swf files (and any other already compressed files) will no longer be compressed.
All that has to be in this file is the following:

# Don't compress images/flash
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|swf|flv)$ no-gzip dont-vary

Et voila, you have disabled the gzip compression and fixed your preloader bug because it’s working now.

This really was a pain in the *ss for me, as I spent 2 days looking for a solution.
I hope this post can save you the trouble I went through :)

Related Posts

, , , ,

  1. #1 by Witit on April 11, 2010 - 9:36 pm

    Thank you for this.
    Save my time.

    I has found this for 2 days.

  2. #2 by surfiend on May 4, 2010 - 2:24 pm

    geez! Finally a solution to my problem. Wish I’d found this a week ago..
    Worx like charm ;)
    A very BIG thank you for this!!!

  3. #3 by MiniTop on June 28, 2010 - 9:44 pm

    THANK YOU VERY MUCH.
    I ‘ve been struggling with this issue for almost 20 Hrs, continuously. You saved me..! Its 2:15 AM here, my friend. Thank you.

  4. #4 by Bill on March 29, 2011 - 11:35 pm

    I’m sure glad I found this post.

    Been going around in circles.

    The server setup.

    That’s something I had not considered.

    Thank you for sharing this information

  5. #5 by Arvind Singh on October 17, 2012 - 12:24 pm

    Great work bro… I spoiled a week for it.

(will not be published)