「FLash CS4」体験版ダウンロードはこちらから
「Adobe CS4」購入はこちらから

今回はFlashの3つのシンボルのうち、「ボタン」を使ってみよう。Flashのインタラクティブ要素を使いこなすためにはボタンは必須となる。今回作成するflaファイルは、こちらからダウンロードしてほしい。

ボタンの作成

まず、上の画像のようなクリックすると、HOMEページを開くボタンを作成する。上記ダウンロード素材のbtn1.zip内にあるHOME_btn.swfをブラウザにドラッグすると、実際の動作を確認できる。

1.テキストツールで「HOME」と打つ。このとき、ボタンの中のテキストは常に静止テキストかダイナミックテキストのどちらかにする。

2.「HOME」をシンボルに変換する。そのときのタイプはグラフィック、シンボル名は「HOME_g」だ。

3.さらに、ステージにある「HOME」(※上で作成したグラフィックシンボル)を選択し、[修正]→[シンボルに変換]する。その時は、タイプをボタン、シンボル名は「HOME_btn」としておく。

これでボタン自体の作成は終了。[制御]→[ムービープレビュー]を実行する(下図左)。「HOME」にカーソルが近づくと指アイコンに変化するのがわかるだろう(下図右)。

アクションスクリプトパネル

次は、ボタンをクリックしたらHOMEページにジャンプするようにするプログラム(スクリプト)を書く。Flashには、ActionScript(以下、AS)というプログラム言語があり、それを使うと、ボタンの動きを制御できる。Flashではスクリプトをタイムライン上のキーフレームに書くが、ここではワンステップづつ紹介していこう。

タイムラインを見ると、レイヤーが1つしかなく、そこには黒丸がある。黒丸は、そのフレームに何かオブジェクトがあることを示すが、ASがある場合は、下の画像のように「a」と表示される。

オブジェクトと赤字が混在するように同じフレームにスクリプトを書くこともできるが、一般的にスクリプトのあるフレームにオブジェクトは置かない。通常は、スクリプトのためにレイヤーをひとつ追加して、AS専用レイヤーとして使用する。そこで、名前もASなどとしておくとわかりやすいだろう。名前の変更はレイヤーを右クリックして[プロパティ]でレイヤープロパティダイアログから変更できる。またレイヤー名をダブルクリックしても変更可能だ。

次に[ウィンドウ]→[アクション]でアクションパネルを開く(下図左)。この操作はショートカットのF9キーなので、覚えておくと便利だ。アクションパネルを開くと、下図右のようなパネルが出てくるはずだ。

もし、下の画像のようになっていたら、スクリプトアシスタンスモードになっている。この連載では使用しないモードなので、「スクリプトアシスト」ボタンをクリックして、これを解除し直接入力できるようにしておこう。

ASを編集するためのアクションパネルは大きく分けて、3つのパートに分かれている。左上にあるのが、リファレンス。左下ではドキュメント内でスクリプトの記述されているリストと現在選択している場所を示す。フレームを選択したら、このパネルの右側にASプログラムを書いていく。

アクションパネルとインスタンス名

タイムラインを見てASレイヤーの1フレーム目を選択しよう。アクションパネルには次のように書こう。

home_btn.addEventListener(MouseEvent.CLICK,onHomeClick);
function onHomeClick(e:MouseEvent):void {
var url:String="http://togoru.net/";
var urlrequest:URLRequest = new URLRequest(url)
navigateToURL(urlrequest);
}

ASで、1箇所だけ見てほしいところがある。1行目のhome_btnというところだ。ASを記述するとき、とくにボタンに機能を割り当てたりするときには、「このボタンにはこういう機能を~」とASを使ってFlashに命令しなくてはいけない。そのため、そのFlashドキュメントの中だけで通じる名前をボタンにつけて、それをASで命令するときに使用する。その名前をインスタンス名と呼ぶ。インスタンス名は、ASとFlashのステージにあるボタンなどのオブジェクトを関連づけるために必要なのだ。

このASでは「HOME」ボタンのインスタンス名を「home_btn」としている。そのインスタンス名は、プロパティパネルでボタンに設定することができる。ボタンを選択した状態で、プロパティパネルを開いて、インスタンス名を設定しよう。「home_btn」と記入したら、保存しておく。

スクリプトを書くときの3つの注意点

●半角英数が基本
●「.」(ドット)、「,」(カンマ)、「:」(コロン)、「;」(セミコロン)、「 」(半角スペース)の違いに注意する
●大文字、小文字の違いに注意する

ASは、基本的に半角英数で大文字、小文字を区別するので注意して欲しい。違いを見分けるには、画面の文字の色を見ると良いだろう。見本画像と同じような色分けになっていなければ、どこかで打ち間違いをしている可能性がある。見本では、黒、紺、緑に分かれている。色は入力するとリアルタイムで変化し、Flashが命令と認識すると紺色になる。「""」で、挟まれた領域は緑色になる。

ちなみに、図では、左側に数字が表示されている。これは、行番号といって、何行目かわかりやすく非常に便利だが、オプションで設定しなければならない。オプションは、アクションパネルの右上のボタンをクリックして開き「行番号」を選択することで有効にできる(下図)。そのほかにも、全角と半角スペースの違いなどは「隠し文字」を有効にすると、わかりやすくなる。

今回は実際にスクリプトを正確に書き写すことにポイントを置いて解説した。スクリプトを正確に書き写したら、ムービープレビューして動作を確認しよう。HOME」ボタンをクリックして、「ブラウザでtogoru.netを開くことができれば成功だ。

次回は、スクリプトのエラーを取り除くコツから、さらにボタンを作りこむ方法を紹介しようと思う。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。オーサリングエンジニアとしてFlashとMovable Typeでの制作を中心に活動。ロクナナワーク ショップ講師、アックゼロヨン審査員、ライターとしてFlash関連書籍や雑誌記事の執筆を行うなど、幅広く活動している。また、写真家としての顔も持つ。フォトブログ「Snap || Nothing」はこちら。