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

В основе интерактивности лежит взаимодействие с пользователем через клавиатуру, мышь, камеру или все вместе. В 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(); 
}