BetweenAS3 베지어를 이용한 트윈
BetweenAS3로 베지어 가이드를 만들고, 만들어진 가이드를 이용해 트윈을 적용할 수 있습니다.
bezier관련 메서드는 tween메서드에 controlPoint라는 매개변수가 더해진 형태로, controlPoint 매개변수의 데이터에 의해 만들어진 베지어 가이드에 따라 트윈이 적용됩니다.
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();
}
}
}

오오..재밌네요 +_+
유용한 강좌 감사합니다 !!
Siaa Reply:
March 3rd, 2010 at 6:48 pm
오늘 제 블로그 1년치 코멘트를 날려주시는군요 !+.+!
아직 베타라서 그렇기 정식 릴리즈되면 꽤나 위력을 발휘할 트위닝엔진이랍니다~
시아님 예제대로 따라해봤는데..
이거 잼나네욤 ㅎㅎ
사각형이 트윈하면서 흔적(?)이 생기는 그림자와..
베지어 좌표와 선은…따로 작업하신건가요 ㅎ_ㅎ
Siaa Reply:
March 5th, 2010 at 12:08 pm
네~ 이동경로, 베지어 포인트, 이동경로의 표시는 이해를 돕기 위해서 따로 넣어두었습니다.
아직은 TweenMax를 주로 사용하고 있지만,
정식버전이 나오면 바로 갈아타려구요.