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

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

 ここでは、メニューやフォトギャラリーのナビゲーションバーなどに使える、ロールオーバーすると伸縮するものを作ってみました。

 お役に立てるかなと思い今回のflash講座の材料とします。 このナビの作成にはスバル自動車のサイトのナビゲーションが参考となっています。 もちろん、FLASHファイルが公開になっているわけではないので、その動きだけを参考としていますが、全く同じものに仕上げているわけではありません。 今回作ったものをもとに、皆さんも興味があれば、さらに発展させることもできます。  
ステージの準備

 W260×H250(色:#006699)の大きさで、フレームレート24のステージを設定する
 ステージに左図のようなバーを必要な数だけ縦に並べて配置する。
 ここでは、W250×H40の色(#66CCFF)のバーをシンボルに変換(bar)してベースバーとする。 次に、W150×H100の写真をステージに読み込み、高さ(H)35に縮めてバーの右側に配置する。 バーと写真の両者を選択しグループ化する。 これのインスタンス名をbar0とする。 同様に、bar1、bar2・・・・と必要な数だけ並べて配置する。 ここで、バーの中のflowe1などの文字は入れない(スクリプトで入れる)

 写真はバーが伸びたときに正常な表示となるようなサイズのものを用意し、初期配置では、上下に縮まった状態で表示する.。noteはfireworksで写真と同サイズに作成した。
 なお、ロールオーバー時に効果音を入れる場合は、ファイルをライブラリーに読み込んだ後、識別子を付けてリンケージを設定する(ここではmyClick)。
 
スクリプト

var bar:Array=new Array;
bar_num=6;
//number of menu bar
b_h = 40;
//original bar height
b_sh = 25;
//shrinked bar height
b_eh = b_h+(b_h-b_sh)*(bar_num-1);
//expanded bar height
b_w = 250;
//bar width
x0=5; y0=5;
//top_left

Text = "flower1/flower2/flower3/flower4/flower5/note";
   //menu title
txt = Text.split("/");
//split into Array
txtform = new TextFormat();
   //format of text in the TextField
  txtform.font = "Verdana";
  txtform.size = "17";
  txtform.color = 0x0033cc;
  txtform.italic = true;
txtform2=new TextFormat();
  txtform2.size = "10";
  txtform2.color = 0xff6600;
soundObj = new Sound();
  soundObj.attachSound("myClick");

for ( i=0; i<=bar_num-1; i++) {
  bar[i] = eval("bar"+i);
  bar[i].num = i;
  bar[i].onRollOver = b_rollv;
  bar[i].onRollOut = b_rollu;
  bar[i].createTextField(tf[i], i, 0,0,200, 25);
  with(bar[i][tf[i]]) {
    text = txt[i];
    setTextFormat(txtform);
  }
}

function b_rollv() {
  soundObj.start(0,1);
  b_num = this.num;
  _root.onEnterFrame=function(){
    bar[b_num]._height += (b_eh+1 -
             bar[b_num]._height)/3;
  bar[b_num]._y +=
        (y0+b_sh*b_num - bar[b_num]._y)/3;
  bar[b_num][tf[b_num]].
        setTextFormat(txtform2);
  for (j=0; j<=bar_num-1; j++) {
    if (j<b_num) {
      _root["bar"+j]._height
         +=(b_sh-_root["bar"+j]._height)/3;
      _root["bar"+j]._y +=
         (y0+b_sh*j-_root["bar"+j]._y)/3;
    }
    if (j>b_num) {
      _root["bar"+j]._height
         +=(b_sh-_root["bar"+j]._height)/3;
      _root["bar"+j]._y +=
       (y0+b_eh+b_sh*(j-1)-_root["bar"+j]._y)/3;
    }
  }
 }
}

function b_rollu() {
  bar[b_num][tf[b_num]].setTextFormat(txtform);
  _root.onEnterFrame = function() {
    mx = _root._xmouse;
    my = _root._ymouse;
    if (mx<x0 || mx>x0+b_w || my<y0 ||
               my>y0+b_h) {
      for (k=0; k<=bar_num-1; k++) {
        bar[k]._y += (y0+b_h*k-bar[k]._y)/3;
        bar[k]._height += (b_h-bar[k]._height)/3;
      }
    }
  }
}
//green //以降の緑の文字は注釈で、スクリプトとしては必要の無いものである


配列barの定義
バーの数(ここでは6)
バーの高さ(初期)
バーの高さ(縮んだとき)
バーの高さ(伸びたとき)

バーの幅
bar0の配置座標(左上が基準)

バーに記載する文字列で上から / で区切って並べる
 (漢字、ひらがな、かたかなOK)

/ で分離してそれぞれを配列bar[0],bar[1],,,,bar[5]とする
テキストフィールドの設置

通常表示時の文字フォーマット
 フォント、サイズ、色、イタリック


ロールオーバー時の文字フォーマット
 サイズ、色
 (実際の表示は全体に拡大される)
サウンドオブジェクトの生成
 soundObjと言う名のサウンドオブジェクトにmyClickと言うサウンドを割付

bar0からbar5まで6つのバーに対して、
配列として扱う
処理配列の番号
ロールオーバー時のfunction名
ロールアウト時のfunction名
ムービークリップbar[i]内にテキストフィールドtf[i]を作る
テキストフィールドについて
 テキストは上で定義した配列txt[i]とする
 文字のフォーマットは上で定義したtxformを適用
 


ロールオーバー時の処理(アクション)
soundObj(上で定義)の0秒から1回再生する
処理しているバーの番号をb_numとする
タイムラインに沿って以下の処理をする
ロールオーバーされたバーの高さをb_ehにする(イージング)
  +1は位置調整
ロールオーバーされたバーのy座標へ移動(イージング)

テキストフィールド内の文字のフォーマット設定


ロールオーバーされていないバーで、ロールオーバーされているバーよりも上にあるバーについては、バーの高さをb_shにし、左記のy座標に移動





ロールオーバーされていないバーで、ロールオーバーされているバーよりも下にあるバーについては、バーの高さをb_shにし、左記のy座標に移動







ロールアウト時の処理(アクション)
テキストフィールド内文字のフォーマット設定(元に戻す)

マウスのx座標
マウスのy座標
もし、マウスの位置(x、y座標)が全部のバーの上から外れたら、


バーの高さ、y座標を初期位置に戻す(イージング)

 なお、このナビゲーションで、バーをクリックしたときの処理は省略しているが、新しいページへ飛んだり、大きな写真を横に表示させたり、工夫次第でいろいろ使えると思う。 クリックしたときの処理に関しては case を使ったスクリプトが適当だと思われるが、それぞれのバーに on(release) コマンドを書き込んでも良い。
 caseを使った例は、本シリーズの「イメージマップ風ナビゲーション」を参照願いたい。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しました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講座総リスト    アクションスクリプトの実践的事始め-活用編(4)