TweensyをTweenerライクに使う
2009.01.29
巷で騒がれているtweenさせるライブラリTweensy。
とりあえずTweenerライクに使えるのかどうなのかを試してみたメモです。
ここからダウンロードができます。
- Tweensy Zero
- Tweensy Original
- Tweensy FX
の３つのタイプがあるのですが、
説明文を訳してみると(間違っている可能性アリ)
Tweensy Original --- は、通常タイプ。
Tweensy Zero --- は、Tweensy Originalの軽量版です。(Originalとの違いは、しらべていません。)
Tweensy FX --- は、Tweensy Originalを拡張したベータ版で、以下の引用のようにモーションブラーや、バンプマッピングなどの効果を含んだパッケージです。
This includes directional motion blurring, pixelation, xray, bulge/dent displacements, reflection, rgb channel splitting and bump mapping.
ちなみに、僕がダウンロードしたのは、Tweensy FXです。以下、さわり部分を試してみたメモです。
おそらく基本のことである"to" , "from" , "fromTo" について
まずは、簡単なTweenをTweenerでの書き方とTweensyの書き方を比べてみます。
Spriteクラスのインスタンス:itemを座標(200,300)から(100,100)に３秒で移動するTweenです。
Tweenerでの書き方
var item:Sprite=new Sprite();
item.x=200;
item.y=300;
Tweener.addTween(item , {x:100,y:100,time:3});
Tweensyで書き直すと
var item:Sprite=new Sprite();
item.x=200;
item.y=300;
Tweensy.to(item,{x:100,y:100},3);
Tweensyクラスのメソッドには、
- to
- from
- fromTo
to --- 現在ある状態から、指定した状態にtweenする
var item:Sprite=new Sprite();
item.x=200;
item.y=300;
Tweensy.to(item,{x:100,y:100},3);
(上の例だと、座標(200,300)から(100,100)にtweenする)
from --- 指定した状態から現在の状態にtweenする (上の例だと、座標(100,100)から(200,300)にtweenする)
fromTo --- 指定した状態から、指定した状態にtweenする
var item:Sprite=new Sprite();
item.x=200;
item.y=300;
Tweensy.fromTo(item , {x:230,y:150},{x:450,600},3);
(座標(230,150)から(450,600)にtweenする)
パラメータの指定の仕方でTweenerと違うところ
itemを現在のx座標からx=100の位置に移動します。
Tweensy.to(item,{x:100});
数字を文字列にするとitemは、現在のx座標から現在のx座標+100の座標に移動します。
Tweensy.to(item,{x:'100'})
Filterのtween
Filterのtweenも簡単に設定出来ます。Tweesny.to(new BlurFilter(),{blurX:10,blurY:5},1.5,null,0,item)第1引数:使用したいfilterをセット 第2引数:tweenさせたいパラメータ 第6引数:filterを適用したいインスタンス
Tween終了時の処理
TweensyTimelineクラスにonCompeteメソッドが提供されています。 Tweensyクラスのto,from,fromToメソッドは、TweensyTimelineクラスを返します。
var timeline:TweensyTimeline=Tweensy.to(item,{x:'100'});
//tweenが終了したときに実行したいメソッド
timeline.onComplete=_onComplete;
//tweenが終了した時に実行したいメソッドの引数(配列)
timeline.onCompleteParam=["tween終了"];
var _onComplete=function(str:*):void { trace ( str ); } //出力 : tween終了
結果
Tweenerライクに使えると思う。kanariia.com blogさんの記事に非常に分かり易く、そして詳しく説明されています。 和訳されているので、Tweensyを触ってみたいけど英語だから分からないという方は、オススメだと思います。
Tweensyを使って、
次は、Tweensyに独自に実装されている機能に触れていきたいと思います。
[postscript -- June.19.2009]
assetデータを消してしまったため、でもが表示されなくなりました。申し訳ありません。update 2010.03.11...
[関連記事]
