This is a tutorial that I wrote quite a while ago and then forgot about. A number of things have changed since I wrote it (such as the release of two additional versions of flash), but other than that, the general concept introduced here still stands.

This technique addresses a number of issues that have plagued web developers for a long time.

Issue #1: JPEG’s complete lack of transparency options.
Issue #2: GIF’s inflexible transparency options (no alpha channels or anti-aliasing)
Issue #3: Spotty support for PNG files (which *do* have transparency)
Issue #4 Lack of compression options for PNG files. (PNG is a “loss-less” format so a simple 300×300 PNG image could be like 250K, where a JPEG of the same thing is only 30K.)

Please Note: I *am* aware that there is a javascript work-a-round to get PNG files to display properly in internet explorer. However, the javascript method still does not allow you to compress the PNG file!

So without further ado, here’s one of my fun little PNG workarounds I have discovered and used in the past. Heck, you can even do it yourself fairly easily!

Tools needed:

1. Photoshop, the GIMP, or equivalent image editing tool
2. Macromedia Flash MX (the editor, not the plugin)
3. HTML editor of some sort

Follow these steps to create a transparent PNG file:

1. Open up photoshop and create a new 500×500 pixel (72 dpi) image with a transparent background.
2. Create a new layer and scribble, draw, or write random things all over it. Make sure that there are plenty of blurred edges and semi-transparent things showing through to the next layer.
3. Click File > Save for Web.
4. Under the Settings drop-down of presets, select “PNG-24” and make sure “Transparency” is checked. For the image, you should see a white and gray checkerboard pattern with your scribbles and what not overlaying it.
5. Save file off as “testimage.png”

Ok. Now go right click on that file in windows explorer and view the properties. Mine was over 200K. Geez! Definitely in need of compression or something!!!

Load the PNG into Flash and save it for the web with compression:

1. Open up the Macromedia Flash MX editor.
2. Create a new document and set the size to 500×500 pixels.
3. Go up to File > Import and open the “testimage.png” file we created earlier.
4. Go to File > Save As and save the document as “testimage.fla”.
5. Go to File > Publish Settings.
6. On the Formats tab, we only need the Flash (.swf) and HTML (.html) items checked.
7. On the Flash tab, the default settings should be ok, but you may want to adjust the JPEG quality up to like 75 or something.
8. On the HTML tab, select “Flash Only” from the template drop-down, and set your window mode to “Transparent Windowless”. (**THIS IS VERY IMPORTANT!!! DO NOT LEAVE OUT THIS STEP!**)
9. Click the Publish button.

Ok. Done! Now close out of there, save the testimage.fla file, close out flash, whatever…
Go back to windows explorer and look at the folder where you saved testimage.fla.
You should see two new files: testimage.swf, and testimage.html.

Open up testimage.html in your web browser (either IE or Firefox, preferably).
Bam! There you have it! Your PNG file still has all its transparency, yet it displays perfectly in 98% of all the web browsers out there (basically anyone who has the flash plugin). And to top it off, it has JPEG compression as well. Check it out, right-click on testimage.swf and look at your properties. Wow! Only around 100K (as opposed to over 200K as a plain PNG)

Try putting a tiling background image of some sort in the testimage.html file to see how the alpha transparency works. You can also put the flash in a DIV or SPAN on it’s own layer above everything else and it’ll work great, too.

Another thing to try:
Try slapping a flash-based loader bar on each one of your PNG flash files. Your HTML page will now load completely by itself, and then all the PNG files will load separately in place with their own little loading status bars. Snazzy!