구글 Tweener 로 베지어 곡선 이동하기

전편에서 배운 내용에다가 2,3라인을 추가해 보겠습니다.

2번라인은 CurveModifiers라는 객체를 추가하고

3번라인은 CurveModifiers를 초기화 하는 구문입니다.

이렇게 하고나서 _bezier옵션을 사용하면 베지어 곡선을 만들 수 있습니다.

 

다음 액션을 구현해 볼까요?

 

import caurina.transitions.Tweener;

import caurina.transitions.properties.CurveModifiers;

CurveModifiers.init();

 

Tweener.addTween(mc, {x:280, y:100, _bezier:{x:200, y:200}, time:2, transition:"easeoutquad"});

 

무비클립이 (200,200) 지점을 (콕찍고 가는 것이 아니라)경유해서 완만하게 움직이는 것을 볼 수 있습니다.

마치 펜툴의 베지어 커브 곡선과 같은 모양으로 움직이죠.

 

 

이번에는 배열을 사용해서 여러 점을 경유해서 움직이는 것을 구현해 보겠습니다.

 

import caurina.transitions.Tweener;

import caurina.transitions.properties.CurveModifiers;

CurveModifiers.init();

 

var path_array:Array = new Array();

path_array.push({x:100, y:200});

path_array.push({x:200, y:30});

Tweener.addTween(mc, {x:280, y:100, _bezier:myPath, time:2, onComplete:rep, transition:"easeoutquad"});

 

//모션이 끝나면 함수실행

function rep(){

 mc.x=0;

 mc.y=0;

 Tweener.addTween(mc, {x:280, y:100, _bezier:myPath, time:2, onComplete:rep, transition:"easeoutquad"});

}

베지어커브여러지점경유.fla