2009年2月アーカイブ

【AS3】初めての『Papervision3D 2.0』：その8（Tweenerとの連携）

nanlow (2009年2月11日 23:05) | コメント(0) | トラックバック(0)

前回のデータにTweenerでアニメーションを付加します。

マウスによるイベントハンドラーの3箇所に付加しました。

サンプル

JavascriptをONにし、最新のFlashプレーヤーをインストールしてください。

ドキュメントクラス

package
{
    import caurina.transitions.Tweener;
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private const SPEED:Number = 10;
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true, true);
            viewport.buttonMode = true;
            var bmd:BitmapData=new Img(180,180)
            var bm:BitmapMaterial = new BitmapMaterial(bmd);
            bm.doubleSided = true;
            bm.smooth = true;
            bm.interactive = true;
            _plane = new Plane(bm, 300, 300, 3, 3);
            _plane.useOwnContainer = true;
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, pressHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outHandler);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX += (stage.mouseY - stage.stageHeight * 0.5) / SPEED;
            _plane.rotationY += (stage.mouseX - stage.stageWidth * 0.5) / SPEED;
        }
        private function pressHandler(e:InteractiveScene3DEvent):void
        {
            Tweener.addTween(_plane, { scale: 1.1*_plane.scale, time:1.0, transition:'easeOutElastic' } );
        }
        private function outHandler(e:InteractiveScene3DEvent):void 
        {
            Tweener.addTween(_plane, { alpha: 1.0, time:0.2, transition:'easeInQuad' } );
        }
        private function overHandler(e:InteractiveScene3DEvent):void 
        {
            Tweener.addTween(_plane, { alpha: 0.7, time:0.2, transition:'easeOutQuad' } );
        }
    }
}

38・42・46行目：エフェクトをそれぞれTweenerによるトゥイーンにおきかえました。

あとついでに
32・33行目：マウスカーソルの位置による回転を滑らかなトゥイーンにしました。

Tweener自体はNumber型のメンバ変数に対してのトゥイーンを行ってくれるので オブジェクトが持ってるアクセス可能なメンバ変数ならPV3Dのものでも何でもいいんですね。

関連記事

【AS3】初めての『Papervision3D 2.0』：その7（3Dオブジェクトのアルファを変更）

nanlow (2009年2月10日 23:02) | コメント(1) | トラックバック(0)

前回のデータにマウスオーバー時の効果をつけてみます。
今回はオーバー時に透明度を少し下げる効果です。
もちろんアウト時に元に戻しておきます。

サンプル

JavascriptをONにし、最新のFlashプレーヤーをインストールしてください。

ドキュメントクラス

package
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true, true);
            viewport.buttonMode = true;
            var bmd:BitmapData=new Img(180,180)
            var bm:BitmapMaterial = new BitmapMaterial(bmd);
            bm.doubleSided = true;
            bm.smooth = true;
            bm.interactive = true;
            _plane = new Plane(bm, 300, 300, 3, 3);
            _plane.useOwnContainer = true;
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, pressHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outHandler);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX = stage.mouseY - stage.stageHeight * 0.5;
            _plane.rotationY = stage.mouseX - stage.stageWidth * 0.5;
        }
        private function pressHandler(e:InteractiveScene3DEvent):void
        {
            _plane.scaleX *= 1.1;
            _plane.scaleY *= 1.1;
        }
        private function outHandler(e:InteractiveScene3DEvent):void 
        {
            _plane.alpha = 1.0;
        }
        private function overHandler(e:InteractiveScene3DEvent):void 
        {
            _plane.alpha = 0.5;
        }
    }
}

何箇所か追加・変更をしたので順番にいきます。

22行目：オブジェクトにフィルタをかけたり、アルファを変更したりできるようになります。

_plane.useOwnContainer = true;

ただし、下記のマウスイベントを取得できなくなってしまいます。

InteractiveScene3DEvent.OBJECT_CLICK
InteractiveScene3DEvent.OBJECT_DOUBLE_CLICK

これに関しては色々な人が不便さを訴えているようですね。
バグっぽいっていう話もあったりなかったり・・・。

23行目：上に書いたとおりイベントを受け取らなくなってしまうので
受け取るイベントの種類を「click」→「press」に変更しました。

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, pressHandler);

24行目：マウスオーバー時のイベントリスナー

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler);

25行目：マウスアウト時のイベントリスナー

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, overHandler);

39～46行目：マウスオーバー・アウト時のイベントハンドラー

変更箇所を全部書いたのでややこしくなってしまいましたが
一番重要なのはuseOwnContainer。

alpha値を変更するにはこれをtrueにしておく必要があるのは
知らないとつまづいて長時間悩んでしまうところかもしれないです。

関連記事

【AS3】初めての『Papervision3D 2.0』：その6（3Dオブジェクトにマウスイベントを付加）

nanlow (2009年2月 9日 23:01) | コメント(0) | トラックバック(0)

前回のデータにマウスイベントを付加してみます。
とりあえず、めちゃくちゃ簡易的なものとして
「クリックするごとに大きくなる」ようにしてみます。

サンプル

JavascriptをONにし、最新のFlashプレーヤーをインストールしてください。

ドキュメントクラス

package
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true, true);
            viewport.buttonMode = true;
            var bmd:BitmapData=new Img(180,180)
            var bm:BitmapMaterial = new BitmapMaterial(bmd);
            bm.doubleSided = true;
            bm.smooth = true;
            bm.interactive = true;
            _plane = new Plane(bm, 300, 300, 3, 3);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX = stage.mouseY - stage.stageHeight * 0.5;
            _plane.rotationY = stage.mouseX - stage.stageWidth * 0.5;
        }
        private function clickHandler(e:InteractiveScene3DEvent):void
        {
            _plane.scaleX *= 1.1;
            _plane.scaleY *= 1.1;
        }
    }
}

15行目：オブジェクトにマウスオーバーしたときのカーソルを指マークにします。

viewport.buttonMode = true

20行目：マウスイベントを受け取るようします。

bm.interactive = true

22行目：イベントリスナーを付けます。 Papervision3D独自のイベントInteractiveScene3DEventでクリックを判断します。

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler)

重要なのはこの辺りかと。

関連記事

【AS3】初めての『Papervision3D 2.0』：その5（テクスチャ画像にスムージング）

nanlow (2009年2月 8日 22:58) | コメント(0) | トラックバック(0)

前回オブジェクトを自由に回転させることができましたが
そのおかげで台形変形時の画像の荒れが気になるようになりました。

スムージングをかけて誤魔化したいと思います。

サンプル

JavascriptをONにし、最新のFlashプレーヤーをインストールしてください。

ドキュメントクラス

package
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true);
            var bmd:BitmapData=new Img(180,180)
            var bmm:BitmapMaterial = new BitmapMaterial(bmd);
            bmm.doubleSided = true;
            bmm.smooth = true;
            _plane = new Plane(bmm, 300, 300, 3, 3);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX = stage.mouseY - stage.stageHeight * 0.5;
            _plane.rotationY = stage.mouseX - stage.stageWidth * 0.5;
        }
    }
}

17行目の

bmm.smooth = true;

でBitmapMaterialにスムージングをかけました。

ギザギザは気にならなくなったと思います。

関連記事

【AS3】初めての『Papervision3D 2.0』：その4（マウスの座標をオブジェクトの回転に）

nanlow (2009年2月 7日 22:55) | コメント(0) | トラックバック(0)

前回のデータをマウス座標によって3Dオブジェクトが回転するようにしてみました。
マウスに反応してくれるようになるといよいよって感じがしてきます。

サンプル

JavascriptをONにし、最新のFlashプレーヤーをインストールしてください。

ドキュメントクラス

package
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true);
            var bmd:BitmapData=new Img(180,180)
            var bmm:BitmapMaterial = new BitmapMaterial(bmd);
            bmm.doubleSided = true;
            _plane = new Plane(bmm, 300, 300, 3, 3);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX = stage.mouseY - stage.stageHeight * 0.5;
            _plane.rotationY = stage.mouseX - stage.stageWidth * 0.5;
        }
    }
}

回転軸（各rotationの値）が少しわかりにくかったので
↓のサンプルで勉強させてもらいました。
崖っぷちWEBデザイナーブログ | PaperVision3Dでオブジェクト回転とかカメラ移動とか

関連記事

1  2 ＞
« 2009年1月 | メインページ | アーカイブ | 2009年5月 »

検索

このアーカイブについて

このページには、2009年2月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2009年1月です。

次のアーカイブは2009年5月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。