BetweenAS3.bezier(target:Object, to:Object, from:Object = null, controlPoint:Object = null, time:Number = 1.0, easing:IEasing = null);

BetweenAS3.bezierFrom(target:Object, from:Object, controlPoint:Object = null, time:Number = 1.0, easing:IEasing = null);

BetweenAS3.bezierTo(target:Object, to:Object, controlPoint:Object = null, time:Number = 1.0, easing:IEasing = null);

아래는 시작 포인트와 끝 포인트 사이에 컨트롤 포인트를 설정하고, 설정된 컨트롤 포인트 값에 의해 만들어진 베지어 곡선을 따라 트윈이 재생되는 간단한 샘플입니다.

package {

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

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

	public class BetweenAS3Bezier extends Sprite {

		private var box:Sprite;
		private var t:ITween;
		private var tg:ITween;

		private var cPointX:Array;
		private var cPointY:Array;

		public function BetweenAS3Bezier() {

			box = new Sprite();
			box.graphics.beginFill(0x000000);
			box.graphics.drawRect(-10, -10, 20, 20);
			box.graphics.endFill();
			addChild(box);
			box.x = 40;
			box.y = 40;

			cPointX = [100, 180, 280, 400];
			cPointY = [120, 20, 180, 40];

			setTween();
		}

		private function setTween() : void {
			t = BetweenAS3.bezier(box, {x:480, y:160}, {x:40, y:40}, {x:cPointX, y:cPointY}, 4);
			tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));

			stage.addEventListener(MouseEvent.CLICK, hnClick);
		}

		private function hnClick(e:MouseEvent) : void {
			tg.stopOnComplete = false;
			tg.togglePause();
		}
	}
}

위치 값(x, y)뿐만 아니라 속성도 베지어 트윈이 가능하다고 합니다.
아래는 위의 소스코드에 alpha 속성에 대한 컨트롤 포인트를 적용해 보았는데, 잘 되는군요.

package {

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

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

	public class BetweenAS3Bezier extends Sprite {

		private var box:Sprite;
		private var t:ITween;
		private var tg:ITween;

		private var cAlpha:Array;
		private var cPointX:Array;
		private var cPointY:Array;

		public function BetweenAS3Bezier() {

			box = new Sprite();
			box.graphics.beginFill(0x000000);
			box.graphics.drawRect(-10, -10, 20, 20);
			box.graphics.endFill();
			addChild(box);
			box.x = 40;
			box.y = 40;

			cAlpha = [0, 0.8, 0.2, 0.5, 1];
			cPointX = [100, 180, 360, 220, 400];
			cPointY = [120, 20, 180, 150, 40];

			setTween();
		}

		private function setTween() : void {
			t = BetweenAS3.bezier(box, {alpha:1, x:480, y:160}, {alpha:0, x:40, y:40}, {alpha:cAlpha, x:cPointX, y:cPointY}, 4);
			tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));

			stage.addEventListener(MouseEvent.CLICK, hnClick);
		}

		private function hnClick(e:MouseEvent) : void {
			tg.stopOnComplete = false;
			tg.togglePause();
		}
	}
}

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 BetweenAS3Color extends Sprite {

		private var box:Sprite;
		private var t:ITween;
		private var tg:ITween;

		public function BetweenAS3Color() {

			box = new Sprite();
			box.graphics.beginFill(0x000000);
			box.graphics.drawRect(0, 0, 200, 80);
			box.graphics.endFill();
			addChild(box);
			box.x = Math.round(stage.stageWidth * 0.5 - box.width * 0.5);
			box.y = Math.round(stage.stageHeight * 0.5 - box.height * 0.5) - 20;

			setTween();
		}

		private function setTween():void{
			t = BetweenAS3.tween(box, {transform:{colorTransform:{ redOffset:-255, greenOffset:255, blueOffset:255 }}}, null, 2, Quart.easeOut);
			tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));

			stage.addEventListener(MouseEvent.CLICK, hnClick);
		}

		private function hnClick(e:MouseEvent):void	{
			tg.stopOnComplete = false;
			tg.togglePause();
		}
	}
}

사용방법은 ActionScript 3.0에서 제공되고 있는 flash.filters 패키지의 각종 클래스의 생성자 메서드와 유사한 형식으로 기술하면 됩니다.
위 색상변환 예제코드를 응용해서 간단하게 몇 가지 예를 들어보겠습니다.

– BlurFilter

private function setTween():void{
	t = BetweenAS3.tween(box, { _blurFilter:{blurX:16, blurY:16} }, null, 2, Quart.easeOut);
	tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));

	stage.addEventListener(MouseEvent.CLICK, hnClick);
}

private function hnClick(e:MouseEvent):void	{
	tg.stopOnComplete = false;
	tg.togglePause();
}

– ColorMatrixFilter

private function setTween():void{
	t = BetweenAS3.tween(box,
		{ _colorMatrixFilter:{
			matrix:[
				1, 0, 0, 0, 255,
				0, 1, 0, 0, 255,
				0, 0, 1, 0, 255,
				0, 0, 0, 1, 0
				]
			}
		},
		{ _colorMatrixFilter:{
			matrix:[
				1, 0, 0, 0, -255,
				0, 1, 0, 0, -255,
				0, 0, 1, 0, -255,
				0, 0, 0, 1, 0
				]
			}
		},
		2,
		Quart.easeOut);
	tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));

	stage.addEventListener(MouseEvent.CLICK, hnClick);
}

private function hnClick(e:MouseEvent):void	{
	tg.stopOnComplete = false;
	tg.togglePause();
}

– DropShadowFilter

private function setTween():void{
	box.filters = [new DropShadowFilter(4, 0, 0x000000, 0, 4, 4)];
	t = BetweenAS3.tween(box,
		{ _dropShadowFilter:{
			alpha:1,
			angle:365,
			distance:16
		} },
		{ _dropShadowFilter:{
			alpha:0,
			angle:0,
			distance:16
		} },
		2,
		Quart.easeOut);
	tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));

	stage.addEventListener(MouseEvent.CLICK, hnClick);
}

private function hnClick(e:MouseEvent):void	{
	tg.stopOnComplete = false;
	tg.togglePause();
}

– GlowFilter

private function setTween():void{
	box.filters = [new GlowFilter(0x000000, 1, 0, 0, 2, 3)];
	t = BetweenAS3.tween(box,
		{ _glowFilter:{
			color:0x000000,
			alpha:1,
			blurX:16,
			blurY:16,
			strength:2
		} },
		{ _glowFilter:{
			color:0x000000,
			alpha:0,
			blurX:16,
			blurY:16,
			strength:2
		} },
		2,
		Quart.easeOut);
	tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));

	stage.addEventListener(MouseEvent.CLICK, hnClick);
}

private function hnClick(e:MouseEvent):void	{
	tg.stopOnComplete = false;
	tg.togglePause();
}

우선, 다수의 트윈을 동시에 재생하는 방법을 알아보겠습니다.
아래 무비를 클릭하면 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();
		}
	}
}

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

// tween이 종료될 때 이벤트 발생
var t:ITween = BetweenAS3.to(box, {x:280}, 1.5, Bounce.easeOut);
t.addEventListener(TweenEvent.COMPLETE, hnTweenComplete);
t.play();

private function hnTweenComplete(e:TweenEvent):void
{
    trace("TweenComplete");
}

// tween이 종료될 때 이벤트 발생(변수전달 가능)
var t:ITween = BetweenAS3.to(box, {x:280}, 1.5, Bounce.easeOut);
t.onComplete = hnTweenComplete;
t.onCompleteParams = ["param1", "param2"];
t.play();

private function hnTweenComplete(_param1:String, _param2:String):void
{
    trace(_param1, _param2);
}

아래는 스테이지를 클릭하면 작은 사각형 박스가 지정한 위치로 트윈되는 무비입니다.
하지만, 스테이지를 연속으로 클릭하면 트윈이 좀 엉성하게 재생되는 것을 볼 수 있습니다.
스테이지를 클릭할 때마다 activeMotion()함수를 호출하기 때문인데요.
YangGOON님께서 알려주신 코드가 이럴 때 유용하게 사용될 것 같네요.

public class BetweenAS3Test extends Sprite {

	private var tween:ITween;
	private var box:Sprite;

	public function BetweenAS3Test():void {
		box = new Sprite();
		box.graphics.beginFill(0x666666, 1);
		box.graphics.drawRect(-10, -10, 20, 20);
		box.graphics.endFill();
		box.x = box.y = 20;
		addChild(box);

		stage.addEventListener(MouseEvent.CLICK, hnClick);
	}

	private function hnClick(e:MouseEvent):void {
		trace("hnClick");
		activeMotion(box, 480, 80, 1);
	}

	private function activeMotion(target:Object, xPos:int, yPos:int, timeValue:Number):void {
		this.tween = BetweenAS3.tween(target, { x:xPos, y:yPos }, { x:20, y:20 }, timeValue, Cubic.easeInOut);
		this.tween.play();
	}
}

위 코드에 YangGOON님께서 알려주신 코드를 추가해 보았습니다.
activeMotion()함수가 호출될 때 지금 트윈이 재생 중인지를 체크 후 재생 중이라면 removeTween()함수를 호출합니다.
이렇게 되면 스테이지를 연속으로 클릭해도 클릭할 때마다 트윈을 처음부터 재생해 줍니다.
조금 응용한다면 트윈이 재생 중일 경우 마우스 이벤트를 막아두는 것도 방법이 되겠네요~~

public class BetweenAS3Test extends Sprite {

	private var tween:ITween;
	private var box:Sprite;

	public function BetweenAS3Test():void {
		box = new Sprite();
		box.graphics.beginFill(0x666666, 1);
		box.graphics.drawRect(-10, -10, 20, 20);
		box.graphics.endFill();
		box.x = box.y = 20;
		addChild(box);

		stage.addEventListener(MouseEvent.CLICK, hnClick);
	}

	private function hnClick(e:MouseEvent):void {
		trace("hnClick");
		activeMotion(box, 480, 80, 1);
	}

	private function activeMotion(target:Object, xPos:int, yPos:int, timeValue:Number):void {
		if (this.tween && this.tween.isPlaying) this.removeTween();

		this.tween = BetweenAS3.tween(target, { x:xPos, y:yPos }, { x:20, y:20 }, timeValue, Cubic.easeInOut);
		this.tween.play();
	}

	private function removeTween():void {
		trace("removeTween");
		this.tween.stop();
		this.tween = null;
	}
}

.to

// box의 x값을 현재 위치에서 280까지 이동
var t:ITween = BetweenAS3.to(box, {x:280}, 1.5, Bounce.easeOut);
t.play();

.from

// box의 x값을 280에서 현재 위치로 이동
var t:ITween = BetweenAS3.from(box, {x:280}, 1.5, Bounce.easeOut);
t.play();

.stopOnComplete

// box의 x값을 현재 위치에서 280까지 이동(무한반복)
var t:ITween = BetweenAS3.to(box, {x:280}, 1.5, Bounce.easeOut);
t.stopOnComplete = false;
t.play();

.delay

// tween을 지정한 시간만큼 지연해서 실행
var t:ITween = BetweenAS3.tween(box, {x:280}, null, 1.5, Bounce.easeOut);
BetweenAS3.delay(t, 1.0).play();

.reverse

// tween을 역으로 실행
var t:ITween = BetweenAS3.tween(box, {x:280}, null, 1.5, Bounce.easeOut);
BetweenAS3.reverse(t).play();

.scale

// tween의 스케일을 설정(4.0으로 지정했기 때문에 6초(1.5 x 4.0) 동안 tween이 실행된다.)
var t:ITween = BetweenAS3.tween(box, {x:280}, null, 1.5, Bounce.easeOut);
BetweenAS3.scale(t, 4.0).play();

.slice

// tween의 특정 부분만 실행(0.4초에서 1.2초 사이의 구간만 실행)
var t:ITween = BetweenAS3.tween(box, {x:280}, null, 1.5, Bounce.easeOut);
BetweenAS3.slice(t, 0.4, 1.2).play();

.repeat

// 해당 tween을 설정한 횟수만큼 반복해서 실행
var t:ITween = BetweenAS3.tween(box, {x:280}, null, 1.5, Bounce.easeOut);
BetweenAS3.repeat(t, 3).play();

// 위의 메서드들을 중복 실행
var t:ITween = BetweenAS3.tween(box, {x:280}, null, 1.5, Bounce.easeOut);
BetweenAS3.delay(
	BetweenAS3.repeat(
        BetweenAS3.reverse(
            BetweenAS3.scale(
                BetweenAS3.slice(t, 0.4, 1.2),
                3.0
            )
        ), 3
    ), 1
).play();

아직은 알파버전이지만, 뛰어난 퍼포먼스와 다양한 기능을 가진 BetweenerAS3 라이브러리에 대해 익혀둘 필요가 있다고 생각되어, 차근차근 익혀가면서 메모를 남겨둘까 합니다.

우선, 가장 기본적인 tween메서드의 인수에 대해 살펴보면,

BetweenAS3.tween(Target, ToValues, FromValues, Time, Easing);

• Target – 대상이 되는 오브젝트
• toValues – tween으로 적용 될 값
• fromValues – tween이 시작될 때의 값
• Time – tween이 진행되는 시간
• Easing – easing의 종류

그리고, 아래는 기본적인 Tween 적용 예입니다.

package {
	import flash.display.Sprite;

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

	public class BetweenAS3Exam extends Sprite
	{
		public function BetweenAS3Exam()
		{
			var box:Sprite = new Sprite();
			box.graphics.beginFill(0x000000);
			box.graphics.drawRect(-10, -10, 20, 20);
			box.graphics.endFill();
			addChild(box);

			var t:ITween = BetweenAS3.tween(box, {x:200, y:200}, {x:0, y:0}, 0.6, Bounce.easeOut);
			t.play();
		}
	}
}

한가지 주의해야 할 점은, 다른 tweening 라이브러리는 메서드를 호출하면 바로 tweening이 실행되었지만, BetweenAS3는 play(); 메서드를 호출하지 않으면 tweening이 시작되지 않습니다.

아래는 tween메서드의 몇 가지 활용 예입니다.

// box의 x값을 현재 위치에서 200까지 이동
var t:ITween = BetweenAS3.tween(box, {x:200});
t.play();

// box의 x값을 100에서 200까지 이동
var t:ITween = BetweenAS3.tween(box, {x:200}, {x:100});
t.play();

// box의 x값을 100에서 현재 위치로 이동
var t:ITween = BetweenAS3.tween(box, null, {x:100});
t.play();

// ($를 붙이면 상대값으로 계산) box의 현재 x값이 50이라면 150(100+50)에서 250(200+50)까지 이동
var t:ITween = BetweenAS3.tween(box, {$x:200}, {$x:100});
t.play();