Double Sided Plane in Flash Player 10

So I just returned from a two month “cruise” (Navy term for “hell on a ship”) to Europe and back to the states (survived the Bermuda Triangle incidentally) last night and I suddenly find out two things: our cat, Hildegard, has a brand new kitty home back in Ireland and Flash 10 beta is available for download and testing.

Well, awhile back, I showed a fairly simple way to make a double sided plane using Papervision3d. Since Flash 10 supports basic 3d natively (!), I thought I’d do something similar for my first F10 experiment. The first thing you’ll notice that’ll annoy the snot out of you when playing with 3d in Flash is how z sorting is handled. Flash’s display index position will “always” (I use quotes as I very well could have overlooked something) override the 3d DisplayObject z property. Which is to say, if I add displayObject1 to the stage, then add displayObject2, with the same dimensions as the first, to the stage at the same coordinates, but set number 2’s z property to 1000 (e.g.), displayObject2 will appear much smaller, but will still appear on top of displayObject1. Ick. Hopefully that will be fixed in the final release. Obviously something farther away should appear behind something closer, regardless of the order they entered the display list. For this reason, the “push one side of the plane back 1 pixel” trick I used in the PV3d version will not work here. Instead I had to use a bit of a “hacky” work around and hide the back side of the plane using the visible property when it shouldn’t be seen. Anyway, here’s the down and dirty class file that does the work:

package { import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.Event; import flash.filters.DropShadowFilter; /** * Double sided plane in Flash 10 * @author Devon O. */ [SWF(width="500", height="400", backgroundColor="#333333", framerate="31")] public class main extends Sprite { [Embed (source="assets/face.jpg")] private var Face:Class; [Embed (source="assets/back.jpg")] private var Back:Class; private var card:Sprite; private var faceImage:DisplayObject; private var backImage:DisplayObject; public function main() { initImages(); initCard(); addEventListener(Event.ENTER_FRAME, frameHandler); } // create new images for "face" and "back" of card using embedded jpg files private function initImages():void { faceImage = new Face(); faceImage.x -= faceImage.width * .5; faceImage.y -= faceImage.height * .5; backImage = new Back(); backImage.scaleX = -1; backImage.x = -faceImage.x; backImage.y = faceImage.y; // push the back image a little into z space backImage.z = 1; } private function initCard():void { card = new Sprite(); card.x = 250; card.y = 200; card.rotationZ = -15; card.addChild(faceImage); card.addChild(backImage); card.filters = [ new DropShadowFilter(50, 45, 0x000000, .75, 16, 16, 1, 2) ]; addChild(card); } private function frameHandler(e:Event):void { card.rotationY -= 10; var currentRot:Number = -(card.rotationY % 360); // hide the back image when the face should be in front backImage.visible = (currentRot > 94 && currentRot < 274); } } }

And that will yield (of course you will need the Flash Player 10 installed to see):

[kml_flashembed movie="http://blog.onebyonedesign.com/wp-content/uploads/2008/05/main.swf" height="400" width="500" /]

More Flash 10 goodness yet to come...