먼저 간단한 예제를 하나 만들어보자.
[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class DragExample extends Sprite
{
public function DragExample()
{
super();
buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
this.startDrag();
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]
위의 핑크색 사각에 마우스를 대면 손모양으로 바뀌며 사각형을 드래그 할 수 있다.
그런데 Sprite 메서드에서 startDrag()메서드에 2개의 매개변수값을 지정할 수 있었다.
startDrag(lockCenter :Boolean = false, bounds;Rectangle = null) 이렇게..
(1) lockCenter : Boolean
lockCenter는 " 드래그 가능 Sprite가 마우스 위치의 가운데에서 잠기는지(true) 아니면 사용자가 Sprite를 맨 처음 클릭한 곳에서 잠기는지(false)를 지정한다 "라고 설명을 해 놓았지만.. 무슨말인지...그래서 위에 있는 코드에 값을 넣어보겠다.
[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class DragExample extends Sprite
{
public function DragExample()
{
super();
buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
this.startDrag(true, null);
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]
18번째 라인에 lockCenter값을 true로 넣어주었다. 실행결과를 확인해 보면 핑크사각형 위의 어느 부분에서든 마우스를 클릭하게 되면 그 클릭한 부분이 중심이 되어 lock이 되는 것이다.
loockCenter = true 로 하면 위와 같이 되며 일반적으로 false이다.
(2) bounds : Rectangle
bounds는 " Sprite의 제한 영역을 지정하는 Sprite의 부모의 좌표와 관련된 값입니다. "이다.
음...Sprite의 제한영역을 지정한다...한번 만들어보자.
[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
public class DragExample extends Sprite
{
public function DragExample()
{
super();
buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
var rectangle:Rectangle = new Rectangle( 0, 0, 200, 200);
this.startDrag(false, rectangle);
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]
19번째 라인에서 Rectangle클래스를 이용하여 일정한 영역만큼 값을 주어 그 영역 안에서만 움직일 수 있도록 하였다. 이것이 bounds이다. 위의 핑그색 사각형을 이동시켜보면 파란색 영역까지만 움직인다. 이렇게 영역을 제한하는 것이 bounds이다.
음....그런데 여기서 뭔가 이상한 걸 느끼지 않았나? 잘 보면 사각형을 마우스 다운해서 이동시킨 후에 파란색 영역 바깥에서 마우스 업시키면 계속해서 사각형이 이동한다.
MouseEvent.MOUSE_UP은 객체를 마우스 다운해서 이동시킨 후 그 객체 위에서 마우스 업을 하지 않으면 계속 이동(Drag)된 상태가 유지된다.
만약, 객체 위에서가 아닌 다른 영역에서 MOUSE_UP이 되게 하고 싶으면 stage를 쓰면된다.
브라우저(Flash® Player)에서 실행 중인 SWF 내용의 경우 Stage는 Flash 내용이 표시되는 전체 영역을 나타낸다.(가장 최상위)
[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
public class DragExample extends Sprite
{
public function DragExample()
{
super();
buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
var rectangle:Rectangle = new Rectangle( 0, 0, 200, 200);
this.startDrag(false, rectangle);
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]
15번째 라인에서 이벤트를 stage에 걸어주어 사각형 바깥영역에서 마우스 업이 되게 하였다.
* Drag & Drop을 배우면서 얻은 정보 *
mouseDownHandler 같은 메서드는 많이 쓰인다. 만약, 이 mouseDownHandler를 쓰고 있는 클래스를 상속받는 곳에서 다시 mouseDownHandler를 사용해서 쓰려고 하면 충돌나서 에러난다. 따라서 상속하려는 상위클래스의 mouseDownHanlder를 protected로 지정해 주어 사용하면 된다.
