Flash Tweenクラス

Flash

Flash ActionScriptでTweenクラスというものがあります。


タイムラインでトゥイーンで作成するように、
スクリプトでトゥイーンを設定することができます。

こんな風に設定すると、mcがぼよんぼよん大きくなる動きが作成できます。

//my_mcをステージに配置
//以下スクリプトをフレームアクションに記述
import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween( my_mc, "_xscale", Back.easeOut, 0, 100, 2, true );
new Tween( my_mc, "_yscale", Back.easeOut, 0, 100, 2, true );


便利な方法はボタンのロールオーバーとロールアウト。


例えばロールオーバーしたときに大きくなり、
ロールアウトしたときに小さくなるアニメーションです。


タイムラインアニメーションではモーショントゥイーンを作成して
再生・逆再生させればよかったのですが、
これを書くだけで動作します。

//my_mcをステージに配置
//以下スクリプトをフレームアクションに記述
import mx.transitions.Tween;
import mx.transitions.easing.*;
my_mc.onRollOver = function()
{
    new Tween( this, "_xscale", Back.easeOut, this._xscale, 100, .5, true );
    new Tween( this, "_yscale", Back.easeOut, this._yscale, 100, .5, true );
}
my_mc.onRollOut = function()
{
    new Tween( this, "_xscale", Back.easeOut, this._xscale, 50, .5, true );
    new Tween( this, "_yscale", Back.easeOut, this._yscale, 50, .5, true );
}
my_mc._xscale = 50;
my_mc._yscale = my_mc._xscale;


ちなみにTweenクラスを使わずに書くとこんな感じです。


ごちゃっとしているので好きではないですが、
アニメーションを数式を使ってカスタマイズすることができるのがメリットです。


※以下のサンプルは線形アニメーション

my_mc.onRollOver = function()
{
    this.onEnterFrame = function()
	{
		this._xscale += 10;
		this._yscale = this._xscale;
		if( this._xscale >= 100 )
		{
			this._xscale = this._yscale = 100;
			delete this.onEnterFrame;
		}
	}
}

my_mc.onRollOut = function()
{
    this.onEnterFrame = function()
	{
		this._xscale -= 10;
		this._yscale = this._xscale;
		if( this._xscale <= 50 )
		{
			this._xscale = this._yscale = 50;
			delete this.onEnterFrame;
		}
	}
}


参考リンク