papervision3dでWindows Aero風スライド作ってみた[ActionScript 3.0]

最近、やっとこさ実用レベルでActionScript3.0が理解できてきて、気になっていたpapervision3dを始めてみた。

年単位で遅れてる感を感じるけど、ActionScript3.0自体始めたのが今年からっていういまさらっぷり。

note.xさんのエントリーが非常に参考になった。

とりあえず、つくったものを晒してみます。とはいっても、ありがちな感じの、windows Aero風スライド。

windows aero slide

カーソルキーの→←で次戻りの移動、↓↑でズームインズームアウトです

意外と簡単に、3d的なものがつくれてしまうpapervisionは素敵だと思います。

リソースもいっぱいあるし、勉強するには困らないんで、ガンガンせめてこうと思います。

ソースはこんなかんじ

package {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.Plane;
	import org.papervision3d.scenes.MovieScene3D;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.FilterShortcuts
	import flash.events.MouseEvent;
	/**/
	public class  Sprite3dScene extends Sprite{
		
		private var scene:MovieScene3D;
		private var camera:Camera3D;
		private var rootNode:DisplayObject3D;
		private var objectMargine:Number = 500;
		private var cameraHeight:Number;
		private var cameraWidth:Number;
		private var contentsTotal:Number = 10;
		
		public function Sprite3dScene():void {
			FilterShortcuts.init();
			addEventListener(Event.ADDED_TO_STAGE,init)
		}
		
		private function init(e:Event):void {
			
			cameraHeight = 80
			cameraWidth = 200
			
			x = stage.stageWidth/2
			y = stage.stageWidth/2 - cameraHeight
			
			scene = new MovieScene3D(this)
			
			createObj();
			
			camera = new Camera3D();
			camera.z = -315;
			camera.focus = objectMargine;
			camera.zoom = 1
			camera.x = cameraWidth
			camera.y = cameraHeight
									
			addEventListener(Event.ENTER_FRAME, renderHandler)
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keybordHandler)
		}
		
		private function clickHandler(e:MouseEvent):void {
			trace(e.target.name)
		}
		
		private function keybordHandler(e:KeyboardEvent):void {
			stage.removeEventListener(KeyboardEvent.KEY_DOWN, keybordHandler);
			var _time:Number = 0.5;
			var moveMaterial:MovieMaterial = rootNode.getChildByName("obj" + Math.abs(Math.floor(rootNode.z / objectMargine))).material as MovieMaterial
			moveMaterial.animated = true;
			switch(e.keyCode) {
				case 39://→
					if (Math.abs(rootNode.z) != objectMargine*(contentsTotal-1)) {
						Tweener.addTween(rootNode, { z:Math.floor(rootNode.z - objectMargine), time:_time, transition:"easeInOutQuad" } );
						Tweener.addTween(moveMaterial.movie, {
							alpha:0, time:_time, transition:"easeInOutQuad",
							onComplete:function() {
								var prevMaterial:MovieMaterial = rootNode.getChildByName("obj" + (Math.abs(Math.floor(rootNode.z / objectMargine)) - 1)).material as MovieMaterial
								prevMaterial.movie.alpha = 1
							}
						} );
					}
				break;
				case 37://←
					if (rootNode.z != 0) {
						Tweener.addTween(rootNode, { z:Math.floor(rootNode.z + objectMargine), time:_time, transition:"easeInOutQuad" } );
					}
				break;
				case 38://↑
					Tweener.addTween(camera, { zoom:1,x:cameraWidth, y:cameraHeight, time:_time, transition:"easeInOutQuad" } );
				break;
				case 40://↓
					Tweener.addTween(camera, { x:0, y:0,zoom:1.5,time:_time, transition:"easeInOutQuad" } );
				break;
			}
			Tweener.addTween(rootNode, { 
				delay:_time, 
				onComplete:function() {
					stage.addEventListener(KeyboardEvent.KEY_DOWN, keybordHandler)
				}
			} );
		}

		private function createObj():void {

			rootNode = new DisplayObject3D ( "rootNode" );

			scene.addChild(rootNode)

			for (var i:int = 0; i 
				var movieClip3d:MovieClip = new Tests(i+1);

				var material:MovieMaterial = new MovieMaterial(movieClip3d, true)

				var obj:Plane = new Plane(material, movieClip3d.width, movieClip3d.height, 10, 10)

				obj.name = "obj" + i

				material.animated = false;

				material.doubleSided = true;

				material.smooth = true;

				rootNode.addChild(obj);

				obj.z  = i * objectMargine

			}

		}

		

		private function renderHandler(e:Event):void {

			scene.renderCamera(camera)

		}

		

	}

	

}