カルーセルアクション

carousel_action



円運動を前面から見たような奥行き感のある動きをマウスで制御するアクションの作り方です
解説はつづきから






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





まずは背景を作成
400×180の矩形を描き、ステージの下に配置
線はなし、#FFFFFFから#CCCCCCの色で線形グラデーション





新規シンボルを作成
ActionScriptに書き出しにチェックを入れて、クラス名をPanelに






矩形プリミティブツールで画像のような図形を描く
塗りは#CCCCCCから#999999の色で下から上に線形グラデーション




新規レイヤーを追加し、ActionScriptを記述
考え方としては以前の記事と同じように、仮の座標を設定してそこからX、Y座標を割り出す

//panelの枚数
var num:int = 9;
//視線位置
var xEye:int = stage.stageWidth/2;
var yEye:int = 70;
//Y軸方向(真上)から見たときの円の半径
var radius:int = 150;
//視点から円の中心までのZ軸方向距離
var cLength:int = 500;

var angle:Number = 0;    //角度
var speed:Number;    //速度
var panels:Array = new Array();

//panel初期設定
for (var i:int = 0; i<num; i++) {
    //panelを生成して配列に格納、配置
    panels.push(new Panel());
    addChild(panels[i]);

    //仮想X軸、Y軸、Z軸でのpanelの初期位置
    panels[i].xPos = radius*Math.cos(i/num*Math.PI*2);
    panels[i].yPos = 100;
    panels[i].zPos = radius*Math.sin(i/num*Math.PI*2);

    //panelの透明度を0.7に
    panels[i].alpha = 0.7;
    //マウスカーソルを指の形に
    panels[i].buttonMode = true;

    //マウスオーバーイベント追加
    panels[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
    //マウスアウトイベント追加
    panels[i].addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}

//panelの動きのイベント追加
addEventListener(Event.ENTER_FRAME, moveCarousel);

function moveCarousel(e:Event):void {
    //X軸方向のマウス位置によって速度変更
    speed = (mouseX-xEye)/3000;
    //速度を加算して角度変更
    angle += speed;

    for (i = 0; i<num; i++) {
        //angleを変化させてpanelの仮想X軸、Z軸での位置を変える
        panels[i].xPos = radius*Math.cos(angle+i/num*Math.PI*2);
        panels[i].zPos = radius*Math.sin(angle+i/num*Math.PI*2);

        //panelのZ軸方向位置の比率
        var zRatio = cLength/(cLength+panels[i].zPos);

        //仮想位置をステージ上のX、Y座標に変換
        panels[i].x = xEye+panels[i].xPos*zRatio;
        panels[i].y = yEye+panels[i].yPos*zRatio;

        //Z軸方向位置によってpanelの大きさ変更
        panels[i].scaleX = panels[i].scaleY = zRatio;
        //trace(myArray[i].name);
	}

	//重ね順を変更するための関数実行
	sortPanel();
}

function sortPanel():void {
    //配列を仮想Z軸位置が奥にある順に並び替え
    panels.sortOn("zPos", Array.NUMERIC | Array.DESCENDING);
    for (i = 0; i<num; i++) {
        //重ね順を変更、背景があるので+1
        setChildIndex(panels[i], i+1);
    }
}

function mouseOverHandler(e:Event):void {
    //panelの動きを止めて透明度を1に
    removeEventListener(Event.ENTER_FRAME, moveCarousel);
    e.target.alpha = 1;
}

function mouseOutHandler(e:Event):void {
    //再びpanelの動きを追加して、透明度0.7に
    addEventListener(Event.ENTER_FRAME, moveCarousel);
    e.target.alpha = 0.7;
}


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







以上、カルーセルアクションの作り方でした