[Flash 3D].12 Tween (1.TweenMax)
이번 시간은 약간 번외편이 될 지도 모르겠습니다.
좀더 역동적인 화면 구성을 위해 가만히 있는 3D 객체 보다 움직임이 있는 예제를 보여드리도록 하겠습니다.
이에 먼저 TweenMax 에 대해 소개하는 시간을 갖도록 하겠습니다.
플래쉬기본적인 Tween 클래스를 사용하여 모션을 적용한적이 있다면 더욱 쉽게 접하실 수 있으리라 생각됩니다.
먼저 TweenMax 에 대해 간략히 설명드리겠습니다.
TweenMax 는 Jack Doyle 라는 분이 만든 공개 라이브러리 입니다.
제가 알고 있는 트윈중 성능도 빠르며 기능도 거의 대부분을 지원합니다.
좀더 자세한 정보를 원하시면 원본 링크인 http://blog.greensock.com/ 에 들러보시는걸 권해드립니다.
Basic Code
가장 기초적인 예문 한줄을 통해 설명 드리도록 하겠습니다.
정말 간단한 한줄의 코드로 객체를 1초동안 서서히 X 좌표를 200 까지 움직여주는 모션을 제작하셨습니다. ㅎㅎ
그럼 함수 설명을 하겠습니다.
TweenMax 클래스에서 to 라는 static 함수를 호출합니다.
Tween 을 실행하는 static 함수 종류에는 to 와 함께 from 이란 함수가 있습니다.
함수 인자로 들어가는 값은 둘다 똑같습니다 다만 적용시에 from 의 경우
현재 적용될 값을 초기값으로 사용하여 원래의 위치로 돌아오는 Tween 을 수행합니다.
위의 예제를 예로 들면 mc 객체는 먼저 x좌표 200의 위치로 옮겨진 후 원래의 mc 좌표로
서서히 이동하게 됩니다.
다음 2) TweenMax.to( mc, 1, {x:200} );
함수 호출시 첫번째 들어가는 인자로 Tween 을 적용시켜줄 객체 원본에 해당하는 Object 가 들어갑니다.
여기에서는 mc 라는 객체를 넣어 사용하겠다는 것 입니다.
다음 3) TweenMax.to( mc, 1, {x:200} );
두번째 인자도 필수요소로서 Tween 이 적용될 시간을 나타냅니다. 시간 단위는 초(sec) 단위이며 소수점
단위의 적용도 당연 가능합니다.
마지막 4) TweenMax.to( mc, 1, {x:200} );
마지막 인자로 Object 형의 자료형이 들어갑니다. Object 형의 안에는 각종 Tween 값과 TweenMax 에서
쓰이는 설정값 들을 지정해 줄 수 있습니다.
굉장히 많은 종류의 설정값들이 있는데 우선 위의 한줄 예제에서는 가장 간단한 Tween 값 한가지만을
설정 하였습니다.
위에서 가장 기본적인 Tween 적용 방법을 알아 보았는데요 이번엔 여러가지 속성을 사용해서 Tween 하는 방법에
대해 알아보겠습니다.
이번엔 속성값만을 보겠습니다.
1) {x:200, y:200, rotation:360, autoAlpha:0}
먼저 아까 설명한것과 같이 mc 객체가 가지고 있는 기본 속성값을 먼저 사용하여 변환을 해 줍니다.
위와같이 해주면 대각선으로 한바퀴 회전하며 움직이는 Tween 이 되겠죠?
2) {x:200, y:200, rotation:360, autoAlpha:0}
이번 속성부터는 TweenMax 만의 특수한 속성들 입니다.
autoAlpha 란 mc 객체의 alpha 값이 0 이하로 떨어지면 자동으로 mc 객체의 visible 을 자동으로 false
시켜주는 역활을 하는 속성 입니다. 반대로 visible 이 false 인 객체에 이 속성값을 사용하여 0보다 큰
alpha 값을 주게 되면 자동으로 visible 을 true 로 만들어 주는 역활도 합니다.
이처럼 TweenMax 에서는 기본적으로 제공해주는 다양한 속성 값 들이 있습니다.
이를 사용하면 보다 강력한 효과들을 쉽게 사용할 수 있게 도와줍니다.
Special Properties
그럼 위와같은 특수 속성값에는 어떤것들이 있는지 알아보겠습니다.
( 너무 많은 속성 값이 있어 중요하거나, 자주쓰이는 것 위주로 설명 드리겠습니다. )
단위는 마찬가지로 초(Sec) 단위 입니다.
ease : Function – Tween 의 모션을 설정하는 것으로 Strong, Elastic 등의 각종 값을 넣어
모션 종류를 다양하게 설정 할 수 있습니다.
글 하단에 예제 swf 파일에서 확인하실 수 있습니다.
tint : uint – 16진수의 컬러값으로 ex) 0xFF0000, 등의 값을 넣으면 해당 색상으로 서서히
Tween 됩니다.
volume : Number – 사운드의 볼륨값을 조절해주는 속성으로
MovieClip, SoundChannel, NetStream 등의 객체에 적용이 가능 합니다.
frame : int – gotoAndStop 과 같이 실제 MovieClip 의 frame 을 이동시켜주는 속성 입니다.
다만 일반 Tween 과 달리 많이 끊어지는 현상이 나타납니다.
timeScale : Number – 기본값은 1 이며 값이 커질수록 Tween 에 명시된 duration 보다 느려집니다.
shortRotation : Number – 현재 target 이 되는 객체에 회전값을 비교하여 회전이 짧게 되는쪽으로
회전하는 속성 입니다.
예를들어 rotation 이 0 인데 그냥 기본 rotation 의 속성을 사용하여
350 을 주면 시계방향으로 거의 한바퀴를 돌지만
이 속성값을 350 으로 두면 반시계방향으로 조금 돌게 됩니다.
yoyo : Number – 여러분 들이 알고있는 요요와 같이 Tween 을 진행 한 후 종료 후에 다시
돌아오는 값입니다. 값을 1로 줄 경우 진행 후 원래자리로 돌아오게 됩니다.
bezier : Array – 정해진 좌표까지 이동하는 중간에 bezier 속성에 등록된 좌표값의 위치근처를
비켜가는 곡선 형식의 이동으로 만들어 줍니다. 예를들어
{ x:300, y:0, bezier:[{x:400, y:50}, {x:100, y:100}] }
위와 같이 속성을 정의해 줄 경우 target 객체는 bezier 배열속성의 젗번쨰 좌표값인
x:400, y:50 까지 빠르게 접근했다가 다음 접근값인 x:100, y:100 까리로 다시 이동
후에 마지막 도착점인 x:300, y:0 로 이동하게 됩니다. 이 과정에서 target 객체는
각 좌표까지의 이동을 직선이 아닌 서로 연계된 부드러운 곡선으로 이동하게 됩니다.
orientToBezier : Array (or Boolean) – 이 값은 바로 위에서 설명드린 bezier값에 따라 부드럽게 이동
중인 객체가 이동시에 진행방향을 향해 회전을 해줄지를 결정하는 속성값 입니다.
Array 혹은 Boolean 형식 두가지를 사용할 수 있으며 단순히 true 값을 주는 경우
자동으로 회전합니다.
이 값은 나중에 3D 회전을 할 경우에도 사용되게 되는 값으로 나중에 조금더
자세히 살펴보도록 하겠습니다.
overwrite : int – 이 속성 역시 중요한 역활을 담당합니다.
한개의 Target 에 여러가지 Tween 을 추가하고자 할때 어떻게 작동할지에 대한
설정 값 입니다. 설정값으로는 0 (NONE), 1 (ALL), 2 (AUTO), 3 (CONCURRENT)
이렇게 4가지 값이 있으며 각각의 값을 설명 드리면
[ 0 : 어떠한 Tween도 덮어씌우지 않는다. 가장 빠르게 작동하는 모드이기도 하며
다만 그에따라 사용자가 직접 겹치는 Tween 을 주지 않도록 신경써야 한다.]
[ 1 : 같은 Target 에 대한 Tween 이 새로 정의될때 이전까지의 모든 Tween 을
자동으로 제거하고 새로 적용된 Tween 만을 실행하게 한다. ]
[ 2 : 새로 생성된 Tween 과 이전 Tween 과 비교하여 중복되는 속성값만 새로 적용된
트윈값으로 바꾸어 준다. ]
[ 3 : 1번과 같은 작동을 하는 속성이다 다만 이 값은 해당 Tween 이 실행될 시간에
비교하여 새로운 Tween 으로 덮어 씌운다. 만약 새로 적용한 Tween 에
delay 속성이 있어서 이전 Tween이 끝날 시간과의 간격차가 있다면 이전
Tween 에는 아무런 영향을 미치지 않고 작동하게 된다. ]
※ TweenLite 로 사용시에는 이 속성을 정상작동하게 하기 위해서는
프로그램 초반에 OverwriteManager.init(); 한번 꼭 호출해 주어야 합니다.
TweenMax 는 상관 없이 그냥 사용 가능 합니다.
이 외에 아래와 같이 각종 Filter 값을 설정하는 속성들이 있습니다.
blurFilter : Object
glowFilter : Object
colorMatrixFilter : Object
dropShadowFilter : Object
bevelFilter : Object
위의 모든 내용과 트윈의 종류 및 모션 값등을 직접 Test해볼 수 있게 개발자 측에서 공개해준 예제가 있습니다.
아래 그 예제를 링크 합니다.
Instance Methods
속성에 이어 함수 설명에 들어가도록 하겠습니다.
위에 설명드린 속성에 비해 Instance Methods 는 그다지 많지 않아 모두 설명 드리도록 하겠습니다^^
resume():void – pause 로 멈추어진 Tween 을 다시 시작 시켜 줍니다.
restart(includeDelay:Boolean):void – 해당 Tween 을 처음으로 돌려 재시작 해줍니다.
reverse(adjustDuration:Boolean, forcePlay:Boolean):void – Tween 되던 객체를 중간에
반전시켜 거꾸로 돌아가게 합니다.
property 로 넣어준 속성 값을 변경하여 이동합니다. 중간에 모션이 멈추거나 재시작
하지 않고 부드럽게 바뀌게 됩니다.
사용하실 수 있습니다. 이벤트의 종류로는 TweenEvent 에 모두 정의되어 있습니다.
Static Methods
마지막으로 TweenMax 의 정적 메소드 들을 소개 하겠습니다.
단순하게 모션하나 주려고 보셨다면 굉장히 지루해 질 수 있는 설명이 아니었을까 하고 조심스럽게 생각해봅니다. ㅋㅋㅋㅋ
자. 이렇게 TweenMax 에 대해서 살펴보셨으니!. 이제 그에 상응하는 뭔가 움직이는걸 해봐야겠죠^^?
그럼 먼저 아래 예제를 보시겠습니다~~