BetweenAS3 베지어를 이용한 트윈

BetweenAS3 — Tags: , , , — Siaa @ 11:11 pm

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

  • Share/Bookmark

4 Comments »

  1. 오오..재밌네요 +_+
    유용한 강좌 감사합니다 !!

    Siaa Reply:

    오늘 제 블로그 1년치 코멘트를 날려주시는군요 !+.+!
    아직 베타라서 그렇기 정식 릴리즈되면 꽤나 위력을 발휘할 트위닝엔진이랍니다~

    Comment by 붉은고래 — 2010/03/03 @ 2:15 pm
  2. 시아님 예제대로 따라해봤는데..
    이거 잼나네욤 ㅎㅎ
    사각형이 트윈하면서 흔적(?)이 생기는 그림자와..
    베지어 좌표와 선은…따로 작업하신건가요 ㅎ_ㅎ

    Siaa Reply:

    네~ 이동경로, 베지어 포인트, 이동경로의 표시는 이해를 돕기 위해서 따로 넣어두었습니다.
    아직은 TweenMax를 주로 사용하고 있지만,
    정식버전이 나오면 바로 갈아타려구요.

    Comment by 붉은고래 — 2010/03/03 @ 10:51 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2010 blog.flasia.com | powered by WordPress with Barecity