Recipe 6.3. Fitting Bitmaps Inside Shapes

Problem

You want to place a bitmap inside a shape with an irregular border.

Solution

Apply a bitmap fill to a vector shape, erase the edges of the bitmap, or use a mask.

Discussion

Flash offers three ways of filling a shape with a bitmap. No approach is better than the others in terms of file size in the exported .swf file, but each has its own intrinsic benefits, as discussed next. The three ways are:

• Draw a vector shape, and set its fill to any bitmap in the movie's library.

• Place an instance of a bitmap on the stage and erase its edges.

• Reveal an area of a bitmap using a mask.

You can apply a bitmap as the fill for an existing vector shape. This approach is useful if you've already drawn the vector shape, if a vector drawing tool exists that can create your shape for you (such as the Oval tool if you need to fill an ellipse), or if you are more comfortable drawing with a vector tool to create a shape than you would be trying to recreate that shape with a freehand tool, such as the Eraser tool.

Another benefit of this approach is that it is the only way to give a specific shape a tiled fill. That is, if the shape is larger than the bitmap, Flash repeats the bitmap to fill in the rest of the shape.

In addition, because the bitmap is being used as a fill, you have all the functionality of the Fill Transform tool at your disposal, which makes it easy to rotate, scale, distort, and reposition the fill relative to the shape.

To add a bitmap fill, complete the following steps:

Note that there are advantages to applying the fill before or after drawing the shape. If you apply a solid fill while drawing a shape and then convert that fill to the bitmap, the fill is applied with the same dimensions as the imported image. If you apply the bitmap fill with the Paint Bucket tool, the image is scaled much smaller. In either case, if you want to transform the bitmap fill by rotating, skewing, translating, or scaling it, you can do so with the Gradient Transform tool as you would a normal gradient fill.

If you simply want to use a freehand drawing tool to paint away the edges of an image, the most direct way is to use the Eraser tool.

A variation of this approach is to use the Lasso tool. Drag to select a region of pixels, and press the Delete key to remove the selected pixels.

Remember that even if you erase 95% of the image, the user still has to download the entire bitmap imported into Flash. Thus, if you do plan to erase most of an image, you should first crop the unneeded portions of it in an image editor, such as Fireworks or Photoshop.

Another alternative is to use a mask. Masks take more work than the preceding two methods, but you are rewarded with all the benefits of masking, including the potential to animate masks and make them dynamic and/or interactive via ActionScript. Masks are discussed in detail later in the chapter.

See Also

Recipe 6.8