(1) Drag & Drop

먼저 간단한 예제를 하나 만들어보자.

 

[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로 지정해 주어 사용하면 된다.