- 2007-08-20 23:48
- papervision3d
前回のエントリ「Papervision3DでTweenerを使ってオブジェクトを滑らかに拡大する」ではPapervision3DとTweenerを使って画像を滑らかに拡大してみます。
単純にmaterialにテクスチャを適用するだけです。
回転する画像をクリックすると滑らかに拡大/縮小します。
マテリアルにテクスチャを設定する
まずはマテリアルに画像をセットします。
適用する画像はコレです。
これをマテリアルにセットします。
material = new BitmapFileMaterial( "adamrocker.jpg" ); obj = new Plane(material, size*6/5, size*8/5, segment, segment);
クリックで画像を拡大/縮小
クリックのイベントリスナを登録します。
container.addEventListener(MouseEvent.CLICK, clickObj);
containerをクリックした時にclickObjという名前のメソッドが呼び出されます。
clickObjの実装はこうなっています。
private function clickObj (e:MouseEvent):void { if(isTween) { Tweener.addTween(container, {_scale:1,time:1.0,transition:"easeOutElastic"}); isTween = false; } else { Tweener.addTween(container, {_scale:2,time:1.0,transition:"easeOutElastic"}); isTween = true; } scene.renderCamera(camera); }
そのままですが、一応解説します。
肝はココだけですので。
isTweenがオブジェクトが拡大しているかどうかを記憶しておくフラグになっています。
isTweenがtrueなら拡大している状態ですのでオブジェクトを縮小します。
つまり、_scaleの値を1にします。
逆に、isTweenがfalseならオブジェクトが縮小（普通の）状態ですので、拡大します。
つまり、_scaleの値を2にします。
timeは拡大/縮小の変形する時間です。
transitionは変形する軌跡です。軌跡は色々設定できますが、詳細はTweenerの本家を参照してください。
Source Code
一番上で紹介したswfのソースコードを公開します。
（This is the source code compiling above SWF file.）
package { import flash.display.*; import flash.events.*; import org.papervision3d.core.proto.*; import org.papervision3d.scenes.*; import org.papervision3d.objects.*; import org.papervision3d.cameras.*; import org.papervision3d.materials.*; import caurina.transitions.*; [SWF( backgroundColor="0xffffff", frameRate="45" )] public class TweenImage extends Sprite { private var container : Sprite; private var scene : Scene3D; private var camera : Camera3D; // camera private var rootNode : DisplayObject3D; private var obj : DisplayObject3D ; //object private var size : int = 100;//object's size private var segment : int = 1; //object's segment private var material : MaterialObject3D; //object's material private var isTween : Boolean; // flag of tween //--------------------------------------------Constructor public function TweenImage():void { //super classのstage this.stage.quality = "MEDIUM"; this.stage.scaleMode = "noScale"; this.stage.align = StageAlign.TOP_LEFT; this.stage.addEventListener(Event.ENTER_FRAME, loop); this.stage.addEventListener(Event.RESIZE, resize); //containerの生成 container = new Sprite(); container.x = this.stage.stageWidth / 2; container.y = this.stage.stageHeight / 2; addChild(container); //sceneの生成 scene = new Scene3D(container); //rootNodeの生成 rootNode = new DisplayObject3D("rootNode"); scene.addChild(rootNode); //materialの設定 material = new BitmapFileMaterial( "adamrocker.jpg" ); material.doubleSided = true; //objectの生成 obj = new Plane(material, size*6/5, size*8/5, segment, segment); rootNode.addChild(obj); //cameraの設定 camera = new Camera3D(); camera.z = -size; camera.focus = 300; camera.zoom = 1; //Tweenのstatus flag isTween = false; //event listenerの登録 container.addEventListener(MouseEvent.CLICK, clickObj); } //--------------------------------------------loop private function loop(event:Event):void { // rotation obj.rotationY += container.mouseY / 100; obj.rotationX += container.mouseX / 100; //再rendering scene.renderCamera(camera); } //--------------------------------------------stage private function resize(e:Event):void{ container.x = this.stage.stageWidth / 2; container.y = this.stage.stageHeight / 2; } //--------------------------------------------mouse click private function clickObj (e:MouseEvent):void { if(isTween) { Tweener.addTween(container, {_scale:1,time:1.0,transition:"easeOutElastic"}); isTween = false; } else { Tweener.addTween(container, {_scale:2,time:1.0,transition:"easeOutElastic"}); isTween = true; } scene.renderCamera(camera); } } }
関連のありそうなエントリ
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://www.adamrocker.com/blog/145/papervision3d_image_tweener.html/trackback/
- Listed below are links to weblogs that reference
- Papervision3DとTweenerを使って画像を滑らかに拡大する from throw Life