Tweenクラスでイージング(減速運動)を表現する

Tweenクラスを使用することによってメソッドインスタンスの移動、サイズ変更、およびフェードを自動で実行することができる。加えて減速運動やフェードイン・アウトなど、規定の引数をあたえることで様々なモーション効果を持たせることが可能。
ただし、一つのTweenオブジェクトで操作できるプロパティは一つのみ。複数同時に行いたい場合は”HydroTween”っていうライブラリが公開されているのでそちらを参照。

Tweenクラスの基本構文。

Tweenクラスのオブジェクト(インスタンス)を作成し、引数にターゲットとなるオブジェクトや効果の値を入れる。

//Tweenクラスとイージング機能を使用するためのeasingパッケージをインポートする。
import fl.transitions.Tween;
import fl.transitions.easing.*;

// Tweenオブジェクトの作成
var myTween:Tween = new Tween;
(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false);

引数(パラメータ)の詳細

  • obj:Object — Tween のターゲットになるオブジェクト。
  • prop:String — 影響を受ける (obj パラメータ値)のプロパティの名前。
  • func:Function — 使用するイージング関数の名前。
  • begin:Number — prop パラメータの開始値。
  • finish:Number — prop パラメータ (トゥイーンされるターゲットオブジェクトのプロパティ) の終了値を示す数値。
  • duration:Number — モーションの継続時間。時間またはフレーム数を指定する。負の数、または省略の場合、infinity(無限) に設定される。
  • useSeconds:Boolean (default = false) — モーションで時間・フレームのどちらを使用するかを指定。true の場合は時間を、false の場合は、フレームを使用する。

Tweenを使用したモーションの作成例

サンプルでは正方形を作成してTweenクラスを使用して回転させてみた。
»サンプルを表示

//Tweenクラスとイージング機能を使用するためのeasingパッケージをインポートする。
import fl.transitions.Tween;
import fl.transitions.easing.*;

//インスタンスの作成
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xDFEDE3);
mc.graphics.drawRect(-100,-100,200,200);
mc.x = stage.stageWidth/2;
mc.y = stage.stageHeight/2;
addChild(mc);

// Tweenオブジェクトの作成、実行
var myTween:Tween = new Tween(mc,”rotation”, Elastic.easeInOut, 0, 360, 5, true);

The URL to TrackBack this entry is:

コメントをどうぞ