작업을 하다 보면 마우스 이벤트에 많은 문제점이 발견된다. 관련 글 들도 오래전 부터 무수하다.
요번 프로젝트 작업에서도 실수로 mouseChildren 때문에 오버 이벤트를 놓쳐서 인터렉션 효과와 마우스 이벤트 미스 오류를 발생하여 이렇게 글을 작성하게 되었다. 디버깅? 시간을 상당히 소요하는 경우가 생겼기 때문이다.
내가 실수 한 것은 “객체.mouseEnabled = false” 하면 내부에 모든 것들이 enabled 될 것이라고 착각을 해버린 것이다. 내부의 객체들이 존재하면 그 객체에도 mouseEnabled 속성이 존재하기 때문에 상위 객체에서 “객체.mouseChildren = false”를 사용하여 내부 객체 이벤트를 비활성화 시켜서 하위 레이어에 있는 객체의 이벤트를 체크할 수 있다. 아래는 상위 객체인 “upper.mouseChildren = false”를 하지 않은 경우이다.
우선, 아래의 예제를 보면 lower(파랑 박스)를 버튼 모드를 활성화 시킨 것이다.
(MOUSE_OVER, CLICK 효과가 적용되어 있음.)
위에서 보면 lower와 중첩되어있는 상위 레이어의 upper가 문제이다.
upper는 아래와 같이 최초 셋팅이 되어있기 때문에 하위 레이어의 lower의 버튼 이벤트를 받을 수 없다.
package
{
...
publicfunction EnabledCheck(){/** 도큐먼트의 모든 객체에 mouseChildren, mouseEnabled을 비활성화 시킨다. */Enabled(newEnabled).target(this).enabled(false, false);
/** this.lower 내부의 모든 객체에 mouseEnabled만 활성화 시킨다. *///Enabled(new Enabled).target(this.lower).enabled(false, true);
...
}
...
}}
그리고 내가 원하는 lower만을 활성화 시켜주면 아래와 같이 효과가 이루어진다.
/** 도큐먼트의 모든 객체에 mouseChildren, mouseEnabled을 비활성화 시킨다. */Enabled(newEnabled).target(this).enabled(false, false);
/** this.lower 내부의 모든 객체에 mouseEnabled만 활성화 시킨다. */Enabled(newEnabled).target(this.lower).enabled(false, true);
나는 비주얼쪽으로 작업을 많이 하는 편이다. 객체의 모션의 흐름에 대한 이벤트 제어를 많이 주다 보면 마우스 이벤트 처리가 엉키는 경우를 종종 발생한다. 그래서 이와 같은 경우에 상당히 민감하다.
비단, 비주얼 개발이 아닌 애플리케이션 개발에서도 이 부분이 상당히 민감한 부분이라 많은 토론들이 오고가는 것을 보았다. 리스너는 적당히 사용하고 지우는 것이 최고인듯.
여러군데의 포스트들을 보았고, 코드 참조와 방법을 생각을 해보았다.
현재는 이 방법이 괜찮아 보인다. 더 좋은 방법이 있다면 개선해서 사용하면 좋을 듯 싶다.
참고로 디스플레이 객체중 Bitmap 같은 경우는 DisplayObject와 바로 상속 관계에 있는 객체는 이벤트 속성이 존재하지 않으므로 단독적으로 사용을 할때는 이와 같은 예외 처리를 할 필요는 없다.
