[Papervision3D2.0]#3 Tweenerでトゥィ―――ンする

今回は、Tweenerについて

これのソースあんま出したくなかったけど、 1000spで受けよかったし、自分でもまた使うだろうからメモ








ソース（ myTweener.mxml)

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="600" height="300"> <mx:Script> <![CDATA[ import flash.events.MouseEvent; import flash.events.Event; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.cameras.FreeCamera3D; import mx.core.UIComponent; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import caurina.transitions.Tweener; private var myScene:Scene3D; private var myCamera:FreeCamera3D; private var myViewport:Viewport3D; private var myRenderer:BasicRenderEngine; private var rootNode:DisplayObject3D; private function init():void{ //ＵＩコンポーネント作成 var myNestingComponent:UIComponent = new UIComponent(); addChild(myNestingComponent); myViewport = new Viewport3D(600, 300, false, false); myNestingComponent.addChild(myViewport); setup(); this.addEventListener(Event.ENTER_FRAME, renderLoop);//イベントリスナー登録 // MouseEvent① this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); } private function setup():void{ myScene = new Scene3D(); //シーン生成 myRenderer = new BasicRenderEngine(); //レンダリング専用クラス myCamera = new FreeCamera3D; //カメラオブジェクト生成 myCamera.zoom = 3; //カメラズーム myCamera.focus = 500; //カメラフォーカス rootNode = new DisplayObject3D("rootNode"); //ルートノード myScene.addChild(rootNode); var color:Array = [0xffa8a8, 0xffa8d3, 0xffa8ff, 0xd3a8ff, 0xa8a8ff, 0xa8d3ff, 0xa8ffff, 0xa8ffd3, 0xa8ffa8, 0xd3ffa8, 0xffffa8, 0xffd3a8]; var material:Array = new Array(); for(var index:int = 0; index < color.length; index++) { material.push(new ColorMaterial(color[index])); } for(index = 0; index < 50; index++) { var plane:Plane = new Plane(material[index%material.length], 150, 150); plane.x = 200 * index - 5000; rootNode.addChild(plane); } } //回転してレンダリング private function renderLoop(myEvent:Event):void{ if(isMouseDown) { var dx:int = (myViewport.mouseX - mouseDownedX); Tweener.addTween(rootNode, {x:rootNode.x - dx*6, time:3, transition:"easeOut"}); Tweener.addTween(myCamera, {rotationY: dx, time:1, transition:"easeOut"}); } else { Tweener.addTween(myCamera, {rotationY: 0, time:3, transition:"easeOut"}); } myRenderer.renderScene(myScene, myCamera, myViewport); } private var isMouseDown:Boolean; private var mouseDownedX:int; private var mouseDownedY:int; private function onMouseDown(e:Event):void { isMouseDown = true; mouseDownedX = myViewport.mouseX; mouseDownedY = myViewport.mouseY; } private function onMouseUp(e:Event):void { isMouseDown = false; } ]]> </mx:Script> </mx:Application>


Tweenerは、Papervsionに含まれていないので、svnでhttp://tweener.googlecode.com/svn/trunk/をチェックアウトし、Tweenerのソースを落とし、ビルドパスに追加
マウスイベントは、[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみると同じようにAddEventListnerする。

実際にTweenさせているのは、renderLoop内のたった７行だけ
if(isMouseDown) { var dx:int = (myViewport.mouseX - mouseDownedX); Tweener.addTween(rootNode, {x:rootNode.x - dx*6, time:3, transition:"easeOut"}); Tweener.addTween(myCamera, {rotationY: dx, time:1, transition:"easeOut"}); } else { Tweener.addTween(myCamera, {rotationY: 0, time:3, transition:"easeOut"}); }

トゥイーンは、たった1行
Tweener.addTween(対象オブジェクト, {プロパティ:値, time:Tweenする時間(秒)}, transition:Tweenのタイプ)
とするだけでできる。Tweenのタイプ(?)は、閃光的網站・弛緩複合体の tweener も弄ってみた(3)にいっぱい載ってるので、それを参考にした。


＜参考＞
・tweener も弄ってみた(3)　閃光的網站・弛緩複合体
・パステルカラー