(8) FlashLite2.0 でサイトメニュー（menu）の作成 2007/1/17
| 今回はサイトメニュー作り。 PC向けサイトのようにメニューバーをページの片隅に置くと言うようなことは無理なので、ページ全体でメニューバーを表示させることになる。 メニューバーはFL1.1ではボタンインスタンスとして扱うが、FL2.0ではムービークリップとしても扱うことができる。 今回は、FL2.0でメニューバーの出現に簡単なエフェクトをつけたものを示すが、もっと凝ったアニメーションを工夫することも可能である。 また、このSAMPLEはMacromedia(Adobe)社の公開している
Flash Lite 2.0 CDK のTutorial で解説されているメニューに比べると、拡張性がかなり高まっていると思っている。 FlashLite1.1対応でも、単なるメニューの機能だけであれば、ボタンインスタンスを並べるだけで簡単に作成できる。 ボタンがクリックされたら、ページを作成しておいたFRAMEに飛ばせばいいわけで、Lite2.0(本稿) の場合と同じである。 |
|
| SAMPLE（FlashLite2.0対応) | |
| このサンプルは、FlashLite2.0でパブリッシュしたもので、一度FLASH部をクリックすると、PCの４方向矢印キーとエンターキーで作動する。 MENU1の飛び先ページにのみリンクを貼った場合の例が示されている。 なお、携帯サイトで使う場合は、Docomoの機種であれば、インタラクティブ再生モードで使えると思うが、TopページをHTMLにして、そこからリンクを貼るのが無難であろう。 携帯用スクリプトは、softbank 811SH で無事動くことが確認できている。 携帯用SAMPLE（swfファイル）は、http://flashde.syanari.com/ に。  flashde.syanari.comのQR-Code |
|
| ステージの準備（ＦＬＡＳＨ８でＦｌａｓｈＬｉｔｅ2.0ファイルを作成する場合) | |
| パブリッシュ設定（あらかじめMacromediaのサイトから"fl8_flashlite2_update_jp.exe"をDLしてインストールしておく） ●ステージのサイズを240,320に設定 ●パブリッシュの設定ウインドウを開き、バージョンをFlashLite2.0に、アクションスクリプトのバージョンをActionScript2.0に ●Ctrl＋Enterでプレビューさせるとデバイス選択画面が出るので、スタンドアローンプレイヤー、一般携帯電話を選択 ステージの準備 ●背景色は好みで、フレームレートは12fps ●FLAME1,2にキーフレームを挿入しスクリプト記述用フレームとする ●FLAME5にキーフレームを挿入し、プロパティーインスペクターのフレームにmenu1と書き込み、ステージにメニューから飛ぶページを作成する。 さらに、このページにメニューページに戻るためのボタンHOMEをムービークリップとして作成 ●FLAME10,15,20,25,30に同様にキーフレームを挿入し、menu2,,,menu6のページを作成する ●メニューバーに用いる角丸の矩形（220*30）を作成し、シンボルに変換する（ムービークリップ、bar） ●移動してメニューを選択するためのバーとして、メニューバーと同じ大きさ、形状のバーを作成し（MC、guide）、塗り部のアルファを40に設定する ●menu1からリンクで呼び出す外部ファイル（link.swf）を作成し、同じフォルダに置く |
|
| FlashLite2.0対応スクリプト | |
FRAME1に
fscommand2("FullScreen", true);
var n = 1;
var myListener:Object = new Object();
myListener.onKeyDown = function() {
switch (Key.getCode()) {
case Key.DOWN :
if (guide._y>y0+33*(menu_num-2)) {
guide._y = y0;
} else {
guide._y += 33;
}
p_number(guide._y);
break;
case Key.UP :
if (guide._y<y0+33) {
guide._y = y0+33*(menu_num-1);
} else {
guide._y -= 33;
}
p_number(guide._y);
break;
case Key.ENTER :
if (n == 1) {
for (i=1; i<=menu_num; i++) {
menubar[i].removeMovieClip();
}
guide.removeMovieClip();
gotoAndStop("menu1");
} else if (n == 2) {
for (i=1; i<=menu_num; i++) {
menubar[i].removeMovieClip();
}
guide.removeMovieClip();
gotoAndStop("menu2");
} else if (n == 3) {
for (i=1; i<=menu_num; i++) {
menubar[i].removeMovieClip();
}
guide.removeMovieClip();
gotoAndStop("menu3");
} else if (n == 4) {
for (i=1; i<=menu_num; i++) {
menubar[i].removeMovieClip();
}
guide.removeMovieClip();
gotoAndStop("menu4");
} else if (n == 5) {
for (i=1; i<=menu_num; i++) {
menubar[i].removeMovieClip();
}
guide.removeMovieClip();
gotoAndStop("menu5");
} else if (n == 6) {
for (i=1; i<=menu_num; i++) {
menubar[i].removeMovieClip();
}
guide.removeMovieClip();
gotoAndStop("menu6");
}
}
};
Key.addListener(myListener);
function p_number(y) {
n = (y-y0)/33+1;
} |
n(メニュー番号)を1に リスナーオブジェクトの作成 キーが押されたときに 押されたキーのCode別に もし、DOWNキーだったら もし最下端バーをオーバーするようだったら guideのy座標をy0に そうでなければ y座標に33を足す ｙ座標を引数に関数p_numberに もし、UPキーだったら もし最上端を下回るようなら guideのy座標を最下端に そうでなければ y座標から33を引く ｙ座標を引数に関数p_numberに もし、ENTERキーだったら ｎが１なら 全てのメニューバーの表示を消す guideの表示を消す タイムラインのmenu1に飛ぶ キーリスナーの定義 関数p_number y座標からメニュー番号を取得 |
FRAME2に
var menu_num = 6;
var n=1;
x0=10;y0=60;
var menubar:Array = new Array();
var menutext:Array = new Array(
"1. MENU1", "2. MENU2", "3. MENU3",
"4. MENU4", "5. MENU5", "6. MENU6");
var tm = new TextFormat();
tm.font = "Verdana";
tm.size = 22;
tm.bold=true;
for (i=1; i<=menu_num; i++) {
menubar[i] = attachMovie("bar", "menubar"+i, i);
with (menubar[i]) {
_x = x0;
_y = y0;
createTextField("tf", 10+i, 10, 3, 200, 30);
tf.text = " "+menutext[i-1];
tf.setTextFormat(tm);
}
slideBar(i);
}
function slideBar(i) {
menubar[i].onEnterFrame = function() {
this._y += (y0+(i-1)*33-this._y)/5;
if (y0+(i-1)*33-this._y<1) {
this._y = y0+(i-1)*33;
delete menubar[i].onEnterFrame;
}
};
}
attachMovie("guide", "guide", 100);
guide._x = x0;
guide._y = y0; |
メニュー数 メニュー表示の左上座標 配列menubar 配列menutextに、MENU1から MENU6までを定義 テキストのフォーマット FONT サイズ 太字 メニューの数だけ barをステージに配置し、menubar1,,,に menubar[i]について メニューバーの上にテキストフィールド テキストをmenu1,,,,menu6に テキストフォーマットを適用 i を引数に関数slideBarに 関数slideBar 表示最終y座標に移動 移動先に1px以内に近づいたら 移動先の座標に onEnterFrameの削除 インスタンスguideをステージに配置 配置座標 |
FRAME5、10、15、20、25、30に
stop();
home.onRelease=function() {
gotoAndStop(2);
}
var focusListener:Object = new Object();
Selection.addListener(focusListener);
Selection.setFocus(home); |
HOMEがクリックされたら FRAME２に フォーカスリスナー用オブジェクトの作成 フォーカスリスナーの追加 homeにリスナーをセット |
| MENUで飛んだページからリンクを貼ったケース 例えばFRAME5に stop();
link.onRelease=function() {
getURL("link.swf");
}
home.onRelease=function() {
gotoAndStop(2);
}
var focusListener:Object = new Object();
Selection.addListener(focusListener);
Selection.setFocus(link1); |
MENU1で飛んだページにリンク（link）というムービークリップを配置しておく link がリリースされたら link.swfを呼び出す |
| HOME お勉強総リスト | |