header image
 

Another panel flip with ScrollPane example in PV3D

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;
		}
    }
}

Visit Upstatepa.org

One of my first projects at Masterminds was to build the new Upstatepa.org website. It’s built entirely in Flash AS3 using xml to store the content, this allows for easier updates when needed. I used SWFAddress to handle deep linking and to allow the use of the browser fwd/back buttons along with Google Analytics. The Google Analytics stats are working great and allow us to track every link coming out of the Flash site. I found some good resources online to ensure that my implementation of Google Analytics which can be found at the links below.

GA for Flash Links:

http://www.zedia.net/2008/swfaddress-and-the-new-google-analytics-gajs/

http://evolve.reintroducing.com/2008/01/09/tips-n-tricks/using-google-analytics-in-your-flash-projects/

Another AS3 project is live

The new Arthur Altemose Architects website is live! This is an all AS3 project that I built using SWFAddress with hooks to Google Analytics. Asual.com really made the setup for analytics tracking easy.

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.

/*
This is the document class for an fla that is in the source files
*/
package {
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    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;

    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!";
			//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,100,20,0xFFFFFF,true,false,false);
			_frontTF.x = 10;
			_frontTF.y = 20;
			_backTF = makeTF(_bstring,350,100,20,0xFFFFFF,true,false,false);
			_backTF.x = 10;
			_backTF.y = 20;
			frontBox.addChild(_frontTF);
			backBox.addChild(_backTF);
			//this will hold both your planes in a group
			planeGroup = new DisplayObject3D();
	        view = new BasicView(1024, 768,true, true);
	        addChild(view);
		    view.camera.zoom = 0;
		    view.viewport.interactive = true;
		    //add planes
			init(frontBox,backBox);
        }  

        public function init(_fr:MovieClip,_bk:MovieClip):void{
			_fmc = _fr;
			_bmc = _bk;

			//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);
			/*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 } );
			}
		}
		//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;
		}
    }
}