Tweener（トゥイーナー）とは

例えば、１秒かけてX座標に100pxゆるやかにだんだん加速しながら移動後に、”テスト”と出力する場合。

ActionScript
1
2
3
4
5
6
// ActionScript2
import caurina.transitions.Tweener;
Tweener.addTween([instance],{_x:100, time:1, transition:'easeOutQuint', onComplete:handler});
function handler(){
    trace("テスト";);
}

TweenerはActionScript3.0とActionScript2.0で使用する事ができ、インスタンスに対して「だんだんゆっくり止まる」「どんどん勢いよく移動」「びょーんびょーん（？）」と、いろんなイージングが設定できるトウィーン制御ライブラリです。とても簡単なScriptで実現できます！

導入手順

まずはGoogle Codeに公開されているライブラリをダウンロード。
配布元：http://code.google.com/p/tweener/
ダウンロードしたzipファイルを解凍すると、「caurina」というフォルダができると思います。それをflaファイル直下、またはFlashの環境設定でクラスパスを追加します。これで準備は完了しました。

Tweenerの使い方サンプルを簡単に説明

ActionScript
1
import caurina.transitions.Tweener;

この1行は、Tweenerを使うために、ダウンロードしたTweenerライブラリをimportする記述です。ライブラリを管理している環境によって左右されますが、Flashの実行ファイルがある場所に「caurina」フォルダーを置いたら、「caurina」からの階層になります。

ActionScript
1
Tweener.addTween([instance],{

この1行の[instance]は、トゥイーンして動かしたいインスタンス名をいれます。[] ←括弧は必要ないので、例えば、「myInstance」というインスタンス名のムービークリップを動かすとした時の最初の1行は、

ActionScript
1
Tweener.addTween(myInstance,{

このようになります。

Tweenerの書き方、ActionScript3.0

ActionScript3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import caurina.transitions.Tweener;
Tweener.addTween([instance],{
    x:100,
    y:100,
    scaleX:1,
    scaleY:1,
    rotation:0,
    alpha:1,
    time:1,
    delay:0,
    transition:'easeOutQuint',
    _Blur_blurX:20,
    _Blur_blurY:20,
    _Blur_quality:3,
    _color:0x330066,
    onComplete:onCompleteHandler,
    _bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

Tweenerの書き方、ActionScript2.0

ActionScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import caurina.transitions.Tweener;
Tweener.addTween([instance],{
    _x:100,
    _y:100,
    _scale:1,
    rotation:0,
    _alpha:1,
    time:1,
    delay:0,
    transition:'linear',
    _color:0xffffff,
    onComplete:onCompleteHandler,
    _bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

トゥイーンの逆再生

ActionScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import caurina.transitions.Tweener;
Tweener.removeTweens([instance],{
    _x:100,
    _y:100,
    _scale:1,
    rotation:0,
    _alpha:1,
    time:1,
    delay:0,
    transition:'linear',
    _color:0xffffff,
    onComplete:onCompleteHandler,
    _bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

Tweenerのパラメータ

パラメータは必要に応じて足したり減らすことができます。

ActionScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
x:100,  //移動後のX座標
y:100,  //移動後のY座標
scaleX:1,  //X座標への大きさ
scaleY:1,  //Y座標への大きさ
rotation:0,  //回転
alpha:1,  //透明度
time:1,  //何秒かけるか
delay:0,  //トゥイーン開始までの待ち時間
transition:'easeOutQuint',  //トゥイーンのトランジション
_Blur_blurX:20,  //X座標へのぼかし
_Blur_blurY:20,  //Y座標へのぼかし
_Blur_quality:3,  //ぼかしのクオリティ
_color:0x330066,  //着色
onComplete:onCompleteHandler,  //トゥイーン後の処理
_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]  //ベジェ曲線状にトゥイーンする通過点

BlurをつかってぼかすTweenを使う場合

ブラーを使ってぼかしをTweenさせる前に、フィルター用のライブラリをimportして、いったん初期化をする関数を実行します。

ActionScript
1
2
3
4
5
6
7
8
9
10
// ぼかしフィルターのimport
import caurina.transitions.properties.FilterShortcuts;
// ぼかしフィルターの初期化
FilterShortcuts.init();
// ぼかしTween
Tweener.addTween([instance],{alpha:1,
    transition:'easeOutQuint',
    time:5,
    _Blur_blurX:20,
    _Blur_blurY:20});

動きを途中でとめる場合

ActionScript
1
Tweener.pauseTweens(mc);

エラーコード

## [Tweener] Error: The property 'x' doesn't seem to be a normal object property of [object Object] or a registered special property.

例えばコレの場合だと、「The property ‘x’」プロパティのXが間違ってますよ。ということですね。これが出たときは、「_x」と「x」の記述違いでした。AS2とAS3とではアンダーバーがいるいらないがありますので、コピペしたサンプルでエラーがでたら、プロパティを見てみましょう。

トゥイーンする動きのトランジションチートシート

どういう動きでトゥイーンするか、transitionに設定する名前が載っているチートシートです。「transition」のパラメータに「easeInSine」とか「easeInOutSine」をコピペしてつかってください。