사용자 상호 작용의 기초

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

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

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

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

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

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

이러한 경우 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 
{ 
    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); 
}

입력 확인 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(); 
}