BetweenAS3を使ってみる3（グループ化）

BetweenAS3では、Tweenをグループ化して、同時再生や順番再生を指定できる。グループ化した方が間違いが少なく、確実な結果が得られる。

◆1. 同時再生
複数のTweenを同時に実行したい場合は、「parallel」というメソッドを使う。
[sourcecode language=”as3″]
//parallel
t0 = BetweenAS3.parallel(
BetweenAS3.tween(box0a, { x:400, y:90 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box0b, { x:400, y:70 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box0c, { x:400, y:50 }, null, 3, Cubic.easeOut)
)
[/sourcecode]

◆2. 順番再生
複数のTweenを順番に実行したい場合は、「serial」というメソッドを使う。
[sourcecode language=”as3″]
//serial
t1 = BetweenAS3.serial(
BetweenAS3.tween(box1a, { x:400, y:240 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box1b, { x:400, y:220 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box1c, { x:400, y:200 }, null, 3, Cubic.easeOut)
)
[/sourcecode]

▼Wonderfl

▼ActionScript AS3(FP10)
[sourcecode language=”as3″]
/*
* BetweenAS3の基本2(グループ化)
*
* 参考
* http://www.be-interactive.org/?itemid=449
* */
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.easing.Cubic;
import org.libspark.betweenas3.tweens.ITween;

public class Main extends Sprite
{

public function Main()
{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mouseUpHandler(null);
}

private function mouseUpHandler(e:MouseEvent):void
{
while (numChildren > 0) {
removeChildAt(0);
}
addNewText(0, 0, "Click to replay");

//◆1. 同時再生
addNewText(50, 30, "◆1. 同時再生（parallel）");
var box0a:Sprite = addNewBox(50, 50, 0xFF0000);
var box0b:Sprite = addNewBox(50, 70, 0x00FF00);
var box0c:Sprite = addNewBox(50, 90, 0x0000FF);
var t0:ITween;
//parallel
t0 = BetweenAS3.parallel(
BetweenAS3.tween(box0a, { x:400, y:90 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box0b, { x:400, y:70 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box0c, { x:400, y:50 }, null, 3, Cubic.easeOut)
)
//開始
t0.play();

//◆2. 順番再生
addNewText(50, 180, "◆2. 順番再生（serial）");
var box1a:Sprite = addNewBox(50, 200, 0xFF0000);
var box1b:Sprite = addNewBox(50, 220, 0x00FF00);
var box1c:Sprite = addNewBox(50, 240, 0x0000FF);
var t1:ITween;
//serial
t1 = BetweenAS3.serial(
BetweenAS3.tween(box1a, { x:400, y:240 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box1b, { x:400, y:220 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box1c, { x:400, y:200 }, null, 3, Cubic.easeOut)
)
//開始
t1.play();

//◆3. 順番再生2
addNewText(50, 330, "◆3. 順番再生2（serial）同じオブジェクトに対して");
var box2a:Sprite = addNewBox(50, 350, 0x000000);
var t2:ITween;
//serial
t2 = BetweenAS3.serial(
BetweenAS3.tween(box2a, { x:400, y:350 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box2a, { x:400, y:450 }, null, 3, Cubic.easeOut),
BetweenAS3.tween(box2a, { x:50, y:350 }, null, 3, Cubic.easeOut)
)
//開始
t2.play();
}

private function addNewBox(x:Number, y:Number, c:int):Sprite
{
var sp:Sprite = new Sprite();
sp.graphics.beginFill(c);
sp.graphics.drawRect( -10, -10, 20, 20);
sp.graphics.endFill();
sp.x = x;
sp.y = y;
addChild(sp);
return sp;
}

private function addNewText(x:Number, y:Number, txt:String):TextField
{
var tf:TextField = new TextField();
tf.text = txt;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.x = x;
tf.y = y;
addChild(tf);
return tf;
}
}
}
[/sourcecode]