Search Flex Components Free

Custom Search

December 10, 2007

Progressive Image Loading with URLStream and Loader.loadBytes in Flash Player 9

How do you write images onto the Flash Player DisplayList before they have fully loaded? In Flash Player 9 we have a class called flash.display.Loader and it has a method called 'loadBytes' which allows you to pass a ByteArray and fill the loader with data. The bytes you push in can be in the form of GIF, JPG, PNG, and SWF. I was playing with and wrote this simple example that loads images and displays them progressively. 0
Progressive Loading Images Demo

Progressive Loading Images SOURCE CODE

The class is unique because it gives you access to the bytes of whatever you are loading as data arrives. Provided your server buffers data rapidly to the client, you will see the data stream loaded into the client progressively. I simply took this stream of bytes and routed it into a Loader instance so you could see the image loading. I think it is pretty cool that you can do that with ActionScript 3 and work at this low level to begin with.

When I get a chance I will be using this to create a new Image subclass for progressive loading. What I find interesting is that the browser cannot do this with images! In all 4 of the examples the image data streams independently of whether the format is GIF, JPG, PNG, or transparent PNG. Long story short these images display faster than they can in browsers today by leveraging Flash Player 9.

Related Flex Tutorials