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

Lesson4 ボタン制作

第2回 バナーの作成


前回はさまざまなボタンの作り方を紹介した。それでは、実際にボタンをクリックしたときに何かアクションをおこす場合はどうすればよいのだろうか? そこで登場するのが、ActionScriptだ。ボタンインスタンスに「インスタンス名」と呼ばれる名前をつけ、キーフレームにボタンをターゲットとしたActionScriptを記述すると、ボタンをクリックしたときのアクションを設定することができる。簡単なActionScriptを使ってできるボタンの例として、クリックするとURLにジャンプするバナーを紹介しよう。

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

バナーの作成


468×60pxのフルバナーを作っていこう。まずはアニメーションを作成し、その後、ボタンとActionScriptを設定する。


【サンプル1】468×60pxのフルバナー。クリックすると目的のURLにジャンプする

アニメーションの設定
バナーのアニメーションを設定していこう。ここの手順はLesson3で学習したアニメーションの作成と同じ要領だ。「CLICK HERE」をボタンシンボルにしないところに注意しよう。

1.プロパティインスペクタの[サイズ]ボタンをクリックして、[ドキュメントプロパティ]ダイアログボックスを開く。[幅:468px]、[高さ:60px]に設定する【図1】。

【図1】ドキュメントサイズを設定
【図1】ドキュメントサイズを設定

2.PNG形式などで背景の画像を用意しよう。[ファイル]→[読み込み]→[ステージに読み込み]でステージ上にビットマップを読み込む。[フレーム160]にフレームを挿入する。レイヤー名は「image」としておこう【図2】。

【図2】背景画像を読み込み、[フレーム160]にフレームを挿入
【図2】背景画像を読み込み、[フレーム160]にフレームを挿入

3.新規レイヤー「title」を作成し、画像の上に「テキストツール」でタイトル文字を入力する。カラーやサイズやフォントはプロパティインスペクタで設定する。次に、文字を選択し、シンボルに変換する【図3】。[シンボルに変換]ダイアログボックスで[名前:title]、[タイプ:ムービークリップ]、[基準点:中央]に設定しよう。

【図3】テキストをシンボルに変換
【図3】テキストをシンボルに変換

4.「title」レイヤーの[フレーム40]を選択し、プロパティインスペクタで[トゥイーン:モーション]に設定する。[フレーム40]にキーフレームを挿入する。次に[フレーム1]のインスタンスを選択し、プロパティインスペクタの[フィルタ]タブをクリック。[フィルタの追加](+) から[ぼかし]を選んでフィルタを適用する。カラーを設定し、ぼかしの強さを[ぼかし-水平:50・垂直:0]に設定する【図4】。

【図4】ぼかした文字の焦点がじょじょにあっていくモーショントゥイーンを設定
【図4】ぼかした文字の焦点がじょじょにあっていくモーショントゥイーンを設定

5.新規レイヤー「click」を作成し、[フレーム50]にキーフレームを挿入する。画像の上に「テキストツール」で「CLICK HERE」と入力する。テキストの左に「多角形ツール」で三角形を描画。これらを選択し、シンボルに変換する【図5】。[シンボルに変換]ダイアログボックスで[名前:click]、[タイプ:ムービークリップ]、[基準点:中央]に設定しよう。

【図5】オブジェクトをシンボルに変換
【図5】オブジェクトをシンボルに変換

6.ムービークリップインスタンス[click]をダブルクリックして、シンボルの編集画面を開く。[フレーム11]に空白キーフレーム、[フレーム20]にフレームを挿入して点滅のアニメーションを作る【図6】。これでアニメーションの設定が完了だ。[シーン1]に戻って、[制御]→[再生]で確認してみよう【図7】。

【図6】点滅のフレームアニメーションを作成
【図6】点滅のフレームアニメーションを作成


【図7】バナーのアニメーション

ボタンの設定
[ヒット]フレームだけにオブジェクトを配置すると透明のボタンを作ることができる。これを使ってバナー全体をボタンに設定しよう。ボタンインスタンスにインスタンス名をつけ、キーフレームにActionScriptを記述して、ボタンをクリックしたときのアクションを設定しよう。

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

【図8】新規シンボルを作成
【図8】新規シンボルを作成

2.[ヒット]フレームにキーフレームを作成する。「矩形ツール」で左上を基準とした100×100pxの塗りの四角形を描く【図9】。

【図9】[ヒット]フレームにだけ四角形を描画
【図9】[ヒット]フレームにだけ四角形を描画

3.[シーン1]に戻って、新規レイヤー「btn」を作成する。[ライブラリ]パネルからステージに[click_btn]をドラッグする。プロパティインスペクタでサイズを468×60pxに変更して、座標を(0,0)としよう。さらに[インスタンス名:click_btn]と入力する【図10】。

【図10】プロパティインスペクタでボタンのサイズとインスタンス名を設定
【図10】プロパティインスペクタでボタンのサイズとインスタンス名を設定

■Point!
透明ボタンのサイズを100×100pxにしておくと、同じ形式でサイズの違うボタンを何個も作るときなどに活用しやすい。

4.新規レイヤー「action」を作成し、[フレーム1]を選択する。[ウィンドウ]→[アクション]で[アクション]パネルを開き、【図11】のように記述する。これで完成だ。[制御]→[ムービープレビュー]で確認しよう。

click_btn.onRelease = function() {
_root.getURL("http://www.mdn.co.jp/");
};

【図11】ActionScript
【図11】上記のActionScriptはボタン[click_btn]をクリックしたときに、「http://www.mdn.co.jp/」というURLにページをジャンプしなさいという意味。別のページにジャンプさせるにはこのURLを変更するだけでよい。「onRelease」はイベントハンドラメソッド、「_root」はターゲットパス、「getURL」はメソッドと呼ばれるものだ。ActionScriptについて、詳しくはLesson5で解説するので、ここでは呪文のようなものと覚えておこう。

サンプルをダウンロードする



次回につづく
――「FlashのABC」Lesson4は今回で終了です。
Lesson5は8月2日(木)からの掲載予定となります。ご期待ください!


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

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

この連載のすべての記事

アクセスランキング

6.17-6.23

MdN BOOKS|デザインの本

Pick upコンテンツ

現在