隠居、メニューをFlashボタンに変えてみる

　エントリーした日が表示される Flash の横長カレンダーや表示する地方を指定できる Flash 天気予報は、Kinarie&May さんの作品を使わせてもらっている。

　このサイトのメニューボタンが、なかなか洒落ている。自分でカストマイズできるように、Flashメニュー素材も公開されている。変化するメニューボタンを作りたかったので導入させてもらおうと思ったが、今気に入っている動きのあるタイトルを変えなければならないので諦めた。

　もう一度、Flash8 を学習しなおすうちに、先日作った「音の鳴る動きのあるリンク・ボタン」を作ったときの方法を応用すれば、少し似通ったものができるのではないかと気がついた。どうにか形になったので、例によって自分の記録用にかきとめておきたい。
　

Flash8 を立ち上げ、新規→フラッシュドキュメントを選択する。
「修正」→「ドキュメント」で、メニューボタンを設置する場所の大きさに合わせて、ステージの大きさ・背景色を決める。今回は、1000px X 40px の大きさで、カラーピッカーでスポイドしたブログ・タイトルの背景色（#784028）にした。
「挿入」→「新規シンボル」でボタンを選択して、title_homeとボタン名を付ける。（名前はなんでもよい。）
ボタン作成画面の再生ヘッドがアップにある状態で、ツールパネルの矩形ツールでステージ内に長方形を描く。
レイヤー１のアップフレームをクリックし、ステージ上の長方形をクリックすると、プロパティ・インスペクターがシェイプに変わって、長方形を編集することができる。今回は、130 x 25px の長方形を描いた。
アップ時のボタンの色（塗りのカラー）は、プロパティ・インスペクターにあるバケツの横の四角をクリックすると出てくるスポイドで、画面上の好きな色をクリックすると変えることができる。また、出てくる色パネルから選択したり、６桁の色番号を指定したリストことができる。色番号を指定する場合には、WebColorCreator というカラーピッカーを利用すると便利である。
ボタンの枠線は、境界線を明瞭にするために、細い実線とした。
テキストは、ツールパネルから、テキスト[A]アイコンをクリックし、プロパティ・インスペクターで、フォント・大きさ・色などを指定し、ステージ上で入力し、ボタン上にドラッグする。今回は、フォントは Verdana 12pt Bold 白を選んだ。
次に、ボタンのオーバーフレームを右クリックして、「キーフレームを挿入」をえらぶと、アップ・フレームと同じボタンが表示される。
アップ・フレームと変化をつけるため、塗り色は、プロパティ・インスペクターのバケツアイコンをクリックしてでるカラーピッカーで水色を選んだ。
次に、ダウン・フレームで「キーフレームを挿入」をえらぶとオーバーフレームのボタンがコピーされる。
ヒット・フレームにも「キーフレームを挿入」をえらんでおく。このフレームは表示されないから、そのままでも問題はないようだ。
「タイムライン」横の「シーン１」をクリックし、ステージに先ほど作成したボタンをライブラリーからドラッグする。このとき、「表示」→「表示比率」→「ウインドウに合わせる」に設定しておくと全体像がつかめる。
ステージにあるボタンをクリックするとプロパティ・インスペクターのプロパティがボタンに変化するのを確かめて、インスペクターの左下の位置決めを、今回の場合、w 130 H 25 X 0.0 Y 15 .0 とした。
次に、ボタンをクリックしたときに、リンク先につながるようにするには、簡単な Action Script を使う。「アクション」パネルを開き、「ムービークリップ制御」「ブラウザ/ネットワーク」から、下のようなスクリプトを作る。
on (release) {
getURL("http://n-shuhei.net/blog/);
}
ここまで作成した Flash ボタンの動きは、「ファイル」→「バブリッシュ・プレビュー」→「Flash」で確認するのがよいようだ。 [F12]キーを押してHTMLでの確認はうまくいかなかった。
この時点での画面は、左の screenshot のようになる。
ここまでうまくいけば、あとは同様の作業の繰り返しとなる。まず、右のライブラリーの title_home のボタンを右クリックして、「複製」を選択すると、ポップアップ画面がでるので、新たなボタン名を、例えば、title_radio のようにつける。
このライブラリーのtitle_radio ボタンをダブルクリックすると、 title_home のボタンの複製ボタンがでてくるので、アップ・オーバー・ダウン　フレームのそれぞれのテキスト部分を RadioSenboku　のように変える。
シーン１上に、このボタンをライブラリーからドラッグして、設置する。このときの位置表示は、w 130 H 25 X 130.0 Y 15 .0 とすればよい。
ステージ上でこのボタンを選択して、アクションパネルから、新しいリンク先URLを含むスクリプトを入力する。これで、メニューボタンの２つめができる。
ほかのボタンの設置は、17～20 の繰り返しである。
このようにしてできたファイルを「書き出し」→「ムービーの書き出し」で swf ファイルで保存し、FTPソフトでサーバーにアップロードする。あとは、Web Title 部分に設置するだけである。
なお、ボタンのオーバーフレームのときに音を出すようにするのは、「音の鳴る動きのあるリンク・ボタン」のエントリーでの９.項を参照にして設定する。

　このエントリーは前に書いたエントリーが基礎になっている。記録することによって、知識はアンプリファイ（増幅）することを身にしみて感じている。

隠居、メニューをFlashボタンに変えてみる

タグ:

コメントする