Tweener(トゥイーナー)とは

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

//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の使い方サンプルを簡単に説明

import caurina.transitions.Tweener;
この1行は、Tweenerを使うために、ダウンロードしたTweenerライブラリをimportする記述です。ライブラリを管理している環境によって左右されますが、Flashの実行ファイルがある場所に「caurina」フォルダーを置いたら、「caurina」からの階層になります。
Tweener.addTween([instance],{
この1行の[instance]は、トゥイーンして動かしたいインスタンス名をいれます。[] ←括弧は必要ないので、例えば、「myInstance」というインスタンス名のムービークリップを動かすとした時の最初の1行は、
Tweener.addTween(myInstance,{
このようになります。

Tweenerの書き方、ActionScript3.0

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

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}]
});

トゥイーンの逆再生

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のパラメータ

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

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して、いったん初期化をする関数を実行します。

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

動きを途中でとめる場合

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」をコピペしてつかってください。

ActionScriptのトゥイーン制御ライブラリTweenerの使い方
Tagged on:     

4 thoughts on “ActionScriptのトゥイーン制御ライブラリTweenerの使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です