Hack 22 Feather Bitmap Edges

Vectors are great for their smooth edges at any resolution, but sometimes you need to use bitmap art. Improve the apparent quality of a bitmap's edge by cleaning up jaggies via alpha channels or vector edges.

Bitmaps are sometimes preferable to vectors, especially when you are trying to represent anything with texture (as opposed to areas of solid or near-solid colors, which are better represented with vector shapes only). A number of recent animations—desiderata at http://www.centrifuga.net/desiderata.html and paper sky at http://www.centrifuga.net/gab.html being good examples—have tended to use bitmaps for this reason.

The big disadvantage with bitmaps is that they can appear pixelated. This hack shows two ways to reduce the aliased edges of bitmaps. Pixelation is usually most evident at a bitmap's edges where there is the greatest color change between an image and its background (subtle gradations of hues tend to hide the pixelation elsewhere within an image). The technical term for jaggies (also called "staircasing") is aliasing error. Aliasing is seen in any digital data in which you undersampled the original data. Undersampling generates artifacts caused by the sampling frequency or process (i.e., you see aliases of the sample rate). In the case of a bitmaps image, this undersampling shows itself as obvious pixels. Aliasing occurs in other digital data, particularly sound [Hack #58] . Addressing the aliasing problem is known as antialiasing. One way to address it is using alpha transparencies, which tend to soften the edges around bitmaps so they blend better with the background, avoiding the halo effect (in which an image has light pixels around its perimeter).

Feathering Bitmaps

Suppose we want to import the bitmap shown in Figure 3-35 into Flash.

Figure 3-35. A butterfly bitmap

Very pretty from a distance. A closer look at the wing edges, as shown in Figure 3-36, reveals the dreaded bitmap jaggies.

Figure 3-36. A close-up showing jaggies

To fix the jaggies, you can feather the edges in Photoshop before importing the image into Flash.

Load the image in Photoshop. Flatten the image if required, so that you have all the pixels on a single Photoshop layer. This layer is called Background, and Photoshop does not easily allow you to add alpha to the pixels on this layer. To fix this, right-click (Windows) or -click (Mac) on this layer in the Layers panel and select Duplicate Layer. Accept the default name (Background copy).

Next, select the background areas around your image with Photoshop's Magic Wand tool. To avoid a halo effect, choose SelectModifyExpand, and expand the selection by about 1 pixel. Press the Delete key to remove the background, as shown in Figure 3-37.

Figure 3-37. The butterfly image without a background

We've lost the butterfly's antennae, but we can replace them with two vector curves once we are in Flash.

Next, we add the feathering—graduated edges to hide the pixelation at the edges.

With the selection still in place—you can get it back by clicking the Magic Wand tool anywhere in the no-pixel (checkerboard) area of the image if you have inadvertently unselected it—choose SelectFeather and set the Feather option to 2 pixels. Using the Eraser tool (100% opacity), erase around the perimeter of the selection. Figure 3-38 shows the before and after views of the edges of the bitmap.

Figure 3-38. Before (left) and after (right) feathering the edge of a bitmap in Photoshop

Feather again if required, this time using a 1-pixel feather range.

Finally, save your image as a PNG with FileSave As. You will be given the choice of saving the file as Interlaced or Non-interlaced. Choose Non-interlaced. Import it into Flash using FileImportImport to Stage. Alternatively, you can choose FileImportImport to Library and then drag the asset from the Library to the Stage to use it in the timeline.

You can see in Figure 3-39 that the feathered butterfly wing is much less blocky than the same bitmap without feathering.

Figure 3-39. Close-up of feathered (left) and unfeathered (right) bitmap edges

The edge is an alpha blend and not a color blend; if you put the butterfly over any background, it would still blend into its surroundings. Although this makes the image more versatile, in some cases you may not need alpha, particularly when the image will be seen in Flash against a solid colored background.