트윈맥스를 쓰자! [ 05 ] - 트윈맥스에서의 이벤트 (2)

겨울이고 하니 눈이 내리는 플래시를 한번 만들어보겠습니다.

뭔가 아쉬운 플래시입니다. 눈도 자연스럽게 하고 싶고 눈송이 모양도 꾸미고 싶고 배경도 더 예쁘게 만들고 싶지만... 일단 지금은 최대한 심플하게 가겠습니다.

눈송이를 만들어서 라이브러리에 등록하며 Linkage를 해 놓은 상태입니다. Snow 라고 클래스 이름을 지정해 주었습니다. 다음과 같은 코드로 만들어집니다.

import com.greensock.TweenMax;
import flash.events.TimerEvent;
import flash.utils.Timer;

var _timer:Timer = new Timer( 200, 50 );
// 타이머는 200ms에 한번씩 50회 실행됩니다.

function timerHandler( e:TimerEvent ):void
{
	var snow:Snow = new Snow();
	// 미리 Linkage를 해 둔 무비클립입니다.
	snow.x = Math.random() * 500;
	snow.y = -10;
	
	TweenMax.to( snow, 3, { y:310, repeat:-1 } );
	// repeat을 설정해봅니다.
	
	this.addChild( snow );
}

_timer.addEventListener( TimerEvent.TIMER, timerHandler );
_timer.start();

50개의 무비클립이 순차적으로 생성되고, 움직이고, 그게 반복되는데.. 문제는 한번 만들어진 무비가 계속해서 같은 위치를 반복해서 떨어지게 된다는 겁니다. 한번 떨어진 후에 다시 떨어질때는 다른 자리에서 떨어지도록 하고 싶습니다. 이런 경우에는 onComplete를 이용하기 보다는 이전에 만든 TweenMax 객체를 만든 후 이벤트 핸들링을 하는 것이 더 좋습니다. 다음과 같이 수정해 보겠습니다.

import com.greensock.TweenMax;
import com.greensock.events.TweenEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;

var _timer:Timer = new Timer( 200, 50 );

function timerHandler( e:TimerEvent ):void
{
	var snow:Snow = new Snow();
	snow.x = Math.random() * 500;
	snow.y = -10;
	
	var tween:TweenMax = TweenMax.to( snow, Math.random() + 3, { y:310 } );
	// TweenMax 객체를 만듭니다.
	tween.addEventListener( TweenEvent.COMPLETE, completeHandler );
	// TweenEvent.COMPLETE 이벤트를 이용할 수 있습니다.
	// onComplete와 같은 역할을 합니다.
	
	this.addChild( snow );
}

function completeHandler( e:TweenEvent ):void
{
	var tween:TweenMax = e.target as TweenMax;
	// 이벤트 객체를 입력받으므로 target을 쉽게 추적할 수 있습니다.
	var snow:Snow = tween.target as Snow;
	// TweenMax 객체는 움직일 대상 객체 또한 가지고 있습니다.
	snow.x = Math.random() * 500;
	tween.restart();
	// 이미 종료된 트윈은 restart() 메소드로 재실행 시킬 수 있습니다.
}

_timer.addEventListener( TimerEvent.TIMER, timerHandler );
_timer.start();

결과물은 대략 다음과 같이 나오겠네요.

TweenEvent를 이용한 이벤트 처리는 이전의 on### 속성을 이용하는 것과 큰 차이가 없습니다. 일장일단이 있는데, 속성을 이용할 경우에는 인자를 받는 함수 형태를 만들어서 이용할 수 있고(이 부분은 아직 다루지 않았습니다), 트윈 이벤트를 이용할 경우에는 이벤트 정보에 대한 인자를 이용할 수 있다는 장점이 있습니다. 경우에 따라서 잘 나누어 사용하시면 되겠습니다.

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

1. 눈이 좀 더 실감나게 떨어지게 하기 위해서는 어떻게 해야 할까요.