마우스 입력 캡처

마우스를 클릭하면 대화형 기능을 트리거하는 데 사용할 수 있는 마우스 이벤트가 만들어집니다. 이벤트 리스너를 Stage에 추가하면 SWF 내에서 발생하는 마우스 이벤트를 수신할 수 있습니다. 또한 InteractiveObject로부터 상속되는 Stage의 객체에(예: Sprite 또는 MovieClip) 이벤트 리스너를 추가할 수 있습니다. 이러한 리스너는 객체를 클릭하면 트리거됩니다.

키보드 이벤트와 마찬가지로 마우스 이벤트도 버블링됩니다. 다음 예제에서 square는 Stage의 자식이므로 정사각형을 클릭하면 Sprite square와 Stage 객체 둘 다에서 이벤트가 전달됩니다.

var square:Sprite = new Sprite();
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.addEventListener(MouseEvent.CLICK, reportClick);
square.x =
square.y = 50;
addChild(square);

stage.addEventListener(MouseEvent.CLICK, reportClick);

function reportClick(event:MouseEvent):void
{
    trace(event.currentTarget.toString() +         " dispatches MouseEvent. Local coords [" +         event.localX + "," + event.localY + "] Stage coords [" +         event.stageX + "," + event.stageY + "]");
}

위 예제의 마우스 이벤트에는 클릭 위치 정보가 포함되어 있습니다. localX 및 localY 속성에는 표시 체인의 최하위 자식에 대한 마우스 클릭 위치가 포함되어 있습니다. 예를 들어, square의 왼쪽 위 모서리를 클릭하면 square의 등록 포인트인 로컬 좌표 [0,0]이 보고됩니다. 또는 stageX 및 stageY 속성이 스테이지 클릭의 전역 좌표를 참조합니다. 이 좌표의 경우 같은 클릭으로 [50,50]이 보고됩니다. square가 해당 좌표로 이동되었기 때문입니다. 이러한 두 좌표 쌍은 사용자 상호 작용에 대한 응답 방식에 따라 유용할 수 있습니다.

MouseEvent 객체에는 altKey, ctrlKey 및 shiftKey라는 부울 속성도 포함되어 있습니다. 이러한 속성을 사용하여 마우스 클릭 시 Alt, Ctrl 또는 Shift 키를 함께 눌렀는지 여부를 확인할 수 있습니다.

드래그 앤 드롭 기능 만들기

드래그 앤 드롭 기능을 사용하면 마우스 왼쪽 버튼을 누른 상태에서 객체를 드래그하여 화면의 새로운 위치로 이동할 수 있습니다. 아래의 코드는 여기에 해당하는 예제입니다.

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

var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(0, 0, 40);

var target1:Sprite = new Sprite();
target1.graphics.beginFill(0xCCFF00);
target1.graphics.drawRect(0, 0, 100, 100);
target1.name = "target1";

var target2:Sprite = new Sprite();
target2.graphics.beginFill(0xCCFF00);
target2.graphics.drawRect(0, 200, 100, 100);
target2.name = "target2";

addChild(target1);
addChild(target2);
addChild(circle);

circle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) 

function mouseDown(event:MouseEvent):void
{
    circle.startDrag();
}
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

function mouseReleased(event:MouseEvent):void
{
    circle.stopDrag();
    trace(circle.dropTarget.name);
}

마우스 커서 사용자 정의

Stage의 표시 객체에 대해 마우스 커서(마우스 포인터)를 숨기거나 교체할 수 있습니다. 마우스 커서를 숨기려면 Mouse.hide() 메서드를 호출합니다. Mouse.hide()를 호출하고 해당 스테이지에서 MouseEvent.MOUSE_MOVE 이벤트를 수신하는 한편 표시 객체(사용자 정의 커서)의 좌표를 해당 이벤트의 stageX 및 stageY 속성으로 설정함으로써 커서를 사용자 정의할 수 있습니다. 다음 예제에서는 이 작업을 실행하는 방법을 보여 줍니다.

var cursor:Sprite = new Sprite();
cursor.graphics.beginFill(0x000000);
cursor.graphics.drawCircle(0,0,20);
cursor.graphics.endFill();
addChild(cursor);

stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
Mouse.hide();

function redrawCursor(event:MouseEvent):void
{
    cursor.x = event.stageX;
    cursor.y = event.stageY;
}

컨텍스트 메뉴 사용자 정의

InteractiveObject 클래스로부터 상속되는 모든 객체에는 사용자가 SWF 파일에서 마우스 오른쪽 버튼을 클릭할 경우 표시되는 고유한 컨텍스트 메뉴가 포함될 수 있습니다. [앞으로 이동], [뒤로 이동], [인쇄], [품질], [확대/축소] 등의 몇 가지 명령은 기본적으로 포함됩니다.

[설정] 및 [정보] 명령을 제외한 모든 기본 명령은 메뉴에서 제거할 수 있습니다. 스테이지 속성 showDefaultContextMenu를 false로 설정하면 컨텍스트 메뉴에서 이러한 명령이 제거됩니다.

특정한 표시 객체의 컨텍스트 메뉴를 사용자 정의하려면 ContextMenu 클래스의 새 인스턴스를 만들고 hideBuiltInItems() 메서드를 호출한 다음 이 인스턴스를 해당하는 DisplayObject 인스턴스의 contextMenu 속성에 지정합니다. 다음 예제에서는 동적으로 그려지는 정사각형에 임의의 색상으로 변경할 수 있는 컨텍스트 메뉴 명령을 제공합니다.

var square:Sprite = new Sprite();
square.graphics.beginFill(0x000000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x =
square.y = 10;
addChild(square);

var menuItem:ContextMenuItem = new ContextMenuItem("Change Color");
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,changeColor);
var customContextMenu:ContextMenu = new ContextMenu();
customContextMenu.hideBuiltInItems();
customContextMenu.customItems.push(menuItem);
square.contextMenu = customContextMenu;

function changeColor(event:ContextMenuEvent):void
{
    square.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
    return new ColorTransform(Math.random(), Math.random(),         Math.random(),1,(Math.random() * 512) - 255,         (Math.random() * 512) -255, (Math.random() * 512) - 255, 0);
}

포커스 관리

대화형 객체는 프로그래밍 또는 사용자 액션을 통해 포커스를 받을 수 있습니다. 어떤 방법을 택하든, 포커스를 설정하면 객체의 focus 속성이 true로 바뀝니다. 또한 tabEnabled 속성이 true로 설정되어 있는 경우에는 Tab 키를 눌러 특정 객체의 포커스를 다른 객체로 넘길 수 있습니다. 다음과 같은 경우를 제외하고, tabEnabled의 기본값은 false입니다.

이러한 경우 FocusEvent.FOCUS_IN 또는 FocusEvent.FOCUS_OUT에 대한 리스너를 추가하여 포커스 변경 시의 비헤이비어를 추가할 수 있습니다. 이는 특히 텍스트 필드 및 양식에 유용하지만 스프라이트, 무비 클립 또는 InteractiveObject 클래스로부터 상속되는 모든 객체에서도 사용할 수 있습니다. 다음 예제에는 Tab 키를 사용하여 포커스를 순환할 수 있도록 설정하는 방법과 이후의 포커스 이벤트에 응답하는 방법이 나와 있습니다. 이 경우 각 정사각형에 포커스가 설정되면 색상이 변경됩니다.

var rows:uint = 10;
var cols:uint = 10;
var rowSpacing:uint = 25;
var colSpacing:uint = 25;
var i:uint;
var j:uint;
for (i = 0; i < rows; i++)
{
    for (j = 0; j < cols; j++)
    {
        createSquare(j * colSpacing, i * rowSpacing, (i * cols) + j);
    }
}

function createSquare(startX:Number, startY:Number, tabNumber:uint):void
{
    var square:Sprite = new Sprite();
    square.graphics.beginFill(0x000000);
    square.graphics.drawRect(0, 0, colSpacing, rowSpacing);
    square.graphics.endFill();
    square.x = startX;
    square.y = startY;
    square.tabEnabled = true;
    square.tabIndex = tabNumber;
    square.addEventListener(FocusEvent.FOCUS_IN, changeColor);
    addChild(square);
}
function changeColor(event:FocusEvent):void
{
    e.target.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
    // 빨강, 녹색 및 파랑 색상 채널에 대한 무작위 값을 생성합니다.
    var red:Number = (Math.random() * 512) - 255;
    var green:Number = (Math.random() * 512) - 255;
    var blue:Number = (Math.random() * 512) - 255;
    
    // 무작위 색상으로 ColorTransform 객체를 만들어 반환합니다.
    return new ColorTransform(1, 1, 1, 1, red, green, blue, 0);
}