パララックスエフェクト

parallax



パララックスとは、視差のことで視点によって物の見える範囲や角度が変わるといったことです
解説はつづきから






新規ファイル作成
ステージ設定はサイズを400×300、フレームレートを30に





新規シンボル作成で120×180、線なし、塗り#666666の矩形を描く





シーン1に戻って再び新規シンボル作成
ActionScriptに書き出しにチェックを入れて、クラス名をObjに





先ほどつくったシンボルを3つ配置
左のシンボルは(-190,0)、真中は(0,0)、右は(190,0)の位置に
それぞれカラー:アルファ20%に





ActionScriptを書く前に考え方の説明
奥行き:Z座標があるものと仮定して、これを仮想スクリーンに投影したものをX、Y座標として表す
つまり、ステージ=仮想スクリーン





今回はわかりやすいように、すべての奥行きをaに設定
Y方向から見たとき、i番目のオブジェクトとマウスのX座標の距離をb
仮想スクリーンに投影した距離をhとすると
h:b=a:i×aとなるのでh=b/i
この式をY座標や大きさ比率などにも適用する




シーン1に戻って新規レイヤーを追加し、ActionScriptを記述

var objArray:Array = new Array();

for (var i=0; i<4; i++) {
    //ステージの中心
    var centerX = stage.stageWidth/2;
    var centerY = stage.stageHeight/2;
    var obj:Obj = new Obj();

    //オブジェクトを配置して配列に格納
    addChildAt(obj,0);
    objArray.push(obj);

    //オブジェクトの位置をステージの中心に
    objArray[i].x = centerX;
    objArray[i].y = centerY;

    //奥のものほど小さく
    //ちょっと距離を置くようにiにプラス1
    objArray[i].scaleX = 1/(i+1);
    objArray[i].scaleY = 1/(i+1);
}

//マウス位置によって移動のイベント追加
addEventListener(Event.ENTER_FRAME,parallax);
function parallax(e:Event):void {
    for (i=0; i<4; i++) {

        //奥のものほど移動量が小さくなる
        //ステージの中央が座標(0,0)になるように補正
        objArray[i].x = (centerX-mouseX)/(i+1)+centerX;
        objArray[i].y = (centerY-mouseY)/(i+1)+centerY;
    }
}


これでムービープレビューすると以下のようになってるかと思います







以上、パララックスエフェクトの作り方でした