FLASHのお勉強 ーアクションスクリプトの実践的事始めー |
|
（1５）伸縮するナビゲーションバー（２） |
|
（１４）で勉強した伸縮ナビゲーションバーの２D版である。 どれほど有用なものになるか余り自信が無いが、スクリプト的には面白いところがあるので、今回のお勉強材料としたい。 ロールオーバー時に２方向に座標移動させなければならないので、ちょっと苦心したが、３項演算子を多用して何とかこなしている。 演算が多いのでcpuに負担をかけるらしく、縦横のセル（四角形）の数を増やすとかなり重たくなり、動きが緩慢になるので、サンプルで示した数程度が適当かと思う。 ただ、古い(遅い)cpuを載せているＰＣでどんな動きになるかは未確認である。 なお、サンプルでは、ひとつのセルにだけロールオーバで「ENTER」の文字がランダムに表示されるようにしてあり、そこからだけ設定ページへ入れる設定である。 もう少しこった仕掛けを施したかったのだが、動きが遅いのでこれ以上負荷をかけるスクリプトの使用は止めることにした。 |
|
| ステージの設定 Ｗ330×Ｈ２３０（色：#006699）の大きさで、フレームレート１２のステージを設定する 次に「挿入」「新規シンボル」の画面で、四角形のシンボルを作成する。 ここでは、W５０×H５０の色(放射状グラデーション#0066FF)のセルをシンボルに変換（cell）してベースセルとし、識別子cellでリンケージを設定する。 編集画面上には何も表示されておらず、スクリプトのattatchMovieで画面を構成する。 |
|
| スクリプト var cell:Array=new Array; yoko = 6; tate = 4; x0=15; y0=15; c_w = 50; c_h = 50; c_ew = 120; c_eh = 120; c_sw = (c_w*yoko - c_ew)/(yoko-1); c_sh = (c_h*tate - c_eh)/(tate-1); jun = 1; speed = 20; atari = Math.floor(Math.random()*(yoko*tate-1)+1); txtform = new TextFormat(); txtform.font = "Verdana"; txtform.color = 0xcc3300; txtform.size = "16" for (i=1; i<=yoko; i++) { for (j=1; j<=tate; j++) { _root.attachMovie("cell","cell"+jun, jun); cell[jun] = eval("cell"+jun); cell[jun]._x = x0 + c_w*(i-1); cell[jun]._y = y0 + c_h*(j-1); cell[jun].inum = i; cell[jun].jnum= j; cell[jun].num = jun; cell[jun].onEnterFrame = c_mc; cell[jun].onRollOver = c_rollv; cell[jun].onRollOut = c_rollu; cell[jun].onRelease = c_rel; jun++; } } function c_mc() { if (flag==1) { cell[c_n].createTextField(tf, 10, 0,0,50,50); (c_n == atari)? cell[c_n][tf].text = "Enter": " "; cell[c_n][tf].setTextFormat(txtform); for (k=1; k<=yoko*tate; k++) { a = Math.ceil(k/tate); b = ( k % tate ==0 )? tate: k % tate; (a<=c_i)? cell[k]._x +=(x0+c_sw*(a-1) - cell[k]._x)/speed : cell[k]._x+=(x0+c_ew+c_sw*(a-2) - cell[k]._x)/speed; (b<=c_j)? cell[k]._y+=(y0+c_sh*(b-1) - cell[k]._y)/speed : cell[k]._y+=(y0+c_eh+c_sh*(b-2) - cell[k]._y)/speed; (a==c_i)? cell[k]._width +=(c_ew-cell[k]._width)/speed: cell[k]._width+=(c_sw-cell[k]._width)/speed; (b==c_j)?cell[k]._height +=(c_eh-cell[k]._height)/speed : cell[k]._height+=(c_sh-cell[k]._height)/speed; } } if (flag==2) { for (k=1; k<=yoko*tate; k++) { b = ( k % tate ==0 )? tate: k % tate; a = Math.ceil(k/tate); cell[k]._x+=(x0+c_w*(a-1) - cell[k]._x)/speed; cell[k]._y+=(y0+c_w*(b-1) - cell[k]._y)/speed; cell[k]._width+=(c_w-cell[k]._width)/speed; cell[k]._height+=(c_h-cell[k]._height)/speed; } } } function c_rollv() { flag=1; c_i = this.inum; c_j= this.jnum; c_n = this.num; } function c_rollu() { flag=2; cell[c_n][tf].text = " visited "; } function c_rel() { if (c_n == atari ) { getURL("http://www.geocities.jp/flashiroha"); } } stop(); |
配列cellの設定 横方向、縦方向のcellの数を設定 左上のセルの座標 セルの幅と高さ 膨らんだときのセルの幅と高さ 縮んだときのセルの幅 縮んだときのセルの高さ セルの配列番号 遅延効果係数 当たりセルの番号をランダムに設定 当たりセルに表示する「Enter]の文字のフォーマット 横の数だけ 縦の数だけ セルのムービークリップを作成、cell[1]から順に、深度も順に cellを配列として扱う セルのｘ座標 セルのｙ座標 横位置の左からの順 縦位置の上からの順 セルの順番 もしflagが１なら（ロールオーバ時) そのセルにテキストフィールド（ｔｆ）を作成する もし、そのセル番号がatariなら、「Enter]と表示する それ以外は表示なし テキストフィールドの表示文字のフォーマット設定 ロールオーバーされていない全てのセルについて 横位置の計算（割り算の解を切り上げ) 縦位置の計算（％は割り算の余りを返す) もしａ(横位置)がロールオーバーしたセル位置（c_i）より以下だったら、 前式、そうでなかったら後式のｘ座標を採用 もしｂ（縦位置）がロールオーバーしたセル位置（c_ｊ）より以下だったら、 前式、そうでなかったら後式のｙ座標を採用 もしａ(横位置)がロールオーバーしたセル位置（c_i）と同じだったら、 伸びた状態のセル幅に、そうでなかったら、縮んだセル幅に もしｂ（縦位置）がロールオーバーしたセル位置（c_ｊ）と同じだったら、 伸びた状態のセル高さに、そうでなかったら、縮んだセル高さに もし、flagが２（ロールアウト時)だったら 全てのセルに対して、 それぞれの横、縦位置を計算し 初期表示状態の位置に戻す ロールオーバー時のアクション flagを１に ロールオーバーされたセルの横位置、縦位置、順番(通し番号)を取得 ロールアウト時のアクション flahを２に 今までロールオーバーしていたせるのテキストフィールドに、visitedを記入 リリース時のアクション もし、リリースセルの番号が当たり番号だったら、 指定ページへジャンプさせる |
スクリプトの説明 三項演算子 （ Ａ ）？ Ｂ ： Ｃ； Ａは条件、 Ｂは真の場合、 Ｃは偽の場合 （excelのif関数と似ている) (c_n == atari)? cell[c_n][tf].text = "Enter": " "; もし、c_nとatariが等しかったら、cell[c_n]にEnterの文字を入れ、そうでなかったら、何も入れない b = ( k % tate ==0 )? tate: k % tate; もし、ｋ割るtateの余りが０だったら、b=tateに、そうでなかったら、b=余り にする |
|
|
|
|
HOME お勉強総リスト |
|