技術評論社より好評発売中の「速習Webデザイン ActionScript 3.0」をテキストに、ActionScript 3.0の基本がわかる充実の2日間「林 拓也のプログラミング未経験者向けActionScript 3.0入門講座」を開催いたします。詳細はこちらでご確認ください。
今回はスクリプトによるアニメーションの設定方法について扱っていきます。
ご存知の通りFlashではタイムラインを使ってアニメーションを設定することができます。タイムラインによるアニメーションは、ビデオと同様に何回再生しても全く同じ内容になります。
ユーザーの操作やその他の要因で内容が変化するアニメーションを作成する場合には、スクリプトでアニメーションをコントロールします。
値の更新
前回は「ボタンをクリックするとムービークリップが5度回転する」というサンプルを作成しました。
今回は「ボタンをクリックするとムービークリップが回転のアニメーションを開始する」というサンプルを作成していきます。
まず、最初のステップとして「ボタンをクリックする度にムービークリップが5度ずつ回転する」という、いわば手動アニメーションを作成してみます。
回転角度を5ずつ増やすには、現在のrotationプロパティの値を5増加して更新する、という処理を行います。これをスクリプトで表現すると次のようになります。インスタンス名は前回のサンプルと同じ"star_mc"とします。
このように「=」を使った代入式の右辺が式の場合には、先に右辺を計算して求められた値を代入します。つまり、この処理が最初に実行されると右辺が先に計算されるので「0(rotationプロパティ) + 5」で5が求められ、新たなrotationプロパティの値として代入されます。次に実行される際には「5(rotationプロパティ + 5」の結果である10が代入されます。
このような現在の値を相対的に更新する処理というのはよく行われるため、専用の演算子が用意されています。
スクリプト1と同じ処理は次のように書き換えることができます[1]。
この処理をボタンクリック時に実行すれば手動アニメーションの完成です。
演算子 | 機能 | 備考 |
+= | 加算後代入 | 「値 += 変化量」は「値 = 値 + 変化量」と同じ。 |
-= | 減算後代入 | 「値 -= 変化量」は「値 = 値 - 変化量」と同じ。 |
*= | 乗算後代入 | 「値 *= 変化量」は「値 = 値 * 変化量」と同じ。 |
/= | 除算後代入 | 「値 /= 変化量」は「値 = 値 / 変化量」と同じ。 |
enterFrameイベント
サンプル1で手動アニメーションを作成したことで、プロパティの更新処理を何度も実行すればアニメーションができることが確認できました。
次は、処理を自動的に繰り返し実行する仕組みを確認します。
結論としては、ボタンクリックの場合と同様にイベント処理を設定することになります。
イベントにはマウスイベントに代表されるようなユーザーの操作によって発生する「ユーザーイベント」の他、Flash Playerのシステム上発生する「システムイベント」があります。
システムイベントの例としては、外部ファイルをリクエストした際にダウンロードが完了したときに発生するイベントや、サウンド再生時に再生が終了したときに発生するイベントなどがあります。
今回使うイベントは、swfファイルのフレームレートの頻度で継続的に発生するenterFrameイベントです。つまり、フレームレートの設定が12fpsであれば、enterFrameイベントは1秒間に12回発生することになります。
enterFrameイベントを表す定数はEvent.ENTER_FRAMEで、ムービークリップに対して設定できます。
ムービークリップインスタンス"star_mc"が回転するアニメーションをスクリプトで設定すると次のようになります。
ここまでくれは、「ボタンをクリックするとムービークリップが回転のアニメーションを開始する」という処理は目の前です。
アニメーションを再生する処理は、enterFrameイベントに処理を関連付けているサンプル2の1行目のスクリプトです。これをボタンのclickイベントの処理として関連付ければよいということになります。
スクリプトコード内の「//」は、その行をスクリプトの実行対象から除外する「コメント」として扱う記号です[2]。ご自身でスクリプトを入力する際にはコメント行は省略しても構いません。
このスクリプトコードをいきなり見るとややこしいかもしれませんが、順を追って確認していけばそれほど難解なものではないと思います。
次は、アニメーションの停止について考えていきます。
イベント処理の削除
スクリプトによるアニメーションは、enterFrameイベントに処理を割り当てることで実現できました。
では、逆にアニメーションを停止するにはどうすればよいのでしょうか。
答えはenterFrameイベントに設定した処理を削除する、ということになります。
イベント処理の削除には次の書式を使います。
これは形式上、addEventListener()メソッドによるイベント処理の設定の"addEventListener"の部分を"removeEventListener"に変更しただけと考えると分かりやすいでしょう。
次のサンプルでは、ボタンインスタンス"start_btn"をクリックすると回転のアニメーションが再生し、ボタンインスタンス"stop_btn"をクリックするとアニメーションが停止するようにします。
enterFrameイベントに限らず、何らかのイベント処理が不要になった場合には削除するのがよいでしょう。