Flash Hacks: Simulate 3D and Add a Vector Edge to a Bitmap

Hack 23: Add a Vector Edge to a Bitmap

When you need a graphic that contains textures and a sharp edge, you are stuck. A vector shape will give you the sharp edge but is not able to show complex textures. A bitmap can show complex textures but will have no sharp edge. Create the best of both vectors and bitmaps in Flash—a bitmap with a vector edge.

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 [Hack #22] loses the sharp edges of the original. In such cases, we can do the opposite—create a sharp vector edge.

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 [Hack #22] 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 Figure 3-40. You can do this in Photoshop by selecting Image -> Adjustments -> Bright-ness/Contrast. Set both the brightness and contrast sliders in the Brightness/ Contrast window all the way to the left to turn all pixels to black.

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 Figure 3-41, 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).

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.

If you've enjoyed what you've seen here, or to get more information, click on the "Buy the book!" graphic. Pick up a copy today! Visit the O'Reilly Network http://www.oreillynet.com for more online content.