scaleform 과 flash player 를 동시에 지원하는 Document class 만들기

1. 스케일폼은 플래시와 달라요

플래시 웹앱 환경과 scaleform 의 환경은 상당한 차이가 있습니다...

첫째, http 통신을 할 수가 없다
둘째, 기본적인 키보드와 마우스 왼쪽 버튼 이벤트 말고도 여러 인터랙션이 있다.
세째, 가상폴더에서 실행된다...(udk 기준입니다... 다른 엔진도 그런지는...)...그렇기에 절대 경로를 찾기 어렵다.

이외에도 여러가지 제한이 있고, 반대로 추가적인 기능들이 있지만 일단 이렇습니다...


스케일폼에서 제공하는 scaleform.gfx.* 패키지를 보면 많은 클래스들이 있습니다. 이는 스케일폼의 여러 확장기능들을 이용하게 하기 위한 클래스들입니다.

다른 것은 둘째 치고 일단 Extensions.enabled 함수를 확인하셔야 합니다. (멤버변수가 아닌 set/get 함수입니다)
기본값은 false 이지만 이걸 true로 해두면 위에서 언급한 여러 확장기능들을 사용할 수 있게 됩니다. 



아무튼 위에서 말한대로 스케일폼은 여러 세팅할 값들이 일반적인 플래시앱과는 꽤 다르게 해줘야 합니다

그런 세팅을 해야할 곳은 바로 시작점 클래스 입니다...



2. 시작점 클래스


플래시에서는 시작점 클래스란 것이 있습니다

바로 Document Class 인데, vm이 최초에 실행할 class 를 말하는겁니다.
엄밀히 말하자면 해당 class를 인스턴스로 만들어 stage에 addChild 하는 행위를 말합니다... 그렇게 인스턴스화 되는 과정에서 해당하는 class 의 생성자 함수가 실행되는 것이지요...

시작점 클래스에 관한 포스팅이 아니니, 자세한 내용은  http://www.diebuster.com/flash/98 을 읽어보시기 바랍니다...



3. 본격적으로~

function Main(){
    addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}

function onAddedToStage($e:Event):void{
    removeEventListener(Event.ADDED_TO_STAGE,  onAddedToStage);
}

자, 여기서부터입니다. 우리는  onAddedToStage 를 구현해줘야 하죠... 사실 다른 분들은 생성자 함수부터 많은 세팅들을 하는 경우가 있을겁니다.
뭐, 여러가지 이유가 있지만... 일단 제가 저기서부터 세팅을 시작하는 이유가 있습니다...

스케일폼 UI 개발 특성상 여러개의 swf로 나눠지게 됩니다... 최상위 컨테이너인 Main 에서 여러 인벤토리, 캐릭터 정보창, 상점 등등... 여러 swf를 불러서 사용하는 형태가 되는 것이지요.

툴팁의 컨테이너를 따로 만들 수도 있을 거고, 클라이언트와 통신하는 객체를 따로 만들어 불러들일 수도 있을겁니다...


그럼 제가 인벤토리를 만들고 있는 상황이라면 인벤토리의 Main은 테스트할 때 말고는 실제 구동시에는 Main이 아니라는 뜻입니다... 최상위 컨테이너인 Main에서 부른 형태일테니까요...

자, 그럼 현재의 Main이 진짜 Main인지 아닌지를 판단하는 방법이 필요한데 바로

(stage === this.parent)  로 판단하시면 됩니다...

그럼 다음과 같은 코드가 이어질 겁니다...

if (stage === this.parent) {
    Extensions.enabled = true;

    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE; 

}

뭐, 이정도일 겁니다... Extensions.enabled 에 대해서는 처음에 설명했지요???

이 다음 실행될 구문은 바로 

if (stage === this.parent) {
    Extensions.enabled = true;

    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;

    if (Extensions.enabled) {
    }
    else{
    }

}

입니다. 여기서부터가 이제 아스트랄해지는 부분입니다...

바로 앞선 구문에서  Extensions.enabled 에 true 값을 대입연산자인 = 로 줬습니다...
그런데 바로  Extensions.enabled 값이 true 인지를 판단한다라...?

이제  Extensions class를 다시 열어봐야할 시간이 됐습니다.


4.  Extensions class

 // Enable/disable GFx extensions

static public function set enabled(value:Boolean) : void {}

static public function get enabled() : Boolean { return false; }

Extensions class의  enabled 함수가 구현되어 있는 모습입니다... 뭔가 이상하지 않나요??? 보통 set/get 함수를 만들면 다음과 같이 해야 하지 않나요?

static private var _enabled:Boolean = false;

static public function set enabled(value:Boolean) : void {
     _enabled = value;
}

static public function get enabled() : Boolean { return  _enabled ; }

이렇게 말이죠... 그런데 Extensions class 안에는 _enabled 이 없습니다...

이녀석은 바로 scaleform 에 저장되는 값이기 때문입니다.

그렇다면 if (Extensions.enabled) 문의 비밀이 나옵니다.

Extensions.enabled = true;
if (Extensions.enabled) {
    // 이 swf 가 돌아가는 vm은 scaleform 플레이어입니다
}
else{
    // 이 swf 가 돌아가는 vm은 Flash 플레이어입니다
}

이 구문은 현재의 vm을 판단하는 부분입니다... 플래시 플레이어에는 _enabled 값이 저장될 곳이 없으니 언제나 get enabled() 가 false 만을 반환하기 때문이죠...


그런데 여기서 의문이 남습니다... 어차피 scaleform으로 돌릴 것을 만드는데, 왜 flash player 에서 돌리려고 하는건가요???



5. 그러니깐 그게 왜 필요한데... 어따 쓸거냐고...


스케일폼 플레이어는 디버깅에 제한을 받습니다... trace는 찍어주는데 break point 가 안먹어요...(제가 방법을 모르는 것인지는 모르겠습니다만...)

물론 하려고만 하면야 trace만으로도 잘 개발할 수 있습니다만... break point 가 좀 필요할 때가 있는 것도 사실이지요...
바로 디버깅의 편리함을 가져다 주기 위함이예요...

고작 브레이크포인트 디버깅 때문에 코드를 더럽히냐고 하실 수 있지만... 어차피 저 코드는 어떤 상황에서건 최초에 딱 한번만 실행됩니다. 런타임의 실행속도와 무관하지요...

이외에도 뭔가 다른 곳에 필요치 않을까요??? :^)


p.s. 사실 저는 다르게 만들어써요 ㅋㅋㅋ
p.s. 써놓고 보니깐 제목을 vm 판단하기...라고 지을걸 그랬나 싶다는... 이놈의 필력이란...



p.s. 12.02.15 추가

4.0.15 버전의 Extensions 클래스 안에 get isScaleform() : Boolean 과 isGFxPlayer : Boolean 속성이 생겼습니다.
이상하게 네이밍을 지은게 아니라면 이 속성으로 현재의 VM이 스케일폼인지 아닌지를 판단할 수 있을 듯 합니다