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?