=================================
=================================
=================================
마우스 입력 캡처
목차 [가리기]
마우스를 클릭하면 대화형 기능을 트리거하는 데 사용할 수 있는 마우스 이벤트가 만들어집니다. 이벤트 리스너를 스테이지에 추가하면 SWF 내에서 발생하는 마우스 이벤트를 수신할 수 있습니다. 또한 InteractiveObject로부터 상속되는 스테이지의 객체에(예: 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);
}
자세한 내용은 위치 변경에서 드래그 앤 드롭 상호 작용에 대한 단원을 참조하십시오.
마우스 커서 사용자 정의
스테이지의 표시 객체에 대해 마우스 커서(마우스 포인터)를 숨기거나 교체할 수 있습니다. 마우스 커서를 숨기려면 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입니다.
- SimpleButton 객체의 경우 이 값이 true입니다.
- 입력 텍스트 필드의 경우 이 값이 true입니다.
- buttonMode가 true로 설정된 Sprite 객체 또는 MovieClip 객체의 경우 이 값이 true입니다.
이러한 경우 FocusEvent.FOCUS_IN 또는 FocusEvent.FOCUS_OUT에 대한 리스너를 추가하여 포커스 변경 시의 비헤이비어를 추가할 수 있습니다. 이는 특히 텍스트 필드 및 양식에 유용하지만 스프라이트, 무비 클립 또는 InteractiveObject 클래스로부터 상속되는 모든 객체에서도 사용할 수 있습니다. 다음 예제에는 Tab 키를 사용하여 포커스를 순환할 수 있도록 설정하는 방법과 이후의 포커스 이벤트에 응답하는 방법이 나와 있습니다. 이 경우 각 정사각형에 포커스가 설정되면 색상이 변경됩니다.
참고: Flash 제작 도구는 키보드 단축키를 사용하여 포커스를 관리합니다. 따라서 포커스 관리를 제대로 시뮬레이션하려면 Flash 대신 브라우저나 AIR에서 SWF 파일을 테스트해야 합니다.
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
{
event.target.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
// Generate random values for the red, green, and blue color channels.
var red:Number = (Math.random() * 512) - 255;
var green:Number = (Math.random() * 512) - 255;
var blue:Number = (Math.random() * 512) - 255;
// Create and return a ColorTransform object with the random colors.
return new ColorTransform(1, 1, 1, 1, red, green, blue, 0);
}
=================================
=================================
=================================
위치 변경
화면에 표시 객체를 배치하는 것은 표시 객체에 대한 가장 기본적인 조작입니다. 표시 객체의 위치를 설정하려면 객체의 x 및 y 속성을 변경합니다.
myShape.x = 17;
myShape.y = 212;
표시 객체 위치 지정 시스템에서는 스테이지를 직교 좌표계(가로 x축과 세로 y축이 있는 일반 격자 시스템)로 취급합니다. 좌표계의 원점(x축과 y축이 만나는 0,0 좌표)은 스테이지의 왼쪽 위 모서리에 있습니다. x 값은 원점으로부터 오른쪽이 양수이고 왼쪽이 음수이지만, y 값은 아래쪽이 양수이고 위쪽이 음수로 일반 그래프 시스템과 반대입니다. 예를 들어, 이전 코드 행은 myShape 객체를 x 좌표 17(원점의 오른쪽으로 17 픽셀) 및 y 좌표 212(원점의 아래로 212 픽셀)로 이동합니다.
기본적으로 ActionScript를 사용하여 표시 객체를 만들 경우 x 속성과 y 속성이 모두 0으로 설정되어 객체가 부모 내용의 왼쪽 위 모서리에 배치됩니다.
스테이지를 기준으로 위치 변경
x 및 y 속성은 항상 부모 표시 객체 축의 0,0 좌표를 기준으로 표시 객체의 위치를 나타냅니다. Sprite 인스턴스에 포함된 Shape 인스턴스(예: circle)에 대해 Shape 객체의 x 및 y 속성을 0으로 설정하면 원이 Sprite의 왼쪽 위 모서리에 배치됩니다. 이 위치가 반드시 스테이지의 왼쪽 위 모서리가 되는 것은 아닙니다. 전역 스테이지 좌표를 기준으로 객체를 배치하려면 표시 객체의globalToLocal() 메서드를 사용하여 좌표를 전역(스테이지) 좌표에서 로컬(표시 객체 컨테이너) 좌표로 다음과 같이 변환할 수 있습니다.
// Position the shape at the top-left corner of the Stage,
// regardless of where its parent is located.
// Create a Sprite, positioned at x:200 and y:200.
var mySprite:Sprite = new Sprite();
mySprite.x = 200;
mySprite.y = 200;
this.addChild(mySprite);
// Draw a dot at the Sprite's 0,0 coordinate, for reference.
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();
// Create the circle Shape instance.
var circle:Shape = new Shape();
mySprite.addChild(circle);
// Draw a circle with radius 50 and center point at x:50, y:50 in the Shape.
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
// Move the Shape so its top-left corner is at the Stage's 0, 0 coordinate.
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() 메서드가 호출됩니다.
// This code creates a drag-and-drop interaction using the startDrag()
// technique.
// square is a DisplayObject (e.g. a MovieClip or Sprite instance).
import flash.events.MouseEvent;
// This function is called when the mouse button is pressed.
function startDragging(event:MouseEvent):void
{
square.startDrag();
}
// This function is called when the mouse button is released.
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 기술을 사용하여 드래그 효과를 만드는 것이 좋습니다. 이 기술을 사용할 경우 마우스 버튼을 누르면 함수가 스테이지의 mouseMove 이벤트에 대한 리스너로 구독됩니다. 그러면 마우스를 이동할 때마다 이 함수가 호출되어 드래그되는 객체가 마우스의 x, y 좌표로 바로 이동됩니다. 마우스 버튼을 놓으면 함수가 구독 해제되어, 마우스를 이동해도 함수가 더 이상 호출되지 않으므로 객체가 마우스 커서를 따라 이동하지 않습니다. 다음은 이 기술을 설명하는 일부 코드입니다.
// This code creates a drag-and-drop interaction using the mouse-following
// technique.
// circle is a DisplayObject (e.g. a MovieClip or Sprite instance).
import flash.events.MouseEvent;
var offsetX:Number;
var offsetY:Number;
// This function is called when the mouse button is pressed.
function startDragging(event:MouseEvent):void
{
// Record the difference (offset) between where
// the cursor was when the mouse button was pressed and the x, y
// coordinate of the circle when the mouse button was pressed.
offsetX = event.stageX - circle.x;
offsetY = event.stageY - circle.y;
// tell Flash Player to start listening for the mouseMove event
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}
// This function is called when the mouse button is released.
function stopDragging(event:MouseEvent):void
{
// Tell Flash Player to stop listening for the mouseMove event.
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}
// This function is called every time the mouse moves,
// as long as the mouse button is pressed down.
function dragCircle(event:MouseEvent):void
{
// Move the circle to the location of the cursor, maintaining
// the offset between the cursor's location and the
// location of the dragged object.
circle.x = event.stageX - offsetX;
circle.y = event.stageY - offsetY;
// Instruct Flash Player to refresh the screen after this event.
event.updateAfterEvent();
}
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
표시 객체를 마우스 커서를 따라 이동하게 하는 것 외에도, 드래그 앤 드롭 상호 작용은 드래그된 객체를 표시의 전면으로 이동시켜 모든 다른 객체 위에 떠 있는 것처럼 보이게 할 수 있습니다. 예를 들어, 드래그 앤 드롭 상호 작용을 하는 원과 사각형의 두 객체가 있다고 가정합니다. 원이 표시 목록에서 사각형의 아래에 있을 때 원을 클릭한 상태에서 드래그하여 커서를 사각형 위에 놓으면, 원이 사각형 뒤로 서서히 이동하는 것처럼 표시되어 드래그 앤 드롭 효과가 제거됩니다. 대신 원을 클릭하면 원이 표시 목록의 맨 위로 이동하여 항상 다른 내용의 위에 표시되게 할 수 있습니다.
이전 예제에서 사용된 다음 코드는 두 표시 객체인 원과 사각형에 대한 드래그 앤 드롭 상호 작용을 만듭니다. 어느 한 객체를 마우스 버튼으로 누르면 해당 항목이 스테이지 표시 목록의 위로 이동하여 드래그된 항목이 항상 위에 표시됩니다. 새 코드나 이전 샘플에서 변경된 코드는 굵은 글꼴로 표시됩니다.
// This code creates a drag-and-drop interaction using the mouse-following
// technique.
// circle and square are DisplayObjects (e.g. MovieClip or Sprite
// instances).
import flash.display.DisplayObject;
import flash.events.MouseEvent;
var offsetX:Number;
var offsetY:Number;
var draggedObject:DisplayObject;
// This function is called when the mouse button is pressed.
function startDragging(event:MouseEvent):void
{
// remember which object is being dragged
draggedObject = DisplayObject(event.target);
// Record the difference (offset) between where the cursor was when
// the mouse button was pressed and the x, y coordinate of the
// dragged object when the mouse button was pressed.
offsetX = event.stageX - draggedObject.x;
offsetY = event.stageY - draggedObject.y;
// move the selected object to the top of the display list
stage.addChild(draggedObject);
// Tell Flash Player to start listening for the mouseMove event.
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
// This function is called when the mouse button is released.
function stopDragging(event:MouseEvent):void
{
// Tell Flash Player to stop listening for the mouseMove event.
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
// This function is called every time the mouse moves,
// as long as the mouse button is pressed down.
function dragObject(event:MouseEvent):void
{
// Move the dragged object to the location of the cursor, maintaining
// the offset between the cursor's location and the location
// of the dragged object.
draggedObject.x = event.stageX - offsetX;
draggedObject.y = event.stageY - offsetY;
// Instruct Flash Player to refresh the screen after this event.
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에서 그림자 필터 및 기타 표시 객체 필터를 사용하는 방법에 대한 자세한 내용은 표시 객체 필터링을 참조하십시오.
=================================
=================================
=================================
'ADOBE > ActionScript' 카테고리의 다른 글
| adobe air android 개발 menu key, search key, back key 이벤트 핸들링 처리 관련 (0) | 2020.09.20 |
|---|---|
| 플래시 air 안드로이드 런처화면, 초기화면, splash image 관련 (0) | 2020.09.20 |
| ActionScript 3.0(Flash)에서 JSON 데이터 읽기. (0) | 2020.09.20 |
| adobe air 액션스크립트 파일 쓰기 읽기, 파일탐색기 사용 관련 (0) | 2020.09.20 |
| [Flex,AIR,ActionScript 3.0]Matrix를 이용해 이동,스케일링,회전,거울효과 적용 (0) | 2020.09.20 |