Recipe 6.4. Converting Bitmaps to Vector Art

Problem

You want to convert bitmap graphics to vector art.

Solution

Use Modify Trace Bitmap.

Discussion

Flash excels with vector graphics; most of its tools are designed to edit them and Flash is optimized to work with them. Vector graphics are also scalable, in contrast to bitmap graphics, which usually lose quality when scaled (especially when scaled up). Finally, due to their editability, vector graphics are easier to animate, since you can reshape them nondestructively. Using Flash's trace feature, you can convert any bitmap graphic to vector shapes.

As promising as this conversion may sound, tracing bitmaps is often not a viable solution. For highly detailed bitmaps, such as most digital photographs, vector graphics are inferior in almost every significant way to bitmaps, including editability, file size, and image quality.

To reproduce an image using vector graphics, Flash draws vector shapes. If an image is relatively simple, with large regions of a single color, Flash can easily render the image using shapes. But if the image is detailed and intricate, as most photographs are, Flash has to draw many extremely small shapes. At some point, the overhead of creating and drawing tiny shapes becomes more file size and processor-intensive than the original pixels. And if the resulting vector shapes are larger than a pixel, the image has less detail than the bitmap, which means that it doesn't look as good.

If you are considering vectorizing a bitmap, you ought to examine your motivations. If you want to vectorize the bitmap for stylistic purposes, that's a good reason. Another good reason to vectorize a bitmap is because you want to use shape tweens on the shapes that constitute the bitmap. However, if you want to vectorize the bitmap to save file size, you're very unlikely to achieve that particular goal unless the bitmap has very few colors and consists primarily of simple shapes.

If you determine that you do want to vectorize the bitmap, complete the following steps:

Tracing bitmap images requires you to balance the competing needs of file size and simplicity, on the one hand, and fidelity to the original image on the other. The process usually requires trial and error. Remember to use Edit Undo to bring an image back to its original state, so you can try again.

One strategy for tracing bitmaps is to trace two instances of the same bitmapone using low settings (yielding high quality), and one using high settings (yielding simple shapes). Then composite the two versions together using the high-quality source for important areas of the graphic and the low-quality source for less important parts of the graphic.

When you have traced a bitmap, you can sometimes further optimize the vectorized version using the Optimize feature in Flash. To use the feature, select the entire shape you want to optimize (e.g., the entire vectorized version of the bitmap) and select Modify Shape Optimize. The Optimize Curves dialog box will appear, prompting you for a few settings before it runs. Set the Smoothing slider based on how much you want Flash to smooth out the curves in the shape. Generally, the more smoothing you apply, the less it will resemble the original, but the greater the reduction in file size. Because you can undo after running the Optimize feature, you can use trial and error to find the setting that is most appropriate for your artwork. The Use Multiple Passes feature will automatically run the optimization repeatedly until it has determined that the shape is fully optimized. Typically, you will find it helpful to keep the Use Multiple Passes option checked unless you find that it is optimizing too much. When you've got the settings as you want, click the OK button to run the optimization. Depending on the complexity of the shape, it may take a second, or it may take many seconds. Once the optimization is done, deselect the shape on stage to see the effect. If it is acceptable, you don't need to take any further steps. If the optimization rendered the shape unrecognizable, you can undo and reapply with different settings.

If the Optimize feature didn't get enough of a file size reduction, you can still further optimize the shape using the smooth and straighten features. Using the Selection tool, select the traced bitmap shape. Then click on the Smooth or Straighten buttons at the bottom of the Tools panel. Or, optionally, choose Modify Shape Smooth or Modify Shape Straighten from the menus. You can apply smooth or straighten more than once. But check after each application to make sure that the traced bitmap shape still looks recognizable.

The following sequence of images shows the differences between different versions of a traced bitmap. The first is the original bitmap before being traced. When exported in the SWF, the bitmap in the example accounts for 56KB. The second image is a version that has been traced with a color threshold of 50, minimum area of 4 pixels, curve fit of normal, and corner threshold of normal. When exported in the SWF, the traced bitmap artwork accounts for 44KB. The third image is an optimized version of the second. The optimization was run with the smoothing set to maximum and using multiple passes. When exported in the SWF, the artwork accounts for 31KB. And the fourth image is a version of the third with further smoothing applied. When exported in the SWF, it accounts for 26KB.

Figure 6-1. You can optimize traced bitmaps using the Optimize feature as well as the Smooth and Straighten features

See Also

Recipe 6.1