The Bitmap to Flash Success
Sometimes a line drawing just isn’t enough. Photographic bitmapped images can add depth to the background of a Web site, enhance buttons and other interactive elements, and take the place of video footage. Just ask any advertising exec: Photographs are incredibly efficient at communicating subtle and abstract ideas such as comfort, happiness, experience and reliability, to name just a few. It’s true that Macromedia Flash 5 was designed to animate vector-based images, but used correctly — and sparingly — bitmapped images can give you the content you want without turning your final Flash player file into a monster download.
Bitmap Basics
There are a number of different file formats for bitmapped images that Flash 5 can import: BMP (Windows only), GIF, JPEG, PNG (Fireworks), PICT (Macintosh only), and EMF (Enhanced Metafile, Windows only). If you have QuickTime 4 installed on your computer, Flash 5 can also import PSD (Photoshop), QTF (QuickTime Image), PNTG (MacPaint), TGF (Targa), and TIFF, and it allows Windows users to import PICT files. The format you’ll use will mostly likely be determined by the application you use to edit your source images, whether it’s a simple utility like the QuickTime PictureViewer, an application designed to optimize bitmaps for the Web such as Macromedia Fireworks, or a sophisticated all-around image-editing application like Adobe Photoshop.
There are a few things to keep in mind when you prepare images for importing into Flash 5. The standard resolution for images used in dynamic-media applications (Flash, QuickTime, RealPlayer, broadcast video, etc.) is 72 dpi. Anything larger than that is not only a waste of space, but if it’s really big, say 300 dpi, Flash will take it upon itself to shrink it down for you. Also, the bigger the size of the file you import, the bigger your Flash movie will be on export. In short, smaller, compressed image formats such as GIF and JPEG are usually the best choices for most photographic images.
By cropping the original JPEG photo (left) of the earth, adding an alpha channel to matte out the sky (center), and saving the file in TIFF format, we decreased the Flash export file by 80 percent. Add a layer of black behind the alpha channel image (right) in Flash 5, and it looks the same as the original but the Flash export file size doesn’t increase.
Alpha Channels
Images with embedded alpha channels behave a little differently than ordinary bitmapped files. Alpha channels are special layers that add transparency to a bitmapped image. The image of the earth with the black sky on the left in the figure above is a normal JPEG file (116K in size), and the image in the center with the white background is a TIFF file with an embedded alpha channel used to crop out the background. Which one translates into a smaller Flash movie? Although the original TIFF file is 576K, the final exported Flash movie (on the right) is only 24K — about 20 percent the size of the 116K Flash movie you’d get from the JPEG file. This is because once the image with the embedded alpha channel is imported into Flash, Flash only “sees” the part of the image that’s not transparent — in this case the small circular shape of the globe instead of the larger rectangular shape of the entire image. Not only are alpha channeled “background-free” images extremely efficient, they are also easier to animate. Thanks to the alpha channel, the earth in the figure above becomes an object that you can move independently, colorize, make transparent, and place against different backgrounds.
Tracing Bitmaps
Another way to reduce file sizes when working with bitmaps is to convert them to vector-based images. The less complicated the bitmapped image, the more success you’ll have with the Trace Bitmap feature in Flash 5. After a while, you’ll develop an eye for what works as a traced bitmap and what doesn’t, like giraffes in the figure below: The giraffe head on the left is relatively simple, with distinct shapes and not a great many variations in color; rendering the the scene on the right would require many more vector-based shapes.
The photo on the left is a good choice for converting to vectors; the figure on the right is best left as a bitmap.
Converting to a vector-based format is no great challenge. After you import a bitmapped image into Flash 5, select Convert to Symbol from the Insert menu, be sure that Graphic is selected, and then select Trace Bitmap from the Modify menu.
Convert bitmapped images, like this photo of an African statue, with the Trace Bitmap feature in the Symbol Editor.
The Trace Bitmap dialogue box lets you set different parameters that affect the complexity of the resulting vector-based drawing.
Once you select Trace Bitmap, the dialogue box above will appear. Color Threshold refers to the amount of color detail preserved in the traced bitmap — the smaller the number in this box, the more complicated the tracing will be. Similarly, the smaller the Minimum Area, the tighter the Curve Fit, and the more Corners in the image, the more detailed the resulting vector-based image will be. It’s best to start out with the default settings and see how it looks, then Undo if you don’t care for the results, adjusting the Trace Bitmap parameters accordingly. The results of tracing a bitmap can range from something indistinguishable from the original to something much more cartoon-like, so experiment to find a look that you like.
The figure on the left is the original bitmapped image, the figure in the center is a complex tracing of it, and the figure on the right is a simplified tracing.
By selecting Outlines from the View menu, you can see how complicated a traced bitmap image really is.
The Numbers Game
The more detailed the resulting traced bitmap image, the larger your Flash file will be on export. A complicated traced bitmap, like the outline shown on the left in the figure above, can actually result in a bigger Flash Player file after exporting than the original bitmap. I have a very unscientific rule of thumb to help avoid cumbersome traced bitmaps: If you have a fairly fast computer (in my case, an Apple G3 with a lot of RAM) and you have to wait after you select OK in the Trace Bitmap dialogue box, then your resulting vector-based image will probably be too detailed. When I notice that I’ve been waiting a few seconds, I’ll stop the process and adjust the parameters until I get an image that doesn’t make my computer work quite so hard.
One way to get rid of too many vectors is to Optimize Curves from the Modify menu. The dialogue box shown below will appear. Again, the best way to find the settings that are right for you is to experiment. As you can see from the Totals Message in the second figure below, optimizing curves can cut the number of vectors in an image in half.
The Optimize Curves command automatically simplifies a traced bitmap without drastically changing the way it looks.
The Totals Message dialogue box tells you how many unnecessary curves the Optimize Curves command removed from your traced bitmap.
This article was last modified on January 3, 2023
This article was first published on February 2, 2001
Commenting is easier and faster when you're logged in!
