第6回　ActionScriptの応用：カード型ナビゲーション1

ここまで学習してきたメソッドやプロパティを組み合わせて、もっと本格的にActionScript使ってみよう。これから2週にわたって、カード型のナビゲーションのサンプルを作成していく。ばらばらに並んだカードにマウスをロールオーバーすると重ね順が入れ替わり、クリックするとカードが拡大して開くナビゲーションだ。今回は、ロールオーバーすると重ね順が入れ替わるところまでの作成方法を紹介する。同じ形式の処理を一括で行うことができる「for文」も使ってみよう。

ロールオーバーで重ね順が変わるカード型ナビゲーションを作成していこう。

まず、カードを作成する。1枚のカードをひとつのムービークリップとし、カード内に配置するコンテンツや、開閉ボタンを設定しよう。

1．［名前：card0］、［タイプ：ムービークリップ］の新規シンボルを作成する。ステージに中心を基準点としたカードとなる矩形を描画し、その上に画像や、メニュー名（ここでは「Red」）などのコンテンツを配置する【図1】。

2．カードを開くときにクリックするための、半透明のカードと同サイズの矩形のボタンシンボル「open_btn」と【図2】、カードを閉じるための、closeと書いたボタンシンボル「close_btn」を作成する【図3】。

3．ムービークリップシンボル「card0」の編集画面に戻り、新しく「open_btn」レイヤーと、その上に「close_btn」レイヤーを作成する。それぞれのレイヤーにボタンを配置し、プロパティインスペクタでインスタンス名を「open_btn」、「close_btn」と設定する【図4】。

4．［ライブラリ］パネルで「card0」を複製して、「card1」～「card4」を作成する。カードの中味を任意に変更する。「シーン1」に戻り、5つのカードをステージにドラッグし、フィルタでグローを設定する【図5】。

5．次に、［変形］パネルでサイズを50%に縮小し、適当な角度に回転させ、重ねて並べる。それぞれを選択し、プロパティインスペクタでインスタンス名を「card0_mc」～「card4_mc」に設定する【図6】。

カードにロールオーバーしたときに、そのカードが最前面にくる処理を設定する。ムービークリップの深度を入れ替えるメソッド「swapDepths」と、ムービークリップの深度を取得するメソッド「getDepth」、ムービークリップ内で最前面の深度を返すメソッド「getNextHighestDepth」を使用する。

1．深度とは、最背面を「0」としたムービークリップの重なり順の数値で表される。「swapDepths」メソッドで深度を変更すれば重ね順を入れ替えることができる。ActionScriptで深度の初期値を指定していないムービークリップは常に背面に表示されるので、最初に深度を指定しておく必要がある。新規レイヤー「action」を作成し、［アクション］パネルに、初期設定として、次のように記述しよう【図7】。

（1）
// 深度の初期設定
行頭に「//」をつけるとコメント行になる。スクリプトの説明をメモしておくとよい

（2）
card0_mc.swapDepths( 0 );
「card0_mc」の深度を「0」に移動する

（3）
card1_mc.swapDepths( 1 );
「card1_mc」の深度を「1」に移動する

（4）
card2_mc.swapDepths( 2 );
「card2_mc」の深度を「2」に移動する

（5）
card3_mc.swapDepths( 3 );
「card3_mc」の深度を「3」に移動する

（6）
card4_mc.swapDepths( 4 );
「card4_mc」の深度を「4」に移動する

2．上の処理を「for文」を使って書き換えよう。「for文」とは、同じ形式の処理を一括で行う命令だ。構文は次のとおりだ。

for(初期条件, 終了条件, 増減値){
繰り返す処理
}

これを先ほどの初期設定にあてはめる。ここではカード数は5枚だが、カードが増えるほど処理を簡潔に記述することができる【図8】。

「i」の値が0から5未満のとき、(1)の処理を繰り返す。「i」は1回ずつ「i++」するので、「i=0,1,2,3,4」の5回処理を行うことになる。

（1）の処理
「"card" + i + "_mc"」の「+」は文字をつなぐという意味なので、「i=0」のとき「this["card0_mc"].swapDepths( 0 );」となり、「card0.swapDepths( 0 );」と同じ意味になる。「i=1,2,3,4」の場合も同様だ。

3．ムービークリップシンボル「card0」の編集画面を開く。新規レイヤー「action」を作成。［アクション］パネルに、初期設定として、このムービークリップの深度、すなわち「シーン1」で設定した深度を「getDepth」メソッドで取得し、変数「dep」に格納（変数「dep」に深度の数値をいれておくこと）しよう。変数とは、数値や文字などのデータを入れておくための器で、任意に定義できる。また、カードは最初閉じている状態なので、ボタン「close_btn」を非表示にする【図9】。

（1）
// カードの初期設定
dep = this.getDepth();
変数「dep」に深度の初期値を格納する

（2）
close_btn._visible = false;
ボタン「close_btn」を非表示にする

4．次に、マウスをロールオーバーしたときに重ね順を最前面に入れ替え、ロールアウトまたはドラッグアウトしたときは元に戻す処理を記述する。ロールオーバーのイベントハンドラメソッドは「onRollOver」、ロールアウトは「onRollOut」、ドラッグアウトは「onDragOut」だ【図10】。

（1）
// 最前面に深度を入れ替える
open_btn.onRollOver = function() {
this._parent.swapDepths( _parent.getNextHighestDepth() );
};
ボタン「open_btn」にロールオーバーしたとき、このムービークリップの深度を、ひとつ上の階層（「シーン1」）内で最前面に移動する

（2）
// 初期設定の深度に戻す
open_btn.onRollOut = click_btn.onDragOut = function() {
this._parent.swapDepths( dep );
};
ボタン「open_btn」をロールアウトしたとき、または、ボタン「open_btn」をドラッグアウトしたとき、このムービークリップの深度を、「dep」に移動する（初期の深度に戻す）

基本的にメソッドの前には何らかのターゲットパスをつけなければならない。この場合、イベントハンドラ内に記述する「this」はボタン「open_btn」を指すので、このムービークリップ自身のターゲットパスは「this._parent」になる。

5．ほかのカードでも「card0」のActionScriptと同じ設定だ。記述をすべてコピーし、ムービークリップシンボル「card1」～「card4」に、新規レイヤー「action」を作成して、ペーストすればよい。これで完成だ。［制御］→［ムービープレビュー］で確認しよう。