Flex, Actionscript의 Sprite클래스와 Shape클래스

 

이 포스팅은 Sprite클래스와 Shape클래스가 무엇이며, 둘의 차이점이 무엇인지를 설명하고 있습니다.

 

먼저 Flash Player에서 표시객체(DisplayObject)의 하위클래스 구조를 보시면 다음과 같습니다.

 

 

                                                               *출처 : Adobe LiveDocs

 

 

보시다시피 Sprite클래스와 Shape클래스 둘다 화면에 보여지는 표시객체(DisplayerObject)의 자식들 입니다. 즉 두 클래스 모두 도형을 그리는 작업이 가능합니다. 차이점이 있다면 Sprite클래스는 InteractiveObject를 자식이기 때문에 Shape클래스와는 달리 Sprite클래스로 그린 도형에는 어떠한 액션을 줄 수 있습니다. 예를들면 Sprite로 그린 도형은 드래그가 가능하게 할 수 있고, 마우스 클릭 이벤트를 줄 수도 있습니다. Shape클래스로 만든 도형은 불가능 하죠. Shape클래스는 단지 보여지는 도형만 만들 뿐입니다. 하지만 Shape클래스는 Sprite클래스보다 퍼포먼스가 훨씬 뛰어나다고 합니다. 액션을 줄 수 없는 대신, Sprite클래스보다 훨씬 가볍다는 말이죠.

 

정리하면 다음과 같습니다.

 

Sprite클래스	Shape클래스
DisplayObject의 자식(그래픽 요소를 보여줄 수 있음)
표시객체 컨터이너 O (자식표시객체를 포함 할 수 있음)	표시객체 컨테이너 X (자식표시객체를 포함 할 수 없음)
상대적 메모리 사용률↑	상대적 메모리 사용률↓
이벤트 줄 수 있음 (Interaction 속성과 메소드 있음)	이벤트 줄 수 없음 (Interaction 속성과 메소드 없음)

 

 

Sprite클래스의 주요 속성과 메소드를 정리 하면 다음과 같습니다.

 

 *출처 :  okgosu의 액션스크립트 정석

주요 속성과 메소드		설명
속성	buttonMode : Boolean	스프라이트 객체를 버튼 모드로 설정함  (마우스를 올리면 손 모양 커서로 바뀜)
	dropTarget : DisplayObject	드래그되거나 드롭되는 디스플레이 오브젝트
	graphics : Graphics	스프라이트에서 드로잉을 위한 그래픽 객체
	hitArea : Sprite	히트 영역은 사용자 인터랙션을 일으킬 영역으로 별도로 지정하지 않으면 그 Sprite가 그리는 영역이 된다.
	soundTransform : SoundTransform	스프라이트의 사운드를 컨트롤
	useHandCursor : Boolean	마우스를 올렸을 때 핸드 커서가 나타나게 할지 여부로, buttonMode가 true일 때 작동함
메소드	startDrag(lockCenter:Boolean=false, bounds:Rectangle = null):void	스프라이트를 드래그할 수 있게 함
	stopDrag():void	startDrag()메소드 작동을 멈춤

 

 

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx"

                     creationComplete="init();">

      <fx:Script>

            <![CDATA[

                  import mx.core.UIComponent;

                  private function init():void

                  {

                        var shapeCircle:Shape = new Shape();

                        shapeCircle.graphics.beginFill(0xFF0000, 1);

                        shapeCircle.graphics.drawCircle(100, 100, 100);

                       

                        var spriteCircle:Sprite = new Sprite();

                        spriteCircle.graphics.beginFill(0x00FF00, 1);

                        spriteCircle.graphics.drawCircle(100, 100, 100);

                        spriteCircle.x = 100;

                       

                        var container:UIComponent = new UIComponent();

                       

                        container.addChild(shapeCircle);

                        container.addChild(spriteCircle);

                       

                        addElement(container);

                  }

            ]]>

      </fx:Script>

</s:Application>

*source code:ShapeExample1.fxp

 

위 예제는 Shape클래스를 이용해 원을 하나 그리고, Sprite클래스를 이용해서 또다른 원을 그리는 예제입니다. 

다음은 Shape형 객체 shapeCircle의 속성과 Sprite형 객체 spriteCircle의 속성을 나타냅니다. spriteCircle에서는 shapeCircle에는 없는 InteractiveObject의 속성들을 사용할 수 있습니다.