Panel flip in Papervision3D
I finally started to work with the Papervision3d classes this month and spent some time searching to for tips or tutorials to do what I wanted to do. I had some difficulty finding exactly what I wanted so I wanted to share my example incase others are looking to do this.
I wanted to display a panel that flips around that would have content on the front and related content on the back…that’s the goal anyway. Here is my code to make a basic panel flip from two MovieClips. Note: every example I could find on this used images.
Source | Demo
You’ll need the latest Papervision3D classes found here.
*updated panel flip code 11-2009 using TextMate and the Flex SDK to compile.
package {
import flash.display.*;
import flash.events.*;
import flash.text.*;
//3D imports
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.view.BasicView;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
//Tweener: http://code.google.com/p/tweener/
import caurina.transitions.Tweener;
/*
Sample code to display a panel that flips around to show additional content.
Updated 11-2009 Gerry Creighton - www.thespikeranch.com
*/
[SWF(width='1024', height='768', backgroundColor='#FFFFFF', frameRate='60')]
public class PanelFlip extends MovieClip {
private var view: BasicView;
private var planeGroup: DisplayObject3D;
private var frontPlane: Plane;
private var backPlane: Plane;
private var _frontBox: MovieClip;
private var _backBox: MovieClip;
private var _frontTF: TextField;
private var _backTF: TextField;
private var _fstring: String;
private var _bstring: String;
private var _fmc: Sprite;
private var _bmc: Sprite;
private var _frontPlane: MovieMaterial;
private var _backPlane: MovieMaterial;
public function PanelFlip() {
//
_fstring = "This is the front panel that is colored red using hex #990000. You can color it whatever you'd like. Click on me to flip me around to the back!";
_bstring = "This is the back panel, the grey colored one, that you revealed after clicking on the front panel. Click on me to flip me back around to the front!";
//this will hold both your planes in a group
planeGroup = new DisplayObject3D();
view = new BasicView(1024, 768,true, true);
view.camera.zoom = 0;
view.viewport.interactive = true;
addChild(view);
//create movieClips then pass those to buildPlanes
createContent();
buildPlanes(_frontBox,_backBox);
}
private function createContent():void{
//make two sides to test
//front movieClip
_frontBox = new MovieClip();
_frontBox.graphics.beginFill(0x990000);
_frontBox.graphics.drawRoundRect(0,0,400,610,10);
_frontBox.graphics.endFill();
//back movieClip
_backBox = new MovieClip();
_backBox.graphics.beginFill(0x999999);
_backBox.graphics.drawRoundRect(0,0,400,610,10);
_backBox.graphics.endFill();
//front textField
_frontTF = makeTF(_fstring,350,200,20,0xFFFFFF,true,false,false);
_frontTF.x = 10;
_frontTF.y = 20;
_backTF = makeTF(_bstring,350,200,20,0xFFFFFF,true,false,false);
_backTF.x = 10;
_backTF.y = 20;
_frontBox.addChild(_frontTF);
_backBox.addChild(_backTF);
}
private function buildPlanes(_fr:MovieClip,_bk:MovieClip):void{
_fmc = _fr;
_bmc = _bk;
//front plane
_frontPlane = new MovieMaterial(_fmc,true,true,true);
_frontPlane.smooth = true;
_frontPlane.interactive = true;
frontPlane = new Plane(_frontPlane);
frontPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, planeClickedHandler, false, 0, true);
//back plane
_backPlane = new MovieMaterial(_bmc,true,true,true);
//smooth out the text
_backPlane.smooth = true;
_backPlane.interactive = true;
backPlane = new Plane(_backPlane);
backPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, planeClickedHandler, false, 0, true);
planeGroup.addChild(frontPlane);
/*rotate the plane in the "back" so it looks like the
back side of the front*/
backPlane.rotationY = 180;
planeGroup.addChild(backPlane);
frontPlane.z = 1;//puts the frontPlane in front of the backPlane
view.scene.addChild(planeGroup);
view.startRendering();
//animate camera zoom
Tweener.addTween( view.camera, {zoom: 100, time: .5,delay:1, transition:"easeoutexpo"} );
}
private function planeClickedHandler(e:InteractiveScene3DEvent):void {
if (! Tweener.isTweening(planeGroup)) {
var targetRotation:Number = (planeGroup.rotationY <180) ? 180 : 0;
Tweener.addTween(planeGroup, { time:2, transition:'easeinoutback',rotationY: targetRotation } );
}
}
//create a textfield
private function makeTF(_str:String,_w:Number,_h:Number,sz:Number,col:Number,_multi:Boolean,embed:Boolean,_select:Boolean):TextField {
//textField format
var _txtfmt:TextFormat = new TextFormat();
_txtfmt.font = "Helvetica";
_txtfmt.size = sz;
_txtfmt.bold = true;
_txtfmt.color = col;
//textField
var _tf:TextField = new TextField();
_tf.type = TextFieldType.INPUT;
_tf.embedFonts = embed;
_tf.selectable = _select;
_tf.multiline = _multi;
if(_multi == true) _tf.wordWrap = true;
_tf.defaultTextFormat = _txtfmt;
_tf.text = _str;
_tf.width = _w;
_tf.height = _h;
addChild(_tf);
return _tf;
}
}
}
Updated panel flip code today using TextMate and the Flex SDK to compile.
spikeranch said this on November 27th, 2009 at 11:22 am