重ね順をずらす
並び順は変えずにクリックされたカードを一番手前に持ってくるというアクションの作り方です
解説はつづきから
今回も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}); //イージング設定 } }
これでムービープレビューすると以下のようになってるかと思います
以上、重ね順をずらすアクションの作り方でした