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

FLASH講座 ーケータイ(携帯) de FLASHー
携帯編
(8) FlashLite2.0 でサイトメニュー(menu)の作成

 ここでは、サイトメニューを作ります。
 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の4方向矢印キーとエンターキーで作動する
MENU1の飛び先ページにのみリンクを貼った場合の例が示されている。
 なお、携帯サイトで使う場合は、Docomoの機種であれば、インタラクティブ再生モードで使えると思うが、TopページをHTMLにして、そこからリンクを貼るのが無難であろう。

 携帯用スクリプトは、softbank 811SH で無事動くことが確認できている。
 
携帯用SAMPLE(swfファイル)は、flash講座 de syanari に。

  flashde.syanari.comのQR-Code
ステージの準備(FLASH8でFlashLite2.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を足す

y座標を引数に関数p_numberに

もし、UPキーだったら
もし最上端を下回るようなら
guideのy座標を最下端に
そうでなければ
y座標から33を引く

y座標を引数に関数p_numberに


もし、ENTERキーだったら
nが1なら
全てのメニューバーの表示を消す


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がクリックされたら
FRAME2に

フォーカスリスナー用オブジェクトの作成
フォーカスリスナーの追加
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を呼び出す
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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講座総リスト    ケータイ de FLASH 携帯編(9)