matrix3DのappendRotation、prependRotation を使って、サムネイルを配置したパネルをマウスの動きに呼応して３D風に動かしてみようというのが今回のお勉強である。　この動きは、以前どこかで見た記憶があるが、それはmatrix3DがFlashに実装される以前だと思うので、おそらくpapervisionか何かのライブラリーを使ったものだと思われる。
　matrix3DはFlashCS4から搭載されたものらしいが、これを理解するのは相当難解である。　adobeのリファレンスなどを見ても、どう使えばいいのかよく分からない。　野中氏がいろいろ実例を上げて解説しておられるので参考になるが、appendとprependがどう違うのかについては、同氏の「変換行列を数学的に捉える」が参考になった。
　ここでは、はじめサムネイル別々に変換をかけようとしたが、複数行の配置にはうまく動きをつけられなかったので、サムネイルを2次元配置したパネル（ムービークリップ）に変換をかけたところ、意図したものになった。　この方法は、サムネイルを座標移動や表示非表示などで一括処理できるという利点もあった。

（追記) appendRotation、prependRptationの代わりに rotationY、rotationX を使っても同様の３D効果が得られる。
　　　　 最後尾のスクリプトの若干の説明を参照してください。

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

スクリプト　threeDpanel.as　（as3.0） 　※動きを滑らかにするために変更しました

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

  public class threeDpanel extends Sprite
  {
    private var picNum:Number = 20; //写真の枚数
    private var mcContainer:MovieClip;
    private var screen:MovieClip;
    private var rotY:Number = 0;
    private var rotX:Number = 0;
    private var preMouseX:Number = stage.stageWidth / 2;
    private var preMouseY:Number = stage.stageHeight / 2;
    private var url:String;
    private var load_mc:MovieClip;
    private var tw:Number = 120; //サムネイルの幅
    private var th:Number = 75; //サムネイル高さ
    private var col:Number = 5; //列数
    //コンストラクタ
    public function threeDpanel():void
    {
      //サムネイル格納ムービークリップの作成
      mcContainer = new MovieClip();
      mcContainer.x = stage.stageWidth / 2;
      mcContainer.y = stage.stageHeight / 2;
      addChild(mcContainer);
      //拡大写真表示用ムービークリップの作成
      screen = new MovieClip();
      //全サムネイルの配置とリスナーのセット
      for (var i:uint = 0; i<picNum; i++)
      {
        var mc:MovieClip = new MovieClip();
        mc.x = (tw+10)*(i%col-col/2);
        mc.y = (th+15)*(Math.floor(i/col)-Math.floor(picNum/col)/2);
        url = "img/sp" + i + ".jpg";
        imgLoader(mc,url);
        drawLine(mc,0xFFFFFF);
        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);
    }
    //マウス位置に呼応してx,y軸を中心にmatrix3Dの回転処理を行う
    private function enterframe(event:Event):void
    {
      rotY += (0.05*(mouseX - preMouseX) - rotY)/10;
      rotX += (-0.05*(mouseY - preMouseY) - rotX)/10;
      mcContainer.z = 0;
      mcContainer.transform.matrix3D.appendRotation(rotY, Vector3D.Y_AXIS);
      mcContainer.transform.matrix3D.prependRotation(rotX, Vector3D.X_AXIS);
      mcContainer.x = stage.stageWidth / 2;
      preMouseX = mouseX;
      preMouseY = mouseY;
    }
    //サムネイルのロールオーバー時処理
    private function rollover(event:MouseEvent):void
    {
      var p_mc:MovieClip = event.currentTarget as MovieClip;
      drawLine(p_mc,0x66FFFF);
      p_mc.buttonMode = true;
    }
    //サムネイルのロールアウト時処理
    private function rollout(event:MouseEvent):void
    {
      var p_mc:MovieClip = event.currentTarget as MovieClip;
      drawLine(p_mc,0xFFFFFF);
    }
    //サムネイルクリックでscreenに拡大写真をフェイドイン
      private function loadPic(event:MouseEvent):void
    {
      var n:Number = event.currentTarget.num;
      mcContainer.visible = false;
      url = "img/p" + n + ".jpg";
      imgLoader(screen, url);
      addChild(screen);
      screen.buttonMode = true;
      var mcTween = new Tween(screen,"alpha",Regular.easeOut,0,1,2,true);
      screen.addEventListener(MouseEvent.CLICK, returnDefault);
    }
    //外部画像ファイルロード関数
      private function imgLoader(load_mc, url):void
    {
      var imgLoader:Loader = new Loader();
      load_mc.addChild(imgLoader);
      var urlReq:URLRequest = new URLRequest(url);
      imgLoader.load(urlReq);
    }
    //拡大写真クリックで表示を初期状態に戻す関数
    private function returnDefault(event:MouseEvent):void
    {
      event.target.unload();
      removeChild(screen);
      mcContainer.visible = true;
    }
    //サムネイルの枠取りをする関数
    private function drawLine(mc, color):void
    {
      var shape = new Shape();
      mc.addChild(shape);
      var sg = shape.graphics;
      sg.clear();
      sg.lineStyle("2",color);
      sg.moveTo(0,0);
      sg.lineTo(tw,0);
      sg.lineTo(tw,th);
      sg.lineTo(0,th);
      sg.lineTo(0,0);
    }
  }
}