For some images (particularly
logos or other graphics that contain text or a
"spiky" edge rather than the
smoothly curving butterfly wing), the feathering technique loses the sharp edges of the
original. In such cases, we can do the opposite—create a sharp
In this hack, we hide the jaggies by covering them with a vector
stroke or by masking them out with a vector mask.
We perform the bitmap manipulation in Photoshop, but you
can achieve similar results in other programs, including Fireworks.
Select the image created in the preceding hack and export it as a PNG using
File→Save As. You also need to export a second image in
which you have turned all the nonzero pixels to black, as shown in
. You can do this in Photoshop by
selecting Image→Adjustments→ Brightness/Contrast.
Set both the brightness and contrast sliders in the
Brightness/Contrast window all the way to the left to turn all pixels
Figure 1. The black silhouette (left) of the original butterfly image (right)
Import both of the images into Flash using
File→Import→Import to Stage. Select the black
silhouette and convert it to a vector using
Modify→Bitmap→Trace Bitmap. This leaves you with a
black vector shape. You can add a stroke around the shape to create
an outline of your bitmap.
You can either use the stroke outline, as seen in , as a cookie cutter or use the shape as a
standard vector mask. The latter method is immediately obvious, but
the former is more efficient computationally because it
doesn't require Flash to constantly apply the mask
(which is helpful if you need to animate the bitmap later).
Figure 2. A cookie-cutter outline
When you convert the PNG into a vector, you do not end up with the
black shape encased in a white shape (which would happen if you
imported a bitmap consisting of a shape on a white background).
Because there is no background in our PNG (and because Flash can
correctly convert zero alpha pixels into "no
vector"), your vector conversion is faster, with
less cleanup afterward.
So let's move forward with the cookie-cutter method,
given that it is by far the more hacky and nonobvious.
Place the outline in a layer above the bitmap and align it over the
bitmap, as shown in . If necessary, use
the Subselection tool to make the stroke follow the edges of the
bitmap better. Aim to get the stroke to outline the bitmap with a
slight overlap. When you do this, it may be a good idea to view the
layer containing the vector as Outlines (you can do this by clicking
on the colored square to the left of the layer title).
Figure 3. An outline used as a cookie cutter
Break apart the bitmap using Modify→Break Apart. This allows
you to edit it with the vector tools.
Move the vector outline from its current layer to the same one as the
bitmap. The easiest way to move the vector outline between the layers
is via the clipboard:
Lock all layers except the one the vector outline is in.
Press Ctrl-A (Windows) or &command;-A (Mac) to select the
outline; then press Ctrl-X (Windows) or &command;-X (Mac) to
cut it to the clipboard.
Unlock the layer the bitmap is in. Lock all other layers. With
nothing selected, right-click (Windows) or &command;-click
(Mac) and select Edit→Paste in Place.
Select all pixels outside the outline and press Delete.
Finally, carefully delete the stroke, as shown in , to reveal a perfectly sharp vector edge
around your bitmap!
Figure 4. Delete the outline to reveal the sharp vector edge
Your bitmap has become a hybrid shape with the advantages of both
vectors (sharp edge) and bitmaps (complex textures). Cooler still,
the vector edge remains editable. You guessed it—you can even
animate the vector edge, as shown in ,
should the urge arise.
Figure 5. Animating the vector edge of a bitmap
As you can see from this hack, there is an awful lot you can do to
merge bitmaps into the clean, vector-sharp world of Flash. Not only
can you hide your jaggies using a PNG image and its associated alpha
mask, you can also create a Flash-only "pseudo
vector shape" consisting of a bitmap with a vector
outline. It's actually a vector with a bitmap as a
fill. The shape is sized exactly the same as the bitmap, so the
bitmap is tiled exactly once.