Flash Hacks: Simulate 3D and Add a Vector Edge to a Bitmap - Move the Vector Outline

(Page 5 of 5 )

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.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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

>>> Be the FIRST to comment on this article!