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

Cut Up the Tarsier

We create our slices using the all-purpose “you’ll never think of this” solution: masking. Think about what the tarsier would look like if we sliced him into cross sections (from front to back) and put him back together. Instead of seeing his internal organs, all you see is his outer pelt. Taking that into account, the slices we need would look something like those shown in Figure 5-2.

Get the picture? It’s simply an expanding circular mask centered on the tarsier’s snout (the closest point to us in 3D space). However, if we stack these slices on a flat screen, they don’t appear to have any depth; all we see is the original tarsier. We add depth by emulating what happens when the tarsier turns his body. If the tarsier turns to his right (our left), in reality, the slices must rotate to display his left side (on our right). But if we keep the rotation small, we can approximate the 3D movement by simply sliding the slices around. The topmost slice (the one in the foreground) moves slightly to the left, and the bottommost slice (furthest away from the viewer) moves slightly to the right.

That’s the whole premise of the hack, and once you know it, the rest is relatively simple.

To create the slices, we tween an expanding circle and use it to mask the original tarsier clip. The mask tween stops at frame 19 so that at frame 20 we can see our full, unmasked critter as the last slice. To see the slices, load up critter02.fla from this book’s site, edit symbol critter in 3D in the Library, and scrub the playhead along the symbol’s timeline, as shown in Figure 5-3.

To display 20 slices of the tarsier on the Stage, attach 20 instances of the critter in 3D clip to the main timeline. Each slice’s timeline is stopped at one of the 20 frames in our animation.

this.attachMovie("menu", "menu_mc", 1000);
// Place the O'Reilly bar on the Stage
menu_mc._x = 200;
menu_mc._y = 270;
// Create an initialization object for the
// movie clips we are placing on stage.
var init:Object = new Object();
init._x = 200;
init._y = 200;
var sliceDepth:Number = 20;
// Attach 20 critter movie clips to the Stage, each // stopped at a different frame to create the slices.
for (var i:Number = 1; i < sliceDepth + 1; i++) {
var critterName:String = "critter" + (sliceDepth - i);
var critter:MovieClip = this.attachMovie("critter",     critterName, sliceDepth - i, init);
critter.gotoAndStop(i);
critter.offset = ((sliceDepth - i) - (sliceDepth / 2)) * 0.05; critter.onEnterFrame = initClip;
}

Attach the preceding code to frame 1 of the main timeline. The 20 slices (named critter20 through critter1) are placed at depths from 20 down to 1 at position (200, 200). All standard stuff. This line is the important one:

critter.gotoAndStop(i);

It stops each instance at one of the 20 frames in the masking animation, giving us 20 unique slices.

Another important line is this one:

critter.offset = ((sliceDepth - i) - (sliceDepth / 2)) * 0.05;

It adds a property named offset, whose value varies between -0.5 and 0.5, to each clip. The offset controls how much our slices move to the left and right in response to mouse movement (our pet tarsier is trained to turn toward the mouse position). 

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.