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.)
Flash Hacks: Simulate 3D and Add a Vector Edge to a Bitmap (Page 1 of 5 )
Hack 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.htmland 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.
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!