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

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

Learn two Flash tips: Create the illusion of a 3D object with volume; and hide jaggies by covering them with a vector stroke or by masking them out with a vector mask. (From the book, Flash Hacks, by Sham Bhangal, O'Reilly Media, 2004, ISBN: 0596006454.)

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
August 10, 2004
  1. · Flash Hacks: Simulate 3D and Add a Vector Edge to a Bitmap
  2. · Masking
  3. · Event Handlers
  4. · Hack 23: Add a Vector Edge to a Bitmap
  5. · Move the Vector Outline

print this article

Flash Hacks: Simulate 3D and Add a Vector Edge to a Bitmap
(Page 1 of 5 )

bhangalHack 35: Simulate 3D

Flash doesn’t support true 3D, but you can fake it by arranging 2D image slices as if they are filling a 3D space.

Although Flash doesn’t support 3D assets, you can simulate 3D in various ways using 2D assets. One simple approach is to arrange slices of 2D imagery but offset them to create the illusion of 3D. That is, a stack of flat 2D slices is used to create the illusion of a 3D object with volume.

This hack is inspired by a number of sites including the 3D head at sofake (go to http://www.sofake.com, click the 10th white square at the bottom of the home page, and click the link for haircut.swf) and Andy Foulds’s “Leader of the Free World” (go to http://www.foulds2000.freeserve.co.uk/index_v2.html and click on the 8th square above the Amusements heading).

However, I first saw this trick used back in Flash 4 by Rouien Zarin (http://www.zarinmedia.com) and Ant Eden (http://www.arseiam.com). Ant Eden also designed a wonderful 3D slice engine, which extends the concept by rotating and scaling the slices (click on the 3D icon at http://www.arseiam.com/index2.htm). This allows his slices to move in 3D space, rather than in just two dimensions as per this hack.

We learned earlier how to create a Flash animation by stripping a GIF, importing it into Flash, and then rebuilding it with a richer set of animation options [Hack #4]. This hack introduces the O’Reilly mascot (a tarsier from the cover of Learning the vi Editor) to the world of 3D. Although he doesn’t look very 3D in Figure 5-1, see the critter02.fla on this book’s web site to fully appreciate the effect.


Slice 2D to Create an Extra Dimension

Suppose you are slicing an apple parallel to the core. If the slices are cut really thin, you end up with many 2D cross sections. By stacking them in the order they existed in the original apple, you can re-create a 3D apple.

This hack works on the same principle: create a lot of 2D slices of an object, then move them as if they were stacked together in the original object. If done properly, the result looks like it is a 3D shape that has volume.

Buy the book!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.

blog comments powered by Disqus

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials