세계의끝과 플래시 원더랜드

 AS2.0 환경에서 작업하는 사람들은 네비게이션을 수정해 본 정도의 스킬을 가지고 있는 디자이너인 경우가 대부분 입니다. 이 경우  구글 트위너나  TweenLite AS2.0 같이 외부 클래스를 사용하는 것은 그다지 고려의 대상이 아닌 경우가 많죠.

그래서 AS2.0 수준에서는 프레임 액션에 모든 코드를 넣고 플래시 애플리케이션을 만들게 됩니다. 애니메이션을 위한 코드 또한 예외 없이 다른 모든 코드들과 같이 프레임에 작성되어 구현하게 되죠. 아래와 같은 형태로 말입니다. 

0
1
2
3
4
5
6
7
8

//스테이지에는 각각 mc와 btn 무비클립이 놓여져 있음
function moving( $mc, $pos, $speed ) {
	$mc.onEnterFrame = function() {
		this._x += ( $pos - this._x ) * $speed;
	}
}
button.onRelease = function() {
	moving( mc, 300, 0.2 );
}

나름대로 굉장히 간결한 형태입니다. 움직이는 요소들이 많지 않거나, 제한된 범위 내에서 사용하기에는 무리가 없어보입니다.

그런데 _x 좌표말고 _y 좌표라던가, 아니면 _alpha 라던가, _xscale, _height 같이 다른 속성의 애니메이션이 되어야 한다면, 해당하는 속성별로 함수를 종류별로 만들어야 됩니다.

이런경우 변화되어야하는 속성까지 같이 인자로 넘겨버린다면 이야기가 달라지겠죠. 변경하고 싶은 속성은 문자열 형태의 인자로 보내고 함수내부에서는 [] 연산자로 처리해버리면 됩니다.

0
1
2
3
4
5
6
7
8
9
10
11

function moving( $mc, $var, $pos, $speed ) {
	$mc.onEnterFrame = function() {
		this[$var] += ( $pos - this[$var] ) * $speed;
		if ( $pos == Math.round( this[$var] ) ) {
			this[$var] = $pos;
			delete this.onEnterFrame;
		}
	}
}
button.onRelease = function() {
	moving( mc, "_x", 300, 0.2 );
}

위의 코드를 보면 마지막으로 남아있던 무비클립 속성인 this._x 부분이 this[$var] 로 변경되어 모든 속성과 수치들이 함수의 인자로 빠져나왔습니다. (보너스로, 목표하는 지점에 속성이 거의 근접해서 소숫점 이하 반올림한 좌표와 같은 경우 무비클립을 목표 위치로 옮기고 엔터프레임을 죽여서 퍼포먼스를 확보하는 if 문을 추가하였습니다.)

속성을 선택하면서 해당속성을 변경하는 이런 방식은 AS3.0에서는 어찌보면 당연한 것인데 AS2.0 에서는 속성에 언더바( _x, _alpha … )가 붙어서 뭔가 접근할 수 없는것처럼 느껴져 위와 같은 생각을 쉽게 하지 못하는 경향이 있는것 같습니다.

액션스크립트에서는 this["문자열"] 형태의 참조가 가능합니다. ( _root["문자열"], _parent["문자열"], myMc["문자열"] 모두 가능 )
뒤에 계속 참조하려면 this["문자열"].myMc.yourMc._x 와 같이 점찍고 이어가기도 가능합니다.
문자열 부분에는 위와 같이 속성이나 변수도 올수도 있고, 내부에 있는 다른 무비클립도 가능하고, 함수도 가능하고, 뭐, 안되는게 없습니다.
다른 언어 하시는 분들은 이런 형태의 참조를 보고서는 “와, 이런게 가능하네. 무진장 편하겠네요” 하더군요.
양날의 검이긴 하지만 말이죠.

코드만 있고 그림이 없으면 뭔가 섭섭하기 때문에 간단하게 아래와 같이 만들어보았습니다.