Flashで3Dの表現：3Dメニューみたいな

といっても、Flashは3Dソフトではないので、擬似的に3Dに見える表現をする事になります。

そのあたりの説明はKeith Petersさんの「Making Things Move」に大変分かりやすく書かれていますし、今回の核となるスクリプトも、書籍に書かれています。

・手前のものほど大きく、奥のものは小さく見える。 ・奥のものほど消失点に近づく。 というのを基本ルールとし、今回は、奥のものほど暗くなる（照明が当たらなくなる）感じを表現してみました。（要 Flash Player8 以上）

というのが今回制作したサンプルです。ソースは以下のようになります。

import flash.geom.ColorTransform;

//Vanishing Point（消失点）
var vpX = Stage.width/2;
var vpY = Stage.height/2;
//矩形の数
var rectNum:Number = 20;
//中心軸と配置するムービークリップとの距離
var radius:Number = 150;
//Focal Length（焦点距離）
var fl:Number = 250;

init();
function init():Void {
    for (var i:Number = 0; i<rectNum; i++) {
        var rect:MovieClip = attachMovie("rect", "rect"+i, i);
        var angleInitY:Number = (360/rectNum)*i;
        //ラジアンに変換
        angleInitY = angleInitY*Math.PI/180;
        var cosInitY:Number = Math.cos(angleInitY);
        var sinInitY:Number = Math.sin(angleInitY);
        var initX1:Number = radius*cosInitY-0*sinInitY;
        var initZ1:Number = 0*cosInitY+radius*sinInitY;
        rect.x = initX1;
        rect.y = 0;
        rect.z = initZ1;
        rect.number.text=i
        //pall.swapDepths(0)//中心棒を通す
    }
}
function onEnterFrame():Void {
    if(_root._xmouse>=0&&_root._xmouse<=Stage.width){//ブラウザの別ウィンドウが開かれた時の対策
        for (var i:Number = 0; i<rectNum; i++) {
            var rect:MovieClip = this["rect"+i];
            var angleY:Number = (_xmouse-vpX)*0.001;
            var cosY:Number = Math.cos(angleY);
            var sinY:Number = Math.sin(angleY);
            var angleX:Number = (_ymouse-vpY)*0.001;
            var cosX:Number = Math.cos(angleX);
            var sinX:Number = Math.sin(angleX);
            
            var x1:Number = rect.x*cosY-rect.z*sinY;
            var z1:Number = rect.z*cosY+rect.x*sinY;
            var y1:Number = rect.y*cosX-z1*sinX;
            var z2:Number = z1*cosX+rect.y*sinX;
            
            rect.x = x1;
            rect.y = y1;
            rect.z = z2;
            var scale = fl/(fl+rect.z);
            rect._xscale = rect._yscale=scale*100;
            rect._x = vpX+(rect.x*scale);
            rect._y = vpY+(rect.y*scale);
            //zの値をもとに、重なり順を調整
            rect.swapDepths(-rect.z);
            //奥のムービークリップの明度を下げる
            var val = Math.min(-5*Math.sqrt(z2),0);
            rect.transform.colorTransform = new ColorTransform(1, 1, 1, 1, val, val, val, 0);
        }
    }
}

このソースを第一フレームにコピペし、ライブラリに、中心を基準にしたムービークリップ「rect（リンケージ名もrect）」を用意すれば動くとおもいます。サンプルのように数字を表示させたいときはrectの中にダイナミックテキスト「number」を置いてください。

スクリプトの先頭から見ていきます。

まず、今回は奥のMCほど暗くなるという表現に使うために、ColorTransformクラスをインポートしておきます。

次に初期値の設定をします。値の内容はコメントを参考にしてください。

続いて、イニシャライズ、及びそれ用の関数の定義をしています。今回はy軸を中心軸として、軸からの距離radiusにシンボルrectをrectNumの数だけ等間隔に配置するように設定しています。（実際に配置しているのは後ろのonEnterFrameで処理していて、ここでは初期座標となるx,y,zの値を設定しているだけです。）

どうやって座標を得ているかというと、以前のエントリ「〜度回転させた後の_xと_yを求める方法」を使って、座標{x:radius, y:0, z:0}にあるものを中心軸を回転の軸として(30*i）度回転させたときの座標を得るようにしています。

その後、onEnterFrameの中で、ステージの中心とマウス座標の距離からy軸を中心にangleY、x軸を中心にangleX回転させる処理をしています。回転後の座標は先程と同様の手法で、今回は２軸回転させるので、一度y軸回転させ、さらにx軸回転させたときの座標を得るという感じの２段処理をしています。

var scale = fl/(fl+rect.z);
rect._xscale = rect._yscale=scale*100;
rect._x = vpX+(rect.x*scale);
rect._y = vpY+(rect.y*scale);

この時点で奥行きz（奥に行くほどzが大きくなる座標体系を使っています）が手に入りましたので、ステージ、焦点距離、zとの関係（Making Things Move p328）を使ってscaleを割り出し、ムービークリップの大きさ、座標を決定しています。

rect.swapDepths(-rect.z);

swapDepthsで手前のMCほど上に配置するようにしています。

var val = Math.min(-5*Math.sqrt(z2),0);
rect.transform.colorTransform = new ColorTransform(1, 1, 1, 1, val, val, val, 0);

最後に、焦点距離flより向こうにあるMCの明度を落とすようにしています。z2のままだと、再奥部で急激に暗くなる感じだったので、Math.sqrt()でバイアスをかけ、（しつこいようですが、zは奥がプラスになるので、明度を下げる→マイナスの値が欲しいので）-5を掛けています。このままだと手前のMCはプラスの値になり、明るくなってしまうので、値がプラスのときはMath.min()で0になるようにしています。

そして、Flash8の新機能であるColorTransformでrgbそれぞれを下げて、暗くしています。
（追記：上のスクリプトは多分彩度が下がる。明度は前の３つのパラメーター下げた方がいいかもです。）

これをベースに、１軸を固定して、１方向だけに回転するムービー（angleX=0にする等）とか、自動で回転し続ける（angleY=0.02にする等）、その際、やや見下ろす感じにする（initの中のrect.y=20にする等）とか、いろいろ調節するだけで、いろんな動きができるので、しばらく退屈しないとおもいます。

僕は3D表現なんてさっぱり分かりませんでしたが、「Making Things Move」を読んで「エウレカッ！」だったので激しくお勧めしておきます。