InteractiveObject 가 겹칠 시의 버튼 비활성화에 대한 해결책

전에 올린 buttonMode 에 관한 글(http://www.minarto.com/24) 에 몇가지 사실을 더 덧붙일 것이 생겼다.

as3 에서 버튼 이벤트가 걸린 InteractiveObject 위에 InteractiveObject 가 겹쳐 있다면 겹친 부분은 버튼 이벤트가 발생하지 않는다.

var sp1:Sprite = new Sprite();
sp1.graphics.beginFill(0);
sp1.graphics.drawRect(0, 0, 100, 100);
sp1.graphics.endFill();
addChild(sp1);

var sp2:Sprite = new Sprite();
sp2.graphics.beginFill(0xFFCC00);
sp2.graphics.drawRect(0, 0, 100, 100);
sp2.graphics.endFill();
addChild(sp2);
sp2.x = sp1.x + 20;
sp2.y = sp1.y + 20;

sp1.buttonMode = true;

예를 들어 위와 같은 소스에서 검은색 박스에서는 손가락 모양이었던 마우스 커서가 주황색 박스로 옮겨지는 순간 MouseEvent.ROLL_OUT 가 발생해버리는 것이다.


그건 다음과 같은 한 줄의 코드로 해결이 가능하다. (InteractiveObject.mouseEnabled 속성은 상훈이 형님 블로그를 보고 알았다)

sp2.mouseEnabled = false;

이 한줄을 추가하게 되면 as2.0 과 같이 정상적인(뭐, 뭐가 정상인지는 여기서 논할 것이 아니다) 결과가 나오게 된다.


하지만 같은 InteractiveObject 라도 TextField class 일 경우는 위와 같은 방법이 통하지 않는다. 같은 InteractiveObject 로서 mouseEnabled 프로퍼티를 가지고 있는데도 말이다.

이부분은 버그가 아닐까 싶기도 하다...

var sp1:Sprite = new Sprite();
sp1.graphics.beginFill(0);
sp1.graphics.drawRect(0, 0, 100, 100);
sp1.graphics.endFill();
addChild(sp1);

var tf:TextField = new TextField();
tf.text = "sdfasfsf";
tf.textColor = 0xFFFFFF;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.selectable = false;
addChild(tf);
tf.x = sp1.x + 20;
tf.y = sp1.y + 20;

sp1.buttonMode = true;

tf.mouseEnabled = false;

이 상황에서는 다시 처음 코드와 같이 MouseEvent.ROLL_OUT 가 발생해버린다.


그럼 어떻게 해결해야 하는 것일까?

이것 저것 생각해보다가 다음과 같은 방법을 쓰게 됐다. 엄밀히 말하면 이건 해결이라기 보다는 우회이다... 바로 비트맵으로 TextField 클래스를 표현하면 된다.

var sp1:Sprite = new Sprite();
sp1.graphics.beginFill(0);
sp1.graphics.drawRect(0, 0, 100, 100);
sp1.graphics.endFill();
addChild(sp1);

var tf:TextField = new TextField();
tf.text = "sdfasfsf";
tf.textColor = 0xFFFFFF;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.selectable = false;
tf.x = sp1.x + 20;
tf.y = sp1.y + 20;

var bd:BitmapData = new BitmapData(tf.width, tf.height, true, 0x00FFFFFF);
bd.draw(tf);
var bm:Bitmap = new Bitmap(bd);
addChild(bm);
bm.x = tf.x;
bm.y = tf.y;

sp1.buttonMode = true;

이렇게 하면 마우스가 정상 동작하는 것을 볼 수 있다. 자주 사용할 일이 있다면 클래스로 만들어놓고 사용하는 것도 괜찮을 것이다.


p.s. Bitmap 클래스는 InteractiveObject 가 아니기 때문에 mouseEnabled 가 필요 없다(그런 속성도 없다)는 사실.