This chapter is from the book
This chapter is from the book
This chapter is from the book
Task: Convert a Bitmap to a Vector
In a new file, select File, Import and point to the file Pinstripe.bmp, found in the C:\Windows directory. (If you can't find this image I have a few samples at http://www.phillipkerman.com/teachyourself.)
-
Zoom in on the graphic so that you can see what a bitmap looks like close up. It should look grainy, like the image in Figure 3.14. Obviously, it wouldn't scale well, which is a characteristic of bitmaps.
-
With the object selected, choose Modify, Trace Bitmap. In the resulting dialog box, shown in Figure 3.15, enter 1 in the Color Threshold field. This indicates how close two colors must be to be considered the same color. Minimum Area specifies how small the smallest vector shape can be. Set this at 10. Leave Curve Fit and Corner Threshold at Normal. Click OK.
The graphic is now all vector shapes. The stripes on the edge may be bent, and you may see some weird artifacts on the top or bottom (these can be fixed). Even so, the graphic not only looks as good as the original, it looks better—especially if you need to scale to a larger size.
){kind=link}
){kind=link}
An artifact is any unwanted or obscure result of a process. Static on the radio is an artifact of transmission. Moiré patterns in magazine pictures, color shifts on TV, raindrops on the camera lens, and typos in books are all examples of artifacts. Similarly, Flash's Trace Bitmap feature sometimes leaves artifacts. JPEG compression also has artifacts, which are most noticeable when you set the quality to a low number.
Figure 3.14 A bitmapped image looks grainy when you scale it or zoom in.
Figure 3.15 The Trace Bitmap dialog box lets you specify how tracing will occur.
With its nice clear geometric shapes, the image I selected for this task is particularly well suited to conversion to a vector graphic. Sometimes it's not easy for Flash to convert a graphic to a vector because the image is too intricate. Other tools especially designed for this, such as Adobe's Streamline, use more sophisticated processing methods. However, before you give up on this feature, experiment with the settings in the Trace Bitmap dialog box. The Help button provides details about each setting.
The Trace Bitmap dialog box (see Figure 3.16) has several interesting options. The Help button provides more details about each setting.
){kind=link}
When tracing, Flash tries to lump areas of the bitmap into single shapes. Color Threshold specifies how different two colors can be (in RGB values) and still be considered the same. If you set this number high, you will end up with fewer colors and fewer areas.
Minimum Area specifies the smallest area Flash will create. If you have a very detailed image, this number should be lower, unless you want a mosaic effect.
Curve Fit affects how closely straight and curved areas will be copied. The Very Smooth end of the Curve Fit scale is like having a very large pen with which to draw a shape in one quick movement. If you could use a fine pencil and as many strokes as needed, that would be like the other extreme, Pixels or Very Tight.
Corner Threshold determines whether corners are left alone or removed.
In addition to converting a bitmap to a vector graphic, you can "vectorize" a bitmap for an artistic effect. It just takes experimentation. Keep in mind that using Trace Bitmap sometimes results in an image that looks identical to the bitmap but with a larger file size. Consider this option only when the nature of the image is more suitable as a vector or when you want a special effect.
Figures 3.16–3.19 show several examples of bitmaps that have been converted to vectors using different settings.
){kind=link}
Figure 3.16 Large smooth vector shapes that can be filled with any color.
Bitmap Sequences
Although Flash MX now supports video (see Hour 17, "Using Video"), sometimes all you need is a sequence of still images. The effect of image sequences can look like video, like in the original m-three snowboard site that I programmed entirely in Flash 4 (see Figure 3.20). Visitors to the site could watch bitmap sequences (of snowboard tricks) that are actually still frames extracted from a video. This isn't "video" because it doesn't have any synchronized sound. It was a rather simple process of using video editing software to export a bitmap of each frame, and then import it into Flash. This solution is great when you don't need synchronized sound.
){kind=link}
Figure 3.17 Notice subtle differences in how the building windows are combined in the example on the right with a high color threshold.
){kind=link}
Figure 3.18 With relatively small threshold and minimum areas, this image looks "posterized."
){kind=link}
You might expect that it would take a long time to import one frame at a time. Luckily, Flash is smart when importing a series of graphics. If you have several images that contain sequential numbers in their filenames (pic_001.bmp, pic_002.bmp, and pic_003.bmp, for example) and that are in the same folder, you simply import the first image. Flash will ask whether you intend to import the entire sequence (as in Figure 3.21). Flash will do the additional work to create a frame-by-frame animation, as is discussed in Hour 7, "Animation the Old-Fashioned Way." With a little planning (mainly in naming the files correctly), you can import several images in one move.
){kind=link}
Figure 3.19 A large color threshold on the bottom left causes the sky to get "banded."
Figure 3.20 The Flash site http://www.m-three.com includes several action sequences that simulate videos. Screen shot courtesy Paris France, Inc., copyright MLY Snowboards.
Figure 3.21 Flash will often recognize when you're attempting to import several images in sequence.