tamlog

主にwebのフロント回り たまに登山

Tweenライブラリ「GTween」まとめ

スポンサーリンク

ActionScriptのTweenライブラリ「GTween」を使ったので忘れない様にメモです。

準備の手順は3つ。

1.「GTween」をダウンロード。 解凍したフォルダ内の「GTween_V2_01.swc」ファイルをこれから作るFlashフォルダへ移動させます。(GTween_v2_01/swc/GTween_V2_01.swc)

2.「libsフォルダ」、「Tweenフォルダ」を作成。

GTween

ここに先ほど解凍したGTween_V2_01.swcを移動します。 libs = ライブラリを入れるフォルダ 、 Tween = これから作るflaファイルを入れるフォルダ

3.Flashファイル内のパスを指定

GTween

ActionScriptの設定→ライブラリパス→「../libs」を追加

これでライブラリでのパスを設定できました。

使い方

GTweenをインポート [as3] //GTweenをインポート import com.gskinner.motion.GTween; import com.gskinner.motion.easing.*; [/as3]

GTweenを使ってインスタンスを動かす [as3] new GTween(usagi, 2, {x:50, y:140}, {ease:Back.easeInOut}); //引数は(ターゲット, 秒, {Tweenさせたいプロパティ}, {イージング}); [/as3]

その他使い方。 [as3] //実行後に関数を呼び出す new GTween(usagi, 2, {x:50, y:140}, {ease:Back.easeInOut, onComplete:onGTweenComplet});

[/as3] 「onInit」Tween実行時に関数を呼び出してくれます。 「onChange」 Tween実行中に関数を呼び出してくれます。 「onComplete」 Tween実行後に関数を呼び出してくれます。


カラーの変更 [as3] //「カラー」の変更 import com.gskinner.motion.plugins.*;

ColorTransformPlugin.install();

new GTween(usagi, 2, {tint:0xff000000}); [/as3] ColorTransformPluginをインストールすると「カラー」の変更ができます。
[ff = alpha], [00 = R], [00 = G], [00 = B ] など。

サンプル 実際の動きはこんな感じです。

Back [as3] new GTween(usagi,2,{x:50,y:140},{ease:Back.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Back.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Back.easeOut}); [/as3]

Bounce [as3] new GTween(usagi,2,{x:50,y:140},{ease:Bounce.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Bounce.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Bounce.easeOut}); [/as3]

Circular [as3] new GTween(usagi,2,{x:50,y:140},{ease:Circular.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Circular.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Circular.easeOut}); [/as3]

Cubic [as3] new GTween(usagi,2,{x:50,y:140},{ease:Cubic.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Cubic.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Cubic.easeOut}); [/as3]

Exponential [as3] new GTween(usagi,2,{x:50,y:140},{ease:Exponential.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Exponential.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Exponential.easeOut}); [/as3]

Quadratic [as3] new GTween(usagi,2,{x:50,y:140},{ease:Quadratic.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Quadratic.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Quadratic.easeOut}); [/as3]

Quartic [as3] new GTween(usagi,2,{x:50,y:140},{ease:Quartic.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Quartic.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Quartic.easeOut}); [/as3]

Quintic [as3] new GTween(usagi,2,{x:50,y:140},{ease:Quintic.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Quintic.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Quintic.easeOut}); [/as3]

Sine [as3] new GTween(usagi,2,{x:50,y:140},{ease:Sine.easeIn}); new GTween(usagi,2,{x:50,y:140},{ease:Sine.easeInOut}); new GTween(usagi,2,{x:50,y:140},{ease:Sine.easeOut}); [/as3]

Linear [as3] new GTween(usagi,2,{x:50,y:140},{ease:Linear.easeIn}); [/as3]