[AS] Flash 내부 Class 구조 분석.

 

 

 

 

=================================

=================================

=================================

 

 

출처: http://wrice.egloos.com/4552711

요즘 Flash를 공부하는 중입니다.
그중에서도 오늘은 Flash 가 어떻게 동작되도록 설계되었는지 정리해볼 생각입니다.

이 내용은 모두 Flash9 도움말 파일에서 파악된 정보입니다.
원문은 도움말 파일 중에서 ActionScript 3.0 프로그래밍 > 디스플레이 프로그래밍 을 보시면 있습니다.

Class 관계 분석

세가지로 나누어서 정리하겠습니다.

1. 상속 구조
2. 소유 구조
3. 이벤트 흐름

이 세가지가 매우 밀접하게 들러붙어 있는 녀석들이기 때문에 따로 떼어 놓을수가 없습니다.


상속 구조

우선 상속 구조 그림은 도움말 파일 내부에 들어있었습니다.

그림을 설명하겠습니다.
DisplayObject라는 것은 추상 클레스 입니다. 화면상에 보여지는 모든 클레스들의 최상위 클레스입니다.
DisplayObjectContainer는 DisplayObject를 소요 할수 있는 녀석입니다. 말 그대로 컨테이너이지요. 이 소유 개념은 상속 관계와는 완전히 별개이미로 잘 구분해야합니다.

• AVM1Movie는 Flash 구버전과의 호환성을 위해 남아있는 동영상 플레이 클레스입니다. (저는 요거는 그냥 무시하고 싶군요)
• Bitmap 은 말 그대로 bitmap 그림 파일들을 화면에 출력하는 클레스입니다.
• Shape 는 Bitmap과 상대대는 클레스입니다, Flash는 기본적으로 Bitmap방식이 아니라 vector 방식입니다. 그래서 여기서 그려진 Vector 이미지 들을 Shape라는 클래스가 화면에 그려주는 일을 하는 것 같습니다.
• StaticText 는 화면상에 고정된 텍스트를 출력합니다. 고정된이라는 의미는, 실행중에 사용자가 바꿀수 없고, ActionScript등을 동원해 내용을 바꿀수도 없다는 의미입니다.
• Video 는 말그대로 동영상 파일을 플레이 해줍니다.
• SimpleButton 은 '심볼'에서 '버튼'을 선택했을때 만들어지는 것을 관리합니다. (저는 요것도 그냥 무시하고 싶군요)
• TextField 는 동적 텍스트(텍스트 파일이나 서버로 부터 값을 읽어와서 표시하는 기능)와 입력 텍스트(사용자로 부터 입력을 받는 텍스트 박스) 두가지를 관리합니다.
• Loader는 해당 플레쉬 파일 외부에 따로 저장되어있는 그림파일을 동적으로 읽어오는데 사용되는 듯 합니다.
• Spite는 잘 모르겠습니다. 아마도 '심볼'에서 '그래픽'에 해당하는 녀석인듯 합니다.
• Stage는 전체 Canvas를 말합니다. 뒤에서 살펴볼 소유 관계에서 root에 해당하는 녀석입니다.
• MovieClip은 말 그대로 '심볼'에서 만들수 있는 무비 클립을 관리합니다.

제가 게임 Ui 에디터를 다시 만든다면 이런 모양이 될지도 모르겠습니다. 다만 AVM1Movie랑 SimpleButton은 빼겠지요.
*PS: 레이어는 아마도 DisplayContainer인것 같습니다.


소유 구조

이 이미지 파일도 역시 도움말 파일에서 가져온것입니다.

보시면 소유 관계는 Stage라는 최상위 노드로 부터 시작합니다.
이건 일종의 파일과 디렉토리 구조 같은 것으로 생각하시면 될것 같습니다.
DisplayContainer 는 디렉토리에 해당하고 DisplayObject는 파일에 해당합니다.
Stage는 DisplayContainer를 상속받아서 만들어진 특별한 Root 노드입니다.
각각의 DisplayObject는 다른 DisplayObject를 참조할수 있는데 부모 노드를 경유하는 경우에는 디렉토리 이동하듯이 점 두개(../filename)를 사용하는게 아니라 _parent라는 예약어를 사용합니다.

그리고 DisplayContainer에 집어 넣는 순서가 의미가 있습니다. 먼저 집어 넣는 녀석이 아랫쪽에 깔린 모양으로 표시됩니다.
아래 그림의 경우 A가 먼저 집어넣어져서 (인덱스 번호는 0 이 됩니다) 맨 아랫쪽에 깔렸습니다.

이벤트 흐름

이 벤트 흐름이라는 개념은 저는 여기서 처음 봤는데 예전에 제가 이벤트 관련 구현할때는 GoF의 Design Pattern을 참고 했었습니다. 거기에 보면 transparent enclosure 혹은 decoration 패턴이 User Interface 구현에 좋다고 강조되어서 설명되어있기 때문에 그것들을 사용했었는데요. 지금 Flash에서 하고 있는 방식을 보니까 이쪽이 더 좋은것 같습니다.

우선 그림을 보면 (역시 help 에서 가지고 왔습니다.) 이런 모양입니다.

이 게 저는 제 식대로 대충 이해하고 넘어갔었는데, 뒷쪽의 도움말 내용을 읽다가 보니까 의문이 많이 생겨서 좀 더 시간을 투자해서 자세히 읽어보니까 상당히 특이한 방법이더라구요. 저는 Java Swing 프로그래밍 할때도 이런식으로는 안될것 같다는 생각입니다. 상당히 좋은 방법 같아요. 설명을 하면 이렇습니다.

그림을 얼핏 보면, stage (말하자면 root) 노드에서 부터 깊이 우선 방식으로 순자척으로 이벤트 받을 녀석을 검색해나가는것 처럼 보입니다. 하지만 그게 아니고, 이벤트 받을 녀석이 어느 노드인지는 이미 알고 있는 상태에서 3가지 단계에 걸처서 이벤트를 사용하는 것입니다.

• 1단계는 최상위 노드부터 이벤트를 받을 노드의 부모까지 모두에게 순서대로 해당 이벤트를 처리하도록 이벤트 핸들러를 호출 합니다.
• 2단계는 이벤트를 받을 녀석의 이벤트 헨들러를 호출합니다.
• 3단계는 역으로 거슬러 올라가면서 이벤트 헨들러를 호출합니다.

우선 어느 노드가 어떤 이벤트를 받을 껀지 어떻게 결정할 수 있는가?
그건 해당 이벤트의 특성에 따르는것 같습니다.
예를 들어 '마우스 이벤트'라고 한다면, 화면상에 마우스 커서가 놓여 있는 좌표값을 기준으로 해당 위치에 있는 노드들이 이벤트 받을 노드들이 됩니다. (테스트 해본 바로는 겹쳐있는 경우에는 겹친것에 관계없이 모두 다 받습니다)
다른 예로 마이크 입력 이벤트나 발생하면, 마이크 입력 이벤트를 처리할 수 있는 노드(화면상의 좌표나 부모 자식간의 위치에 무관하게)를 검색해내서 해당 노드들 전부가 이벤트 받을 대상이 되는 것입니다.

순서가 이렇게 되는 것입니다.

1. 이벤트가 발생하면
2. 해당 이벤트를 누가 받을 것인지를 정한다. 이때 이벤트의 특성을 고려해서 누가 이벤트를 받을 것인지 모두 검색해 낸다.
3. 해당 노드의 부모 노드들을 모두 순차적으로 찾아내서 (켑쳐단계, 1단계) 이벤트 처리를 실행한다.
4. 해당 노드에게 이벤트 처리(대상단계, 2단계)를 실행한다.
5. 해당 노드의 부모 노드 부터 최상위 노드까지 역순으로(버블링단계, 3단계) 이벤트 처리를 실행한다.

이 과정에서 이벤트 버블링은 옵션으로 해당 이벤트 인스턴스안에 수행 여부를 기록해둘수 있습니다.
그리고 이벤트를 처리하는 중간에 이벤트 흐름을 다음단계로 넘기지 않고 끝내는 것도 가능하구요.

이렇게 구현되어있는 이유는 도움말 파일에 설명되어있는데
예를 들어 하나의 버튼이 있고, 그 버튼위에 텍스트 문자열 인스턴스가 겹쳐져있다고 했을때, 사용자가 마우스 클릭을 버튼에 했건 텍스트 문자열 위에 했건 동일한 처리가 가능하도록 하기 위해서라고 합니다.

*PS: 적어놓고 보니까 이게 원래 transparent enclosure 패턴 구현인건가? 하는 생각도 드는군요.

# by 쌀밥 | 2008/08/15 04:43 | 컴터 관련 | 트랙백 | 핑백(2) | 덧글(0)

트랙백 주소 : http://wrice.egloos.com/tb/4552711
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]

 Linked at 쌀밥망가 대왕 : Flash .. at 2008/08/16 03:06

... t 와 스타일까지 자세하게 잘 설명되어있습니다. 이것은 Button의 상속 구조입니다. 보시는 것과 같이 최상위 클래스인 Object 부터 Sprite 까지는 지난번에 DisplayObject를 살펴 볼때 살펴본 것입니다. 그 아래로 모든 Component 들은 UIComponent 라는 클래스를 상속 받아서 구현됩니다. 버튼의 경우 BaseButton을 상속 받고 ... more

 Linked at 쌀밥게임 대왕 : 게임 GUI.. at 2009/06/05 13:17

... ce 를 사용자들이 직접 수정할수 있도록 XML 포멧을 공개하고 있습니다. 이것도 참고가 됩니다.Flash 의 유저 인터페이스 관련 부분을 자세히 설펴보시면 그것도 도움이 됩니다. (예전글1, 예전글2 참고) GoF 의 Design Pattern 책을 참고하세요. UI 와 관련된 패턴들이 몇가지 소개됩니다.W3C 의 DOM 표준안을 참고로 하세요. OO 관점에서 ... more

 

 

 

=================================

=================================

=================================