このflash講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(4)伸縮するナビゲーションバー
(2)

 (4)で講座にしました伸縮ナビゲーションバーの2D版です。 どれほど有用なものになるか余り自信が無いのですが、スクリプト的には面白いところがあるので、今回のflash講座としました。

 ロールオーバー時に2方向に座標移動させなければならないので、ちょっと苦心しましたが、3項演算子を多用して何とかこなしています。 演算が多いのでcpuに負担をかけるらしく、縦横のセル(四角形)の数を増やすとかなり重たくなり、動きが緩慢になりますので、サンプルで示した数程度が適当かと思います。

 ただ、古い(遅い)cpuを載せているPCでどんな動きになるかは未確認です。 なお、サンプルでは、ひとつのセルにだけロールオーバで「ENTER」の文字がランダムに表示されるようにしてあり、そこからだけ設定ページへ入ます。 もう少しこった仕掛けを施したかったのですが、動きが遅いのでこれ以上負荷をかけるスクリプトの使用は止めることにしました。 
ステージの設定

 W330×H230(色:#006699)の大きさで、フレームレート12のステージを設定する
 
 次に「挿入」「新規シンボル」の画面で、四角形のシンボルを作成する。
 ここでは、W50×H50の色(放射状グラデーション#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://flash1234.net");
  }
 }

stop();



配列cellの設定
横方向、縦方向のcellの数を設定
左上のセルの座標
セルの幅と高さ
膨らんだときのセルの幅と高さ
縮んだときのセルの幅
縮んだときのセルの高さ
セルの配列番号
遅延効果係数
当たりセルの番号をランダムに設定
当たりセルに表示する「Enter]の文字のフォーマット




横の数だけ
縦の数だけ
セルのムービークリップを作成、cell[1]から順に、深度も順に
cellを配列として扱う
セルのx座標
セルのy座標
横位置の左からの順
縦位置の上からの順
セルの順番








もしflagが1なら(ロールオーバ時)
そのセルにテキストフィールド(tf)を作成する
もし、そのセル番号がatariなら、「Enter]と表示する それ以外は表示なし
テキストフィールドの表示文字のフォーマット設定
ロールオーバーされていない全てのセルについて
横位置の計算(割り算の解を切り上げ)
縦位置の計算(%は割り算の余りを返す)

もしa(横位置)がロールオーバーしたセル位置(c_i)より以下だったら、
 前式、そうでなかったら後式のx座標を採用


もしb(縦位置)がロールオーバーしたセル位置(c_j)より以下だったら、
 前式、そうでなかったら後式のy座標を採用


もしa(横位置)がロールオーバーしたセル位置(c_i)と同じだったら、
 伸びた状態のセル幅に、そうでなかったら、縮んだセル幅に

もしb(縦位置)がロールオーバーしたセル位置(c_j)と同じだったら、
 伸びた状態のセル高さに、そうでなかったら、縮んだセル高さに




もし、flagが2(ロールアウト時)だったら
全てのセルに対して、
それぞれの横、縦位置を計算し

初期表示状態の位置に戻す






ロールオーバー時のアクション
flagを1に
ロールオーバーされたセルの横位置、縦位置、順番(通し番号)を取得


ロールアウト時のアクション
flahを2に
今までロールオーバーしていたせるのテキストフィールドに、visitedを記入

リリース時のアクション
もし、リリースセルの番号が当たり番号だったら、
 指定ページへジャンプさせる

スクリプトの説明
 三項演算子 ( A )? B : C;
   Aは条件、 Bは真の場合、 Cは偽の場合 (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;
    もし、k割るtateの余りが0だったら、b=tateに、そうでなかったら、b=余り にする
   
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                       (by Hiraoka)

 HOME   Flash講座総リスト   アクションスクリプトの実践的事始め-活用編(5)