Preparing Bitmaps

Flash is a vector-based application, but that shouldn't stop you from using bitmaps when you need them. There are many situations in which either the designs or the nature of the content require that photographic images be included in a Flash project. You can import a wide variety of bitmap image types, including JPEG, GIF, BMP, and PICT using the methods we describe in the next section.

Considering that it's a vector-based program, Flash supports bitmap graphics extraordinarily well. However, because the most common use of Flash movies is for Web presentations, you always need to keep file size in mind. Here's what you can do to limit the impact of bitmap images on Flash playback performance:

• Limit the number of bitmaps used in any one frame of a Flash movie.

• Remember that, regardless of how many times the bitmap is placed on the Stage, the actual bitmap (or its compressed version in the .swf file) is downloaded before the first occurrence of the bitmap (or its symbol instance).

• Try spreading out bitmap usage, or hide a symbol instance of the bitmap in an earlier frame before it is actually visible, so that it will be loaded when you need it.

Tip 

If you need to include several high-resolution bitmap images in your Flash movie, consider using an ActionScript preloader or try breaking up the project into several linked Flash movies.

When you want to bring raster images into Flash documents, you should know what portion of the Flash Stage the image will occupy. Let's assume that you're working with the default Flash document size of 550 x 400 pixels. If you want to use a bitmap as a background image, it won't need to be any larger than 550 x 400 (as long as your movie will not be scalable). So, assuming that you're starting with a high-resolution image, you would downscale the image to the largest size at which it will appear in the Flash movie before you import it into Flash; for our example, that would be 550 x 400.

Tip 

Use an image-editing program such as Macromedia Fireworks or Adobe Photoshop to downsize the pixel width and height of your source image if necessary.

If you mask bitmaps with a Mask layer in the Flash Timeline, the entire bitmap is still exported. Consequently, before import you should closely crop all images that will be masked in Flash. For example, if all you need to show is a face, crop the image so that it shows the face with as little extraneous background information as possible.

Be aware that Flash doesn't resize (or resample) an image to its viewed or placed size when the Flash movie (.swf) is created. To illustrate how the size of an imported bitmap can impact the size of a final Flash movie (.swf), we compared two different image resolutions used in identical layouts. Using the same source image, we sized the JPEG at two different pixel dimensions, and then placed it in two identical Flash documents (.fla). The first source version of the image had a 400 x 600 pixel dimension, while the second source version had a 200 x 300 pixel dimension — exactly half the size of the first. In both Flash documents, the final image was displayed at 200 x 300 pixels.

In the first Flash document (we'll call it Movie A), we imported the larger JPEG and resized it by 50 percent (using the Info panel) to match the smaller image. In the second Flash document (Movie B), we imported the smaller JPEG and placed it at its original size, occupying the same portion of the Flash Stage as the image in Movie A. Although both Flash movies exported a bitmap of the same display size on the Flash Stage, the resulting .swf files (using the same level of JPEG compression on export) had drastically different file sizes. Movie A was 44.1KB, whereas Movie B was 14.8 KB! Movie A is nearly three times larger than Movie B. The difference in image resolution could be seen when a view magnification greater than 100 percent was used within the Flash Player; the larger JPEG in Movie A was much less pixilated than the smaller JPEG in Movie B.

Raster Images: Resolution, Dimensions, and Bit Depth

Resolution refers to the amount of information within a given unit of measurement. Greater resolutions mean better quality (or more image information). With respect to raster images, resolution is usually measured in pixels per inch (when viewed on a monitor) or dots per inch (when output on film or paper).

What is resolution?

The resolution of an original image changes whenever the scale of the image is changed, while the pixel dimensions remain fixed. Thus, if an original photograph is scanned at 300 pixels per inch (ppi) with dimensions of 2" x 2", subsequently changing the dimensions to 4" x 4" will result in a resolution of 150 ppi. Although a 4" x 4" image at 300 ppi could be interpolated from the original image, true resolution will be lost as an image is scaled larger. When an image is digitally enlarged, the graphics application simply doubles existing pixel information, which can create a softened or blurred image. Reducing the scale of an image has few undesirable side effects — although a much smaller version of an original may lose some fine details.

Because all raster images consist of pixels, and because resolution simply describes how many pixels will be arranged in a given area, the most accurate way of referencing raster images is by using the absolute pixel width and height of an image. For example, a 4,000 x 5,000-pixel image could be printed or displayed at any size with variable resolutions. This image could be 4" x 5" at 1,000 ppi, or it could be 8" x 10" at 500 ppi — without any loss of information. Remember that resolution simply describes how much information is shown per unit. When you reduce the pixel width and height of an image, the resolution is lowered accordingly, and after any pixels are thrown out, discarded, or interpolated, they're gone for good.

Raster images: Bit depth

Bit depth is an important factor that influences image quality and file size. Bit depth refers to the amount of information stored for each pixel of an image. The most common bit depths for images are 8-bit and 24-bit, although many others exist. An 8-bit image contains up to 256 colors, while a 24-bit image may contain 16.7 million color values. Depending on their file format, some images can also use an 8-bit alpha channel, which is a multilevel transparency layer. Each addition to an image's bit-depth is reflected in a considerable file size increase: A 24-bit image contains three times the information per pixel as an 8-bit image. Mathematically, you can calculate the file size (in bytes) of an image with the following formula (all measurements are in pixels):

 width × height × (bit depth ÷ 8) = file size 

Note: You divide bit depth by 8 because there are 8 bits per byte.

When importing 8-bit images in formats such as GIF, BMP, and PICT, it is preferable to use the default Lossless (PNG/GIF) compression setting in Bitmap Properties to avoid adding Flash's default Publish Settings Quality 24-bit JPEG compression. Eight-bit images that use Web-safe color palettes will ensure greater display predictability for people viewing your Flash artwork on older systems with 8-bit video cards.