重ね順をずらす

slide_card



並び順は変えずにクリックされたカードを一番手前に持ってくるというアクションの作り方です
解説はつづきから






今回もTweenMaxを使います
詳しくは以前の記事参照




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





矩形プリミティブツールを使い画像のように設定し角丸の矩形を描く





その上に文字を書く
文字と矩形を両方選択し、シンボル化する





色と文字を変えて同じようにシンボルを5つ作る
インスタンス名をそれぞれ、mcA、mcB、mcC、mcD、mcEに
Aが一番手前でEが奥になるように重ね順を調整





それぞれ、カラー:アルファを70%に、サイズと位置を
mcAはW:160、H:120、X:130、Y:110
mcBはW:144、H:108、X:178、Y:139
mcCはW:128、H: 96、X:222、Y:166
mcDはW:112、H: 84、X:262、Y:191
mcEはW: 96、H: 72、X:298、Y:214
に変更




新規レイヤーを追加し、ActionScriptを記述

//TweenMaxをインポート
import gs.*;
import gs.easing.*;

buttonMode = true;

//カードのインスタンスを配列に格納
var myArray:Array = [mcA,mcB,mcC,mcD,mcE];
//配列の長さを変数に入れておく
var len = myArray.length;

//クリックイベント追加
addEventListener(MouseEvent.CLICK,clickHandler);

function clickHandler(e:MouseEvent):void {
    //クリックされたカードの重ね順を調べる
    var mc = e.target;
    var num = getChildIndex(mc);

    //クリックされたカードより前にある部分を
    //元の配列から一時的に取り出す
    var tArray:Array = myArray.splice(0,len-1-num);

    //一時的に取り出した配列を
    //取り出された配列の後ろ側に連結
    //例:[A,B,C,D,E]のCをクリックすると
    //[A,B][C,D,E]→[C,D,E,A,B]となる
    myArray = myArray.concat(tArray);

    for (var i:int = 0; i<len; i++) {
        //配列に入ってる順番に重ね順を変更
        setChildIndex(myArray[i],len-1-i);

        //トゥイーン設定
        TweenMax.to(myArray[i], 0.5,     //myArray[i]を0.5秒間で
        {x:i*(50*(len-i+20)/25)+130,     //奥に行くほど間隔が狭くなる
         y:i*(30*(len-i+25)/30)+110,     //ようにX,Y方向に配置
         scaleX:(len-i+5)/10,            //奥に行くほど小さくなる
         scaleY:(len-i+5)/10,            //ように設定
         ease:Cubic.easeOut});           //イージング設定

    }
}


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







以上、重ね順をずらすアクションの作り方でした