① startDrag란?
'startDrag‘란 시작하다의 “start”와 “드래그하다. 끌다”라는 뜻의 drag가 합쳐진 것으로, “드래그를 시작하다”라는 뜻이 됩니다. 즉 어떤 무비클립을 드래그하기 위해서는 “startDrag()” 메서드를 사용하면 됩니다.
target.startDrag(lockCenter, left, top, right, bottom)
매개변수 | 설명 |
target | 드래그할 무비클립을 나타냅니다. 예를 들어 메인 타임라인(_root)에 있는 bird라는 무비클립을 드래그하기 위해서는 target 자리에 _root.bird라고 적어주면 됩니다. |
lockCenter | 정식 명칭은 lock mouse to center로 무비클립의 중심점이 마우스 커서와 일치시킬지 여부를 나타내는 항목입니다. 이 값이 true로 설정되면, 무비클립의 중심점이 마우스 커서와 일치하게 되고, false로 설정되면, 중심점과 마우스 커서가 일치하지 않게 됩니다. |
left | 이 항목은 무비클립의 드래그 될 사각형 영역을 나타냅니다. |
top | 사각형을 만들기 위해서는 두개의 점이 필요합니다. |
right | 왼쪽 상단에 있는 점(left, top)과 오른쪽 하단에 있는 점(right, bottom)을 연결하면 직각이 됩니다. |
bottom | 사각형이 만들어지는데, 이 값이 설정되면 무비클립의 중심점은 정해진 사각형 영역을 벗어날 수 없습니다. |
<예문>
다음 예문은 window라는 인스턴스 이름을 가진 무비클립의 중심점을 마우스 커서와 일치시킨 채 드래그 하라는 것입니다.
다음 예문은 window라는 인스턴스 이름을 가진 무비클립의 중심점을 마우스 커서와 일치시킨 채 드래그 하라는 것입니다.
_root.window.startDrag(true);
그리고 아래 예문은 cat이라는 무비클립의 중심점을 마우스 커서와 일치시킨 채 무비클립의 중심점이 (100, 100)과 (300, 400)으로 만들어진 사각형 내부를 벗어나지 않도록 한 것입니다.
_root.cat.startDrag(true, 100, 100, 300, 400);
여기에서 기억해 둘 점은 “startDrag()" 액션으로는 한 번에 오직 하나의 무비클립만 드래그 할 수 있습니다. 동시에 여러 개의 무비클립을 드래그하기 위해서는 다른 액션스크립트를 사용해야 합니다.
자동차를 하나 버튼으로 만들겠습니다.
먼저 자동차를 만들기 위해서는 자동차가 마우스 버튼에 눌려졌는지 여부를 판단해야 하므로 자동차는 버튼이 되어야 하고 “startDrag"액션을 이용해서 드래그하려면 무비클립이 되어야 합니다. 이 두 가지를 모두 만족시키기 위해서는 자동차를 버튼으로 만들고, 다시 무비클립으로 만들어야 합니다. 결과적으로 버튼이 무비클립 속에 들어가게 됩니다.
먼저 자동차를 만들기 위해서는 자동차가 마우스 버튼에 눌려졌는지 여부를 판단해야 하므로 자동차는 버튼이 되어야 하고 “startDrag"액션을 이용해서 드래그하려면 무비클립이 되어야 합니다. 이 두 가지를 모두 만족시키기 위해서는 자동차를 버튼으로 만들고, 다시 무비클립으로 만들어야 합니다. 결과적으로 버튼이 무비클립 속에 들어가게 됩니다.
<버튼에 삽입해야 할 스크립트>
on(press){
this.startDrag();
}
on(release){
this.stopDrag();
}
this.startDrag();
}
on(release){
this.stopDrag();
}
위 액션스크립트는 “마우스로 자동차를 누르면 자동차를 드래그하고 마우스 버튼을 놓으면 드래그를 멈추시오.”라는 뜻입니다. “this.startDrag()"에서 this는 버튼을 포함하고 있는 무비클립을 뜻합니다, 즉 버튼은 무비클립 속에 들어가 있으므로, 버튼에 this라고 적으면 이는 무비클립을 가리킵니다.
또 한 가지 알아두어야 할 것은 “startDrag()”에 아무런 매개변수가 없으면 startDrag(false);와 동일합니다. 즉 무비클립 중심과 마우스 커서가 일치되지 않고, 드래그 될 영역이 설정되지 않습니다.
this.stopDrag()는 현재 드래그 되고 있는 무비클립을 정지시키라는 뜻입니다.
또 한 가지 알아두어야 할 것은 “startDrag()”에 아무런 매개변수가 없으면 startDrag(false);와 동일합니다. 즉 무비클립 중심과 마우스 커서가 일치되지 않고, 드래그 될 영역이 설정되지 않습니다.
this.stopDrag()는 현재 드래그 되고 있는 무비클립을 정지시키라는 뜻입니다.
② startDrag 메서드 영역 설정하기
앞에서 배운 startDrag() 메서드의 형식은 아래와 같습니다.
_root.cat.startDrag(true, 100, 100, 300, 400);
이중에서 lef, top, right, bottom 이라는 네 개의 매개변수는 무비클립의 중심점이 움직일 수 있는 직사각형 영역을 설정하는데 사용됩니다. 이 네 개의 변수는 (left, top), (right, bottom)과 같이 좌표평면 상에서 두 개의 점을 나타냅니다. 아래 그림과 같이 직사각형을 만들기 위해서는 왼쪽 상단의 점과 오른쪽 하단의 점만 있으면 됩니다.