[AS3] iPhoneのflipがしたい « きんくまデザイン

[AS3] iPhoneのflipがしたい

2009/08/8

こんにちは。きんくまです。
ブログは普段は月曜と木曜アップの予定なんですが、夏休み進行ということで本日アップです。

どうでもいい話なんですが、テレ朝の「ダンディ・ダディ」というドラマを見ています。
これが面白くて。いつも笑ってみております。
舘ひろしが主演で、子供の恋愛に一喜一憂するお父さんの役です。
似た設定でちょっと前にやっていた「パパとムスメの7日間」というのもあるですが、これもいつもしょーもない感じで面白かったです。新垣ちゃんが可愛かった。

さて、本題です。
今回、iPhoneの動きで反転する動きがあります。それを作ってみようと思いました。
以前Player10の機能を使って同様のことをやろうとしたんですが、
PV3Dを使うとすぐにできるんですね。

と書きつつ、ちょっとだけつまりました。
表側と裏側で180°のオフセットをとってるんですが、
反転した後はrotationXのオフセットがいらないことに気がつかずに試行錯誤してました。

板をクリックすると反転します。

　
動きのポイントは単に回すだけじゃなくて、少し後ろにひっこめるようにするところだと思います。反転モーション中に、角度に応じてz座標をサインカーブを描くようにしました。

それで3Dはテクスチャが命ということで、次回はこれに動きをつけたテクスチャを使いたいと思います。

テクスチャ部分の制作中のもの。

iphone_cap1

PV3Dのチュートリアル集のこのページはものすごく勉強になります。
>> http://pv3d.org/sitemap/

以下ソースです。

package
{
  import caurina.transitions.Tweener;
  import flash.display.MovieClip;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import org.papervision3d.events.InteractiveScene3DEvent;
  import org.papervision3d.materials.ColorMaterial;
  import org.papervision3d.materials.MovieAssetMaterial;
  import org.papervision3d.objects.DisplayObject3D;
  import org.papervision3d.objects.primitives.Plane;
  import org.papervision3d.view.BasicView;

  public class MyBasic extends BasicView
  {
    public var sw:Number;
    public var sh:Number;
    public var frontPlane:Plane;
    public var backPlane:Plane;
    public var planeSet:DisplayObject3D;
    public var isFront:Boolean = true;

    public var startBtn:MovieClip;

    public function MyBasic()
    {
      startBtn.addEventListener(MouseEvent.CLICK, init);
    }

    private function init(e:MouseEvent):void
    {
      startBtn.visible = false;
      startBtn.removeEventListener(MouseEvent.CLICK, init);

      sw = stage.stageWidth / 2;
      sh = stage.stageHeight / 2;

      viewport.interactive = true;
      var mat1:ColorMaterial = new ColorMaterial(0xff0000, 1, true);
      var mat2:ColorMaterial = new ColorMaterial(0x00ff00, 1, true);

      frontPlane = new Plane(mat1, 350, 500, 10, 10);
      backPlane = new Plane(mat2, 350, 500, 10, 10);
      planeSet = new DisplayObject3D();
      backPlane.rotationY = 180;
      planeSet.addChild(frontPlane);
      planeSet.addChild(backPlane);
      scene.addChild(planeSet);

      frontPlane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objOverHD);
      frontPlane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objOutHD);
      frontPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, objClickHD);
      backPlane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objOverHD);
      backPlane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objOutHD);
      backPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, objClickHD);

      camera.z = -600;
      startRendering();
    }

    private function objClickHD(e:InteractiveScene3DEvent):void
    {
      isFront = !isFront;
      var targetDeg:Number = isFront ? 0 : 180;
      if (Tweener.isTweening(planeSet)) {
        Tweener.removeTweens(planeSet);
      }
      Tweener.addTween(planeSet, {
        rotationY:targetDeg,
        time:0.6,
        transition:'easeOutQuad',
        onUpdate:flippingHD
      });
    }

    private function flippingHD():void
    {
      planeSet.z = Math.sin(planeSet.rotationY / 180 * Math.PI) * 300;
    }

    private function objOverHD(e:InteractiveScene3DEvent):void
    {
      viewport.buttonMode = true;
    }

    private function objOutHD(e:InteractiveScene3DEvent):void
    {
      viewport.buttonMode = false;
    }

    override protected function onRenderTick(event:Event = null):void
    {
      movePlaneSet();

      renderer.renderScene(scene, camera, viewport);
    }

    private function movePlaneSet():void
    {
      if (Tweener.isTweening(planeSet)) {
        return;
      }
      var offsetDeg:Number = isFront ? 0 : 180;
      var degX:Number = (mouseY - sh) / sh * 20;
      var degY:Number = -(mouseX - sw) / sw * 60;

      planeSet.rotationX += (degX - planeSet.rotationX) * 0.1;
      planeSet.rotationY += (degY + offsetDeg - planeSet.rotationY) * 0.1;
    }
  }

}