Previous Page
Next Page

Tripod >> 3pod Tips & Learning and manuals for educations

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:

  1. Use the vector drawing tools to draw a shape on the stage. You may draw the shape with a solid fill to start, or you may add the fill afterward using the Paint Bucket tool.

  2. If you've drawn the shape with a solid fill, select the fill.

  3. Open the Color Mixer panel, and from the Type menu, select Bitmap.

  4. When you select the Bitmap type from the menu, the selector just below becomes a scrollable region with swatches of each bitmap in the library. If you haven't yet imported the bitmap, you can click the Import button just beneath the Type menu to select the bitmap to import. When the bitmap is imported, select it from the selector's swatches.

  5. If you applied a solid fill while drawing the shape, the bitmap fill is automatically applied. Otherwise, you'll need to select the Paint Bucket tool and apply the fill that way.

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.

  1. Drag an instance of the bitmap onto the stage.

  2. Break the bitmap apart by choosing Modify Break Apart.

  3. Select the Eraser tool, and use the Options section at the bottom of the Tools panel to select the desired Erase Mode and Size.

  4. Drag with the eraser over the bitmap. Be aware that Flash automatically smoothes the edges when using 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

Tripod >> 3pod Botom Tips & Learning and manuals for educations

Previous Page
Next Page

 

bluedot bluedots greydots pinkdots

Tripod >> 3pod Tips & Learning and manuals for educations