2006/08/25
吉岡 梅

連載目次へ >>

　Flash Professinal 8では，前回説明した「onEnterFrameイベントハンドラ」を使わなくても，「Tweenクラス」を使用することで簡単にムービークリップを動かせます。今回は手軽で便利なTweenクラスの使い方をご紹介しましょう。

Tweenクラスでアニメーションを作成する

　onEnterFrameイベントハンドラを利用したアニメーション作成では，「フレームレートと同じ間隔で実行される処理」を利用して，ムービークリップ・インスタンスの_xプロパティや_yプロパティの値を更新していました。でも，実はFlash8では，インスタンスを移動させるだけであれば，その処理に特化したクラスである「Tweenクラス」というものが用意されているのです。

　図1のアニメーションでは，インスタンス「flyingWhale」を，Tweenクラスを使って移動させています。決まった範囲を加速・減速をしながら繰り返し往復していますね。

図1：Tweenクラスを利用したアニメーション（クリックすると別ウィンドウでムービーを表示します）

　このアニメーションの実際のコードは図2のようになっています。

図2：実際のコード

移動したいインスタンス，アニメーションの種類，移動の開始位置，終了位置，アニメーションにかけたい秒数など，「インスタンスを移動させる」ために特化した具体的な情報を使って動きを指定していますね。このような方法でアニメーションが作成できるのが，「Tweenクラス」なのです。

七つのパラメータで動きを指定

　では，Tweenクラスを使用してアニメーションを作成してみましょう。新規Flashドキュメントを作成し，ボールの絵を一つ描き，インスタンス名として「ball」と名前を付けます（図3）。

図3：インスタンスの準備

　次に，スクリプト用のレイヤーを追加し，[アクション]パネルを開きます。Tweenクラスを使用するには，コードの先頭で「importステートメント」を使って次のようなステートメントを記述します。

  import mx.transitions.Tween;
  import mx.transitions.easing.*;

この2行のステートメントはそれぞれ，「『mx.transisions』という場所^＊1にある『tween』クラスを使いますよ」「『mx.transitions.easing』という場所にあるクラス全部を使いますよ^＊2」という意味になります。このimportステートメントによって，ActionScriptで記述したスクリプト内でTweenクラスを使えるようになります。

　Tweenクラスの基本構文は，

  var 変数名:Tween = new Tween(
    アニメーションさせたいインスタンス名,
    変化させたいプロパティ名,
    アニメーションの種類,
    開始値,
    終了値,
    継続時間,
    継続時間の単位
    );

となります。全部で七つの情報(パラメータ)を指定してあげるわけですね。例えばインスタンス「ball」が上から下に落下するようなアニメーションを作成するとします。とりあえず七つのパラメータを表1のように設定してみましょう。

表1：七つのパラメータ

パラメータ	値
インスタンス	インスタンス「ball」
変化させたいプロパティ	_yプロパティ
アニメーションの種類	バウンドするようなもの
開始値	y座標で「15」
終了値	y座標で「220」
継続時間	2秒で完了したい
継続時間の単位	秒

　これを先ほどの基本構文に当てはめると，次のようになります。

  //Tweenクラスを使用できるようにインポート
  import mx.transitions.Tween;
  import mx.transitions.easing.*;
  //インスタンス「ball」の動きをTweenクラスを使って制御
  var myTween:Tween = new Tween(
    ball, 
    "_y", 
    Bounce.easeOut, 
    15, 
    220, 
    2, 
    true
  );

　できあがったアニメーションは図4のようになります。

図4：できあがったアニメーション（クリックすると別ウィンドウでムービーを表示します）

「ball」が2秒間でバウンドするアニメーションが簡単に作れましたね^＊3。

アニメーションは6種類×3通り

　Tweenクラスを使ったアニメーションを作成する際のパラメータを，もう少し詳しく見ていきましょう（表2）。

表2：七つのパラメータに指定する値

パラメータ	値
インスタンス	インスタンスへのターゲット・パスを指定
変化させたいプロパティ	変化させたいプロパティを文字列で指定。例えば，_yプロパティなら"_y"，_alphaプロパティなら"_alpha"
アニメーションの種類	後述
開始値	そのまま値を指定
終了値	そのまま値を指定
継続時間	数値で指定
継続時間の単位	trueを指定すると秒単位，falseを指定するとフレーム数。例えば，継続時間が「10」のとき，「true」を指定すると10秒かけてアニメーションを行い，「false」を指定すると10フレームでアニメーションを行います

　[インスタンスの指定]，[変化させたいプロパティ]，[開始値]，[終了値]は特に問題ないと思います。[継続時間]と[継続時間の単位]はセットで考えます。[継続時間の単位]に「true」を指定すると，アニメーションを「何秒で完了させるか」という設定となり，「false」を指定すると，アニメーションを「何フレームかけて完了させるか」という設定となります。この設定に合わせて[継続時間]に数値を指定してあげればいいわけですね。

　さて，最後に残ったのが[アニメーションの種類]です。tweenアニメーションで利用できるアニメーションの種類(イージング・クラスの種類)は，あらかじめ六つ用意されています（表3）^＊4

表3：6種類のアニメーション

イージングクラス	説明
Back	開始値や終了値をいったん超えて戻るアニメーション
Bounce	バウンドするアニメーション
Elastic	開始時や終了時に慣性の働くようなアニメーション
Regular	加速・減速をするアニメーション
Strong	加速・減速をするアニメーション。Regularよりも動きが極端
None	等速のトゥイーンアニメーション

さらに，None以外のアニメーションでは，それぞれのアニメーションに固有の「イージング効果」をアニメーションの最初に適用するか，最後に適用するか，はたまた両方に適用するかを指定します（表4）^＊5。

表4：イージング効果を指定するメソッド

イージングメソッド	説明
easeIn	最初にイージング効果
easeOut	最後にイージング効果
easeInOut	両方にイージング効果

これら二つのパラメータを組み合わせて，Tweenクラス使用時の[アニメーションの種類]を指定するわけです。具体的には，図5のムービーの[■パラメーターとして記述するコード]欄に表示されるように，

  イージングクラス.イージングメソッド

の形で記述します。「ボールがはずむようなアニメーション」でしたら，「Bounce」イージングクラスを使って，最後だけイージング効果を付けたいので「easeOut」イージングメソッドを選びます。最終的に[アニメーションの種類]パラメータとしてコードに記述するのは「Bounce.easeOut」となります。ちょっとややこしいですが，「アニメーションの種類.効果をかける場所」という形式の指定方法が用意されているというわけですね。実際にいろいろとパラメータを変えて試してみてください。

図5：いろいろなイージング（クリックすると別ウィンドウでムービーを表示します）

　いかがでしたでしょうか。今回はTweenクラスを利用したアニメーションの作成方法をご紹介しました。アニメーションの種類の指定が少々面倒ですが，それ以外は簡単かつ直観的にアニメーションを作成できますね。

　次回はこのTweenクラスに用意されたイベントやメソッドを利用して，アニメーションを繰り返したり，逆再生する方法をご紹介します。お楽しみに。

---

＊1 いわゆる「パッケージ」です。

＊2 実際には「使いますよ」というよりは「使うかもしれませんから探せるようにしておいてください」という意味です。宣言だけしておいても，すべては使わないかもしれませんもんね。

＊3 ムービーにはわかりやすいようにリプレイボタンも付けています。

＊4 6種類のアニメーションはそれぞれmx.transitions.easingパッケージ内の六つのクラスとして用意されています。コードの先頭で「import mx.transitions.easing.*;」としたのは，このアニメーションの動きを司る六つのクラスを使えるようにするためだったのです。

＊5 Noneクラスにはこのほかにも「easeNone」メソッドが定義されています。通常，Noneクラスを使用する場合は「None.easeNone」を指定します。