Flashでは「ボタン」は少し特殊なシンボルとなります。このボタンの仕組みをうまく利用すると，簡単にユーザー定義のボタンを作成することができます。また，ちょっと変わった表現に利用することもできます。今回は，このボタンの仕組みをご紹介します。

ボタンの仕組みを使ったナビゲーション

　前回はユーザーがボタンを押すと，タイムラインを一つずつ進め，話の進行するムービーを作成しました。今回も基本的には同じようにボタンを押すと話の進行するムービーなのですが，ボタンを使ってちょっとしたポップアップを追加してみました。

図1：ボタンを使ったムービー

　図1のムービーでは「進む」ムービーの上にマウスポインタを移動させると，ボタンの形状が少し変化します。さらに，乗客の上にマウスポインタを移動させると，その乗客の考えている事がポップアップで表示されますね。これらの表現は，すべてボタンシンボルの持つ基本的な機能のみを利用して作成されています。

ボタンシンボルの仕組み

　ボタンシンボルは，普通のムービークリップとは違い，あらかじめ，[アップ]，[オーバー]，[ダウン]，[ヒット]という四つのフレームを持つタイムラインを持っています（表1）。四つのフレームはそれぞれユーザーの操作に対応した絵を表示したい場合等に使用します。

表1：ボタンの四つのフレーム
フレーム説明
アップマウスポインタがボタン上に置かれていない状態のときの絵を描きます。つまり，通常表示させておきたい絵を描きます
オーバーマウスポインタがボタン上にある状態のときの絵を描きます
ダウンボタンをクリックした状態のときの絵を描きます。ボタン上でマウスボタンを押しているときだけ表示されます
ヒットボタンとして認識する範囲である「ヒット領域」を描きます

　では，実際にボタンを一つ作成してみましょう。新規Flashドキュメントを作成し，適当なフォルダに保存します。ステージ上に[テキストツール]を使って「START」と文字を書きます＊1（図2）。[選択ツール]で文字を選択したら，[F8]キーを押して[シンボルに変換]パネルを表示します。[名前]欄にわかりやすい名前を入力し，[タイプ]欄の「ボタン」をチェックして[OK]ボタンを押します。これでボタンシンボルの完成です。

図2：ボタンシンボルを作成する

　[ライブラリ]パネルを表示＊2してみると，作成したボタン・シンボルが登録されていることが確認できますね（図3）。そのまま[ライブラリ]パネルから作成したボタン・シンボルをダブルクリックしてシンボル内の編集を行います。

図3： ライブラリパネルに登録されたボタン

　タイムラインを見てみると，先ほどご紹介した四つのフレームが表示されています。最初は[アップ]のフレームのみに絵が描かれている状態です。[オーバー]，[ダウン]のフレームにもキーフレームを作成し，それぞれマウスポインタが乗ったときの絵と，クリックされたときの絵を追加してみましょう（図4）。

図4： ボタンの絵を描く

　Flash Professional 8であれば，フィルタ機能を使えば簡単にそれらしい文字装飾が行えます。[オーバー]フレームでは文字に「グロウ」フィルタをかけ，[ダウン]フレームではグロウをかけたまま文字の色を変更してみました＊3。

　これで一通り完成です。ムービープレビューで結果を確認してみましょう。すると，マウスの動きにあわせてボタンの絵の形状が変化することが確認できます（図5）。

図5：完成したボタンの動き

[ヒット]フレームを活用しよう

　さて，これでボタンを作成できたわけですが，一つ使っていないフレームがありますね。そう，[ヒット]フレームです。このフレームはボタンの「ヒット領域」を描くことができます。例えば先ほど作成したボタンでは，「START」という文字の上にマウスポインタをもっていくと，ボタンの表示が変化しました。この「変化する範囲」が「ヒット領域」です。

　ヒット領域は通常はボタンの絵の範囲なのですが，[ヒット]フレームに絵を描くことにより，その絵の領域をヒット領域として扱うことができるようになります（図6）。また，ヒット領域は画面上には表示されません。

図6：ヒット領域の設定

　先ほど作成したボタンの[ヒット]フレームに，図6の位置に長方形を書いたムービーが図7のものです。このムービーでは，「START」と描かれている部分にマウスポインタを近づけてもボタンの形状に何も変化はおきません。しかし，ムービー右下に描いたヒット領域にマウスポインタを近づけると，ボタンの絵が[オーバー]フレームの絵に変化します。さらにその位置をクリックするとボタンの絵が[ヒット]フレームの絵に変化しますね。

図7：ヒット領域を変更したムービー

　このようにボタンシンボルでは，ヒット領域を自由に割り当てることができます。本来のボタンのヒット領域を広げてユーザーが押しやすいボタンにしたり，図8のように説明用のポップアップを表示させたりといった用途に利用できますね＊4。

図8：ポップアップサンプル

　いかがでしたでしょうか。今回は，ActionScriptを使ったムービーを作成する際に便利な「ボタン」シンボルの仕組み，主に外観に関するしくみについて詳しくご紹介しました。次回はさらに，ボタンシンボルを使ってボタンを押したときの処理，ボタンが離れたときの処理などの「イベント」についてご紹介します。お楽しみに。

＊1 このとき，テキストの種類は「静止テキスト」にしておきます。テキストの種類はテキストを選択し，[プロパティインスペクタ]を表示し，一番左側の[テキストの種類]ドロップダウンリストボックスで確認できます。

＊2 [ライブラリ]パネルを表示するには，[ctrl]+｢L｣を押すか，メニューより[ウィンドウ]-[ライブラリ]を選択します。

＊3 Flash Basic 8ではフィルタ機能は使用できません。残念。文字を[修正]-[分解]して塗りに変換し，[修正]-[シェイプ]-[ソフトエッジ]でグロウのような効果をかける方法等の代替策をとってみましょう。

＊4 図8ではボタンの[アップ]にはなにも描いていません。[ヒット]に円グラフの各項目の塗りをコピーし，[オーバー]，[ダウン]部分には説明用テキストを配置しています。こうすることでグラフの項目の上にマウスがあるときだけテキストが表示されるボタンとなります。