matrix3DのappendRotation、prependRotation を使って、サムネイルを配置したパネルをマウスの動きに呼応して３D風に動かしてみようというのが前回のお勉強であった。　今回は、サムネイル表示パネルだけでなく、マウス位置に反応してサムネイルがx軸方向の左右に移動するタイプのフォトビューアー（ギャラリー）の作成である。

●720*450のステージ（24fps）を設定（背景色、ステージサイズは目的に応じて任意でよい）
●プロパティのクラスにasフィル名を記述（ここでは m3D）
●swfと同じディレクトリにimgフォルダを置き、その中に、サムネイルファイル（ここでは120*75のsp0.jpg,sp1.jpg,,,）、拡大写真ファイル（720*450のp0.jpg,p1.jpg,,,,）を格納する。 ここでは、sp0-sp19の20枚のサムネイルをコピーして、sp20-sp39、sp40-sp59として用いた
(ここでの写真は国立美術博物館で撮影が許可されている仏像を撮影したものを用いた)

スクリプト　m3D.as　（as3.0）

package
{
  import flash.display.Sprite;
  import flash.display.MovieClip;
  import flash.events.MouseEvent;
  import flash.events.Event;
  import flash.filters.GlowFilter;
  import flash.display.Loader;
  import flash.geom.*;
  import flash.net.URLRequest;
  import fl.transitions.*;
  import fl.transitions.easing.*;

  public class m3D extends Sprite
  {
    var picNum:Number = 60;
    var col:Number = 15;
    var mcContainer:MovieClip;
    var rotY:Number = 0;
    var rotX:Number = 0;
    var preMouseX:Number = stage.stageWidth / 2;
    var preMouseY:Number = stage.stageHeight / 2;
    var url:String;
    var tw:Number = 108;
    var th:Number = 68;
    var totalLength = col*(tw+10);
    var picNo:Number;
    var screen:MovieClip;
    var glow1:GlowFilter;
    var glow2:GlowFilter;
    var imgLoader:Loader;

    public function m3D():void
    {
      //グローフィルターの設定
      glow1 = new GlowFilter(0xffffff,0.8,2,2,8,3);
      glow2 = new GlowFilter(0x66ffff,0.8,5,5,7,5);
      //サムネイル格納ムービークリップの作成
      mcContainer = new MovieClip ;
      mcContainer.x = stage.stageWidth / 2;
      mcContainer.y = 50 + stage.stageHeight / 2;
      addChild(mcContainer);
      //拡大写真表示用ムービークリップの作成
      screen = new MovieClip ;
      //サムネイル配置用mcの作成・読み込み・マウスイベント設定
      for (var i:uint = 0; i<picNum; i++)
        {
        var mc:MovieClip = new MovieClip();
        mc.name = "pmc" + i;
        mc.x = (tw+10)*(i%col-7) - tw/2;
        mc.y = (th+15)*(Math.floor(i/col)-2) - th/2;
        url = "img/sp" + i + ".jpg";
        imgLoad(mc,url);
        mc.filters = [glow1];
        mc.num = i;
        mcContainer.addChild(mc);
        mc.addEventListener(MouseEvent.ROLL_OVER, rollover);
        mc.addEventListener(MouseEvent.ROLL_OUT, rollout);
        mc.addEventListener(MouseEvent.CLICK, loadPic);
      }
      addEventListener(Event.ENTER_FRAME, enterframe);
    }
    private function enterframe(event:Event):void
    {
      for (var i:uint = 0; i<picNum; i++)
      {
        //マウス位置に応じたサムネイルの移動
        var p_mc = MovieClip(mcContainer.getChildByName("pmc" + i));
        if (p_mc.x<-(stage.stageWidth/2+7*130))
        {
          p_mc.x += totalLength;
        }
        else if (p_mc.x>stage.stageWidth/2+7*130)
        {
          p_mc.x -= totalLength;
        }
        p_mc.x += (stage.stageWidth/2 - mouseX)/30;
      }
      //マウス位置に応じたmcContainerの回転角の設定と回転（傾斜）
      rotY += (-0.1*(mouseX - preMouseX) - rotY)/7;
      rotX += (-0.05*(mouseY - preMouseY) - rotX)/7;
      mcContainer.z = 0;
      mcContainer.transform.matrix3D.appendRotation(rotY, Vector3D.Y_AXIS);
      mcContainer.transform.matrix3D.prependRotation(rotX, Vector3D.X_AXIS);
      //回転後のマウス位置を記憶;
      preMouseX = mouseX;
      preMouseY = mouseY;
    }

    //サムネイルのマウスロールオーバー、ロールアウトイベント
    private function rollover(event:MouseEvent):void
    {
      var p_mc:MovieClip = event.currentTarget as MovieClip;
      p_mc.filters = [glow2];
      p_mc.buttonMode = true;
    }
    private function rollout(event:MouseEvent):void
    {
      var p_mc:MovieClip = event.currentTarget as MovieClip;
      p_mc.filters = [glow1];
    }
    //サムネイルクリックにより拡大写真の読み込み・表示時効果の設定
    private function loadPic(event:MouseEvent):void
    {
      var picNo:Number = event.currentTarget.num;
      var currentMc = event.currentTarget as MovieClip;
      mcContainer.visible = false;
      url = "img/p" + picNo + ".jpg";
      addChild(screen);
      imgLoad(screen, url);
      screen.filters = [glow2];
      screen.buttonMode = true;
      var startx = currentMc.x + stage.stageWidth / 2;
      var starty = currentMc.y + stage.stageHeight / 2;
      var stopx = 0;
      var stopy = 0;
      var mcTween1 = new Tween(screen,"width",Regular.easeOut,tw,stage.stageWidth,1,true);
      var mcTween2 = new Tween(screen,"height",Regular.easeOut,th,stage.stageHeight,1,true);
      var mcTween3 = new Tween(screen,"x",Regular.easeOut,startx,stopx,1,true);
      var mcTween4 = new Tween(screen,"y",Regular.easeOut,starty,stopy,1,true);
      var mcTween5 = new Tween(screen,"alpha",Regular.easeOut,0,1,2,true);
      screen.addEventListener(MouseEvent.CLICK, returnDefault);
    }
    //イメージ読み込み関数
    private function imgLoad(load_mc:MovieClip, url:String):void
    {
      imgLoader = new Loader ;
      load_mc.addChild(imgLoader);
      var urlReq:URLRequest = new URLRequest(url);
      imgLoader.load(urlReq);
    }
    //拡大写真クリックにより表示オブジェクトを除去し初期設定に戻す
    private function returnDefault(event:MouseEvent):void
    {
      var mcTween6 = new Tween(screen,"alpha",Regular.easeOut,1,0,0.5,true);
      mcTween6.addEventListener(TweenEvent.MOTION_FINISH, defaultsetting);
      function defaultsetting(event:TweenEvent):void
      {
        screen.removeChild(imgLoader);
        removeChild(screen);
        imgLoader = null;
      }
      mcContainer.visible = true;
    }
  }
}

mcContainer.transform.matrix3D.appendRotation(rotY, Vector3D.Y_AXIS);
mcContainer.transform.matrix3D.prependRotation(rotX, Vector3D.X_AXIS);
　前回と同様、以下のように、rotaionY、rotationX を使っても同様の動きが得られる。
　mcContainer.rotationY += rotY;
　mcContainer.rotationX += rotX;

p_mc.x += (stage.stageWidth/2 - mouseX)/30;
　３Dの回転（傾斜）はmcContainerに施し、サムネイルはマウス位置に応じて、その中（上）を動くようにしている。