Onebyone Design

Here’s a little trick I learned from playing with After Effects (“postcards in space”, man).

If you’d like to have a double sided Plane object (playing card, flipping piece of paper, etc), simply create a DisplayObject3D instance, add your two sides as planes, push one side back a single pixel on the z axis, then rotate the DisplayObject3D item (which of course will rotate both front and back image as though they were a single item).

Of course this would probably make a little more sense in code form, so here’s a quick example:

/** 
* Example of a Double Sided "Card" with Papervision3D 
*/         

package {         

	import flash.display.BitmapData; 
	import flash.display.Sprite; 
	import flash.events.Event; 
	import flash.filters.DropShadowFilter;         

	//papervision 
	import org.papervision3d.materials.BitmapAssetMaterial; 
	import org.papervision3d.cameras.Camera3D; 
	import org.papervision3d.objects.Plane; 
	import org.papervision3d.objects.DisplayObject3D; 
	import org.papervision3d.Papervision3D; 
	import org.papervision3d.scenes.Scene3D;         

	public class CardExample extends Sprite { 
		private var container:Sprite; 
		private var scene:Scene3D; 
		private var camera:Camera3D; 
		private var card:DisplayObject3D; 
		public function CardExample() { 
			Papervision3D.VERBOSE=false;         

			init(); 
		}         

		private function init():void { 
			init3d(); 
			createCard(); 
			addEventListener(Event.ENTER_FRAME,render); 
		}         

		private function createCard():void { 
			// "Face" and "Back" are two bitmaps imported into .fla library 
			//and set to link for actionscript with those class names.         

			var faceMat:BitmapAssetMaterial=new BitmapAssetMaterial("Face"); 
			faceMat.oneSide=false; 
			var backMat:BitmapAssetMaterial=new BitmapAssetMaterial("Back"); 
			var face:Plane=new Plane(faceMat,0,0,2);         

			//push the face back one pixel in z space 
			face.z=1;         

			var back:Plane=new Plane(backMat,0,0,2);         

			card.addChild(back); 
			card.addChild(face);         

		}         

		private function init3d():void { 
			container=new Sprite  ; 
			container.x=stage.stageWidth * .5; 
			container.y=stage.stageHeight * .5 - 30; 
			container.filters=[new DropShadowFilter(75,45,0x000000,.8,50,50)]; 
			addChild(container);         

			card=new DisplayObject3D  ;         

			//give the card a jaunty little angle 
			card.rotationZ=10;         

			scene=new Scene3D(container); 
			scene.addChild(card);         

			camera=new Camera3D  ; 
			camera.focus=250; 
			camera.zoom=4; 
		}         

		private function render(e:Event):void { 
			//spin the card 
			card.rotationY+= 5; 
			scene.renderCamera(camera); 
		} 
	} 
}

And that will give you:

[kml_flashembed movie=”/wp-content/uploads/2008/01/cardexample.swf” height=”400″ width=”500″ fversion=”9″ /]

Nice, huh?