December 16, 2005
Something Big: Loading Transparent PNGs into Flash 8

As you probably know by now Flash 8 allows us to dynamically load transparent PNGs and GIFs. That's great in theory - in pratice you might run into the same issue as I did: size. Transparent images of photographic content, like people or product-shots can become quite big when saved as PNGs. That's because the PNG compression algorithm is better suited for images with limited color palettes like type or illustrations.

In a project I'm currently working on I have to load lots of transparent product shots into a gallery. The problem is - each of these images is about 500K in size. And even with broadband that's out of the question. So this is where the capabilities of the BitmapData class come to my help: instead of loading one transparent image I split it up into two components: one part is the RGB image which I save as a JPEG and the other part is the alpha mask which I can save as a GIF (I could save it as a JPEG, too, but especially at the hard edges of black and white masks JPEG might give us undesirable artifacts). After I have loaded both parts I use the compositing capabilities of the BitmapData class to create a transparent image again. The gain? The JPEGs are about 55K in size, the GIFs are about 8K which means 63K instead of 500K - not bad. Plus I circumvent the image antialiasing problem that happens when loading images into Flash 8.

I've written a little MaskImage class to automate the image assembly for me. Here's an example how it works. The original transparent PNG (800x600 pixels) has a size of 645K. Split up into the RGB part and the alpha part they look like this:

The RGB component of my dog James saved as a JPEG (800x600 pixels: 44K)

The alpha mask of James saved as a GIF (800x600 pixels: 11K)

You can download the MaskImage class and the example here.

Posted at December 16, 2005 12:28 PM | Further reading
Comments

Nice lesson. Simple, but very useful. Thanks sharing your expierence!

Posted by: Susan on December 16, 2005 01:47 PM

Different thought of implementation.. Thanks for sharing!!!

Posted by: Elango on December 16, 2005 02:48 PM

I also have to say: Thx for sharing. I'm sure it will come in handy sometime.

Posted by: Aron on December 16, 2005 04:00 PM

Freakin' rocks dude...truly a great tip.

Posted by: Ralph on December 16, 2005 08:12 PM

This is genius! Very clever indeed!

Posted by: Emme on December 17, 2005 01:50 PM

Nice solution!

Posted by: jensen on December 20, 2005 10:36 PM

Hi Mario, thanks for the useful tip.

I've only a question:

the loaded bitmap is smoothed by default?
Because I've tried to load some gifs/jpegs but they doesn't seem smoothed.

Thanks a lot

Posted by: Riccardo Bartoli on January 3, 2006 04:18 PM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Thank you!

Most Visited Entries
Sketches, Works & Source Code
Lectures
Contact
Backlog
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german
Impressum


My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers