위치 변경

화면에 표시 객체를 배치하는 것은 표시 객체에 대한 가장 기본적인 조작입니다. 표시 객체의 위치를 설정하려면 객체의 xy 속성을 변경합니다.

myShape.x = 17;
myShape.y = 212;

표시 객체 위치 지정 시스템에서는 스테이지를 직교 좌표계(가로 x축과 세로 y축이 있는 일반 격자 시스템)로 취급합니다. 좌표계의 원점(x축과 y축이 만나는 0,0 좌표)은 Stage의 왼쪽 위 모서리에 있습니다. x 값은 원점으로부터 오른쪽이 양수이고 왼쪽이 음수이지만, y 값은 아래쪽이 양수이고 위쪽이 음수로 일반 그래프 시스템과 반대입니다. 예를 들어, 이전 코드 행은 myShape 객체를 x 좌표 17(원점의 오른쪽으로 17픽셀) 및 y 좌표 212(원점의 아래로 212픽셀)로 이동합니다.

기본적으로 ActionScript를 사용하여 표시 객체를 만들 경우 x 속성과 y 속성이 모두 0으로 설정되어 객체가 부모 내용의 왼쪽 위 모서리에 배치됩니다.

세부 목차

스테이지를 기준으로 위치 변경
드래그 앤 드롭 상호 작용 만들기

스테이지를 기준으로 위치 변경

xy 속성은 항상 부모 표시 객체 축의 0,0 좌표를 기준으로 표시 객체의 위치를 나타냅니다. Sprite 인스턴스에 포함된 Shape 인스턴스(예: circle)에 대해 Shape 객체의 xy 속성을 0으로 설정하면 원이 Sprite의 왼쪽 위 모서리에 배치됩니다. 이 위치가 반드시 Stage의 왼쪽 위 모서리가 되는 것는 아닙니다. 전역 스테이지 좌표를 기준으로 객체를 배치하려면 표시 객체의 globalToLocal() 메서드를 사용하여 좌표를 전역(스테이지) 좌표에서 로컬(표시 객체 컨테이너) 좌표로 다음과 같이 변환할 수 있습니다.

// 부모의 위치에 관계없이 스테이지의 왼쪽 위 모서리에 
// 모양을 배치합니다.

// 위치가 x:200 및 y:200인 Sprite를 만듭니다.
var mySprite:Sprite = new Sprite();
mySprite.x = 200;
mySprite.y = 200;
this.addChild(mySprite);

// Sprite의 0,0 좌표에 점을 참조용으로 그립니다.
mySprite.graphics.lineStyle(1, 0x000000);
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.moveTo(0, 0);
mySprite.graphics.lineTo(1, 0);
mySprite.graphics.lineTo(1, 1);
mySprite.graphics.lineTo(0, 1);
mySprite.graphics.endFill();

// 원 Shape 인스턴스를 만듭니다.
var circle:Shape = new Shape();
mySprite.addChild(circle);

// Shape에 반경이 50이며 중심점이 x:50, y:50에 있는 원을 그립니다.
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();

// Shape의 왼쪽 위 모서리가 스테이지의 0, 0 좌표에 위치하도록 Shape를 이동합니다.
var stagePoint:Point = new Point(0, 0);
var targetPoint:Point = mySprite.globalToLocal(stagePoint);
circle.x = targetPoint.x;
circle.y = targetPoint.y;

마찬가지로 DisplayObject 클래스의 localToGlobal() 메서드를 사용하여 로컬 좌표를 스테이지 좌표로 변환할 수 있습니다.

드래그 앤 드롭 상호 작용 만들기

일반적으로 표시 객체를 이동하는 한 가지 이유는 사용자가 객체를 클릭한 상태로 마우스를 이동하면 마우스 버튼을 놓을 때까지는 객체가 따라서 이동하도록 드래그 앤 드롭 상호 작용을 만들기 위한 것입니다. 드래그 앤 드롭 상호 작용은 ActionScript에서 두 가지 방법으로 만들 수 있습니다. 두 방법 모두 두 마우스 이벤트가 사용됩니다. 즉, 마우스 버튼을 누르면 마우스 커서를 따라 이동하도록 객체에게 지시하고, 마우스 버튼을 놓으면 마우스 커서를 따라 이동하는 것을 중지하도록 객체에게 지시합니다.

startDrag() 메서드를 사용하는 첫 번째 방법은 더 간단하지만 보다 제한적입니다. 마우스 버튼을 누르면 드래그할 표시 객체의 startDrag() 메서드가 호출됩니다. 마우스 버튼을 놓으면 stopDrag() 메서드가 호출됩니다.

// 이 코드는 startDrag() 기술을 사용하여 드래그 앤 드롭 상호 작용을 만듭니다.
// 사각형은 DisplayObject(예: MovieClip 또는 Sprite 인스턴스)입니다.

import flash.events.MouseEvent;

// 마우스 버튼을 누르면 이 함수가 호출됩니다.
function startDragging(event:MouseEvent):void
{
    square.startDrag();
}

// 마우스 버튼을 놓으면 이 함수가 호출됩니다.
function stopDragging(event:MouseEvent):void
{
    square.stopDrag();
}

square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

이 기술은 startDrag()를 사용하여 한 번에 하나의 항목만 드래그할 수 있다는 한 가지 중요한 제한이 있습니다. 표시 객체를 드래그하는 중에 startDrag() 메서드가 다른 표시 객체에서 호출되면, 마우스를 따라 이동하던 첫 번째 표시 객체의 이동이 즉시 중지됩니다. 예를 들어, startDragging() 함수가 아래에 표시된 것처럼 변경되면 square.startDrag() 메서드를 호출하더라도 circle 객체만 드래그됩니다.

function startDragging(event:MouseEvent):void
{
    square.startDrag();
    circle.startDrag();
}

startDrag()를 사용하여 객체를 한 번에 하나씩만 드래그할 수 있기 때문에, 임의의 표시 객체에 대해 stopDrag() 메서드를 호출하여 현재 드래그 중인 객체의 이동을 중지시킬 수 있습니다.

여러 표시 객체를 드래그해야 하거나 여러 객체가 startDrag()를 사용하여 발생할 수 있는 충돌을 방지하려면 mouse-following 기술을 사용하여 드래그 효과를 만드는 것이 좋습니다. 이 기술을 사용할 경우 마우스 버튼을 누르면 함수가 Stage의 mouseMove 이벤트에 대한 리스너로 구독됩니다. 그러면 마우스를 이동할 때마다 이 함수가 호출되어 드래그되는 객체가 마우스의 x, y 좌표로 바로 이동됩니다. 마우스 버튼을 놓으면 함수가 구독 해제되어, 마우스를 이동해도 함수가 더 이상 호출되지 않으므로 객체가 마우스 커서를 따라 이동하지 않습니다. 다음은 이 기술을 설명하는 일부 코드입니다.

// 이 코드는 mouse-following 기술을 사용하여 드래그 앤 드롭 상호 작용을 만듭니다.
// 원은 DisplayObject(예: MovieClip 또는 Sprite 인스턴스)입니다.

import flash.events.MouseEvent;

var offsetX:Number;
var offsetY:Number;

// 마우스 버튼을 누르면 이 함수가 호출됩니다.
function startDragging(event:MouseEvent):void
{
    // 마우스 버튼을 눌렀을 때 커서 위치와 마우스
    // 버튼을 놓았을 때 원의 x, y 좌표 간의 차이(오프셋)를
    // 기록합니다.
    offsetX = event.stageX - circle.x;
    offsetY = event.stageY - circle.y;
    
    // mouseMove 이벤트 수신을 시작하도록 Flash Player에 지시합니다.
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}

// 마우스 버튼을 놓으면 이 함수가 호출됩니다.
function stopDragging(event:MouseEvent):void
{
    // mouseMove 이벤트 수신을 중지하도록 Flash Player에 지시합니다.
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}

// 마우스 버튼을 누른 상태에서 마우스를 움직일 때마다 이 함수가 호출됩니다.
function dragCircle(event:MouseEvent):void
{
    // 커서 위치와 드래그된 객체 위치 간의 오프셋을 유지하면서 커서 위치로
    // 원을 이동합니다.
    circle.x = event.stageX - offsetX;
    circle.y = event.stageY - offsetY;

    // 이 이벤트 후 화면을 새로 고치도록 Flash Player에 지시합니다.
    event.updateAfterEvent();
}

circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

표시 객체를 마우스 커서를 따라 이동하게 하는 것 외에도, 드래그 앤 드롭 상호 작용은 드래그된 객체를 표시의 전면으로 이동시켜 모든 다른 객체 위에 떠 있는 것처럼 보이게 할 수 있습니다. 예를 들어, 드래그 앤 드롭 상호 작용을 하는 원과 사각형의 두 객체가 있다고 가정합니다. 원이 표시 목록에서 사각형의 아래에 있을 때 원을 클릭한 상태에서 드래그하여 커서를 사각형 위에 놓으면, 원이 사각형 뒤로 서서히 이동하는 것처럼 표시되어 드래그 앤 드롭 효과가 제거됩니다. 대신 원을 클릭하면 원이 표시 목록의 맨 위로 이동하여 항상 다른 내용의 위에 표시되게 할 수 있습니다.

이전 예제에서 사용된 다음 코드는 두 표시 객체인 원과 사각형에 대한 드래그 앤 드롭 상호 작용을 만듭니다. 어느 한 객체를 마우스 버튼으로 누르면 해당 항목이 Stage 표시 목록의 위로 이동하여 드래그된 항목이 항상 위에 표시됩니다. 새 코드나 이전 샘플에서 변경된 코드는 굵은 글꼴로 표시됩니다.

// 이 코드는 mouse-following 기술을 사용하여 드래그 앤 드롭 상호 작용을 만듭니다.
// 원과 사각형은 DisplayObjects(예: MovieClip 또는 Sprite 인스턴스)입니다.

import flash.display.DisplayObject;
import flash.events.MouseEvent;

var offsetX:Number;
var offsetY:Number;
var draggedObject:DisplayObject;

// 마우스 버튼을 누르면 이 함수가 호출됩니다.
function startDragging(event:MouseEvent):void
{
    // 드래그하고 있는 객체를 기억합니다.
    draggedObject = DisplayObject(event.target);
    
    // 마우스 버튼을 눌렀을 때 커서 위치와 마우스 버튼을 놓았을 때 드래그된 객체의
    // x, y 좌표 간의 차이(오프셋)를 기록합니다.
    offsetX = event.stageX - draggedObject.x;
    offsetY = event.stageY - draggedObject.y;
    
    // 선택한 객체를 표시 목록의 맨 위로 이동합니다.
    stage.addChild(draggedObject);
    
    // TmouseMove 이벤트 수신을 시작하도록 Flash Player에 지시합니다.
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}

// 마우스 버튼을 놓으면 이 함수가 호출됩니다.
function stopDragging(event:MouseEvent):void
{
    // mouseMove 이벤트 수신을 중지하도록 Flash Player에 지시합니다.
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}

// 마우스 버튼을 누른 상태에서 마우스를 움직일 때마다 이 함수가 호출됩니다.
function dragObject(event:MouseEvent):void
{
    // 커서 위치와 드래그된 객체 위치 간의 오프셋을 유지하면서 커서 위치로
    // 드래그된 객체를 이동합니다.
    draggedObject.x = event.stageX - offsetX;
    draggedObject.y = event.stageY - offsetY;
    
    // 이 이벤트 후 화면을 새로 고치도록 Flash Player에 지시합니다.
    event.updateAfterEvent();
}

circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

토큰이나 카드가 더미 간에 이동하는 게임에서처럼 이 효과를 더 확장하려면, 객체를 "선택"하여 드래그된 객체를 스테이지의 표시 목록에 추가한 다음, 마우스 버튼을 놓아 해당 객체를 다른 표시 목록(예: 드롭되는 "더미")에 추가할 수 있습니다.

마지막으로 효과를 향상시키기 위해 클릭할 때(드래그를 시작할 때) 표시 객체에 그림자 필터를 적용하고 객체를 놓을 때 그림자를 제거할 수 있습니다. ActionScript에서 그림자 필터 및 기타 표시 객체 필터를 사용하는 방법에 대한 자세한 내용은 표시 객체 필터링을 참조하십시오.


Flash CS3

 

이 페이지에 의견 추가되면 전자 메일 알림 받기 | 의견 보고서

현재 페이지: http://livedocs.adobe.com/flash/9.0_kr/main/00000154.html