Podstawy interakcji z użytkownikiem

Interakcja z użytkownikiem, który korzysta z klawiatury, myszy, kamery lub kilku tych urządzeń łącznie, to punkt wyjścia do tworzenia aplikacji interaktywnych. W języku ActionScript 3.0 rozpoznawanie działań użytkownika i reagowanie na nie zwykle wymaga wykrywania określonych zdarzeń.

Klasa InteractiveObject, będąca podklasą klasy DisplayObject, udostępnia typową strukturę zdarzeń i funkcji niezbędnych do obsługi interakcji z użytkownikiem. Programista nie tworzy bezpośrednio instancji klasy InteractiveObject. Obiekty wyświetlane, takie jak SimpleButton, Sprite, TextField i różne składniki narzędzia do tworzenia treści Flash oraz składniki Flex, dziedziczą model interakcji z użytkownikiem z tej klasy, a przez to mają wspólną strukturę obsługi zdarzeń. Oznacza to, że poznana technika i napisany kod obsługi interakcji z jednym obiektem potomnym względem InteractiveObject będzie mieć zastosowanie do wszystkich takich obiektów.

Obiekt interaktywny może stać się aktywny w wyniku operacji programowej lub działania użytkownika. Ponadto, jeśli właściwość tabEnabled jest ustawiona na true , użytkownik może przenosić aktywność z obiektu na obiekt, naciskając klawisz Tab. Należy zwrócić uwagę, że właściwość tabEnabled ma domyślnie wartość false by, z wyjątkiem następujących przypadków:

• Dla obiektu SimpleButton ma wartość true .

• Dla pola tekstu wejściowego ma wartość true .

• Dla obiektu Sprite lub MovieClip z właściwością buttonMode ustawioną na true ma wartość true .

W każdej z tych sytuacji możliwe jest dodanie detektora zdarzeń FocusEvent.FOCUS_IN lub FocusEvent.FOCUS_OUT w celu rozbudowania funkcjonalności związanej ze zmianą aktywności. Jest to szczególnie użyteczne w przypadku pól tekstowych i formularzy, ale tego samego mechanizmu można używać w odniesieniu do ikony, klipów filmowych i dowolnych obiektów potomnych względem klasy InteractiveObject. Poniższy przykład ilustruje włączanie cyklicznej zmiany aktywności za pomocą klawisza Tab oraz reagowanie na wywołane w ten sposób zdarzenia zmiany aktywności. W tym przypadku każdy kwadrat zmienia swój kolor, gdy staje się aktywny.

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

Interfejsy API do wykrywania interakcji wejściowej umożliwiają wykorzystanie funkcji urządzenia użytkownika lub zapewniają alternatywne opcje, gdy któraś z tych funkcji jest niedostępna. Te interfejsy API są szczególnie pomocne podczas programowania aplikacji dla urządzeń przenośnych i tych wyposażonych w ekrany dotykowe. Na przykład w przypadku interfejsu dla urządzenia przenośnego o małych przyciskach dla pióra możemy udostępnić alternatywny interfejs z dużymi przyciskami dla użytkowników, którzy preferują przeprowadzać interakcje wejściowe, dotykając ekranu palcem. Poniższy kod jest przeznaczony dla aplikacji zawierającej funkcję o nazwie createStylusUI(), która powoduje przypisanie jednego zestawu elementów interfejsu użytkownika właściwych dla interakcji za pomocą pióra. Inna funkcja, o nazwie createTouchUI(), służy do przypisywania kolejnego zestawu elementów interfejsu użytkownika, które są odpowiednie dla interakcji za pomocą palca.

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