ActionScript 3.0 의 프로그래밍 > ActionScript 프로그래밍의 개요 > 표시의 프로그래밍 > 표시 오브젝트의 조작

표시 오브젝트의 조작

스테이지, 표시 오브젝트, 표시 오브젝트 컨테이너, 및 표시 리스트의 기본 개념을 이해할 수 있었으므로, 이 섹션에서는, ActionScript 3.0 에서의 표시 오브젝트의 조작에 대해 자세하게 설명합니다.

부 주제

DisplayObject 클래스의 properties 와 메소드

표시 오브젝트는 모두 DisplayObject 클래스의 서브 클래스입니다. 따라서, 표시 오브젝트는 DisplayObject 클래스의 properties 및 메소드를 상속받습니다. 상속 받은 properties 는, 모든 표시 오브젝트에 적용되는 기본 properties 입니다. 예를 들어, 표시 오브젝트에는, 표시 오브젝트 컨테이너내의 오브젝트의 위치를 지정하는 x properties 와 y properties 가 있습니다.

DisplayObject 클래스에는 constructor　 　 함수는 없습니다. Sprite 등의 다른 타입의 오브젝트 (DisplayObject 형의 서브 클래스인 오브젝트)를 작성해,new constructor　 　 으로 오브젝트를 인스턴스화할 필요가 있습니다. 또, custom 표시 오브젝트 클래스를 작성하는 경우는, 예를 들어, Shape 클래스나 Sprite class 등, 사용 가능한 constructor　 　 함수를 가지는 몇개의 표시 오브젝트 서브 클래스의 서브 클래스를 작성할 필요가 있습니다.

표시 리스트에의 표시 오브젝트의 추가

표시 오브젝트를 인스턴스화하면, 표시 리스트상에 있는 표시 오브젝트 컨테이너에 표시 오브젝트 인스턴스를 추가할 때까지, 표시 오브젝트는 화면상 (스테이지상)에 표시되지 않습니다. 예를 들어, 다음의 코드에서는, 코드의 마지막 행을 생략 하면 myText TextField 오브젝트는 표시되지 않습니다. 코드의 마지막 행으로,this 키워드는, 이미 표시 리스트에 추가되고 있는 표시 오브젝트 컨테이너를 참조할 필요가 있습니다.

import flash.display. *;
import flash.text.TextField;
var myText:TextField = new TextField();
myText.text = "Buenas dias. ";
this.addChild(myText);

스테이지에 비주얼 엘리먼트를 추가하면, 이 엘리먼트는 Stage 오브젝트의 "아이 " 가 됩니다. 어플리케이션내에 로드 된 최초의 SWF 파일 (HTML 페이지에 포함하는 SWF 파일등)은, 자동적으로 Stage 오브젝트의 아이로서 추가됩니다. 이것은, Sprite 클래스를 확장하는 형태의 오브젝트입니다.

Adobe Flex Builder 2 로 MXML 태그를 추가하거나 Flash 로 묘화 툴을 사용하거나 하는 등, ActionScript 를 사용하지 않고 작성된 표시 오브젝트는, 표시 리스트에 추가됩니다. 이러한 표시 오브젝트는 ActionScript 를 사용해 추가되고 있지 않습니다만, ActionScript 로부터 액세스 할 수 있습니다. 예를 들어, 다음의 코드는, ActionScript 는 아니고 authoring tool로 추가된 button1 라고 하는 오브젝트의 폭을 조정합니다.

button1.width = 200;

표시 오브젝트 컨테이너의 조작

DisplayObjectContainer 오브젝트가 표시 리스트로부터 삭제되었을 경우, 또는 그 외의 방법으로 이동되었는지 변형되었을 경우, DisplayObjectContainer 내의 각 표시 오브젝트도 삭제, 이동, 또는 변형됩니다.

표시 오브젝트 컨테이너는 일종의 표시 오브젝트로, 다른 표시 오브젝트 컨테이너에 추가할 수 있습니다. 예를 들어, 다음의 그림은, 아우트라인 셰이프 1 개과 (PictureFrame 형의) 표시 오브젝트 컨테이너 4 개을 포함한 표시 오브젝트 컨테이너 pictureScreen 를 나타냅니다.

표시 리스트에 표시 오브젝트를 표시하려면 , 표시 리스트상에 있는 표시 오브젝트 컨테이너에 표시 오브젝트를 추가할 필요가 있습니다. 이것에는, 컨테이너 오브젝트의 addChild() 메소드 또는 addChildAt() 메소드를 사용합니다. 예를 들어, 다음의 코드의 마지막 행이 없으면,myTextField 오브젝트는 표시되지 않습니다.

var myTextField:TextField = new TextField();
myTextField.text = "hello";
this.root.addChild(myTextField);

이 샘플 코드에서는,this.root 에 이 코드를 포함한 MovieClip 표시 오브젝트 컨테이너를 지정합니다. 실제의 코드에서는, 다른 컨테이너를 지정할 수 있습니다.

표시 오브젝트 컨테이너의 자식 (child) 리스트내의 특정의 위치에 아이를 추가하려면 ,addChildAt() 메소드를 사용합니다. 자식 (child) 리스트내의 0 으로부터 시작되는 인덱스 위치는, 표시 오브젝트의 layer (전부터 뒤에의 순서)에 대응하고 있습니다. 예를 들어, 다음과 같은 3 개의 표시 오브젝트가 있다고 합니다. 각 오브젝트는, Ball 로 불리는 custom 클래스로부터 작성되었습니다.

컨테이너내의 이러한 표시 오브젝트의 layer는,addChildAt() 메소드를 사용해 조정할 수 있습니다. 예를 들어, 다음과 같은 코드가 있다고 합니다.

ball_A = new Ball(0xFFCC00, "a");
ball_A.name = "ball_A";
ball_A.x = 20;
ball_A.y = 20;
container.addChild(ball_A);

ball_B = new Ball(0xFFCC00, "b");
ball_B.name = "ball_B";
ball_B.x = 70;
ball_B.y = 20;
container.addChild(ball_B);

ball_C = new Ball(0xFFCC00, "c");
ball_C.name = "ball_C";
ball_C.x = 40;
ball_C.y = 60;
container.addChildAt(ball_C, 1);

이 코드를 실행한 후, 표시 오브젝트는 다음과 같이 container DisplayObjectContainer 오브젝트내에 배치됩니다. 오브젝트의 layer에 주의해 주세요.

표시 오브젝트의 layer의 순서를 확인하려면 ,getChildAt() 메소드를 사용합니다. getChildAt() 메소드는, 메소드에 건네주는 인덱스 번호에 근거해 컨테이너의 자식 (child) 오브젝트를 돌려줍니다. 예를 들어, 다음의 코드는,container DisplayObjectContainer 오브젝트의 자식 (child) 리스트내가 다른 위치에 있는 표시 오브젝트의 이름을 표시합니다.

trace(container.getChildAt(0). name); // ball_A
trace(container.getChildAt(1). name); // ball_C
trace(container.getChildAt(2). name); // ball_B

부모 컨테이너의 자식 (child) 리스트로부터 표시 오브젝트를 삭제하면, 리스트상에서 그것보다 상위에 있는 엘리먼트의 자식 (child) 인덱스내의 위치가 각각 내립니다. 예를 들어, 계속전의 코드를 사용하면, 다음의 코드는, 자식 (child) 리스트내의 하위에 있는 표시 오브젝트가 삭제되었을 경우,container DisplayObjectContainer 내의 위치 2 에 있던 표시 오브젝트가 위치 1 으로 이동하는 것을 나타냅니다.

container.removeChild(ball_C);
trace(container.getChildAt(0). name); // ball_A
trace(container.getChildAt(1). name); // ball_B

removeChild() 및 removeChildAt() 메소드는, 표시 오브젝트 인스턴스를 완전하게 삭제하지 않습니다. 컨테이너의 자식 (child) 리스트로부터 삭제할 뿐입니다. 인스턴스는, 다른 변수로 참조할 수 있는 오브젝트를 완전하게 삭제하려면 ,delete 연산자를 사용합니다.

표시 오브젝트에는 부모 컨테이너가 1 개만 있으므로, 그 1 개만의 표시 오브젝트 컨테이너에 표시 오브젝트의 인스턴스를 추가할 수 있습니다. 예를 들어, 다음의 코드는, 표시 오브젝트 tf1 가 1 개만의 컨테이너 (이 예에서는, DisplayObjectContainer 클래스를 확장하는 Sprite) 내에 있는 것을 나타냅니다.

tf1:TextField = new TextField();
tf2:TextField = new TextField();
tf1.name = "text 1";
tf2.name = "text 2";

container1:Sprite = new Sprite();
container2:Sprite = new Sprite();

container1.addChild(tf1);
container1.addChild(tf2);
container2.addChild(tf1);

trace(container1.numChildren); // 1
trace(container1.getChildAt(0). name); // 텍스트 2
trace(container2.numChildren); // 1
trace(container2.getChildAt(0). name); // 텍스트 1

표시 오브젝트 컨테이너내에 포함되는 표시 오브젝트를 다른 표시 오브젝트 컨테이너에 추가하면, 표시 오브젝트는 최초의 표시 오브젝트 컨테이너의 자식 (child) 리스트로부터 삭제됩니다.

표시 리스트외에 있는 표시 오브젝트, 즉 Stage 오브젝트의 아이인 표시 오브젝트 컨테이너내에 포함되지 않은 표시 오브젝트는, "리스트외 " 표시 오브젝트라고 합니다.

표시 리스트내의 이동

이미 본 것처럼, 표시 리스트는 트리 구조입니다. 트리의 맨 위에는, 복수의 표시 오브젝트를 포함할 수가 있는 스테이지가 있습니다. 이러한 표시 오브젝트는, 그 자체가 표시 오브젝트 컨테이너이며, 다른 표시 오브젝트, 즉 표시 오브젝트 컨테이너를 포함할 수가 있습니다.

DisplayObjectContainer 클래스에는, 표시 오브젝트 컨테이너의 자식 (child) 리스트를 사용해 표시 리스트내를 이동하기 위한 properties 와 메소드가 포함되어 있습니다. 예를 들어, 다음과 같은 코드가 있다고 합니다. 이 코드는, 2 개의 표시 오브젝트 title 와 pict 를 container 오브젝트 (Sprite, Sprite 클래스는 DisplayObjectContainer 클래스를 확장합니다)에 추가합니다.

var container:Sprite = new Sprite();
var title:TextField = new TextField();
title.text = "Hello";
var pict:Loader = new Loader();
var url:URLRequest = new URLRequest("banana.jpg");
pict.load(url);
pict.name = "banana loader";
container.addChild(title);
container.addChild(pict);

getChildAt() 메소드는, 특정의 인덱스 위치에 있는 표시 리스트의 아이를 돌려줍니다.

trace(container.getChildAt(0) is TextField); // true

아이 오브젝트에 이름으로 액세스 할 수도 있습니다. 표시 오브젝트에는 name properties 가 있습니다. name properties 를 할당하지 않았던 경우는, Flash Player 에서는 "instance1" 등의 디폴트치를 할당할 수 있습니다. 예를 들어, 다음의 코드는,getChildByName() 메소드를 사용해 "banana loader" 라는 이름으로 자식 (child) 표시 오브젝트에 액세스 하는 방법을 나타냅니다.

trace(container.getChildByName("banana loader") is Loader); // true

getChildByName() 메소드를 사용하면,getChildAt() 메소드를 사용하는 것보다 퍼포먼스가 저하합니다.

표시 오브젝트 컨테이너에는 표시 리스트의 자식 (child) 오브젝트로서 다른 표시 오브젝트 컨테이너를 포함할 수가 있기 (위해)때문에, 트리와 같이 어플리케이션의 표시 리스트내를 이동할 수 있습니다. 예를 들어, 전술의 코드의 발췌에서는,pict Loader 오브젝트의 로드 조작이 완료하면,pict 오브젝트에 비트 맵인 자식 (child) 표시 오브젝트가 로드 됩니다. 이 비트 맵 표시 오브젝트에 액세스 하기 위해서,pict.getChildAt(0) 를 기술할 수가 있습니다. 또,container.getChildAt(0) == pict 이기 (위해)때문에,container.getChildAt(0). getChildAt(0) 를 기술할 수도 있습니다.

다음의 함수는, 표시 오브젝트 컨테이너로부터 표시 리스트의 인덴트 된 trace() 를 출력합니다.

function traceDisplayList(container:DisplayObjectContainer,
                                                indentString:String = "") :void {
    var child:DisplayObject;
    for (var i:uint=0; i < container.numChildren; i++) {
        child = container.getChildAt(i);
        trace (indentString, child, child.name); 
        if (container.getChildAt(i) is DisplayObjectContainer) {
            traceDisplayList(DisplayObjectContainer(child), indentString + "    ")
        }
    }

}

Flex 를 사용하고 있는 경우, Flex 는 많은 컴퍼넌트 표시 오브젝트 클래스를 정의해, 이러한 클래스는 DisplayObjectContainer 클래스의 표시 리스트아크세스메솟드를 재정의(override) 하는 것을 알아 둘 필요가 있습니다. 예를 들어, mx.core 패키지의 Container 클래스는, (Container 클래스에 의해 확장된다) DisplayObjectContainer 클래스의 addChild() 메소드 및 그 외의 메소드를 재정의(override) 합니다. addChild() 메소드의 경우, Container 클래스는, Flex 로 Container 인스턴스에 모든 타입의 표시 오브젝트를 추가할 수 없게, 이 메소드를 재정의(override) 합니다. 이 경우, 재정의(override) 된 메소드에서는, 추가하는 자식 (child) 오브젝트가 mx.core.UIComponent 오브젝트의 일종일 필요가 있습니다.

Stage properties 의 설정

Stage 클래스는, DisplayObject 클래스의 대부분의 properties 와 메소드를 재정의(override) 합니다. 재정의(override) 된 properties 또는 메소드의 어느쪽이든을 호출했을 경우, Flash Player 는 예외를 슬로우 합니다. 예를 들어, Stage 오브젝트는, 어플리케이션의 메인 컨테이너로서 위치가 고정되고 있기 (위해)때문에,x properties 나 y properties 를 가지지 않습니다. x properties 및 y properties 는, 컨테이너를 기준으로서 표시 오브젝트의 위치를 참조합니다. Stage 오브젝트는 다른 표시 오브젝트 컨테이너에 포함되지 않기 때문에, 이 2 개의 properties 는 적용되지 않습니다.

Stage 클래스의 framerate properties 는, 어플리케이션에 로드 된 모든 SWF 파일의 frame rate를 설정하기 위해서 사용합니다. 상세한 것에 대하여는, 「Flex 2 레퍼런스 가이드」를 참조해 주세요.

표시 오브젝트의 이벤트 처리

DisplayObject 클래스는 EventDispatcher 클래스를 상속받습니다. 즉, 어느 표시 오브젝트에서도 이벤트 모델에 포함할 수가 있습니다 (이벤트의 처리 참조). 표시 오브젝트는, EventDispatcher 클래스로부터 상속 받은 독자적인 addEventListener() 메소드를 사용해, 특정의 이벤트를 받을 수가 있습니다. 다만, 이것은, Listener 오브젝트가 그 이벤트의 이벤트 플로우(flow)의 일부인 경우만입니다.

Flash Player 에 의해 이벤트 오브젝트가 송출(Dispatch)되면, 그 이벤트 오브젝트는 스테이지로부터 이벤트가 발생한 표시 오브젝트로 왕복합니다. 예를 들어, 유저가 child1 라는 이름의 표시 오브젝트를 클릭하면, Flash Player 에 의해, 스테이지로부터 표시 리스트 계층을 내려 child1 표시 오브젝트까지 이벤트 오브젝트가 송출(Dispatch)됩니다.

다음의 그림에 나타나고 있도록(듯이), 개념상 이벤트 플로우(flow)는 3 단계로 나눌 수 있습니다.

상세한 것에 대하여는,이벤트의 처리를 참조해 주세요.