[AS3] MouseEvent 활용 예제

아래 예에서는 MouseEventExample 및 ChildSprite 클래스를 사용하여 단순한 이미지를 사용, 마우스 이벤트가 송출되는 방법을 나타낸다.

package {
        import flash.display.Sprite;

        public class MouseEventExample extends Sprite {
                private var size:uint = 100;
                private var bgColor:uint = 0xFFCC00;

                public function MouseEventExample() {
                        var child:ChildSprite = new ChildSprite();
                        addChild(child);
                }
        }
}

import flash.display.Sprite;
import flash.events.MouseEvent;

class ChildSprite extends Sprite {
        private var size:uint = 50;
        private var overSize:uint = 60;
        private var backgroundColor:uint = 0xFFCC00;
        private var overColor:uint = 0xCCFF00;
        private var downColor:uint = 0x00CCFF;

        public function ChildSprite() {
                draw(size, size, backgroundColor);
                addEventListener(MouseEvent.CLICK, clickHandler);
                addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler);
                addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
                addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
                addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
                addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
                addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
        }

        private function draw(w:uint, h:uint, bgColor:uint):void {
                graphics.clear();
                graphics.beginFill(bgColor);
                graphics.drawRect(0, 0, w, h);
                graphics.endFill();
        }

        private function clickHandler(event:MouseEvent):void {
                trace("clickHandler");
        }

        private function doubleClickHandler(event:MouseEvent):void {
                trace("doubleClickHandler");
        }

        private function mouseDownHandler(event:MouseEvent):void {
                trace("mouseDownHandler");
                draw(overSize, overSize, downColor);

                var sprite:Sprite = Sprite(event.target);
                sprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                sprite.startDrag();
        }

        private function mouseMoveHandler(event:MouseEvent):void {
                trace("mouseMoveHandler");
                event.updateAfterEvent();
        }

        private function mouseOutHandler(event:MouseEvent):void {
                trace("mouseOutHandler");
                draw(size, size, backgroundColor);
        }

        private function mouseOverHandler(event:MouseEvent):void {
                trace("mouseOverHandler");
                draw(overSize, overSize, overColor);
        }

        private function mouseWheelHandler(event:MouseEvent):void {
                trace("mouseWheelHandler delta: " + event.delta);
        }

        private function mouseUpHandler(event:MouseEvent):void {
                trace("mouseUpHandler");
                var sprite:Sprite = Sprite(event.target);
                sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                sprite.stopDrag();
                draw(overSize, overSize, overColor);
        }
}

이 예제 소스는 다음과 같이 처리 한다.

1.    사각을 만드는데 사용하는 사이즈 (100 × 100 픽셀)와 배경색 (오렌지색)의 프롭퍼티를 선언한다.
2.    Constructor의 ChildSprite 오브젝트 child를 작성한다. 처음에 child의 constructor에서 draw() 메소드를 호출하여 오렌지색의 100 × 100 픽셀의 사각형을 (0,0) 의 좌표에 표시한다. 그 다음 코드는 7 개의 이벤트 청취자와 각 핸들러 메소드를 추가로 작성한다.

*    click/clickHandler() : 마우스 커서를 사각형 위에 놓고 왼쪽 mouse button을 싱글 클릭 했을 때 송출된다.
*    doubleClick/doubleClickHandler( ): 사각형 위에서 왼쪽 mouse button이 더블 클릭 되었을 때 송출된다.
*    mouseDown/mouseDownHandler() : ChildSprite 오브젝트 (오렌지색의 사각형)를 클릭하면 trace() 메세지가 화면에 표시되고 ChildSprite.draw()를 호출하여 mouseOverHandler()에서 나타난 밝은 청색의 사각형 위치에 어두운 황색 사각형이 표시된다. 또 mouseDownHandler() 메소드에 의해서 mouseMove 이벤트 청취자를 등록한다. 이것에 의해서 마우스의 이동이 처리되고 startDrag() 메소드를 호출하게 되어 Sprite 오브젝트의 드러그가 가능하게 된다.
*    mouseOut/mouseOutHandler() : 포인터가 사각형의 영역을 out하면 송출된다. draw() 메소드를 호출하여 사각형을 기존의 디폴트 색으로 변환한다.
*    mouseOver/mouseOverHandler( ): 마우스 포인터가 사각형과 겹쳐지면 송출된다. 이 메소드를 통해서 사각형은 어두운 황색 배경색으로 바뀌고 크기도 커진다.
*    mouseUp/mouseUpHandler(): 유저가 mouse button을 떼어 놓으면 mouseMove 이벤트 청취자가 삭제되어 stopDrag된다.
*    mouseMove/mouseMoveHandler(): 왼쪽 mouse button을 클릭하고 있는 동안 이 메소드는 Flash Player에 대해서 계속 오렌지색의 사각형을 다시 그리기를 요청하게 된다.
*    mouseWheel/mouseWheelHandler(): 사각형 위에서 마우스 휠을 회전시켰을 때에 송출된다.