ActionScript 3.0はじめの一歩

第1回 ムービークリップのコントロールとイベント処理

この記事を読むのに必要な時間:およそ 3.5 分

イベント処理

「イベント」とはスクリプトで定義された処理を実行するキッカケのことです。

また,⁠イベント処理」とは「あるオブジェクトがイベントの発生を検知したときに処理を実行する一連の流れ」のことです。例えば「ボタンをクリックしたらアニメーションが再生される」という動作を考えてみると,オブジェクト=ボタン,イベント=クリック,処理=アニメーションの再生,となります。

つまり,イベント処理の設定は「オブジェクト」「イベント」「処理」の関連付けと理解できます。

イベント処理の設定には次の書式を使います。

オブジェクト.addEventListener(イベント, 処理名);
function 処理名(変数){
	処理
}

オブジェクト・イベント・処理の関連付け自体はaddEventListener()というメソッドを使います。

addEventListener()メソッドはイベントと処理名を引数として指定します。処理名はfunctionという構文を使って定義したものを指定します。

functionの処理名の後の「()」には書式上変数を用意しておく必要があります。このあたりは当面書式と割り切って指定していきましょう。

では"star_mc"のrotationプロパティを変更したサンプル1のバリエーションで,ボタンをクリックしたらrotationプロパティを変更するようにしてみましょう。ボタンインスタンスのインスタンス名は"rotate_btn"とします。この場合次のスクリプトになります。

サンプル3

01:  rotate_btn.addEventListener("click", xClick);
02:  function xClick(evt) {
03:    star_mc.rotation = 5;
04:  }

図7 ボタンをクリックしたらムービークリップが回転

図7 ボタンをクリックしたらムービークリップが回転

サンプル3でクリックを"click"と指定したように,イベントは各イベントを表す特定の文字列で指定します。ですがActionScript 3.0では一般的に,イベントの指定には文字列を直接指定するのではなく,⁠イベント用の定数」を使って指定します。イベント用の定数にはイベントを表す文字列が割り当てられていて,処理的には文字列で指定したのと変わりません。

clickイベント用にはMouseEvent.CLICKという定数が用意されています。つまりサンプル3のスクリプトは次のように書き換えることができます。

サンプル4

01:  rotate_btn.addEventListener(MouseEvent.CLICK, xClick);
02:  function xClick(evt) {
03:    star_mc.rotation = 5;
04:  }

今度はサンプル2のUFOのアニメーションを,2つのボタンで停止・再生を切り替えられるようにしてみます。ボタンが2つになるので,イベント処理の設定も2つになります。

停止ボタンが"stop_btn",再生ボタンが"play_btn"とするとスクリプトは次のようになります。

サンプル5

01:  stop_btn.addEventListener(MouseEvent.CLICK, xStopClick);
02:  play_btn.addEventListener(MouseEvent.CLICK, xPlayClick);
03:  function xStopClick(evt) {
04:    ufo_mc.stop();
05:  }
06:  function xPlayClick(evt) {
07:    ufo_mc.play();
08:  }

図8 ボタンによるムービークリップのアニメーションの停止・再生

図8 ボタンによるムービークリップのアニメーションの停止・再生

複数のイベント処理を設定する場合,習慣的にaddEventListener()メソッドの設定とfunctionの定義はそれぞれをまとめて記述することが多いです。本連載でも複数のイベント処理を設定する場合,そのようにしていきます。

クリックのようなマウス関連のイベントは「マウスイベント」と呼ばれます。主なマウスイベントには次のものがあります。

表3 

イベント(文字列)定数説明
"click"MouseEvent.CLICKオブジェクトの領域内でマウスボタンを押して離す。
"mouseDown"MouseEvent.MOUSE_DOWNオブジェクトの領域内でマウスボタンを押す。
"mouseUp"MouseEvent.MOUSE_UPオブジェクトの領域内でマウスボタンを離す。
"mouseMove"MouseEvent.MOUSE_MOVEオブジェクトの領域内でマウスカーソルを動かす
"rollOver"MouseEvent.ROLL_OVERオブジェクトの領域内にマウスカーソルが入る。
"rollOut"MouseEvent.ROLL_OUTオブジェクトの領域内からマウスカーソルが出る。

仮にサンプル4のスクリプトのイベント指定をMouseEvent.ROLL_OVERに変更すると,ボタンの領域にマウスカーソルが入っただけで"star_mc"の回転角度が変わることになります。

著者プロフィール

林拓也(ハヤシタクヤ)

Flash・Director オーサリングエンジニア,アドビ認定インストラクター,ロクナナワークショップ講師。

各種Webコンテンツ制作や,少人数ハンズオントレーニングから大規模なセミナー講師など幅広く活躍中。各種学校のカリキュラム・教材制作をはじめ,ActionScriptに関する書籍も多数執筆。

URLhttp://67.org/ws/instructor/hayashi.html

著書

ActionScript 3.0の基本がわかる,充実の2日間
林 拓也のプログラミング未経験者向けActionScript 3.0入門講座

■概要

新刊「 速習Webデザイン ActionScript 3.0」をプレゼント!!

Flashの学校 ロクナナワークショップによる,プログラミング未経験の方や初心者の方を対象にしたActionScript 3.0の入門講座が,林 拓也氏を講師に迎え開催されます。

しばしば「難しい」と言われるActionScript 3.0ですが,重要ポイントを理解して正しく攻略すれば,グッと難易度を下げることができます。本講座では,シンプルなサンプルを使って基本事項から学習するため,プログラミング未経験者の方や初心者の方には最適の内容です。
プログラミングなんて絶対無理!っと思っている方,ぜひご参加ください。

■詳細情報
【日程】2008年10月21日(火)22日(水)
【時間】10:00開場 - 16:30閉場(1日4時間、2日間で8時間の講義です)
【場所】東京都渋谷区 「T's 東宝ビル 別館 ホール204」
【定員】30名
【料金】19,800円(2日間、消費税込み、書籍プレゼント)
【協力】アドビシステムズ 株式会社
【主催】株式会社ロクナナ・ロクナナワークショップ
     〒150-0001東京都渋谷区神宮前1-1-12 #203
     Summer Camp 2008 運営事務局
     担当:佐々木・上田
     E-mail:workshop@67.org