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

Place the outline in a layer above the bitmap and align it over the bitmap, as shown in Figure 3-42. 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).

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:

1. Lock all layers except the one the vector outline is in.
   
   
2. Press Ctrl-A (Windows) or the command key-A (Mac) to select the outline; then press Ctrl-X (Windows) or the command key-X (Mac) to cut it to the clipboard.
   
   
3. Unlock the layer the bitmap is in. Lock all other layers. With nothing selected, right-click (Windows) or the command key-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 Figure 3-43, to reveal a perfectly sharp vector edge around your bitmap!

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 Figure 3-44, should the urge arise.

Final Thoughts

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.

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.