트윈맥스를 쓰자! [ 04 ] - 트윈맥스에서의 이벤트

백만년 만인 것 같습니다. 약간 바빴습니다. (...)
간단한 갤러리를 하나 구상해 봅시다. 정말 심플합니다.

사진이 몇 장 있고, 사진을 넘기는 버튼이 있습니다.
사진은 그냥 무비클립의 각 프레임에 들어있는 상태입니다.
버튼을 클릭하면 사진이 페이드아웃, 페이드인 되면서 전환됩니다.

갤러리가 동작하는 구조를 한번 생각해 보겠습니다.

1. 사진 무비클립이 페이드 아웃 된다.
2. 무비클립의 프레임이 이동한다. (다른 사진을 보여주기 위해)
3. 사진이 페이드 인 된다.

위의 세가지 동작이 순차적으로 일어나야 합니다. 문제가 되는 건 2번에 대한 부분일 겁니다.
페이드인과 아웃에 시차를 두는 방법은 이전에 배운 delay로 가능하겠지만, 프레임을 이동시키는건 트윈맥스로 해결하기 어려운 부분이죠. ( 엄연히 말하자면, 안되는 것은 또 아닙니다만 )

이 문제는 트윈맥스에서 제공하는 Special Properties를 이용해서 쉽게 해결할 수 있습니다. onComplete를 사용해 보겠습니다. 다음과 같은 코드가 되겠네요.

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

function clickHandler( e:MouseEvent ):void
{
	// 이 함수는 next 버튼을 클릭할 때 실행됩니다.
	TweenMax.to( photo, 0.5, { alpha:0, onComplete:changePhoto } );
	// 트윈이 종료되는 시점에 changePhoto 함수를 실행합니다.
}

function changePhoto():void
{
	// 이 함수의 내용은 각자 해석해 보세요.
	var n:int = photo.currentFrame + 1;
	if( n > photo.totalFrames ) n = 1;
	photo.gotoAndStop( n );
	TweenMax.to( photo, 0.5, { alpha:1 } );
}

next.addEventListener( MouseEvent.CLICK, clickHandler );

TweenMax의 Documentation(http://www.greensock.com/as/docs/tween/com/greensock/TweenMax.html)을 보면, Special Properties로 제공되는 이벤트의 종류로는 onStart, onUpdate, onComplete, onUpdate, onReverseComplete, onRepeat 등이 있다고 하네요.

다음과 같은 점들을 더 생각해 봅시다.

1. 위 예제는 버튼을 연타할 때 마다 페이드 아웃 트윈이 재실행됩니다. 페이드아웃이 거의 종료된 시점에서 클릭을 다시 하면 0.5 초만큼의 시간동안 다시 페이드아웃이 된다는 이야기죠. 페이드 아웃이 시작될 때부터 페이드 인이 끝날 때 까지는 버튼의 동작을 막아봅시다. 함수를 몇 개 추가해서 이벤트에 잘 적용하면 됩니다.
2. 트윈맥스는 사실 프레임을 제어할 수 있도록 만들어져 있습니다. 위 예제도 잘하면 하나의 함수 안에서 딜레이 처리된 트윈맥스만 가지고서 처리할 수도 있을겁니다. 크게 쓸모가 있는 시도는 아닙니다만, 가끔은 이런 시도를 해보는 것도 필요하죠.