ActionScript 3.0はじめの一歩

第2回スクリプトによるアニメーション

技術評論社より好評発売中の「速習Webデザイン ActionScript 3.0」をテキストに、ActionScript 3.0の基本がわかる充実の2日間「林 拓也のプログラミング未経験者向けActionScript 3.0入門講座」を開催いたします。詳細はこちらでご確認ください。

今回はスクリプトによるアニメーションの設定方法について扱っていきます。

ご存知の通りFlashではタイムラインを使ってアニメーションを設定することができます。タイムラインによるアニメーションは、ビデオと同様に何回再生しても全く同じ内容になります。

ユーザーの操作やその他の要因で内容が変化するアニメーションを作成する場合には、スクリプトでアニメーションをコントロールします。

値の更新

前回「ボタンをクリックするとムービークリップが5度回転する」というサンプルを作成しました。

今回は「ボタンをクリックするとムービークリップが回転のアニメーションを開始する」というサンプルを作成していきます。

まず、最初のステップとして「ボタンをクリックする度にムービークリップが5度ずつ回転する」という、いわば手動アニメーションを作成してみます。

図1 サンプル1完成イメージ
図1 サンプル1完成イメージ

回転角度を5ずつ増やすには、現在のrotationプロパティの値を5増加して更新する、という処理を行います。これをスクリプトで表現すると次のようになります。インスタンス名は前回のサンプルと同じ"star_mc"とします。

スクリプト1
01: star_mc.rotation = star_mc.rotation + 5;

このように「=」を使った代入式の右辺が式の場合には、先に右辺を計算して求められた値を代入します。つまり、この処理が最初に実行されると右辺が先に計算されるので「0(rotationプロパティ⁠⁠ + 5」で5が求められ、新たなrotationプロパティの値として代入されます。次に実行される際には「5(rotationプロパティ + 5」の結果である10が代入されます。

このような現在の値を相対的に更新する処理というのはよく行われるため、専用の演算子が用意されています。

スクリプト1と同じ処理は次のように書き換えることができます[1]⁠。

スクリプト2
01: star_mc.rotation += 5;

この処理をボタンクリック時に実行すれば手動アニメーションの完成です。

サンプル1
01: rotate_btn.addEventListener(MouseEvent.CLICK, xClick);
02: function xClick(evt) {
03:   star_mc.rotation += 5;
04: }
演算子機能備考
+=加算後代入「値 += 変化量」「値 = 値 + 変化量」と同じ。
-=減算後代入「値 -= 変化量」「値 = 値 - 変化量」と同じ。
*=乗算後代入「値 *= 変化量」「値 = 値 * 変化量」と同じ。
/=除算後代入「値 /= 変化量」「値 = 値 / 変化量」と同じ。

enterFrameイベント

サンプル1で手動アニメーションを作成したことで、プロパティの更新処理を何度も実行すればアニメーションができることが確認できました。

次は、処理を自動的に繰り返し実行する仕組みを確認します。

結論としては、ボタンクリックの場合と同様にイベント処理を設定することになります。

イベントにはマウスイベントに代表されるようなユーザーの操作によって発生する「ユーザーイベント」の他、Flash Playerのシステム上発生する「システムイベント」があります。

システムイベントの例としては、外部ファイルをリクエストした際にダウンロードが完了したときに発生するイベントや、サウンド再生時に再生が終了したときに発生するイベントなどがあります。

今回使うイベントは、swfファイルのフレームレートの頻度で継続的に発生するenterFrameイベントです。つまり、フレームレートの設定が12fpsであれば、enterFrameイベントは1秒間に12回発生することになります。

enterFrameイベントを表す定数はEvent.ENTER_FRAMEで、ムービークリップに対して設定できます。

ムービークリップインスタンス"star_mc"が回転するアニメーションをスクリプトで設定すると次のようになります。

サンプル2
01: star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
02: function xEnterFrame(evt) {
03:   star_mc.rotation += 5;
04: }
図2 enterFrameイベントによる回転アニメーション
図2 enterFrameイベントによる回転アニメーション

ここまでくれは、⁠ボタンをクリックするとムービークリップが回転のアニメーションを開始する」という処理は目の前です。

アニメーションを再生する処理は、enterFrameイベントに処理を関連付けているサンプル2の1行目のスクリプトです。これをボタンのclickイベントの処理として関連付ければよいということになります。

サンプル3
01: //ボタンへのclickイベント処理設定
02: rotate_btn.addEventListener(MouseEvent.CLICK, xClick);
03: //ボタンのclickイベント用の処理
04: function xClick(evt) {
05:   //enterFrameイベント処理設定=アニメーション開始
06:   star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
07: }
08: //enterFrameイベント用の処理
09: function xEnterFrame(evt) {
10:   star_mc.rotation += 5;
11: }
図3 ボタンクリックにより開始するアニメーション
図3 ボタンクリックにより開始するアニメーション

スクリプトコード内の「//」は、その行をスクリプトの実行対象から除外する「コメント」として扱う記号です[2]⁠。ご自身でスクリプトを入力する際にはコメント行は省略しても構いません。

このスクリプトコードをいきなり見るとややこしいかもしれませんが、順を追って確認していけばそれほど難解なものではないと思います。

次は、アニメーションの停止について考えていきます。

イベント処理の削除

スクリプトによるアニメーションは、enterFrameイベントに処理を割り当てることで実現できました。

では、逆にアニメーションを停止するにはどうすればよいのでしょうか。

答えはenterFrameイベントに設定した処理を削除する、ということになります。

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

オブジェクト.removeEventListener(イベント, 設定した処理名);

これは形式上、addEventListener()メソッドによるイベント処理の設定の"addEventListener"の部分を"removeEventListener"に変更しただけと考えると分かりやすいでしょう。

次のサンプルでは、ボタンインスタンス"start_btn"をクリックすると回転のアニメーションが再生し、ボタンインスタンス"stop_btn"をクリックするとアニメーションが停止するようにします。

サンプル4
01: //ボタンへのclickイベント処理設定
02: start_btn.addEventListener(MouseEvent.CLICK, xStartClick);
03: stop_btn.addEventListener(MouseEvent.CLICK, xStopClick);
04: //Startボタンのclickイベント用の処理
05: function xStartClick(evt) {
06:   //enterFrameイベント処理設定=アニメーション開始
07:   star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
08: }
09: //Startボタンのclickイベント用の処理
10: function xStopClick(evt) {
11:   //enterFrameイベント処理削除=アニメーション停止
12:   star_mc.removeEventListener(Event.ENTER_FRAME, xEnterFrame);
13: }
14: //enterFrameイベント用の処理
15: function xEnterFrame(evt) {
16:   star_mc.rotation += 5;
17: }
図4 ボタンによるアニメーションの再生・停止
図4 ボタンによるアニメーションの再生・停止

enterFrameイベントに限らず、何らかのイベント処理が不要になった場合には削除するのがよいでしょう。

おすすめ記事

記事・ニュース一覧