표시 목록을 사용한 작업

DisplayObjectContainer의 addChild() 또는 addChildAt() 메서드를 호출하여 DisplayObjectContainer 객체에 객체를 추가할 수 있습니다. 스테이지에서는 제작하는 동안 객체를 만들어 표시 목록에 추가할 수 있으며, 구성 요소의 경우에는 [구성 요소] 패널에서 스테이지로 구성 요소를 드래그하여 표시 목록에 추가할 수 있습니다. ActionScript를 사용하여 컨테이너에 객체를 추가하려면 먼저 new 연산자와 함께 해당 객체의 생성자를 호출하여 객체의 인스턴스를 만든 다음 addChild() 또는 addChildAt() 메서드를 호출하여 스테이지와 표시 목록에 객체를 배치해야 합니다. addChild() 메서드는 표시 목록의 다음 위치에 객체를 추가하고 addChildAt() 은 지정한 위치에 객체를 추가합니다. 이미 사용 중인 위치를 지정하면 해당 위치에 있는 객체와 그 위쪽에 있는 모든 객체가 1씩 위쪽으로 이동합니다. DisplayObjectContainer 객체의 numChildren 속성에는 포함된 표시 객체의 수가 들어 있습니다. 위치를 지정하여 getChildAt() 메서드를 호출하거나, 객체 이름을 알고 있는 경우 getChildByName() 메서드를 호출하여 표시 목록에서 객체를 검색할 수 있습니다.

다음 예제에서는 표시 목록에 있는 세 가지 구성 요소의 이름과 위치를 보여 줍니다. 우선 NumericStepper, Button 및 ComboBox를 서로 겹치게 스테이지에 드래그한 후 인스턴스 이름을 aNs , aButton 및 aCb 로 각각 지정합니다. 그런 다음, 다음 코드를 타임라인의 프레임 1에 있는 액션 패널에 추가합니다.

var i:int = 0; 
while(i < numChildren) { 
    trace(getChildAt(i).name + " is at position: " + i++); 
}

[출력] 패널에 다음 행이 표시됩니다.

aNs is at position: 0 
aButton is at position: 1 
aCb is at position: 2

객체 이름과 해당 객체를 배치할 위치를 메서드의 매개 변수로 지정하여 addChildAt() 메서드를 호출하면 표시 목록에서의 객체 위치와 표시 심도를 변경할 수 있습니다. 예를 들어, 앞의 예제에 다음 코드를 추가하면 NumericStepper를 맨 위에 배치하고 루프를 반복하여 표시 목록에서 구성 요소의 새 위치를 표시할 수 있습니다.

this.addChildAt(aNs, numChildren - 1); 
i = 0; 
while(i < numChildren) { 
    trace(getChildAt(i).name + " is at position: " + i++); 
}

[출력] 패널에 다음과 같이 표시됩니다.

aNs is at position: 0 
aButton is at position: 1 
aCb is at position: 2 
aButton is at position: 0 
aCb is at position: 1 
aNs is at position: 2

또한 NumericStepper는 화면에서 다른 구성 요소 앞에 표시되어야 합니다.

numChildren 은 표시 목록에 있는 객체 수(1~ n )이고 목록에서의 첫 번째 위치는 0입니다. 따라서 목록에 객체가 세 개 있는 경우 세 번째 객체의 인덱스 위치는 2입니다. 이 경우 표시 목록에서의 마지막 위치(또는 표시 심도를 고려했을 때 맨 위에 있는 객체)는 numChildren - 1 이라는 것을 알 수 있습니다.

removeChild() 및 removeChildAt() 메서드를 사용하면 표시 객체 컨테이너와 해당 표시 목록에서 구성 요소를 제거할 수 있습니다. 다음 예제에서는 스테이지에 세 개의 Button 구성 요소를 서로 겹치게 배치하고 각 구성 요소에 대한 이벤트 리스너를 추가합니다. 각 Button을 클릭하면 이벤트 핸들러가 해당 구성 요소를 표시 목록과 스테이지에서 제거합니다.

1. 새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.

2. [구성 요소] 패널의 Button을 [라이브러리] 패널로 드래그합니다.

3. [액션] 패널을 열고 기본 타임라인에서 [프레임 1]을 선택한 후 다음 코드를 추가합니다.

   import fl.controls.Button; 
    
   var i:int = 0; 
   while(i++ < 3) { 
       makeButton(i); 
   } 
   function removeButton(event:MouseEvent):void { 
       removeChildAt(numChildren -1); 
   } 
   function makeButton(num) { 
       var aButton:Button = new Button(); 
       aButton.name = "Button" + num; 
       aButton.label = aButton.name; 
       aButton.move(200, 200); 
       addChild(aButton); 
       aButton.addEventListener(MouseEvent.CLICK, removeButton); 
   }

   표시 목록에 대한 자세한 내용은 ActionScript 3.0 프로그래밍 의 "디스플레이 프로그래밍"을 참조하십시오.