《#3》 ボタンを作ろう（1）

Digicon Magazine読者のみなさんこんにちは、ななきちです。

さて、今回から2回にわたって、Flashを作るなら最初に覚えてみたい機能「ボタン」機能を勉強していきましょう。
ボタン機能を覚えることで、Flash内でのムービーコントロールや他サイトへのリンク等の機能をFlashムービーに付けることが出来ます。
今回は、マウスオーバーで画像が変わるボタンを制作していきます。

目次

• ボタンシンボルの作成
• ボタンのための画像制作
• ロールオーバーボタン制作
• ヒット領域について

今日のサンプル

まず最初に、今日の完成図を見てみましょう。

完成サンプル：btn01.swf

ボタンシンボルの作成

Flashで制作したオブジェクトを「シンボル」というグループに変換することで、様々な機能を盛り込むことができます。
今回はボタンシンボルを作成します。 サンプルファイルをダウンロードしてはじめましょう。
ボタンシンボル化することで、ボタン機能を盛り込むことができます。

まずはボタンシンボルを作成してみましょう。
メニューバーから［挿入-新規シンボル］を選択すると、［新規シンボルの作成］ダイアログボックスが開きます。［種類］プルダウンメニューから「ボタン」を選択し、OKをクリックします。

図1：［挿入-新規シンボル］

［新規シンボルの作成］ダイアログ

ステージ上部に「シーン1：シンボル1」と表示され、タイムラインが通常の数字表記ではなく、「アップ」「オーバー」「ダウン」「ヒット」の4種類になっていると思います。

ステージ、タイムライン

ボタンシンボルのタイムラインは、通常のタイムラインと違う表記になっています。

• 「アップ」は、ボタンの通常の状態の画像を配置するフレーム
• 「オーバー」は、マウスカーソルがボタンの上に置かれている状態（いわゆるマウスオーバーの状態）の画像を配置するフレーム
• 「ダウン」は、クリックしている状態の画像を配置するフレーム
• 「ヒット」は、アップからダウンまでに配置されている画像に関わらず、このフレームに配置した画像の大きさや位置で、ボタンの大きさを（ボタン領域）を決めることができる

となっています。それぞれのフレームに合わせた画像を配置することで、動きのあるボタンを制作することが可能です。

また、［ライブラリ］パネルを見ると、「シンボル1」というファイルが1つ、表示されています。これがボタンシンボルのアイコンです。Flashでは、作成したボタンやその他のシンボル、読み込んだ画像は、すべてライブラリに保存されるしくみになっています。
［ライブラリ］パネルはシンボルやビットマップ等を格納する倉庫の様なものです。

［ライブラリ］パネル。表示されていないときはメニューバーから［ウィンドウ―ライブラリ］をクリックで表示される

ボタンのための画像制作

では、実際にそれぞれのフレームに合わせたボタン画像を制作してみましょう。
Flash上で制作可能ですが、今回はIllustratorを利用して作ったボタンを、第2回で勉強した読み込み機能を使って読み込んでいきたいと思います。

Illustratorデータ3種類

「アップ」、「オーバー」でキノコのグラデーションの位置を変更し、マウスオーバーした時の変化を表します。
また「ダウン」でキノコの色を変更してみました。

また画像に影をつけることで、ボタン的な要素を盛り込むことも可能です。

ロールーバーボタンの制作

ボタンシンボルの画面になっている状態で、イラストレータのデータを「アップ」「オーバー」「ダウン」のフレームにそれぞれ読み込みます。

読み込み後のステージ、アップフレーム

1)シンボルの編集画面を開いた状態で［タイムライン］パネルの「アップ」を選択します。

2)メニューバーから［ファイル―読み込み―ステージに読み込み］を選択、「kinoko_btn1.ai」を［読み込み］をクリックします。
これでステージにイラストが配置されたと思います。「アップ」のフレームを見ると、○が●に変わっているでしょう。○はステージになにもない、●は、ステージにオブジェクトが配置されているという印です。

読み込み後のステージ、オーバーフレーム

3)「オーバー」フレームに移動したいのですが、そのままだとフレームが選択できませんので「キーフレームを作成」という作業をします。「オーバー」のフレームを右クリックして［キーフレームを作成］をクリックします。
キーフレームが作成され、○マークもつきました。キーフレームとは、オブジェクトを配置できるフレームです。

4)続いて、メニューバーから［ファイル―読み込み―ステージに読み込み］を選択、「kinoko_btn2.ai」を［読み込み］ます。

読み込み後のステージ、ダウンフレーム

5)同様に、「ダウン」のフレームを右クリックして［キーフレームを作成］をクリック。メニューバーから［ファイル―読み込み―ステージに読み込み］を選択、「kinoko_btn3.ai」を［読み込み］ます。
以上で３つのフレームにボタンが配置されたはずです。

「シーン1」にもどります。ステージの上にある「シーン1」のリンクをクリックします。

[ライブラリ］パネル内に格納されているボタンシンボルをドラック＆ドロップして、ステージに配置します。

［ライブラリ］パネルからステージにボタンを配置

swfを書き出すことで、確認することも出来ますが、メニューバーから［制御-シンプルボタンを有効にする］を選択することで、ステージ上でもボタンの動きを確認できます。

メニューバーから［制御-シンプルボタンを有効にする］、ステージ上での確認

内容を確認したい場合は、ここまで完成した状態がサンプルファイルの「btn01.fla」がダウンロードファイルに用意されています。

ヒット領域について

制作したボタンで、「アップ」「オーバー」「ダウン」に画像を入れましたが、「ヒット」には今回画像を入れていません。

これはFlashが、「ヒット」に一番近いフレーム（今回の場合は「ダウン」）の画像がボタン領域とされるので、「アップ」「オーバー」「ダウン」に配置したオブジェクトのサイズが変わらないものであれば、特に「ヒット」に画像を配置しなくても大丈夫です。

たとえば以下のサンプルのように、文字部分をマウスオーバー、クリックすることで、キノコの色を変化させたい場合に、「ヒット」領域を設定します。

サンプル「btn02.swf」（この元データは「btn02.fla」です）。カーソルを文字の上へ置いてみよう。

「ヒット」領域を設定したことで、キノコ部分にマウスが触れても変化しませんが、文字部分にマウスが触れると、キノコが変化することが確認できると思います。
これは「アップ」「オーバー」「ダウン」にはキノコの画像を「ヒット」には、テキスト部分へのヒット領域の設定を行っているからです。

ヒット領域を設定したシンボル画面。サンプルデータで確認したい場合は、「btn02.fla」を開き、ライブラリでシンボルをダブルクリック。シンボルの中を表示したら、タイムラインパネルで「ヒット」をクリックします。

次回は、このボタンを使った他サイトへのリンクボタンや、前回制作したパラパラ写真アニメーションのコントロールボタン等を作っていきたいと思います。
ではまた次回！

Comments

[投稿： miwako]

今までの全講座を受講しました。学校では当時CS４対応の授業はやっていなかったので、とてもわかりやすくて助かっています。
ひとつ質問したいのですが、この#3「ボタンをつくろう」で、アップ、オーバー、ダウンのそれぞれにキーフレームを挿入し、読み込み―ステージに読み込み（シーケンスは「いいえ」を選択）すると、タイムラインの左のレイヤー部分が３行になって重なり、はなきち先生の解説と見本の画面どおりに行きません。一度ライブラリーに読み込んでからそれぞれのフレームでステージに落とすとなんとかできるのですが、なぜか、直接ステージに読み込むことができないのです。やり方がどこか間違っているのでしょうか？それとも同じCS４でも微妙に何かが違うのでしょうか？ご指導いただけるとうれしいです。よろしくお願いします。