BetweenAS3 트윈을 그룹으로 만들어 제어하기

트윈을 사용해서 무비를 제작하다 보면 다수의 트윈을 만들고 동시에 재생시키거나 순차적으로 재생시키는 경우가 종종 있습니다.
동시에 재생시키는 것은 그다지 어렵지 않지만, 순차적으로 재생시키는 것은 좀 번거로운 작업이죠.
BetweenAS3에서는 이처럼 다수의 트윈을 그룹으로 묶어 동시에 재생하거나 순차적으로 재생할 수 있는 함수를 제공합니다.

우선, 다수의 트윈을 동시에 재생하는 방법을 알아보겠습니다.
아래 무비를 클릭하면 3개의 트윈이 동시에 재생되는 것을 볼 수 있는데,

BetweenAS3.parallel()메서드를 사용하면 됩니다.
인수로는 그룹으로 만들고 싶은 트윈들을 “,” 로 구분해서 넣어주면 되고,
같은 기능을 가진 BetweenAS3.parallelTweens() 메서드의 경우는 인수가 배열형식이어야 합니다.

package {

	import flash.display.Sprite;
	import flash.events.MouseEvent;

	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.*;
	import org.libspark.betweenas3.tweens.ITween;

	public class BetweenAS3Group extends Sprite
	{

		public function BetweenAS3Group()
		{
			stage.addEventListener(MouseEvent.CLICK, hnClick);
		}

		private function createBox($y:Number, $color:uint = 0x000000):Sprite
		{
			var box:Sprite = new Sprite();
			box.graphics.beginFill($color);
			box.graphics.drawRect(-10, -10, 20, 20);
			box.graphics.endFill();
			addChild(box);
			box.x = 20;
			box.y = $y;
			return box;
		}

		private function hnClick(e:MouseEvent):void
		{
			var box1:Sprite = createBox(20);
			var box2:Sprite = createBox(60, 0xff6600);
			var box3:Sprite = createBox(100, 0x0066ff);

			var t1:ITween = BetweenAS3.to(box1, {x:300, rotation:360}, 1.5, Bounce.easeOut);
			var t2:ITween = BetweenAS3.to(box2, {x:320, rotation:360}, 1.5, Bounce.easeOut);
			var t3:ITween = BetweenAS3.to(box3, {x:340, rotation:360}, 1.5, Bounce.easeOut);

			BetweenAS3.parallel(t1, t2, t3).play();
		}
	}
}

---

다음은 다수의 트윈들을 순차적으로 재생하는 방법입니다.
아래 무비를 클릭하면 3개의 트윈이 순차적으로 재생되는 것을 볼 수 있는데,

BetweenAS3.serial()메서드를 사용하면 되며, 인수는 BetweenAS3.parallel() 과 마찬가지로 트윈들을 “,” 로 구분해서 넣어주면 됩니다.
같은 기능을 가진 BetweenAS3.serialTweens() 메서드의 경우는 인수가 배열형식이어야 합니다.

private function hnClick(e:MouseEvent):void
{
	var box1:Sprite = createBox(20);
	var box2:Sprite = createBox(60, 0xff6600);
	var box3:Sprite = createBox(100, 0x0066ff);

	var t1:ITween = BetweenAS3.to(box1, {x:300, rotation:360}, 1.5, Bounce.easeOut);
	var t2:ITween = BetweenAS3.to(box2, {x:320, rotation:360}, 1.5, Bounce.easeOut);
	var t3:ITween = BetweenAS3.to(box3, {x:340, rotation:360}, 1.5, Bounce.easeOut);

	BetweenAS3.serial(t1, t2, t3).play();
}

---

아래는 재미삼아 ^^

private function hnClick(e:MouseEvent):void
{
	var box1:Sprite = createBox(20);
	var box2:Sprite = createBox(60, 0xff6600);
	var box3:Sprite = createBox(100, 0x0066ff);

	var t1:ITween = BetweenAS3.to(box1, {x:300, rotation:360}, 1.5, Bounce.easeOut);
	var t2:ITween = BetweenAS3.to(box2, {x:320, rotation:360}, 1.5, Bounce.easeOut);
	var t3:ITween = BetweenAS3.to(box3, {x:340, rotation:360}, 1.5, Bounce.easeOut);

	BetweenAS3.serial(
		t1,
		BetweenAS3.serial(
			BetweenAS3.slice(t2, 0.0, 0.5, false),
			BetweenAS3.scale(BetweenAS3.slice(t2, 0.5, 1, false), 10),
			BetweenAS3.slice(t2, 1, 1.5, false)),
		BetweenAS3.serial(
			BetweenAS3.slice(t3, 0.0, 0.5, false),
			BetweenAS3.slice(t3, 0.5, 1, false)),
			BetweenAS3.scale(BetweenAS3.slice(t3, 1, 1.5, false), 10),
			BetweenAS3.reverse(t3, true),
		BetweenAS3.reverse(t2, true),
		BetweenAS3.reverse(BetweenAS3.scale(t1, 5))
	).play();
}