Progressive Image Loading with URLStream and Loader.loadBytes in Flash Player 9
DIGG IT!
19
Comments
Published
Tuesday, December 04, 2007
at
11:44 AM
.
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 flash.net.URLStream and wrote this simple example that loads images and displays them progressively.
WARNING: This demo uses Loader.loadBytes. It can inject a security hole into your application if used inproperly. Please refrain from loading untrusted content (PNG/GIF/JPG/SWF). More detail here.
Here is the demo and full source:
Progressive Loading Images Demo
Progressive Loading Images SOURCE CODE
The flash.net.URLStream 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.
Cheers,
Ted :)
Great Example! More small examples of the low level functions is what I need.
Thanks Ted.
Good call on feeding that data straight to the loader. Didn't think it was possible.
Seems pretty neat. I'm just struggling to work out under what circumstance that would be useful. Surely the days of watching half chewed pngs/gifs/jpgs display they're scattered horizontal lines are over, no?
Isn't the beauty of the FP that you can fully load an image and NOT show a jarring display of bytes?
The same could be said of loading swfs, please don't tell us we're going back to the days of having to wait a frame before being able to access nested MCs/Sprites?!
Confused and concerned.
Jolyon
PS. Loved your Holmes routine at FotB :-)
Its not just neat but also useful if you want to show the content as soon as possible.
Keep up the good work ;d
In my version of the Flash player, the PNG images were loading all statically, with noise, white and black dot fuzz, etc...
I'm running version: 9,0,60,184 which could be a beta player or something. Updating to the new release now.
The GIFs and JPEGS loaded perfectly, though.
I just installed version 9,0,115,0 and all works well.
I'm guessing you're a diver. Where are the pics from? I've never seen a big school of Trevally like that.
Jolyon,
I am not sure how useful it is actually. The key is the code example in handling low level bytes loaded into Flash Player at runtime.
I am less concerned by the look and feel since this can be refined quite a bit more than this demo did. If one added filters and color sampling, it would get quite impressive.
Ted :)
BTW apostrophe in Source View were converted "'". Is this for Beta edition?
This could be really useful if it would get cached in the browser for subsequent requests. From your demo it does not seem to do so. Re-requesting a image takes the same time as the first load.
Anyway to have it cached in the browser ?
Would it be possible to only stream the portion of the file you want - for example - I have a large image on the server and I want to retrieve a cropped version of it without having to process it.
Great hack Ted!
Ok, looking at the docs the readBytes method accepts an offset value so in theory you could jump in anywhere (maybe) - so if the pixel data is encoded in sequential order you could presumably read the image 'header' and get the dimensions and with some voodoo work out where to start retrieving bytes from?
Clutching at straws really - I just have a cool use for something like that :)
I have to render a image whose type is not supported by the flex but I know the structure of image file bytes. Does this function loader.loadBytes will work if I supply suitable bytes(exctacted from the image file)or there is any other approach to do so other that converting image to some know type.
I am trying to use URLStream to load data from http urls. I am running into a problem that after some time for large pages the data doesn't load. Specifically, the URLStream simply doesn't raise http status event. The problem is intermittant but happens only for large pages. Any idea what is happening and what can be done about it. Any help is greatly appreciated.
Hi Ted.
Comment 1: Regarding the security concerns, developers should know that Adobe has addressed it in Flex3 and now there's a 'allowLoadBytesCodeExecution' parameter that defaults to false.
Comment 2: Am I the only one who looks at this and cannot help but to think about how many applications have NOT been done in Flex/Flash in all these years because of the lack of this feature. ;)
Any way to grab the dimensions of the image before it finishes loading?
hi everybody i m a newbie at flex ...could anybody plz tell me how can i browse an image from my local disk and display it on my flex page...and the browse button and the image to be displayed have to be on the same page
Ted I love the pix and am wondering where they were taken(if you did take them by chance :)