org.as3s.Tween Ver2.0の使い方(4) オブジェクトトゥイーン
org.as3s.Tween Ver2.0では変化させたいパラメータとして、数値だけでなくオブジェクトを指定することができます。
パラメータとしてオブジェクトを指定すると、そのオブジェクト内に含まれる数値を一括して変化させることができます。
TweenerなどではColorTransform、Matrix、BitmapFilterのトゥイーンを行いたい場合にはそれぞれに対応した拡張クラスを読み込む必要がありますが、org.as3s.Tween Ver2.0では、この新機能によってTweenライブラリ内で特殊な処理を行うことなく、ColorTransform、Matrix、BitmapFilterなどのトゥイーンを行うことが可能になりました。
ColorTransform Tween
org.as3s.Tweenでは、Tween対象にtransformプロパティを指定し、パラメータにColorTransformオブジェクトを指定することでColorTransformのトゥイーンを行うことができます。
endColor.color = 0xFFFF00;
Tween.start(sp.transform, {}, {colorTransform:endColor}, Quadratic.easeOut, 60);
動作サンプル（画面クリックでスタートします）
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.*;
import flash.geom.ColorTransform;
import org.as3s.Tween;
[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class TweenSample4a extends Sprite {
private var tween:Tween;
private var sp:Sprite;
public function TweenSample4a() {
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(0, 0, 600, 200);
sp.graphics.endFill();
sp.x = sp.y = 50;
addChild(sp);
//Mouse Event
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(event:Event):void {
//Reset
sp.transform.colorTransform = new ColorTransform();
//ColorTrasnform Tween
var endColor:ColorTransform = new ColorTransform();
endColor.color = 0xFFFF00;
Tween.start(sp.transform, {}, {colorTransform:endColor}, Quadratic.easeOut, 60);
}
}
}
Matrix Tween
org.as3s.Tweenでは、Tween対象にtransformプロパティを指定し、パラメータにMatrixオブジェクトを指定することでMatrixのトゥイーンを行うことができます。
Tween.start(sp.transform, {}, {matrix:endMatrix}, Quadratic.easeOut, 24);
ColorTransformオブジェクトと同時に設定することもできます。
endColor.color = 0xFFFF00;
var endMatrix:Matrix = new Matrix(3, 0.2, 0.5, 1.5, 150, 100);
Tween.start(sp.transform, {}, {colorTransform:endColor, matrix:endMatrix}, Quadratic.easeOut, 24);
動作サンプル（画面クリックでスタートします）
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.*;
import flash.geom.Matrix;
import org.as3s.Tween;
[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class TweenSample4b extends Sprite {
private var tween:Tween;
private var sp:Sprite;
public function TweenSample4b() {
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(0, 0, 100, 100);
sp.graphics.endFill();
addChild(sp);
//Mouse Event
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(event:Event):void {
//Reset
sp.transform.matrix = new Matrix();
//Matrix Tween
var endMatrix:Matrix = new Matrix(3, 0.2, 0.5, 1.5, 150, 100);
Tween.start(sp.transform, {}, {matrix:endMatrix}, Quadratic.easeOut, 24);
}
}
}
Filter Tween
org.as3s.Tweenでは、パラメータにBitmapFilterオブジェクトの配列を指定することでBitmapFilterのトゥイーンを行うことができます。
var endFilters:Array = [new BevelFilter(5), new DropShadowFilter(10,45,0,1,20,20)];
Tween.start(sp, {}, {filters:endFilters}, Quadratic.easeOut, 24);
この場合、トゥイーン開始時には最終状態と同じ種類のフィルタが適用されている必要があります。
動作サンプル（画面クリックでスタートします）
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.*;
import org.as3s.Tween;
[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class TweenSample4c extends Sprite {
private var tween:Tween;
private var sp:Sprite;
public function TweenSample4c() {
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(0, 0, 600, 200);
sp.graphics.endFill();
sp.x = sp.y = 50;
addChild(sp);
//Mouse Event
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(event:Event):void {
//Reset
sp.filters = [new BevelFilter(0), new DropShadowFilter(0,45,0,1,0,0)];
//Filter Tween
var endFilters:Array = [new BevelFilter(5), new DropShadowFilter(10,45,0,1,20,20)];
Tween.start(sp, {}, {filters:endFilters}, Quadratic.easeOut, 24);
}
}
}
カスタムオブジェクトのTween
入れ子になったオブジェクトも内部の数値データを再帰的にチェックするので、例えば以下のようなカスタムオブジェクトに対してもトゥイーンを実行することが出来ます。
Tween.start(test, {UPDATE:onUpdate}, {a:{aa:100}, b:{bb:{bbb:2000}}}, Quadratic.easeOut, 10);
private function onUpdate(event:Event):void {
trace("a.aa:"+test.a.aa, "b.bb.bbb:"+test.b.bb.bbb);
}
▼出力結果
a.aa:0 b.bb.bbb:1000
a.aa:15.972222222222221 b.bb.bbb:1159.7222222222222
a.aa:30.55555555555555 b.bb.bbb:1305.5555555555557
a.aa:43.75 b.bb.bbb:1437.5
a.aa:55.55555555555555 b.bb.bbb:1555.5555555555557
a.aa:65.97222222222223 b.bb.bbb:1659.7222222222222
a.aa:75 b.bb.bbb:1750
a.aa:82.63888888888889 b.bb.bbb:1826.3888888888887
a.aa:88.88888888888889 b.bb.bbb:1888.888888888889
a.aa:93.75 b.bb.bbb:1937.5
a.aa:97.22222222222221 b.bb.bbb:1972.2222222222222
a.aa:99.30555555555556 b.bb.bbb:1993.0555555555557
a.aa:100 b.bb.bbb:2000