第1回 ボタンの作成 | デザインってオモシロイ -MdN Design Interactive-
イチから始めたい人、リトライしたい人のためのFlashのABC

Lesson4 ボタン制作

第1回 ボタンの作成


「ボタンシンボル」は、マウスのクリックやロールオーバーなどに反応するボタンを作ることができるシンボルだ。[アップ]、[オーバー]、[ダウン]の3つのフレームにそれぞれボタンの状態を描画し、[ヒット]フレームにボタンが反応する領域を設定する。タイムラインは実際には再生されずマウスの動作に反応して移動する。また、ボタンインスタンスにActionScriptを設定すると、さまざまなアクションも定義できる。まずは、基本的なボタンを作っていこう。

解説:北川貴清
※「FlashのABC」の本文中の解説で使用しているサンプルデータは、別ページでダウンロードができます。

ボタンの作成


基本的なボタンを作成しよう。[アップ]の状態を作成し、[オーバー]や[ダウン]の状態の色味を変えるとボタンらしくなる。


【サンプル1】基本的なボタン

1.[新規シンボル]を作成し、[新規シンボルの作成]ダイアログボックスで[名前:button]、[タイプ:ボタン]にしてシンボルを作成する【図1】。

【図1】新規シンボルの作成
【図1】新規シンボルの作成

2.ステージに「矩形ツール」で縦方向に線状のグレーのグラデーションがかかった角丸の四角形を描画する。次に、幅を少し狭め、高さが半分程度の四角形を描画し、先ほどの四角形と重ねて立体感のあるボタンのベースを作成する。その上に「テキストツール」で「button」と入力しよう【図2】。

【図2】[アップ]の状態を描画
【図2】[アップ]の状態を描画

3.[オーバー]フレームにキーフレームを作成する。[アップ]フレームのオブジェクトがそのままコピーされるので、ベースの[カラー]をオレンジに変更する【図3】。

【図3】ベースの[カラー]を変更
【図3】ベースの[カラー]を変更

4.[ダウン]フレームにキーフレームを作成する。[オーバー]フレームのオブジェクトがそのままコピーされるので、ベースの[カラー]のオレンジを少しトーンが明るくなるように変更する【図4】。

【図4】ベースの[カラー]のトーンを明るくする
【図4】ベースの[カラー]のトーンを明るくする

5.[ヒット]フレームにキーフレームを作成する。[ダウン]フレームのオブジェクトがそのままコピーされるので、このままでもよいが、ここでは反応する領域がわかりやすいように外枠の四角形だけ残して、あとは削除しておこう【図5】。

【図5】[ヒット]の領域を設定
【図5】[ヒット]の領域を設定

■Point!
[ヒット]フレームを指定しない場合、[ヒット]フレームより手前の、オブジェクトを配置しているフレームが[ヒット]フレームとして使用される。文字だけのボタンを作る場合などは、必ず[ヒット]フレームを作成してボタンが反応する領域を設定しよう。

6.[シーン1]に戻り、[ライブラリ]パネルからボタンシンボルをステージにドラッグする【図6】。[制御]→[ムービープレビュー]で確認しよう。

【図6】ボタンをステージに配置
【図6】ボタンをステージに配置

ボタンにアニメーションを設定


ボタンのフレームにムービークリップを配置すると、マウスに反応してアニメーションするボタンを作ることができる。【サンプル1】のボタンにアニメーションを設定しよう。


【サンプル2】マウスをロールオーバーしたときにボタンが光る

1.[新規シンボル]を作成し、[新規シンボルの作成]ダイアログボックスで[名前:glow_square]、[タイプ:ムービークリップ]としてシンボルを作成する【図7】。

【図7】新規シンボルの作成
【図7】新規シンボルの作成

2.ステージにボタンのベースの四角形をコピー&ペーストする。四角形を選択し、シンボルに変換する【図8】。[シンボルに変換]ダイアログボックスで[名前:square]、[タイプ:ムービークリップ]、[基準点:中央]に設定しよう。

【図8】四角形をシンボルに変換
【図8】四角形をシンボルに変換

3.[フレーム15]にフレームを挿入し、プロパティインスペクタで[トゥイーン:モーション]、[イージング:100]に設定する。[フレーム15]にキーフレームを挿入する。同様に、[フレーム30]にフレームを挿入し、プロパティインスペクタで[イージング:-100]に設定【図9】。[フレーム30]にキーフレームを挿入する。

【図9】モーショントゥイーンを設定
【図9】モーショントゥイーンを設定

4.[フレーム15]のインスタンスを選択。プロパティインスペクタの[フィルタ]タブをクリックし、[フィルタの追加](+)から[グロー]を選んでフィルタを適用する。カラーを設定し、ぼかしの強さを[ぼかし-水平・垂直:40]に設定する【図10】。

【図10】フィルタを設定
【図10】フィルタを設定

5.[ライブラリ]パネルから[button]の編集画面を開く。新規レイヤーを作成し、レイヤーを下に移動。[オーバー]フレームにキーフレームを挿入する。[ライブラリ]パネルから[glow_square]をドラッグして、ボタンの領域に重ねる。[ダウン]フレームに空白キーフレームを挿入して完成だ【図11】。[制御]→[ムービープレビュー]で確認しよう。

【図11】ムービークリップインスタンス[glow_square]がボタンの領域に重なるように配置
【図11】ムービークリップインスタンス[glow_square]がボタンの領域に重なるように配置

ボタンにサウンドを設定


アニメーションと同様、ボタンのフレームにサウンドを設定すると、マウスに反応して音がなるボタンを作成することができる。【サンプル1】のボタンにサウンドを設定しよう。


【サンプル3】マウスをロールオーバーしたときに音がなる

1.[ファイル]→[読み込み]→[ライブラリに読み込み]をクリックする。[ライブラリに読み込み]ダイアログボックスでサウンドを選択する【図12】。MP3やWAVやAIFF形式などのサウンドを読み込もう。

【図12】サウンドをライブラリに読み込む
【図12】サウンドをライブラリに読み込む

2.[ライブラリ]パネルから[button]の編集画面を開く。新規レイヤーを作成し、[オーバー]フレームにキーフレームを挿入する。次に、[オーバー]フレームを選択した状態で、プロパティインスペクタの[サウンド]から読み込んだサウンドを選択する【図13】。これで完成だ。[制御]→[ムービープレビュー]で確認しよう。

【図13】サウンドを[オーバー]フレームに設定
【図13】サウンドを[オーバー]フレームに設定

サンプルデータをダウンロードする
次回につづく


著者写真 [プロフィール]
きたがわ・たかきよ●1972年8月生まれ。三重県出身。三重大学工学部卒業。大阪を拠点としてwebデザインを中心に活動中。著書に『Flash8デザインスクール for Win & Mac 』『ネタ帳ビギナーズ FLASHテンプレート集 』
http://www.f-l-a-v-o-r.com
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

1.14-1.20