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).
Suppose we want to import the bitmap shown in Figure 3-35 into Flash.
Very pretty from a distance. A closer look at the wing edges, as shown in Figure 3-36, reveals the dreaded bitmap 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 SelectModify
Expand, and expand the
selection by about 1 pixel. Press the Delete key to remove the
background, as shown in Figure 3-37.
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.
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
File
Import
Import to Stage. Alternatively, you can
choose File
Import
Import 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.
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.