표시 객체 예제: SpriteArranger

Flash Player 9 이상, Adobe AIR 1.0 이상

SpriteArranger 샘플 응용 프로그램은 ActionScript 3.0 학습 에서 별도로 설명한 Geometric Shapes 샘플 응용 프로그램을 바탕으로 합니다.

SpriteArranger 샘플 응용 프로그램에서는 표시 객체를 처리하는 다음과 같은 다양한 개념을 설명합니다.

  • 표시 객체 클래스 확장

  • 표시 목록에 객체 추가

  • 표시 객체 레이어 및 표시 객체 컨테이너 작업

  • 표시 객체 이벤트에 응답

  • 표시 객체의 속성 및 메서드 사용

이 샘플에 대한 응용 프로그램 파일을 가져오려면 www.adobe.com/go/learn_programmingAS3samples_flash_kr 을 참조하십시오. SpriteArranger 응용 프로그램 파일은 Examples/SpriteArranger 폴더에 있습니다. 이 응용 프로그램은 다음과 같은 파일로 구성됩니다.

파일

설명

SpriteArranger.mxml

또는

SpriteArranger.fla

Flash(FLA) 또는 Flex(MXML) 형식의 기본 응용 프로그램 파일입니다.

com/example/programmingas3/SpriteArranger/CircleSprite.as

화면에 원을 렌더링하는 Sprite 객체 유형을 정의하는 클래스입니다.

com/example/programmingas3/SpriteArranger/DrawingCanvas.as

GeometricSprite 객체를 포함하는 표시 객체 컨테이너인 canvas를 정의하는 클래스입니다.

com/example/programmingas3/SpriteArranger/SquareSprite.as

화면에 사각형을 렌더링하는 Sprite 객체 유형을 정의하는 클래스입니다.

com/example/programmingas3/SpriteArranger/TriangleSprite.as

화면에 삼각형을 렌더링하는 Sprite 객체 유형을 정의하는 클래스입니다.

com/example/programmingas3/SpriteArranger/GeometricSprite.as

화면 상의 모양을 정의하는 데 사용되는 Sprite 객체를 확장하는 클래스로, CircleSprite, SquareSprite 및 TriangleSprite가 이 클래스를 확장합니다.

com/example/programmingas3/geometricshapes/IGeometricShape.as

모든 기하학적 모양 클래스에서 구현될 메서드를 정의하는 기본 인터페이스입니다.

com/example/programmingas3/geometricshapes/IPolygon.as

변이 여러 개인 기하학적 모양 클래스에서 구현될 메서드를 정의하는 인터페이스입니다.

com/example/programmingas3/geometricshapes/RegularPolygon.as

동일한 길이의 변이 모양의 중심을 따라 대칭적으로 배치된 기하학적 모양 유형입니다.

com/example/programmingas3/geometricshapes/Circle.as

원을 정의하는 기하학적 모양 유형입니다.

com/example/programmingas3/geometricshapes/EquilateralTriangle.as

모든 변의 길이가 같은 삼각형을 정의하는 RegularPolygon의 하위 클래스입니다.

com/example/programmingas3/geometricshapes/Square.as

네 변의 길이가 모두 같은 사각형을 정의하는 RegularPolygon의 하위 클래스입니다.

com/example/programmingas3/geometricshapes/GeometricShapeFactory.as

지정된 모양 유형과 크기로 모양을 만드는 "factory 메서드"가 포함된 클래스입니다.

SpriteArranger 클래스 정의

SpriteArranger 응용 프로그램을 사용하여 화면 상의 "캔바스"에 다양한 표시 객체를 추가할 수 있습니다.

DrawingCanvas 클래스는 사용자가 화면에 모양을 추가할 수 있는 드로잉 영역, 표시 객체 컨테이너 유형 등을 정의합니다. 화면에 추가할 수 있는 모양은 GeometricSprite 클래스의 하위 클래스 중 하나의 인스턴스입니다.

DrawingCanvas 클래스

Flex에서 Container 객체에 추가된 모든 자식 표시 객체는 mx.core.UIComponent 클래스에서 파생된 클래스여야 합니다. 이 응용 프로그램은 SpriteArranger.mxml 파일의 MXML 코드에 정의된 대로 DrawingCanvas 클래스의 인스턴스를 mx.containers.VBox 객체의 자식으로 추가합니다. 이 상속은 다음과 같이 DrawingCanvas 클래스 선언에 정의되어 있습니다.

public class DrawingCanvas extends UIComponent

UIComponent 클래스는 DisplayObject, DisplayObjectContainer 및 Sprite 클래스로부터 상속되며, DrawingCanvas 클래스의 코드는 해당 클래스의 메서드와 속성을 사용합니다.

DrawingCanvas 클래스는 Sprite 클래스를 확장하며 이 상속은 다음과 같이 DrawingCanvas 클래스 선언에 정의되어 있습니다.

public class DrawingCanvas extends Sprite

Sprite 클래스는 DisplayObjectContainer 및 DisplayObject 클래스의 하위 클래스이며, DrawingCanvas 클래스는 해당 클래스의 메서드 및 속성을 사용합니다.

DrawingCanvas() 생성자 메서드는 Rectangle 객체인 bounds 를 설정합니다. 이 속성은 나중에 캔바스의 윤곽을 그릴 때 사용됩니다. 그런 다음 initCanvas() 메서드를 다음과 같이 호출합니다.

this.bounds = new Rectangle(0, 0, w, h); 
initCanvas(fillColor, lineColor);

다음 예제에서 보듯이 initCanvas() 메서드는 생성자 함수에 인수로 전달된 DrawingCanvas 객체의 다양한 속성을 정의합니다.

this.lineColor = lineColor; 
this.fillColor = fillColor; 
this.width = 500; 
this.height = 200;

그런 다음 initCanvas() 메서드는 drawBounds() 메서드를 호출합니다. 이 메서드는 DrawingCanvas 클래스의 graphics 속성을 사용하여 캔바스를 그립니다. graphics 속성은 Shape 클래스에서 상속됩니다.

this.graphics.clear();         
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
this.graphics.drawRect(bounds.left - 1,  
                        bounds.top - 1,  
                        bounds.width + 2, 
                        bounds.height + 2); 
this.graphics.endFill();

응용 프로그램과의 사용자 상호 작용을 기반으로 DrawingCanvas 클래스의 다음과 같은 추가 메서드를 호출합니다.

GeometricSprite 클래스 및 하위 클래스

사용자가 캔바스에 추가할 수 있는 각 표시 객체는 GeometricSprite 클래스의 다음 하위 클래스 중 하나의 인스턴스입니다.

  • CircleSprite

  • SquareSprite

  • TriangleSprite

GeometricSprite 클래스는 flash.display.Sprite 클래스를 확장합니다.

public class GeometricSprite extends Sprite

GeometricSprite 클래스는 모든 GeometricSprite 객체에 공통되는 여러 속성을 포함합니다. 이러한 속성은 생성자 함수에서 함수에 전달된 매개 변수를 기반으로 설정됩니다. 예를 들면 다음과 같습니다.

this.size = size; 
this.lineColor = lColor; 
this.fillColor = fColor;

GeometricSprite 클래스의 geometricShape 속성은 모양의 시각적 속성이 아니라 수학적 속성을 정의하는 IGeometricShape 인터페이스를 정의합니다. IGeometricShape 인터페이스를 구현하는 클래스는 ActionScript 3.0 학습 에서 설명한 GeometricShapes 샘플 응용 프로그램에 정의되어 있습니다.

GeometricSprite 클래스는 drawShape() 메서드를 정의합니다. 이 메서드는 GeometricSprite의 각 하위 클래스에서 세부적으로 재정의됩니다. 자세한 내용은 다음에 이어지는 "캔바스에 표시 객체 추가" 단원을 참조하십시오.

또한 GeometricSprite 클래스는 다음과 같은 메서드를 제공합니다.

캔바스에 표시 객체 추가

사용자가 [모양 추가] 버튼을 클릭하면 응용 프로그램이 DrawingCanvas 클래스의 addShape() 메서드를 호출합니다. 그러면 다음 예제에서 보듯이 GeometricSprite 하위 클래스 중 하나의 해당 생성자 함수가 호출되어 새 GeometricSprite가 인스턴스화됩니다.

public function addShape(shapeName:String, len:Number):void 
{ 
    var newShape:GeometricSprite; 
    switch (shapeName) 
    { 
        case "Triangle": 
            newShape = new TriangleSprite(len); 
            break; 
 
        case "Square": 
            newShape = new SquareSprite(len); 
            break; 
 
        case "Circle": 
            newShape = new CircleSprite(len); 
            break; 
    } 
    newShape.alpha = 0.8; 
    this.addChild(newShape); 
}

각 생성자 메서드는 drawShape() 메서드를 호출합니다. 이 메서드는 Sprite 클래스에서 상속되는 클래스의 graphics 속성을 사용하여 해당 벡터 그래픽을 그립니다. 예를 들어, CircleSprite 클래스의 drawShape() 메서드는 다음과 같은 코드를 포함합니다.

this.graphics.clear(); 
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
var radius:Number = this.size / 2; 
this.graphics.drawCircle(radius, radius, radius);

addShape() 함수의 끝에서 두 번째 행은 DisplayObject 클래스에서 상속되는 표시 객체의 alpha 속성을 설정하므로, 캔바스에 추가된 각 표시 객체는 약간 투명하여 그 뒤에 있는 객체를 볼 수 있습니다.

addChild() 메서드의 마지막 행은 이미 표시 목록에 있는 DrawingCanvas 클래스 인스턴스의 자식 목록에 새 표시 객체를 추가합니다. 그러면 새 표시 객체가 스테이지에 표시됩니다.

응용 프로그램의 인터페이스에는 selectedSpriteTxt outputTxt 의 두 텍스트 필드가 포함됩니다. 이러한 텍스트 필드의 텍스트 속성은 캔바스에 추가되거나 사용자가 선택한 GeometricSprite 객체에 대한 정보로 업데이트됩니다. GeometricSprite 클래스는 toString() 메서드를 다음과 같이 재정의하여 이 정보 보고 작업을 처리합니다.

public override function toString():String 
{ 
    return this.shapeType + " of size " + this.size + " at " + this.x + ", " + this.y; 
}

shapeType 속성은 각 GeometricSprite 하위 클래스의 생성자 메서드에 있는 해당 값으로 설정됩니다. 예를 들어, toString() 메서드는 DrawingCanvas 인스턴스에 최근에 추가된 CircleSprite 인스턴스에 대해 다음 값을 반환할 수 있습니다.

Circle of size 50 at 0, 0

DrawingCanvas 클래스의 describeChildren() 메서드는 DisplayObjectContainer 클래스에서 상속되는 numChildren 속성을 사용하여 for 루프에 대한 한도를 설정함으로써 캔바스의 자식 목록을 반복합니다. 다음과 같이 각 자식을 나열하는 문자열이 생성됩니다.

var desc:String = ""; 
var child:DisplayObject; 
for (var i:int=0; i < this.numChildren; i++) 
{ 
child = this.getChildAt(i); 
desc += i + ": " + child + '\n'; 
}

결과 문자열은 outputTxt 텍스트 필드의 text 속성을 설정하는 데 사용됩니다.

표시 객체 클릭 및 드래그

사용자가 GeometricSprite 인스턴스를 클릭하면 응용 프로그램은 onMouseDown() 이벤트 핸들러를 호출합니다. 다음과 같이 이 이벤트 핸들러는 GeometricSprite 클래스의 생성자 함수에서 마우스 누름 이벤트를 수신하도록 설정됩니다.

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

그런 다음 onMouseDown() 메서드는 GeometricSprite 객체의 showSelected() 메서드를 호출합니다. 객체에 대해 이 메서드가 처음으로 호출된 경우 이 메서드는 selectionIndicator 라는 새 Shape 객체를 만들고 Shape 객체의 graphics 속성을 사용하여 다음과 같이 빨간색의 강조 표시된 사각형을 그립니다.

this.selectionIndicator = new Shape(); 
this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0); 
this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, this.size + 1); 
this.addChild(this.selectionIndicator);

onMouseDown() 메서드가 처음으로 호출된 경우가 아니면 이 메서드는 selectionIndicator 모양의 visible 속성(DisplayObject 클래스에서 상속됨)을 간단히 다음과 같이 설정합니다.

this.selectionIndicator.visible = true;

hideSelected() 메서드는 visible 속성을 false 로 설정하여 이전에 선택된 객체의 selectionIndicator 모양을 숨깁니다.

또한 onMouseDown() 이벤트 핸들러 메서드는 Sprite 클래스에서 상속되는 startDrag() 메서드를 호출합니다. 이 메서드에는 다음과 같은 코드가 포함되어 있습니다.

var boundsRect:Rectangle = this.parent.getRect(this.parent); 
boundsRect.width -= this.size; 
boundsRect.height -= this.size; 
this.startDrag(false, boundsRect);

사용자는 boundsRect 사각형에 의해 설정된 경계 내에서 선택된 객체를 캔바스 주위로 드래그할 수 있습니다.

마우스 버튼을 놓으면 mouseUp 이벤트가 전달됩니다. DrawingCanvas의 생성자 메서드는 다음과 같은 이벤트 리스너를 설정합니다.

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

이 이벤트 리스너는 개별 GeometricSprite 객체가 아니라 DrawingCanvas 객체에 대해 설정됩니다. GeometricSprite 객체가 드래그될 때 마우스 버튼을 놓으면 다른 표시 객체(다른 GeometricSprite 객체) 뒤에서 드래그가 중단될 수 있기 때문입니다. 전경의 표시 객체는 마우스 놓음 이벤트를 수신하지만 사용자가 드래그 중인 표시 객체는 이 이벤트를 수신하지 못합니다. DrawingCanvas 객체에 리스너를 추가하면 이벤트가 항상 처리되도록 할 수 있습니다.

onMouseUp() 메서드는 GeometricSprite 객체의 onMouseUp() 메서드를 호출하고, 이 메서드는 GeometricSprite 객체의 stopDrag() 메서드를 호출하게 됩니다.

표시 객체 레이어 다시 정렬

응용 프로그램의 사용자 인터페이스에는 Move Back, Move Down, Move Up, Move to Front라는 버튼이 있습니다. 사용자가 이 버튼 중 하나를 클릭하면 응용 프로그램은 DrawingCanvas 클래스의 해당 메서드( moveToBack() , moveDown() , moveUp() 또는 moveToFront() )를 호출합니다. 예를 들어, moveToBack() 메서드는 다음과 같은 코드를 포함합니다.

public function moveToBack(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, 0); 
    } 
}

이 메서드는 DisplayObjectContainer 클래스에서 상속되는 setChildIndex() 메서드를 사용하여 DrawingCanvas 인스턴스( this )의 자식 목록에서 인덱스 위치 0에 표시 객체를 배치합니다.

moveDown() 메서드는 DrawingCanvas 인스턴스의 자식 목록에서 표시 객체의 인덱스 위치가 1씩 감소된다는 점을 제외하고는 유사하게 작동합니다.

public function moveDown(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, index - 1); 
    } 
}

moveUp() moveToFront() 메서드는 moveToBack() moveDown() 메서드와 유사하게 작동합니다.