「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」はこちら。