2007.12.04 10:33
왜 Sprite는 Canvas에 addChild 안되는 걸까요?

- Sprite는 무엇인가요?

먼저 Sprite는 무엇인지 잘 모르는 분들을 위해 설명을 곁들여보죠.
ActionScript 3 에서는 Sprite Class라 불리우는 새로운 Class를 사용하게 되는데... Sprite Object는 Movie Clip과 유사합니다만, Timeline이 없다는 것이 큰 차이점입니다. Sprite는 timeline을 요구하진 않는 곳에서 쓰일 수 있는 적합한 Base Class 입니다.


물론, Sprite를 FLEX에서 사용하고 싶다면 UIComponent에 addChild  하여서 사용하면 됩니다. (참고 : 지돌스타님 블로그)

하지만, UIComponent를 상속하고 있는 Canvas에는 왜 addChild가 되지 않는가 하는 것이 이 글의 주요 주제죠.


- Sprite을 Canvas에 addChild 하면 ?

여기서 분명한 것은 Sprite를 Canvas에 addChild하면
"TypeError: Error #1034: 유형 강제 변환에 실패했습니다. flash.display::Sprite@45cd351을(를) mx.core.IUIComponent(으)로 변환할 수 없습니다."
라고 컴파일시에 Error가 난다는 겁니다.

오류가 난 곳을 따라가보면 Canvas가 상속하고 있는 Container 클래스의 addingChild 메소드에서 나는 것을 알 수 있습니다.
 override mx_internal function addingChild(child:DisplayObject):void
 {
        // Throw an RTE if child is not an IUIComponent.
      var uiChild:IUIComponent = IUIComponent(child);  // 이 줄에서 오류가 납니다.
        ...
}


IUIComponent 타입인지 확인하고 있는데, Sprite는 IUIComponent type이 아니기때문에 오류가 나고 있는 것입니다.


- IUIComponent는 무엇인가요?

그럼 IUIComponent는 무엇일까요?
클래스 안에 있는 주석으로 다음과 같이 설명되고 있습니다.

 The IUIComponent interface defines the basic set of APIs that you must implement to create a child of a Flex container or list.

FLEX의 Visual Component의 기본은 UIComponent 입니다.
IUIComponent 인터페이스는 이 UIComponent 가 구현하고 있는 인터페이스로서 위의 설명에 따르면,
Flex의 Container 나 List의 child들은 IUIComponent 인터페이스를 구현하고 있어야 된다고 합니다.
(아니면 위 에러메세지 처럼 IUIComponent 타입이 아니라서 오류나죠 ㅡㅂㅡ)


- 그렇다면 Canvas는?

 Canvas Inheritance Container Inheritance UIComponent Inheritance FlexSprite Inheritance Sprite Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject Inheritance EventDispatcher Inheritance Object
인용 : Flexdocs.kr

위의 관계대로 만들어진 Canvas에는 IUIComponent가 구현된(다시 말해 UIComponent를 상속받는) 클래스들은
모두 addChild 될 수 있으나 그렇지 않은 클래스는 addChild 되지 못하게 됩니다.
Sprite는 IUIComponent 인터페이스를 구현하고 있지 않으므로
Container에는 addChild 할 수 없는 것입니다.




- Tip

Sprite를 Canvas 같은 Container 에 추가하여야 하는 일이 생긴다면 아래와 같이 클래스 만드셔서 addChild 하셔도 괜찮을 것 같네요. :)

package
{
    import flash.display.Sprite;
    import mx.core.UIComponent;

    public class mySprite extends UIComponent
    {
        private var sprite:Sprite;
 
        public function mySprite()
        {
             super();
   
             sprite = new Sprite();
         }
 
        override protected function createChildren():void
        {
            super.createChildren();
   
            this.addChild(sprite);
        }
        .....
    }
}

참고자료 :
[팁] Sprite 사용법
Flex 2 Beta 3 : Sprites

신고
Creative Commons License
Creative Commons License
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2007.12.10 09:59 신고 | PERMALINK | EDIT/DEL | REPLY
잘 읽었습니다. Canvas가 Sprit를 직접 올릴 수 없게 하는 이유를 나름대로 생각해보면
Sprit는 UIComponent가 기본적으로 가지는 CSS라든가 Canvas에서 Child에 접근할 때 공통적으로 접근하는 method가 정의되어 있지 않아서가 아닌가 싶습니다. 즉 IUIComponent로 Casting하는 절차가 바로 그것을 확인하는 작업이겠지요.
정확한 분석이 따라야 하지만 지금 생각에는 그럴 것 같다는 생각이 강하게 드는군요. ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2007.12.10 14:15 신고 | PERMALINK | EDIT/DEL
각 컴포넌트들이 구현하는 interface 에 대해서 자세히 알고 싶어지네요 ^^;
Favicon of http://blog.naver.com/eirene78 BlogIcon 에이레네 | 2008.01.30 11:35 신고 | PERMALINK | EDIT/DEL | REPLY
Canvas는 컨테이너 클래스를 상속했죠 ^^ UIComponent의 addChild 메소드는 기본적으로 대상이 Sprite를 상속한 클래스인데
컨테이너 클래스는 addChild 부분을 오버라이드하면서 대상을 IUIComponent 인터페이스를 구현한 클래스로 바꾸어 버렸더랬습니다;; 그래서 Canvas에는 Sprite를 addChild할 수가 없게 됐죠;;; 대신 이렇게 해서 좋아진 것은 Canvas의 numChildren에는 항상 UIComponent를 확장한 클래스 인스턴스들만 들어가게 되었다는;;; 또 Canvas의 rawChildren.addChild(new Sprite()); 하시면 여전히 Canvas에 Sprite를 추가하는 것도 가능합니다^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.01.30 11:48 신고 | PERMALINK | EDIT/DEL
아하~ ^^
좋은 덧글 감사합니다. ;)
박스농사 | 2008.07.31 16:21 신고 | PERMALINK | EDIT/DEL | REPLY
사진바꼇네? 이제 사람좀 된듯
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 16:57 신고 | PERMALINK | EDIT/DEL
넌 애니메이션이자나.....ㅋ
Favicon of http://cyworld.com/aqua_mir BlogIcon 물빛미르 | 2009.12.15 11:15 신고 | PERMALINK | EDIT/DEL | REPLY
감사합니다... 족보를 알아야만 하는 문제였군요... 역시 초보는 배울게 많네요 ^^;
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret