サンプルダウンロード
PDRファイル・CSFファイル在中
「header_menu.zip」 27.8 KB (28,493 バイト)

このページでは，Flash の部分の作成だけでなく，一般的ホームページを作る場合のページ全体と Flash との関係についても少し説明したいと思います。

今までのものとは違って，少しだけ複合的に物が動いていますが，結局は簡単なものの組合せです。

まず，Flash 部分の説明ですが，
階層構造は，次のようになっています。非常にシンプルでスプライトの入れ子はありません。

　_root
　　├ photo_mc (動く右の絵 スプライトインスタンス)
　　├ btn_waku_mc (動く枠 スプライトインスタンス)
　　├ btn4 (MARS FLAG ボタンインスタンス)
　　├ btn3 (Yahoo! ボタンインスタンス)
　　├ btn2 (Live Search ボタンインスタンス)
　　├ btn1 (Ask.jp ボタンインスタンス)
　　└ btn0 (Google ボタンインスタンス)

スクリプトはメインのタイムラインの フレーム1 のみに記述しています。

// リンク先 URL 配列の作成 urlArr = new Array(); // リンク先 URL データの用意 urlArr[0] = "http://www.google.co.jp/"; urlArr[1] = "http://www.yahoo.co.jp/"; urlArr[2] = "http://www.live.com/"; urlArr[3] = "http://ask.jp/"; urlArr[4] = "http://www.marsflag.com/"; // // カウント用変数 cnt の初期化 cnt = 0; // cnt を 1 増やすユーザー定義関数 plusCnt の定義 function plusCnt() { if (cnt<4) { cnt++; } else { cnt = 0; } } // // setInterval myID をセット // 2500ミリ秒(2.5秒)ごとに plusCnt を実行 myID = setInterval(plusCnt, 2500); // // 各ボタンの動作定義など for (i=0; i<=4; i++) { // 各ボタンの固有値 n を指定 _root["btn"+i].n = i; // ロールオーバー時の動作定義 _root["btn"+i].onRollOver = function() { // setInterval のクリア clearInterval(myID); // 変数 cnt に自分自身の固有値 n を代入 cnt = this.n; }; // ロールアウト時の動作定義 _root["btn"+i].onRollOut = function() { // setInterval myID をセット myID = setInterval(plusCnt, 2500); }; // ドラッグアウトしたときはロールアウトと同じく _root["btn"+i].onDragOut = _root["btn"+i].onRollOut; // クリック時の動作定義 _root["btn"+i].onRelease = function() { // リンク先を開く getURL(urlArr[this.n], _blank); }; } // １フレーム進む時間毎に随時実行 _root.onEnterFrame = function() { // 目標座標に徐々に近付ける btn_waku_mc._x += (90*cnt-btn_waku_mc._x)/5; photo_mc._y += (-100*cnt-photo_mc._y)/7; };

簡単な原理の組み合わせです。

まず，
setInterval(関数名, 実行間隔[ミリ秒]);
によって変数 cnt の値を 2.5秒間隔で， 0→1→2→3→4→0→1→… と変えています。
その 変数cnt を _root.onEnterFrame イベントハンドラメソッド内で拾って，ボタンの枠と右の絵を随時動かし続けています。

あとは，ボタンによって，setInterval を解除してみたり，setInterval を再設定してみたり，cnt の値を変えているだけです。

このサンプルでは右側に動く絵を用意していますからそういった部分が手間ですが，実際の場合は既存の格好いい写真などを使えばもっと簡単に作成できます。スクリプトも難しい物ではありません。

アクションスクリプトは，簡単でも難しくても何でも良いですから，自分なりのものを自分の力だけで書けるようになることと，キッチリ作るということが大切です。
プロの方が作る一般的ホームページ用の Flash と，一般的な方が作る一般的ホームページ用の Flash の一番の違いはこの部分にあるように思います。

プロの人の方が良いソフトを使っているとか，ハイレベルな ActionScript を使用しているとか，そういうことが差の原因にはほとんどなっていないと思います。
むしろ，妙な高級テクニックや ActionScript を多用しているのは，素人サイトや Flash 研究サイトなどで見かける Flash の方で，
実際によく目にするいわゆる名の通った会社のサイトの Flash は大した ActionScript などを使用していないのが普通です。
妙なテクニックや危なっかしい ActionScript を多用ことよりも，まずは一般ニーズに合ったもので，無難に，キッチリと作成することの方が大切です。

というわけで，ページ全体とFlashとの関係についてと，「キッチリ作る」 ことについて説明します。
例えば，このサンプルのレイアウト設計図は次のようになっています。

「横幅を 580px にする」 ということと，
「ボタンの数は５つにする」 ということから全てを決めています。

横幅 580px で，ボタンを５つ下に配置した場合，上のようにレイアウトするのが落ちついていて良い気がしました。
大まかなイメージは気分で決めますが，細かい数値は落書きを繰り返したり電卓や Excel などを使ってちゃんと出します。
そして，上のようなレイアウトを決めた以上，決めるポイントは 1px たりとも（0.01pxたりとも）妥協しません。
これが 「キッチリと作る」 という部分の出発点です。

また，上のようなレイアウトが決まってこそ，初めてスクリプトを書き出し始めることもできます。
ボタンなどの部品も，スクリプトも，ただ思い付くままに描いたり書いたりしているのではなくて，上のレイアウト上，キッチリ辻褄が合うように描いたり書いたりします。

最初に，横幅 580px にしようと思った理由は，
このページのこの右枠の横幅が 600px だからです。

実際に同様のものを作る場合は，もっと横幅を大きくすると思います。
横幅が変われば，すべて最初から作り直しです。

★注意事項

上のメニューは Flash で，ボタンには外部サイトへリンクがかかっていますから問題はありませんが，普通はサイト内のページにリンクすると思います。
Flash からのリンク先は検索エンジンが拾いません。
そこが Flash製 のメニューの大欠点で，注意するべき問題点です。

いくら Flash や Suzuka が使いたくても，このささきちサイトでメニューに Flash を使っていないのはそのためです。
「なるべく多くの人にSuzuka の可能性を知ってもらおう。」
そして，
「Suzuka を使っている多くの方が利用できる情報を書こう。」
と思って作成しているサイトであるにもかかわらず，Flash を多用すると，さっぱり誰からも見てもらえないサイトになってしまいます。

もし，Flash 製のメニューを使用して，検索エンジンからサイト内の各ページを見てもらいたい場合は，<a>リンクを各ページに張ったサイトマップのような HTMLページ を別に作成して，そのサイトマップのページにも TOP の HTML から <a>リンクを張るなど，色々な工夫が必須になります。

サイト内リンクのメニューボタンに Falsh を使用する場合や，オールFlash（フルFlash）サイトではこの点に注意してください。
自分自身のためだけの，個人の物置サーバスペースのようなサイトになってしまう可能性が十分ありますので。