このflash講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです |
||
FLASH講座 ーアクションスクリプトの実践的事始めー
|
||
| ここでは、メニューやフォトギャラリーのナビゲーションバーなどに使える、ロールオーバーすると伸縮するものを作ってみました。 お役に立てるかなと思い今回のflash講座の材料とします。 このナビの作成にはスバル自動車のサイトのナビゲーションが参考となっています。 もちろん、FLASHファイルが公開になっているわけではないので、その動きだけを参考としていますが、全く同じものに仕上げているわけではありません。 今回作ったものをもとに、皆さんも興味があれば、さらに発展させることもできます。 |
||
| ステージの準備 Ｗ２６０×Ｈ２５０（色：#006699）の大きさで、フレームレート２４のステージを設定する ステージに左図のようなバーを必要な数だけ縦に並べて配置する。 ここでは、W２５０×H４０の色(#66CCFF)のバーをシンボルに変換（bar）してベースバーとする。 次に、W１５０×H１００の写真をステージに読み込み、高さ（H)３５に縮めてバーの右側に配置する。 バーと写真の両者を選択しグループ化する。 これのインスタンス名を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 //以降の緑の文字は注釈で、スクリプトとしては必要の無いものである |
配列ｂａｒの定義 バーの数（ここでは６） バーの高さ(初期) バーの高さ（縮んだとき) バーの高さ(伸びたとき) バーの幅 bar0の配置座標（左上が基準) バーに記載する文字列で上から / で区切って並べる （漢字、ひらがな、かたかなOK) / で分離してそれぞれを配列bar[0],bar[1],,,,bar[5]とする テキストフィールドの設置 通常表示時の文字フォーマット フォント、サイズ、色、イタリック ロールオーバー時の文字フォーマット サイズ、色 （実際の表示は全体に拡大される) サウンドオブジェクトの生成 soundObjと言う名のサウンドオブジェクトにmyClickと言うサウンドを割付 bar0からbar5まで６つのバーに対して、 配列として扱う 処理配列の番号 ロールオーバー時のfunction名 ロールアウト時のfunction名 ムービークリップbar[i]内にテキストフィールドtf[i]を作る テキストフィールドについて テキストは上で定義した配列ｔｘｔ［ｉ］とする 文字のフォーマットは上で定義したtxformを適用 ロールオーバー時の処理(アクション) soundObj(上で定義)の０秒から１回再生する 処理しているバーの番号をb_numとする タイムラインに沿って以下の処理をする ロールオーバーされたバーの高さをb_ehにする(イージング) +1は位置調整 ロールオーバーされたバーのｙ座標へ移動（イージング） テキストフィールド内の文字のフォーマット設定 ロールオーバーされていないバーで、ロールオーバーされているバーよりも上にあるバーについては、バーの高さをb_shにし、左記のｙ座標に移動 ロールオーバーされていないバーで、ロールオーバーされているバーよりも下にあるバーについては、バーの高さをb_shにし、左記のｙ座標に移動 ロールアウト時の処理(アクション) テキストフィールド内文字のフォーマット設定（元に戻す) マウスのｘ座標 マウスのｙ座標 もし、マウスの位置（ｘ、ｙ座標)が全部のバーの上から外れたら、 バーの高さ、ｙ座標を初期位置に戻す(イージング) |
|
なお、このナビゲーションで、バーをクリックしたときの処理は省略しているが、新しいページへ飛んだり、大きな写真を横に表示させたり、工夫次第でいろいろ使えると思う。 クリックしたときの処理に関しては ｃａｓｅ を使ったスクリプトが適当だと思われるが、それぞれのバーに on(release) コマンドを書き込んでも良い。 ｃａｓｅを使った例は、本シリーズの「イメージマップ風ナビゲーション」を参照願いたい。 |
||
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
||
HOME Flash講座総リスト アクションスクリプトの実践的事始め-活用編（4） |
||
