사용자 상호 작용의 기초

Flash Player 9 이상, Adobe AIR 1.0 이상

응용 프로그램에서 ActionScript 3.0을 사용하여 대화형 작업을 만들어 사용자 작업에 응답할 수 있습니다. 이 단원의 내용은 사용자가 ActionScript 3.0 이벤트 모델을 사용하는 데 익숙하다는 것을 전제로 하여 설명합니다. 자세한 내용은 이벤트 처리 를 참조하십시오.

사용자 입력 캡처

키보드, 마우스, 카메라 또는 이러한 장치의 조합을 통한 사용자 상호 작용은 가장 기본적인 상호 작용입니다. ActionScript 3.0에서 사용자 상호 작용에 대한 식별 및 응답은 주로 이벤트 수신과 관련되어 있습니다.

DisplayObject 클래스의 하위 클래스인 InteractiveObject 클래스는 사용자 상호 작용을 처리하는 데 필요한 일반적인 기능과 이벤트 구조를 제공합니다. InteractiveObject 클래스의 인스턴스를 직접 만들지는 않습니다. 대신 SimpleButton, Sprite, TextField와 여러 Flash 제작 도구 및 Flex 구성 요소 등의 표시 객체는 이 클래스로부터 사용자 상호 작용 모델을 상속하므로 일반 구조를 공유합니다. 따라서 InteractiveObject로부터 파생된 객체에서 사용자 상호 작용을 처리하기 위해 작성하는 코드와 배운 기술은 다른 모든 분야에도 적용이 가능합니다.

중요한 개념 및 용어

계속하기 전에, 사용자 상호 작용에 관한 다음의 주요 용어를 익혀야 합니다.

문자 코드
키보드에서 누르는 키와 관련하여 현재 문자 집합에서의 문자를 나타내는 숫자 코드입니다. 예를 들어 "D"와 "d"는 문자 코드는 서로 다르지만 영문 키보드에서 동일한 키로 입력됩니다.

컨텍스트 메뉴
사용자가 마우스 오른쪽 버튼을 클릭하거나 특정 키보드-마우스 조합을 사용할 때 나타나는 메뉴입니다. 컨텍스트 메뉴 명령은 일반적으로 클릭한 대상에 직접 적용되는 경우가 많습니다. 예를 들어 이미지에 대한 컨텍스트 메뉴에는 이미지를 별도의 윈도우에 표시하는 명령과 이미지를 다운로드하는 명령이 포함됩니다.

포커스
선택한 요소가 활성화되어 있으며 키보드 또는 마우스 상호 작용의 대상이 됨을 나타냅니다.

키 코드
키보드의 실제 키에 해당하는 숫자 코드입니다.

포커스 관리

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

  • SimpleButton 객체의 경우 이 값이 true 입니다.

  • 입력 텍스트 필드의 경우 이 값이 true 입니다.

  • buttonMode true 로 설정된 Sprite 객체 또는 MovieClip 객체의 경우 이 값이 true 입니다.

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

참고: Flash Professional은 키보드 단축키를 사용하여 포커스를 관리합니다. 따라서 포커스 관리를 제대로 시뮬레이션하려면 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); 
}

입력 유형 확인

Flash Player 10.1 및 Adobe AIR 2 릴리스에서는 런타임 환경을 테스트하여 특정 입력 유형이 지원되는지 여부를 확인할 수 있는 기능을 도입했습니다. 이제 ActionScript를 사용하여 런타임이 현재 배포된 장치에서 다음을 테스트할 수 있습니다.
  • 스타일러스 또는 손가락 입력 지원(또는 터치 입력 지원 안 함)

  • 사용자를 위한 가상 또는 물리적 키보드 제공(또는 키보드 제공 안 함)

  • 커서 표시(표시하지 않을 경우 객체를 마우스로 가리켜야 사용 가능한 기능이 작동하지 않음)

입력 확인 ActionScript API는 다음과 같습니다.

입력 확인 API를 사용하면 사용자의 장치 기능을 이용하거나 해당 기능이 없는 경우 대체 방법을 제공할 수 있습니다. 입력 확인 API는 휴대 장치 및 터치 지원 응용 프로그램을 개발하는 경우에 특히 유용합니다. 예를 들어 휴대 장치 인터페이스에 스타일러스용 작은 버튼을 있는 경우 사용자가 손가락 터치로 입력할 수 있도록 더 큰 버튼을 갖는 대체 인터페이스를 제공할 수 있습니다. 다음은 두 함수를 갖는 응용 프로그램에 대한 코드입니다. 여기에서 createStylusUI() 함수는 스타일러스 상호 작용에 적합한 사용자 인터페이스 요소 세트를 할당하며, createTouchUI() 함수는 손가락 상호 작용에 적합한 사용자 인터페이스 요소 세트를 할당합니다.

if(Capabilities.touchscreenType == TouchscreenType.STYLUS ){ 
    //Construct the user interface using small buttons for a stylus 
    //and allow more screen space for other visual content 
    createStylusUI(); 
} else if(Capabilities.touchscreenType = TouchscreenType.FINGER){ 
    //Construct the user interface using larger buttons 
    //to capture a larger point of contact with the device 
    createTouchUI(); 
}
서로 다른 입력 환경에 대한 응용 프로그램을 개발하는 경우 다음과 같은 호환성 차트를 고려해 볼 수 있습니다.

환경

supportsCursor

touchscreenType == FINGER

touchscreenType == STYLUS

touchscreenType == NONE

기존 데스크톱

true

false

false

true

정전식 터치 스크린 장치(미세한 사용자 터치를 감지하는 타블렛, PDA 및 Apple iPhone, Palm Pre 등의 휴대폰)

false

true

false

false

저항식 터치 스크린 장치(높은 압력의 정밀 접촉을 감지하는 타블렛, PDA 및 HTC Fuze 등의 휴대폰)

false

false

true

false

비 터치 스크린 장치(접촉을 감지하는 응용 프로그램을 실행하지만 접촉을 감지하는 스크린이 없는 일반 휴대폰)

false

false

false

true

참고: 장치 플랫폼에 따라 다양한 조합의 입력 유형을 지원할 수 있습니다. 이 차트는 일반적인 지침으로 사용하십시오.