サンプルダウンロード
PDRファイル・CSFファイル在中
「tabmenu.zip」 5.82 KB (5,969 バイト)
タブメニュー 作成方法解説
ParaDraw Ver.0.3a4 で作成した絵を，Suzuka Ver.0.7.3.2 で動作させています。
違った動きをする２種類のタブ式メニューです。
タブメニュー１・２ともに，スプライトインスタンスの階層構造は次のようになっています。
_root
├ menu0 (スプライト)
│ └ tab (スプライト)
├ menu1 (スプライト)
│ └ tab (スプライト)
├ menu2 (スプライト)
│ └ tab (スプライト)
└ menu3 (スプライト)
└ tab (スプライト)
タブメニュー１ の _root のタイムラインの フレーム1 のスクリプトは，次のように書いています。
// スライドする速さの設定
var spd = 1/8;
// スライド番号の変数 n の初期化
var n = 0;
// y座標データ配列の作成
var yArr = new Array();
yArr[0]=[0,0,0,0];
yArr[1]=[270,0,0,0];
yArr[2]=[270,270,0,0];
yArr[3]=[270,270,270,0];
// 各メニューを常にy座標データに向けて動かす
this.onEnterFrame = function(){
for(i=0; i<=3; i++){
this["menu"+i]._y += (yArr[n][i]-this["menu"+i]._y)*spd;
}
};
for(i=0; i<=3; i++){
// 各メニューのタブに固有値を設定
this["menu"+i].tab.n =i;
// 各メニューのタブをクリックしたとき
this["menu"+i].tab.onRelease = function(){
// タブ階層の n の値を _root の n に代入
n = this.n;
};
// タブの色を変える
this["menu"+i].tab.onRollOver = function(){
this.gotoAndStop(2);
};
this["menu"+i].tab.onRollOut = function(){
this.gotoAndStop(1);
};
this["menu"+i].tab.onDragOut = this["menu"+i].tab.onRollOut;
}
|
上がった状態と下がった状態の座標を２次元配列に用意しておいて，変数 n の値によって選ぶ配列データを変更するというしくみです。
タブメニュー２ の _root のタイムラインの フレーム1 のスクリプトは，次のように書いています。
for(i=0; i<=3; i++){
this["menu"+i].tab.onRelease = function(){
// 各メニューをフレーム1に戻して再生
this._parent.gotoAndPlay(1);
// 各メニューの深度を最高深度にする
this._parent.swapDepths(this._parent.getNextHighestDepth());
};
}
|
こちらは至ってシンプルです。クリックしたタブのあるメニューの深度を，最高深度に上げているだけです。
ただし，getNextHighestDepth() が使用できるのは Flash Player 7 以降なので，SWF7 以上に書き出す必要があります。
|
