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.easeIn、None.easeOut、None.easeInOutが、すべて等速の変化になります。
[訳者注*7] イージングの計算をしないと、等速の変化になります。前出[訳者注*6]から、結局Noneクラスはすべてのメソッドが、同一の等速変化を提供します。
|
参考
[Flash 8 Documentation] > [Components Language Reference] > [Tween class]および[Using the Tween class]より邦訳。
_____
作成者: 野中文雄
作成日: 2005年9月27日
