Actionscript3.0의 DisplayList

목차

DiplayList 란?

- DisplayList의 3가지 요소

- DisplayList의 구조

- DisplayList 구조의 장점

- Index 개념

- Shape, Sprite, MovieClip

- DisplayList의 부모 자식 노드 관계 탐색이 간편해짐

DisplayObject 클래스

- DisplayObject를 상속받는 클래스

- 속성 메소드 및 이벤트

- root , parent, stage 에 접근하기

- Loader 를 사용해 불러온 외부 swf 의 root 와 stage

DisplayObjectContainer 클래스

- DisplayObjectContainer 의 상속

- 속성 및 메소드

DisplayList 란?

DisplayList 란 SWF안에 존재 하는 객체들 중에 눈에 보이는 객체들을 총칭한다. 눈에 보이는 객체라고 하니 잘 이해가 안될수도 있으나, 간단하게 MovieClip 과 같이 addChild 를 통해 사용자에 눈에 보일수 있는 객체들을 뜻한다. 반면에 Date 클래스와 같은 객체는 단순히 시간에 대한 데이터를 처리 하는 객체 이므로 DisplayList 에 속하지 않는다. (빈 MovieClip 이나 Sprite, Shape 도 비어 있지만 모두 DisplayList 이다)

DisplayList의 3가지 요소

Flash Actionscript 에서는 이러한 DisplayList 구조가 아래와 기본 골격을 가지고 있다.

가장 상위에 Stage가 존재 하고 그 아래 MainTimeline 그리고 사용자가 만들어 내는 객체들로 눈에 보이게 되는 것이다. 그러면 어떠한 객체들이 "만들어지는 객체" 에 속하는 것인가? 바로 DisplayObject 와 DisplayObjectContainer 클래스를 상속받은 객체 들이다.

- DisplayObject : 화면에 표시 되는 객체 (Shape, Sprite, MovieClip, SimpleButton 등등)

- DisplayObject : 화면에 표시 되고 다른 객체들을 포함 할수 있는 객체 (Sprite, MovieClip, Loader 등등)

결국 SWF 안에 존재 하는 DisplayList 구조는 위와 같은 구조로 만들어 지게 된다.

DisplayList 구조의 장점

AS1.0, AS2.0 때 까지만 해도 위와 같은 DisplayList 구조를 가지고 있지 않았다. Flash CS3 이전 버젼에서는 MovieClip 이 거의 대부분의 객체의 기본이 되었고 그렇기 때문에 단점이 많았다. 하지만 위와 같은 DisplayList 를 가지게 되고 여러 장점을 가질수 있게 되었다.

- Shape, Sprite, MovieClip 등과 같이 객체가 다양해 져서, 효율적인 화면 구성을 할수 있다 되었다.

AS2.0 까지만 해도 MovieClip 만이 화면을 구성 하였으므로, 효율성이 떨어졌었다. 하지만, MovieClip 에서 타임라인을 제거한 Sprite 와 단지, 드로잉 기능만 가지고 있는 Shape 객체로 인해 좀더 효율적인 렌더링이 가능해 졌다.

Depth 개념에서 Index 개념으로 변화

AS2.0 까지는 객체의 위,아래 순서 개념을 Depth 개념이다. Depth 개념을 말 그대로 절대적인 깊이를 적용하여 z-index를 바꾸는 방식이었다. 예를 들어 mc 라는 객체가 depth 10에 존재 하고 mc2 라는 객체가 depth100에 존재 한다면 mc는 mc2 보다 아래 위치하게 되고 만약 영역히 겹쳐 졌을 경우에는 mc가 mc2에 가려 않 보인다. 여기서 중요한 점은 depth10 과 depth100 사이에는 아무것도 존재 하지 않아도 된다는 점이다. 빈 공간으로 둬도 상관없는 상태 이다. 하지만 AS3.0 부터 적용된 Index 개념에서는 조금 다르다. 항상 순서에 맞게 객체에 index 가 적용 된다. addChild 메소드를 통해 객체를 DisplayList 에 등록했다면, 제일 처음으로 등록한 객체는 index 0 을 할당 받고 그 다음은 1 다음은 2. .....7,8,9 등등 순서대로 할당 받게 된다. 순서를 가지고 있다는 점은 여러 가지 특징을 함께 가지고 있다는 뜻과 같다. 일상 생활에서 10개의 박스가 아래에서 부터 순서대로 쌓여 있다는 경우를 예로 들어 보면, 어떠한 사람이 제일 아래 있는 1 index 에 있는 박스를 가지고 간다면, 1 index 위치가 비게 되므로 위에 있는 박스들이 차례로 아래로 다시 쌓여 제 정렬 되게 됩니다. (1<-2 , 2<-3, 3<-4 등등) AS3.0 에서의 Index 도 같은 개념 이다.

Depth방식에 비해 Index방식이 효율적인 점

 첫번째로 Index방식은 객체에 순서를 부여 하므로 해서 부모 객체에서 자식 객체를 탐색할 때, 매우 빠르게 조회 할 수 있게 해준다. 아래 코드는 어떠한 DisplayObjectContainer 에 속해 있는 객체들을 탐색 하는 메소드 이다.

function displayChild(&prt:DisplayObjectContainer):void{

for(var i:int = 0; i < &prt.numChildren; i++){

var child:DisplayObject = &prt.getChildAt(i);

if(child as DisplayObjectContainer)

{

trace(child.name);

displayChild(child as DisplayObjectContainer);

}

else

{

trace(child.name);

}

}

}

 두번째로 또 다시 일상생활의 예를 들어 보면, Depth 방식으로 책을 만드는 사람들과 Index 방식으로 책을 만드는 사람들이 있다고 하자. 두 사람 모두 150쪽 짜리 책을 완성 하였다. 하지만, 중간에 잘못된 부분을 발견하여 50쪽에 100쪽 분량의 내용을 삭제 하려고 한다. Depth 방식의 사람들은 엄청 고생을 해야 할 것이다. 왜냐하면 기존에 있던 100쪽 부터 150쪽까지의 분량을 일일히 앞으로 옮겨야 하기 때문이다. 하지만 Index 방식으로 책을 만드는 사람들은 옮기는 수고를 할 필요가 없다. 50쪽부터 100쪽까지 의 분량을 삭제 하면 알아서 100쪽에서 150쪽까지 있었던 분량이 알아서 정렬하기 때문이다. Actionscript 에서도 이 예제와 똑같은 원리가 적용 된다.

DisplayObject 와 DisplayObjectContainer

아래 구조도에서 볼수 있듯이 AS3.0 의 DisplayList 는 DisplayObject 와 DisplayObjectContainer 를 통해 만들어 진다. 자주 사용하는 MovieClip 이나 Sprite 의 속성중 x, y, visible, alpha 등등의 속성을 가지고 있는 것은 모두 DisplayObject 클래스를 상속 받았기 때문이다. DisplayObject 란 DisplayList (표시목록) 에 배치 할 수 있는 모든 객체의 기본 클래스 이다. 그러면 DisplayObjectContainer 는 무엇인가 아래 구조도를 보면 DisplayObjectContainer 가 DisplayObject의 상속을 받아서 만들어 졌다는 것을 볼 수 있다. 이 말은 DisplayObject 의 기능은 모두 가지고 있으면서 어떠한 것을 포함 할 수 있는 즉, addChild 와 removeChild 와 같은 DisplayObject 의 객체 컨테이너(바구니) 역할을 할 수 있는 객체들의 기본 클래스 이다.

DisplayObject

상속 받는 구상 클래스 : 실제 객체를 생성 할 수 있는 클래스

Bitmap, Loader, Shape, SimpleButton,Sprite, MovieClip, TextField, Video

상속 받는 추상 클래스 : 실제 객체를 생성 할 수 없고, 기능만을 가지고 있는 추상 클래스이다. 이 추상클래스를 통해 객체를 생성하려고 하면 ArgumentError 가 발생한다.

var mc:DisplayObjectContainer = new DisplayObjectContainer() 를 실행 하면 ArgumentError 가 발생한다.

AVM1Movie, DisplayObjectContainer, InteractiveObject, MorphShape, Stage, StaticText

속성 및 메소드

http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/display/DisplayObject.html

이벤트

Event.ADDED , Event.ADDED_TO_STAGE,

DisplayObject 는 객체에 addChild 될수 있으므로 A 객체가 B 객체에 addChild 되면 Event.ADDED 이벤트가 발생한다.

Event.REMOVED, Event.REMOVE_FROM_STAGE

DisplayObject 는 객체에 removeChild 될수 있으므로 A 객체가 B 객체에 removeChild 되면 Event.REMOVED 이벤트가 발생한다.

root / parent / stage 의 의미 알기

DisplayObjectContainer

속성 및 메소드

http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/display/DisplayObjectContainer.html

주요 메소드

추가 / 제거 

addChild / removeChild

addChildAt / removeChildAt : 특정 index에 객체를 추가/삭제 한다.

 addChild(child:DisplayObject):DisplayObject

 addChildAt(child:DisplayObject,index:int):DisplayObject

 removeChild(child:DisplayObject):DisplayObject

 removeChildAt(child:DisplayObject,index:int):DisplayObject

자식 객체에 대한 정보

numChildren : DisplayObjectContainer 안에 addChild되어 있는 (포함되어 있는) 객체의 갯수를 반환한다.

Index 값 정보

getChildAt / getChildByName / getChildIndex : DisplayObjectContainer 안에 존재 하는 객체들을 Index 값(getChildAt), 이름(getChildByName)에 따라 찾아 주고, getChildIndex 는 특정 객체의 Index 위치를 반환한다.

getChildAt(index:int):DisplayObject

getChildByName(name:String):DisplayObject

getChildIndex(child:DisplayObject):int

Index 값 교환

setChildIndex / swapChildren / swapChildrenAt : DisplayObjectContainer 안에 존재하는 객체들의 Index 값을 서로 바꿔주는 메소드 들이다.

setChildIndex(child:DisplayObject,index:int):void

swapChildren(child1:DisplayObject,child2:DisplayObject):void

swapChildrenAt(index1:int,index2:int):void