Macromedia Flash 8 Bible

Defining Vectors and Bitmaps

In addition to various sound and video formats, Flash supports two types of image formats: vector and bitmap. Vector graphic files consist of an equation that describes the placement of points and the qualities of the lines between those points. Using this basic logic, vector graphics tell the computer how to display the lines and shapes, as well as what colors to use, where to put them on the Stage, and at what scale.

Flash is a vector program. Thus, anything that you create with the Flash drawing tools will be described in vector format. Vector graphics have some important benefits: They're small in file size and they scale accurately without distortion. However, they also have a couple of drawbacks: Highly complex vector graphics may result in very large file sizes, and vectors aren't really suitable for creating continuous tones, photographs, or artistic brushwork.

Bitmap (also referred to as raster) files are described by an arrangement of individual pixels, which are mapped in a grid — like a piece of graph paper with tiny squares. Each square represents a single pixel, and each of these pixels has specific color values assigned to it. So, as the name implies, a bitmap image maps out the placement and color of each pixel on the screen. A line is "drawn" by filling each unique pixel, rather than simply using a mathematical formula to connect two points as is done with vectors.

Although bitmap images aren't created in Flash, they can be used within Flash projects. To do this, you need to use an external bitmap-editing application and then import the bitmaps into Flash. Figure 16-1 shows a vector image and a bitmap image of the same logo, scaled at 100 percent.

Figure 16-1: A vector image drawn in Flash (left) and the same image imported as a bitmapped GIF graphic (right)

Although these vector and bitmap images are of similar quality at their original size, their differences become more apparent when the same images are scaled to a larger size. Unlike vector graphics, bitmap images become more pixilated as they are scaled larger because there is a finite amount of information in the image and Flash has to spread this information over more pixels. As we explain later in this chapter, Flash is able to interpolate the pixel information by using Smoothing to reduce the jagged appearance of the scaled pixel pattern, but this can also cause the image to look blurred. Figure 16-2 shows the difference between vector and bitmap graphics when scaled in Flash with Smoothing turned off.

Figure 16-2: The same vector (left) and bitmap (right) image scaled to 200 percent in Flash to illustrate the difference in image quality

Simple bitmap images are often larger in file size than simple vector graphics, but very complex bitmap images (for example, a photograph) can be smaller and display better quality than vector graphics of equal complexity. Figure 16-3 shows a bitmap image compared to a vector image of equal complexity (created by tracing the bitmap). The original bitmap is a smaller file and better suited for reproducing the photographic image.

Figure 16-3: File size comparison of an imported bitmap image (left), and a traced vector image of equivalent complexity (right)

The rule of thumb is to use scalable, bandwidth-efficient vector graphics as much as possible within Flash projects, except for situations in which photographs — or photographic-quality, continuous-tone images — are necessary for special content.