I wanted to get my hands into some papervision3D again last night for a.) To get familiar with it. and b.) To do something fun besides this never ending project at work. So I created this example that flips a panel around using a ScrollPane within the front pane. This sample also implements a drop shadow so you can see how that works.
Demo
package {
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.*;
import flash.text.*;
import fl.containers.ScrollPane;
import flash.filters.*;
//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;
import caurina.transitions.properties.FilterShortcuts;
public class PanelFlipSP extends MovieClip {
private var view: BasicView;
private var planeGroup: DisplayObject3D;
private var frontPlane: Plane;
private var backPlane: Plane;
private var frontSPPlane: Plane;
private var txtBox: MovieClip;
private var frontBox: MovieClip;
private var backBox: MovieClip;
private var circarrowb: MovieClip;
private var circarrowf: MovieClip;
private var _frHeadTF: TextField;
private var _bkHeadTF: TextField;
private var _frontTF: TextField;
private var _backTF: TextField;
private var _frHeader: String;
private var _bkHeader: String;
private var _fstring: String;
private var _bstring: String;
private var _fmc: Sprite;
private var _bmc: Sprite;
private var _frontSPPlane:MovieMaterial;
private var _frontPlane: MovieMaterial;
private var _backPlane: MovieMaterial;
private var _sp: ScrollPane;
public function PanelFlipSP() {
//arrow icons linked from library
circarrowf = new CircArrow();
circarrowf.mouseEnabled = true;
circarrowf.buttonMode = true;
circarrowb = new CircArrow();
circarrowb.mouseEnabled = true;
circarrowb.buttonMode = true;
//
_frHeader = "Front Pane";
_bkHeader = "Back Pane";
_fstring = "This is the front panel that contains a scrollPane component. You can color it whatever you'd like. Click on my grey area to flip me around to the back!";
_bstring = "This is the back panel that is much wider than the front, the grey colored one, that you revealed after clicking on the front panel. Click on me to flip me back around to the front!";
//make two sides to test
txtBox = new MovieClip();
txtBox.graphics.beginFill(0xCCCCCC,.5);
txtBox.graphics.drawRect(0,0,375,710);
txtBox.graphics.endFill();
//front movieClip
frontBox = new MovieClip();
frontBox.graphics.beginFill(0x999999);
frontBox.graphics.drawRoundRect(0,0,400,610,10);
frontBox.graphics.endFill();
_sp = new ScrollPane();
_sp.setSize(390,500);
_sp.move(4,40);
_sp.source = txtBox;
addChild(_sp);
//back movieClip
backBox = new MovieClip();
backBox.graphics.beginFill(0x999999);
backBox.graphics.drawRoundRect(0,0,400,610,10);
backBox.graphics.endFill();
//front header textField
_frHeadTF = makeTF(_frHeader,350,40,20,0xFFFFFF,true,false,false);
_frHeadTF.x = 10;
_frHeadTF.y = 10;
//front textField
_frontTF = makeTF(_fstring,350,200,12,0xFFFFFF,true,false,false);
_frontTF.x = 10;
_frontTF.y = 20;
//back header textField
_bkHeadTF = makeTF(_bkHeader,350,40,20,0xFFFFFF,true,false,false);
_bkHeadTF.x = 10;
_bkHeadTF.y = 10;
//back plane textField
_backTF = makeTF(_bstring,(backBox.width-20),200,12,0xFFFFFF,true,false,false);
_backTF.x = 10;
_backTF.y = 40;
txtBox.addChild(_frontTF);
//
frontBox.addChild(_frHeadTF);
backBox.addChild(_bkHeadTF);
backBox.addChild(_backTF);
backBox.addChild(circarrowb);
circarrowb.x = backBox.width-(circarrowb.width+10);
circarrowb.y = backBox.height-(circarrowb.height+10);
frontBox.addChild(circarrowf);
circarrowf.x = frontBox.width-(circarrowf.width+10);
circarrowf.y = frontBox.height-(circarrowf.height+10);
//this will hold both your planes in a group
planeGroup = new DisplayObject3D();
view = new BasicView(1024, 768,true, true);
view.filters = [new GlowFilter(0x000000, .4, 6, 6, 4, 2, false, false)];
view.filters = [new DropShadowFilter(80,90,0x000000,.3,20,20,1,3)];
addChild(view);
view.camera.zoom = 0;
view.viewport.interactive = true;
//add planes
init(frontBox,backBox);
//init blur filters
FilterShortcuts.init();
}
public function init(_fr:MovieClip,_bk:MovieClip):void{
_fmc = _fr;
_bmc = _bk;
_frontSPPlane = new MovieMaterial(_sp,false,true,true);
_frontSPPlane.smooth = true;
_frontSPPlane.interactive = true;
frontSPPlane = new Plane(_frontSPPlane);
frontSPPlane.useOwnContainer = true;
//front
_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
_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);
planeGroup.addChild(frontSPPlane);
/*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();
//move scrollPane off stage
_sp.setSize(390,500);
_sp.move(-500,40);
//animate camera zoom on load
Tweener.addTween( view.camera, {zoom: 100, time: .5,delay:1, transition:"easeoutexpo"} );
}
private function planeClickedHandler(e:InteractiveScene3DEvent):void {
//
if (! Tweener.isTweening(planeGroup)) {
var targetYRotation:Number = (planeGroup.rotationY <180) ? 180 : 0;
Tweener.addTween(planeGroup, {time:2, transition:'easeinoutback',rotationY: targetYRotation } );
}
}
//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.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;
}
}
}
