본문 바로가기

강좌/트윈맥스를 쓰자!

트윈맥스를 쓰자! [ 03 ] - Tween 인스턴스 만들고 제어하기

대부분 트윈맥스를 사용하실 때에는 TweenMax 클래스의 static 함수 to나 from을 이용해 다음과 같이 이용하지만,

import com.greensock.TweenMax;

TweenMax.to( obj, 1, { x:500 } );

트윈맥스도 다음과 같이 인스턴스로 생성할 수 있습니다.

import com.greensock.TweenMax;

var tween:TweenMax = TweenMax.to( obj, 1, { x:500 } );


인스턴스로 생성된 트윈맥스는 다양한 활용이 가능한데, play()하거나 stop() 하거나 resume()하거나 reverse() 할 수 있고, repeat이나 yoyo같은 설정을 할 수도 있습니다.

import com.greensock.TweenMax;
import com.greensock.easing.Cubic;

var tween:TweenMax = TweenMax.to( circle, 1, { ease:Cubic.easeIn, y:350 } );
tween.repeat = -1;
// 반복 횟수 설정. -1 은 무한반복
tween.yoyo = true;
// yoyo는 반복이 재생-역재생의 반복 형태가 되게 합니다

이런 방식의 이용은 꼭 인스턴스를 생성해서 해야만 하는건 아닙니다. Documentation에 보면 이런 부분들도 전부 Special Properties로 존재하고 있습니다. Special Properties를 이용하면 다음과 같아지겠죠.

import com.greensock.TweenMax;
import com.greensock.easing.Cubic;

TweenMax.to( circle, 1, { ease:Cubic.easeIn, y:350, yoyo:true, repeat:-1 } );

자꾸 반복되는 설명이 되는 것 같지만, 코드가 길어서 보기 싫고 읽기 어려워진다면 Object를 생성해서 정리하고 집어넣을 수도 있습니다.

import com.greensock.TweenMax;
import com.greensock.easing.Cubic;

var params:Object = new Object();
params.ease = Cubic.easeIn;
params.y = 350;
params.yoyo = true;
params.repeat = -1;
TweenMax.to( circle, 1, params );

활용하는 방법은 여러가지입니다. 취향대로 활용하시면 됩니다.

계속해서 트윈을 생성하지 않고 한번 생성한 트윈을 이용한다는 것은 장점이 될 수도 있는데, 다음과 같은 경우를 예로 들 수 있겠습니다.

import com.greensock.TweenMax;
import com.greensock.easing.Sine;
import flash.events.MouseEvent;

var tween:TweenMax = TweenMax.to( circle, 0.5, { ease:Sine.easeIn, alpha:0.5, scaleX:0.7, scaleY:0.7 } );

function overHandler( e:MouseEvent ):void
{
	tween.reverse();
}

function outHandler( e:MouseEvent ):void
{
	tween.play();
}

circle.addEventListener( MouseEvent.ROLL_OVER, overHandler );
circle.addEventListener( MouseEvent.ROLL_OUT, outHandler );

그리 복잡한 내용은 아니니 주석은 없어도 되겠죠?