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):

RLE ENCODING

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:

LZW_ALGORITHM

Example :

LZW ENCODING

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

Advertisements

15 responses to “Image compression possibilities in Flash 8

  1. Chris Charlton 16 May , 2006 at 1:22 am

    Wow, a little more than I’d thought with BitmapClass, thank you for posting. 🙂

  2. Mario Klingemann 16 May , 2006 at 11:13 am

    Nice Article! Well, if you want to see all of these principles (plus a few more) in action check out my Flash8 BitmapExporter class, which allows you to save Bitmaps from Flash as JPEG or PNG.

  3. Koen De Weggheleire 16 May , 2006 at 1:42 pm

    thanx Mario. Yeah your class is wonderfull and full of cool stuff to try !

  4. Pingback: JanuMedia » Bitmapdata / Image Compression Techniques Solutions for Flash 8

  5. Raf Vervink 17 May , 2006 at 10:46 pm

    Seems quite powerfull…

    I was just thinking, would it be possible to detect changes between the current image and the previous image and send only the changed pixeldata to the server. I’m not sure how exacly the server would recompile the data from two images into one, but i could be very usefull for applications like a Security Cam, with often very little, or no changes for several frames.

    Greets,
    skwerl 😉

  6. Koen 17 May , 2006 at 11:16 pm

    For your security cam Raf, you can better use the onActivity event from the Camera class that’s invoked when the camera starts or stops detecting motion. Take only a snapshot when enough motion is detected and send it to a server. You can get the amount of motion by reading the activityLevel property. This will be much faster then constantly checking every pixel for changes.

  7. Raf Vervink 18 May , 2006 at 3:56 pm

    Hmmm… very true!
    Ps: i’m gonna try to make a demo app for your post this weekend.

  8. Julian 11 June , 2006 at 7:51 pm

    That’s good stuff. I never even thought of compressing bitmap data when sending it from flash. Boy, do I feel stupid after reading your article.

  9. Ben 20 June , 2006 at 3:44 am

    I have a question? Have you figured out a way to read every pixel value of an image without looping through every pixel? That is the slowest part of saving an image for me. I don’t understand why something like toString() doesn’t just give you delimited list.

    thanks,

  10. Arun 8 August , 2006 at 11:17 am

    😉 Superb Idea man !

  11. ali 29 November , 2006 at 2:24 am

    i was trying to do that i have the image alredy in a server but i can´t get it ! plase help me

  12. KinGKriS 18 December , 2006 at 3:12 pm

    Hi, I have a question… firstly am not that good AS…

    By using bitmap class or any other is it possible for me to compress the image (wat ever the client needs to upload) size(weight) in client side and then send it to server…

    Kindly let me know….
    Thanks
    Kris

  13. managervis 8 April , 2007 at 1:00 pm

    Remindsme of the guys at the place I used to work at who used a snapshot ofthe Blue Screen Of Death as the screensaver for a very importantrouter. The IT division boss came into the network server room and sawit and almost had a stroke. He just made them get rid of it prettyfast.”

    “Back in school when I really didnt know any better, we replaced thestartup screen on Windows 95 with the ‘It is now safe to turn off yourcomputer’ screen. The poor buggers didnt last the week

    ringtone for motorola
    redneck ringtones
    ringtone lg

  14. Rajashekhar 22 May , 2009 at 1:09 pm

    Hi,

    This one i already tried. I prepared one like flash media server webcam reading and displaying. For generating and displaying my system is getting struck. I tried alot with this but i am not able to do it. If any body done any technic to compress the Bas64 text Please let me know. Its a sensation.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s