サイトトップ

Director Flash 書籍 業務内容 プロフィール

Macromedia Flash非公式テクニカルノート

Tweenクラス

ID: FN0509004 Product: Flash

Platform: All
Version: Flash 6.0r79 and above

継承   (ルートクラス[*1])

ActionScriptクラス名   mx.transitions.Tween

Tweenクラスにより、ActionScriptを使用して移動やサイズ変更、フェードイン/アウトなどのトゥイーンを、ステージ上のMovieClipに簡単に適用することができます。ターゲットのMovieClipに、プロパティを指定して、所定のフレーム数または秒数でトゥイーンアニメーションを実行します。Tweenクラスにはまた、各種のイージングメソッドが指定できます。

イージングとは、アニメーションを徐々に加速したり減速したりすることで、アニメーションをよりリアルに見せます。たとえば、自作のドロップダウンリストコンポーネントのメニュー項目が、表示し始めるときには次第にスピードが速くなり、完全にリストが開き終える手前で減速するアニメーションにすることができます。Flashには、多くのイージングメソッドがあります。それらのメソッドは加速や減速の方程式を備え、それに応じてイージングのアニメーションも変化します。

また、Tweenクラスはイベントハンドラを呼出しますので、アニメーションの開始や停止、再開、トゥイーン対象プロパティ値の変化[*2]に対応したコードが記述できます。たとえば、2番目のトゥイーンアニメーションは、最初のトゥイーンがTween.onMotionStoppedイベントハンドラを呼出したときに開始することも可能です。このハンドラの呼出しは、最初のトゥイーンが停止したことを示します。

[訳者注*1] クラス定義に継承べきスーパークラスの指定はなく、Objectクラスを直接継承します。

[訳者注*2] 原文は「増加」("increments")となっています。しかし、増加にかぎる理由はなく、対応するイベントハンドラはTween.onMotionChangedだと考えられます。

Tweenクラスの使用
Tweenクラスのメソッドやプロパティを使用するには、new演算子でクラスの新規インスタンスを生成します。たとえば、Tweenインスタンスをステージ上のmyMovieClip_mcというMovieClipに適用するには、以下のコードのようにmx.transition.Tweenの新規インスタンスを生成します[*3]。

import mx.transitions.Tween;
var myTween:Tween = new Tween(myMovieClip_mc, "_x", mx.transitions.easing.Elastic.easeOut, 0, 300, 3, true);

Tweenクラスのパラメータ
Tweeクラスの新規インスタンスを生成するとき、いくつかのパラメータを渡します。指定しなければならないのは、ターゲットのMovieClipインスタンス、トゥイーンを適用すべきMovieClipプロパティ、イスンタンスをトゥイーンさせる値の範囲、そしてトゥイーンさせるプロパティ値を計算するのに使用するイージングメソッドです。

mx.transitions.Tweenクラスのコンストラクタは、つぎのようなデータ型の引数を取ります[*4]。

Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean)

obj   TweenインスタンスのターゲットとなるMovieClipインスタンス。

prop   文字列のブロパティ名。インスタンスのそのプロパティ値を、トゥイーンします。

func   イージング効果を計算するイージングメソッド。トゥイーン対象となるインスタンスのプロパティ値に適用されます。後述「イージングクラスとメソッドについて」の項をご参照ください。

begin   prop(トゥイーン対象となるインスタンスのプロパティ)の初期値を示す数値。

finish   prop(トゥイーン対象となるインスタンスのプロパティ)の終了値を示す数値。

duration   トゥイーンアニメーションの時間の長さを示す数値。省略すると、duration値には、デフォルトでInfinityが設定されます。

useSeconds   単位に秒を使用するかを示すブーリアン(論理)値。trueなら秒、falseではフレームが、durationパラメータとして指定した値に適用されます。

[訳者注*3] Flash MX 2004でTweenインスタンスを生成する場合、Tweenクラスで型指定すると、イベントハンドラメソッドを設定したときにコンパイルエラーが発生します。詳しくは、「Tweenインスタンスにイベントハンドラを設定するとエラーになる」をご参照ください。

[訳者注*4] 原文は、「つぎのパラメータ名とデータ型をもつ」("has the following parameter names and types")としています。しかし、引数の変数名は、固定されるはずがありません。ただ、記載されている「パラメータの名称」は、Tweenクラスに宣言されたそれらの値を格納する「プロパティと同一名称」になっています(スクリプト001)。もちろん、コンストラクタ関数の引数とクラスのプロパティは、論理的に別物です。

スクリプト001■mx.transitions.Tweenクラス

class mx.transitions.Tween {
  // ...[中略]...
  public var obj:Object;
  public var prop:String;
  public var func:Function = function (t, b, c, d) { return c*t/d + b; };
  public var begin:Number;
  // ...[中略]...
  public var useSeconds:Boolean;
  // ...[中略]...
  private var _duration:Number;
  // ...[中略]...
  private var _finish:Number;
  // ...[中略]...
  // コンストラクタ関数の引数が型指定されていない
  function Tween (obj, prop, func, begin, finish, duration, useSeconds) {
    // ...[中略]...
    if (!arguments.length) return;
    this.obj = obj;
    this.prop = prop;
    this.begin = begin;
    // ...[中略]...
    this.duration = duration;
    this.useSeconds = useSeconds;
    if (func) this.func = func;
    this.finish = finish;
  // ...[中略]...
  function set duration (d:Number):Void {
  // ...[中略]...
  function get duration ():Number {
  // ...[中略]...
  function set finish (f:Number):Void {
  // ...[中略]...
  function get finish ():Number {

上記Tweenクラスのコンストラクタ関数を見ると(スクリプト001)、もうひとつ気づくことがあります。コンストラクタの引数が、まったく型指定されていません。したがって、ドキュメントの記載にかかわらず、Tweenクラスのコンストラクタにどのようなデータ型の値を引数に渡しても、コンパイルエラーが発生することはありません。

イージングクラスとメソッドについて
Tweenクラスのインスタンスを生成するとき、funcパラメータに関数またはメソッドを指定して,イージングの計算を処理させます。Flashには5つのイージングクラスがあり、それぞれ3つのメソッドを備えています。それら3つのメソッドは、トゥイーンアニメーションのどの部分にイージングが適用されるかを示します。それらは、アニメーションの開始時、終了時、その両方の3つです。さらに、NoneイージングクラスがeaseNoneメソッドを備えているので、イージングを使わないという指定ができます。

以下のクラスおよびコンポーネントは、イージングクラスとメソッドを使用します。

  • mx.transitions.Tweenクラスがトゥイーンアニメーションのイージング効果として
  • mx.transitions.TransitionManagerクラスがトランジションのイージング効果として。「TransitionManager Class」をご参照ください。
  • Macromedia Component Architecureバージョン2のコンポーネントの一部。「Applying easing methods to components」をご参照ください。

イージングを計算する6つのクラスは、下表のとおりです。

イージングクラス 説明
Back アニメーションは、値の変化する範囲を、その片端あるいは両端で一旦超過します。そのうえで、超過した値を引戻すような効果を与えます。
Bounce 値が変化する範囲の片端あるいは両端で、バウンドする効果を加えます。バウンド回数は、時間によります。時間が長ければ、バウンドも増えます。
Elastic 値が変化する範囲の片端あるいは両端の外側に広がる、バネのような弾性効果を加えます。弾性の度合いは、時間に影響されません。
Regular 値の範囲の片端あるいは両端で、変化を小さくします[*5]。この機能は、加速や減速あるいはその両方の効果を加えます。
Strong 値の範囲の片端あるいは両端で、変化を小さくします。この効果は、Regularイージングクラスと似ています。しかし、効果がより際立ちます。
None 開始から終了まで等速の変化で、減速や加速の効果を加えません。この変化を線形トランジションとも呼びます[*6]。

これらの6つのイージングを計算するクラスはそれぞれ3つのメソッドをもち、各メソッドはアニメーションのどの部分にイージング効果を適用するかを示します。さらに、Noneイージングクラスには、4つ目のメソッドeaseNoneがあります。イージングメソッドの内容は、下表のとおりです。

メソッド 説明
easeIn 値の変化の開始時に、イージング効果を与えます。
easeOut 値の変化の終了時に、イージング効果を与えます。
easeInOut 値の変化の開始時と終了時に、イージング効果を与えます。
easeNone イージングの計算はしないことを示します。Noneイージングクラスでのみ利用できます[*7]。

[訳者注*5] 原文は「ゆっくりした動きを加える」("adds slower movement")とあります。しかし、イージングの対象は、位置やサイズのブロパティに限りません(たとえばアルファがあります)ので,「動き」というより「変化」という語の方が適切です。また、正確な内容としては、値の変化つまり時間あるいはフレーム単位での差分を小さくすることで、開始時の加速や終了時の減速を意味します。

[訳者注*6] 動きであれば、等速運動を意味します。時間と位置のグラフが「直線」("line")になるため、「線形」("linear")と呼ばれます。なお、"movement"の訳語については、前出[訳者注*5]をご参照ください。

NoneクラスではNone.easeInNone.easeOutNone.easeInOutが、すべて等速の変化になります。

[訳者注*7] イージングの計算をしないと、等速の変化になります。前出[訳者注*6]から、結局Noneクラスはすべてのメソッドが、同一の等速変化を提供します。

参考
[Flash 8 Documentation] > [Components Language Reference] > [Tween class]および[Using the Tween class]より邦訳。

_____

作成者: 野中文雄
作成日: 2005年9月27日


Copyright © 2001-2006 Fumio Nonaka.  All rights reserved.