jasu's blog

Sprite를 생성할 경우 보통 hitArea는 그 안에 있는 표시오브젝트가 된다. 이 때문에 아래 버튼을 놓고 위에 hitArea를 갖고 있는 DisplayObject를 올려놓을 경우에는 아래에 있는 버튼에 이벤트가 발생하지 않는다. 이는 캡처단계와 버블링 단계가 도달할 수 없는 서로 다른 오브젝트이기 때문이다.

이럴 경우 아래에 있는 버튼에 마우스 이벤트를 발생하기 위해서는 다음과 같은 방법으로 해결할 수 있다.

내부 그래픽이 있는 overDisplayObject를 맨 앞(index 최상)에 놓고 아래에 버튼이 있을 때

1. overDisplayObject.mouseEnabled = false;
2. overDisplayObject.hitArea = new Sprite();

2 번과 같이 적용하게 되면 overDisplayObject의 hitArea을 그래픽이 없는 Sprite로 대체 하기 때문에 overDisplayObject의 hitArea가 사라져 아래에 있는 버튼에 마우스 이벤트를 보낼 수 있다. 1번의 경우는 DisplayObjectContainer에 있는 속석을 사용한 방법으로 오브젝트에서 마우스 이벤트를 받지 않도록 설정할 수 있다.

플래시를 전문적으로 하지 않는 기획자나 다른 개발자의 경우에는 플래시의 CPU문제(버벅거림)에 대해서 막연하게 생각하는 경우가 많다. 플래시의 CPU 사용에 대한 문제는 항상 국내의 화려한 비주얼의 걸림돌이 되곤 한다.

플래시의 CPU 문제는 단적으로 말하면 flashplayer가 한번에 처리해야 하는 계산이 많다는 것을 의미한다. 예를 들면 아래와 같은 경우다.

비주얼 문제
* 복잡한 라운드 처리가 되어 있는 백터 이미지
* 그라데이션이 적용된 백터 이미지
* 알파가 적용된 DisplayObject
* 프레임이 진행하고 있는 MovieClip의 다수 복제
* 큰 사이즈의 이미지(백터 and 비트맵)
* 플래시에서 필터를 적용한 오브젝트의 움직임
...

액션스크립트 문제
* Array의 length
* .연산자
* ["instance name string"] 참조
...

이 밖에도 많은 경우의 수에 의해서 플래시 내에서 처리되는 속도는 차이가 날 수 밖에 없다. 아무리 좋은 디자인으로 표현이 되었더라도 동적인 움직임으로 표현을 해야 하는 플래시 개발자들은 이러한 문제를 항상 안고 작업을 한다.

플래시가 버전업을 하며 날로 발전을 하고 있음에도 그 발전에 대해 충분히 활용하지 못하는 경우가 많은 것 같다. 예를 들면 플래시8 버전부터 추가된 BitmapData, Bitmap 클래스는 ActionScript로 비주얼적인 표현을 할 수 있지만 위에서 이야기한 플래시의 CPU문제를 어느 정도 해결할 수 있는 방법이기도 하다.

플래시 스테이지상에 있는 모든 오브젝트들은 플래시플레이어가 계산해야 하는 영역 안에 있기 때문에 언제든지 CPU의 과부화를 만들어 낼 소지가 있다. 따라서 보여지는 화면 내에 걸쳐있는 모든 오브젝트들의 묘화에 필요한 계산을 줄이기 위해서 BitmapData 클래스를 사용할 수 있다. 

특정 DisplayObject 안에 있는 수많은 오브젝트들을 하나의 DisplayObject로 변환하고 다시 되돌리는 클래스를 만들어 특정 DisplayObject를 하나의 DisplayObject로 변환했다가 그 안에 있는 개별적인 요소의 기능을 사용해야 할 경우에는 원래의 DisplayObject로 변환하여 사용하지 않을때 낭비되는 CPU 문제를 해결할 수 있다.

블로그의 INFINITE의 왼쪽 메뉴의 경우도 위와 같은 방법을 사용한 예다. 마우스를 오버했을 때 메뉴가 나타나고 원래의 오브젝트로 되돌려 버튼을 사용하도록 하고 다시 메뉴 영역에서 마우스를 아웃 했을 때는 하나의 MovieClip으로 대체하여 불필요한 요소를 제거했다.

플래시의 CPU문제와 용량의 문제는 항상 비례하는 것이 아니다. 그리고 파일 용량과 RAM용량 또한  그러하다. 가끔 기획자나 디자이너들이 플래시의 CPU문제 == 파일용량크기 와 결부시키는 경우를 종종 보게 된다.

INFINITE의 메뉴 같은 경우를 보면 원래의 DisplayObject를 되돌려야 하기 때문에 메모리 영역에서 삭제해서는 안 된다. 이 때문에 RAM용량을 줄이는 방법이 아니며 이는 오로지 화면상에 표시되는 오브젝트들로 인해서 flashplayer에 의한 CPU 낭비를 줄이기 위한 방법인 것이다.

요즘은 플래시 개발자와 디자이너가 전문성을 위해서 분업화 되어 있지만 그로 인해서 디자이너들이 플래시에 대한 이해가 부족하여 생기는 문제도 다분히 존재하는 것 같다. 개인적인 생각이지만 국내 웹에이전시에서는 각 분야의 전문성도 중요하지만 작업자 간의 커뮤니케이션에 필요한 기본적인 타 업무에 대한 이해와 교육이 필요한 시기가 아닌가 싶다.

DisplayObjectContainer의 배치에 사용되는 메소드들은 반환형으로 DisplayObject를 반환한다. 이를 통해서 DisplayObject생성, 배치, 참조의 보관 유지를 한 줄로 해결할 수 있다.

 
아래 소스와 같이 사용하면 특정 DisplayObject를 원하는 인덱스 위치로 이동할 때 코드 라인을 줄일 수 있다.

import flash.display.Sprite;

var spriteAry:Array = new Array();

for(var i:uint;i<4;i++)
spriteAry.push(addChild(new Sprite()) as Sprite);

var lastChild:Sprite = spriteAry[spriteAry.length-1];

// lastChild를 맨 앞면으로 이동.
addChild(removeChild(lastChild));
trace(getChildIndex(lastChild));

// lastChild를 맨 뒤로 이동.
addChildAt(removeChild(lastChild), 0);
trace(getChildIndex(lastChild));

웹상에서 본 효과가 재미있어서 확장하여 숫자 DisplayObject를 만들어 보았다...