Document Class, _level0 사용하지 않기 - 플래시의 디스플레이 구조 파악하기

오늘 한국 AutoDesk 사로부터 좋은 소식을 들었습니다.

아마도, 이에 대해서는 차차 글을 올릴 일이 생길겁니다.
어쨌든 CLIK 폭주 포스팅 이외에 지금 글을 올릴 타이밍이 아닌데 감사 포스팅 하나를 써야겠다는 생각이 들었네요...

그럼 각설하고... ㅋㅋㅋ


1. 뭐라는 거냐? 타임라인 코딩하라고?

제목부터 충격적입니다.


Document Class 를 사용하지 말라니, 타임라인에 코드를 작성하란 소리인가? 라고 생각하시는 분이 계실지 모릅니다.
당연히 아닙니다.

Document Class 를 사용하되 Document Class 컨테이너를 쓰지 않는 방법(?)을 말하고자입니다.

as2에 익숙하신 분은 더 쉽게 받아들이실지도 모르겠네요. _level 을 사용하는 법을 말하려는 겁니다.


여러분이 만드는 as3의 Document Class 는 바로 root 입니다. as2에서는 메인 타임라인이 바로 _root 이자 _level0 입니다.

그런데 그 윗단계의 컨테이너가 있다는 걸 아십니까? 바로 Stage 입니다.



2. 시작점 클래스


전에 scaleform 과 flash player 를 동시에 지원하는 Document class 만들기 라는 포스팅에서 시작점 클래스에 대해서 말한 적이 있습니다.

그 때도 말했지만 다시 한번 간단히 짚고 넘어가보죠.

플래시 실행순서를 볼까요?

1. 플래시 / 스케일폼 vm이 실행된다
2. swf 를 로드한다
3. swf 안의 시작점 클래스의 생성자 함수로 객체를 만들어 stage 에 addChild 한다. 이 순간 Event.ADDED_TO_STAGE 이벤트가 발생한다

순서를 간략히 줄여서 말했으니 자세한 글은 hika 님의 글을 읽어보시기 바랍니다.


자, addChild 를 한답니다. Sprite 에 addChild 하는 것과 똑같지 않나요? stage도 똑같은 DisplayObjectContainer 라는 얘기입니다.
그러면 꼭 Document Class 만 addChild 될까요? 아니죠. 똑같이 stage.addChild(new Sprite) 가 됩니다.


그러면 as2는 어떻게 되느냐...

아시다시피 as2는 addChild 가 없습니다. as3처럼 new MovieClip 이 되질 않죠.

as2의 MovieClip 은  as2 의 native code 와는 관련없는 일종의 DOM 객체입니다.
attachMovie 라는 것은 사실 MovieClip 이라는 그래픽으로 디스플레이가 가능한 DOM 객체를 as2와 통신되도록 연결해주고, 그 DOM 이 로드된 순간(onLoad 된 순간) identifier 값으로 들어온 클래스를 매핑시켜주는 겁니다.

어쨌든 attachMovie 나 createEmptyMovieClip 을 사용해서 MovieClip 을 생성해야 하는데 as2에는 stage 를 가르키는 포인터가 없네요...
as2의 Stage 는 해당 컨테이너를 가르키는게 아니고, 속성만을 사용할 수 있기 때문입니다. 


대신 독특한 전역함수가 하나 있는데요. loadMovieNum 이라는 놈입니다.

loadMovieNum(url:String, level:Number):Void 

라고 레퍼런스에 써있네요. 여기서의 level 이 바로 Stage 내의 Depth 를 말합니다. 앞서 말했듯 _root 는 _level0 이니 필요하면

loadMovieNum(url, 1)

이라고 실행하면 _level1 에 해당 무비클립이 로드됩니다.




3. 아놔... 당췌 이걸 뭐에다 쓰라고 ?
 

UI 작업을 하다보면 Display 객체들의 편한 관리를 위해 Container 를 많이 만들어 사용합니다.

일반적으로 다음과 같은 것들이 필요하겠죠.

1. hp/mp 창, 캐릭터 정보창, 인벤토리 등을 담고 있는 UI 컨테이너
2. 툴팁 컨테이너
3. 얼럿창 컨테이너
4. 로딩 컨테이너

물론 줄여서 하나의 컨테이너로 만들어 쓸 수도 있겠지만 편하게 관리하려면 꽤 좋은 방식입니다.
그런데 이렇게 관리하려면

root.uiContainer.inventory / _level0.uiContainer.inventory  뭐 이렇게 접근해야 할겁니다.

그런데 외부에 따로 컨테이너를 만든다면?? (as2로는 다른 레벨로 해당 UI리소스를 불러온다면?)

root.inventory 

바로 이렇게 불러들여도 되는 것이지요... 툴팁이나 그 이외의 것들은 모두 다른 컨테이너 안에 있으니까 섞일(?) 일이 없습니다.

_level1에 로드된  toolTipContainer swf는 클라는 어떻게 접근해야 하냐고요? 만약 클라가 접근이 어렵다면, 내부에서 경로를

ExternallInterface.call("toolTipinit",  _level1);

이렇게 직접 포인터를 날려주면 되죠.



4. 장/단점을 찾아보자


장점

1. 컨테이너 단계가 하나 줄어든다. 그로 인해 눈꼽만큼의 성능향상
2. 편한 Display 객체 관리 : uicontainer 즉, Document Class 는 정말 ui 리소스만 관리하면 된다.


단점

1. 플래시 디스플레이 구조를 잘 모르는 사람은 코드가 어렵다


아마도 이정도의 장/단점이 있을 것이라고 생각됩니다.

장/단점이 있으니 어떻게 사용할 지는 여러분의 몫입니다. 꼭 이렇게 고쳐 써라가 아니고요...


현재 저도 이렇게 안씁니다.(아마도 저희 UI가 as3 로 넘어갈 때가 되어야, 진짜 제 코드가 적용될 듯 합니다)

게임쪽 ui 개발이란 것이 겪어보니 참 그렇습니다.
더 나은 구조가 있고, 더 나은 방식이 있어도 마음대로 엎고 고치고 할 수 있는게 아닙니다.

중간에 투입된 저로서는 참으로 답답한 코드나 방식들이 많아요...


웹앱을 만들때 처럼 한두명이 개발하는 것이 아니기 때문입니다.
이쪽 일이란게 한번 시작하면 돌리기란 그 몇배의 어려움이 생기기 마련이어서 마음에 안드는 방식으로 계속 개발을 해나가야 하는 부분들이 많네요.




5. 요약
 
자, 훼이크에 속았습니다. 오늘의 포스팅 주제는 사실 플래시의 디스플레이 구조를 이해해보자 랄까요?

요약을 좀 해보죠


1. root 위에 컨테이너가 하나 더 있다. 왜 활용 안하나?

2. as3 : root == Document Class, as2 : _root == _level0

3. as3 : stage = root.parent, as2 : ? 미지의 Stage

4. 툴팁컨테이너나 얼럿 컨테이너를 root 안에 만들지 않아도 된다.

5. 아, 어려워요~