技術評論社より好評発売中の
今回はスクリプトによるアニメーションの設定方法について扱っていきます。
ご存知の通りFlashではタイムラインを使ってアニメーションを設定することができます。タイムラインによるアニメーションは、
ユーザーの操作やその他の要因で内容が変化するアニメーションを作成する場合には、
値の更新
前回は
今回は
まず、
![図1 サンプル1完成イメージ 図1 サンプル1完成イメージ](/assets/images/design/serial/01/as3-first/0002/thumb/TH800_001.png)
回転角度を5ずつ増やすには、
01: star_mc.rotation = star_mc.rotation + 5;
このように
このような現在の値を相対的に更新する処理というのはよく行われるため、
スクリプト1と同じ処理は次のように書き換えることができます
01: star_mc.rotation += 5;
この処理をボタンクリック時に実行すれば手動アニメーションの完成です。
01: rotate_btn.addEventListener(MouseEvent.CLICK, xClick);
02: function xClick(evt) {
03: star_mc.rotation += 5;
04: }
演算子 | 機能 | 備考 |
---|---|---|
+= | 加算後代入 | 「値 += 変化量」 |
-= | 減算後代入 | 「値 -= 変化量」 |
*= | 乗算後代入 | 「値 *= 変化量」 |
/= | 除算後代入 | 「値 /= 変化量」 |
enterFrameイベント
サンプル1で手動アニメーションを作成したことで、
次は、
結論としては、
イベントにはマウスイベントに代表されるようなユーザーの操作によって発生する
システムイベントの例としては、
今回使うイベントは、
enterFrameイベントを表す定数はEvent.
ムービークリップインスタンス"star_
01: star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
02: function xEnterFrame(evt) {
03: star_mc.rotation += 5;
04: }
![図2 enterFrameイベントによる回転アニメーション 図2 enterFrameイベントによる回転アニメーション](/assets/images/design/serial/01/as3-first/0002/thumb/TH800_002.png)
ここまでくれは、
アニメーションを再生する処理は、
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 ボタンクリックにより開始するアニメーション](/assets/images/design/serial/01/as3-first/0002/thumb/TH800_003.png)
スクリプトコード内の
このスクリプトコードをいきなり見るとややこしいかもしれませんが、
次は、
イベント処理の削除
スクリプトによるアニメーションは、
では、
答えはenterFrameイベントに設定した処理を削除する、
イベント処理の削除には次の書式を使います。
オブジェクト.removeEventListener(イベント, 設定した処理名);
これは形式上、
次のサンプルでは、
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 ボタンによるアニメーションの再生・停止](/assets/images/design/serial/01/as3-first/0002/thumb/TH800_004.png)
enterFrameイベントに限らず、