Основы взаимодействия пользователя с системой

В основе интерактивности лежит взаимодействие с пользователем через клавиатуру, мышь, камеру или все вместе. В ActionScript 3.0 определение и реагирование на действия пользователя прежде всего подразумевает прослушивание событий.

Класс InteractiveObject, подкласс класса DisplayObject, обеспечивает общую структуру событий и функциональность, необходимые для взаимодействия с пользователем. Экземпляр класса InteractiveObject не создается напрямую. Вместо этого такие экранные объекты, как SimpleButton, Sprite, TextField и различные компоненты инструмента разработки Flash и Flex, наследуют модели взаимодействия с пользователем от этого класса и поэтому имеют одинаковую структуру. Это означает, что изученные вами техники и код, который вы напишете для обработки взаимодействия с пользователем объектов, созданных на основе InteractiveObject, можно будет применять и ко всем остальным объектам.

Интерактивный объект может получать фокус программными средствами или вследствие действия пользователя. Кроме того, если свойство tabEnabled имеет значение true, пользователь может передавать фокус от одного объекта другому клавишей табуляции. Обратите внимание, что по умолчанию значение tabEnabled = false, кроме следующих случаев.

• Для объекта SimpleButton используется значение true.

• Для поля ввода текста используется значение true.

• Для объекта Sprite или MovieClip с buttonMode = true используется значение true.

В каждом из этих случаев можно добавить прослушиватель для событий FocusEvent.FOCUS_IN или FocusEvent.FOCUS_OUT, чтобы добавить дополнительные виды поведения при смене фокуса. Это особенно полезно для полей ввода текста и форм, но также может пригодиться для спрайтов, фрагментов роликов и любых других объектов, наследуемых от класса InteractiveObject. В примере ниже показано, как включить зацикливание фокуса с помощью клавиши табуляции и как реагировать на последующие события фокуса. В этом случае каждый квадрат при получении фокуса меняет цвет.

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(); 
}