Image compression possibilities in Flash 8

By using the bitmapdata class in Flash 8 you can take a snapshot from an object and manipulate the pixels individually. This snapshot can be stored on a server using server scripting technology (PHP, ASP.NET,…).

Imagine a locally running Flash application where a movieclip holds a camera object. Every minute we take a snapshot from that camera object in flash and send/store it to our webserver. Another online application just read every minute that image from the server and shows it on your site. As result you get a cool live webcam on your site.(especially when you do it every 10 seconds ).

But to make such an application as realtime as possible we have to make sure that all imagedata send from Flash to our server is as small as possible so… compression is needed !. So first I give you some insights in possibilities to compress inside Flash.

What are the possibilities to compress?

First thing is to use a small webcam image to be send, like 160×120. You can afterwards scale the image up a bit in Flash when you read it from the server. But scaling reduces quality so here also “less is more”.

Otherwise we can make the bitstring we send as small as possible. Because actually we send eg a 32 bit pixel (or 24bit with no alpha channel applied) for every pixel in our image. If we count 19200 pixelvalues have to be sent to the server!! But happily we can reduce this overhead a bit by eg convert the value from base 16 to base 36. (shorter notation, so less data to be sent).

Another way is to encode / compress our bitstring by applying a Run Lenght Encoding (RLE) algorithm on it. Never heard about that encoding algorithm? Wait I give an example:

Imagine we have the following 4 x 4, 8 bit image (A):

If we do not use some encoding (B) the string will contains every pixel value of the image. If we just loop through this string we see that some values are the same so we can group them together like: 3*39. (C) This makes the pixelstring a lot shorter and the less data we have to send the faster our image can be stored on the server. This looks fine but is this compression already enough ? In several cases it can be enough (eg small webcam images) but mostly some more compression/encoding is needed (big images).

Another possibility is downgrading the colorpalette from 24 bit to eg 12 bit images. You can simply accomplish this by shifting off the least 4 significant bits to right from each color channel. If you want you can even downgrade the blue channel to 3 bits because our eye is less sensitive for blue then for red en green.

An alternative for Run Length Encoding is Lempel-Ziv-Welch (LZW) coding. It is also an error-free compression technique. The algorithm gives a code for all frequent words (pixelvalues) and stores it in some kind of dictionary (build on compress and decompress side). See following simplified LZW compress algorithm and example:

Example :

As you can see we now have to send only 9 codes instead of 14 ! So we have a compression ratio 14/9 = 1.56. You can also use this encoding on a plain text string (sending in urlstring has limited characters) to a server. You start to see some compression started if you have more then +-100 characters in a usual textstring.

So,I really hopes that this article makes some sense. By combining this different technologies you can already do some pretty good compression on your pixeldata/stringdata that has to be send to a server. Maybe by reading this information you want to start to try it out and make your own streaming service in flash :-).

happy coding,

Koen