Elementi fondamentali dell'interazione utente

L'interazione dell'utente, attraverso la tastiera, il mouse, una video/fotocamera o una combinazione di tutti questi dispositivi costituisce la base dell'interattività. In ActionScript 3.0, l'identificazione e la risposta all'interazione dell'utente riguardano principalmente l'ascolto di eventi.

La classe InteractiveObject è una sottoclasse della classe DisplayObject e fornisce la struttura comune di eventi e funzionalità necessaria per gestire l'interazione dell'utente. Non è possibile creare direttamente un'istanza della classe InteractiveObject. Gli oggetti di visualizzazione come SimpleButton, Sprite, TextField e vari componenti dello strumento di creazione di Flash e di Flex ereditano il modello di interazione dell'utente da questa classe e pertanto condividono una struttura comune. Ciò significa che le tecniche illustrate e il codice scritto per gestire l'interazione dell'utente in un oggetto derivato da InteractiveObject sono validi per tutti gli altri.

Un oggetto interattivo può essere attivato, sia a livello di codice che attraverso un'azione dell'utente. Inoltre, se la proprietà tabEnabled è impostata su true, l'utente può rendere attivo un nuovo oggetto premendo il tasto Tab. Notate che il valore tabEnabled è false per impostazione predefinita, a eccezione dei casi seguenti:

• Per un oggetto SimpleButton, il valore è true.

• Per un campo di testo di input, il valore è true.

• Per un oggetto Sprite o MovieClip con buttonMode impostato su true, il valore è true.

In ognuna di queste situazioni, è possibile aggiungere un listener per FocusEvent.FOCUS_IN o FocusEvent.FOCUS_OUT per fornire un comportamento aggiuntivo quando cambia l'elemento attivo. Ciò è particolarmente utile per i campi di testo e i form, ma può essere utilizzato anche su sprite, clip filmato o qualunque oggetto che erediti dalla classe InteractiveObject. L'esempio seguente mostra come abilitare il cambiamento ciclico dell'attivazione con il tasto Tab e come rispondere al conseguente evento focus di attivazione. In questo caso, ogni quadrato cambia colore quando diventa l'elemento attivo.

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

Le API di rilevamento dell'input consentono di sfruttare le funzionalità del dispositivo dell'utente o fornire alternative quando tali funzionalità non sono presenti. Queste API sono particolarmente utili per lo sviluppo di applicazioni per dispositivi mobili e abilitate al tocco. Ad esempio, se disponete di un'interfaccia utente per un dispositivo mobile dotata di piccoli pulsanti per una penna, potete fornire un'interfaccia alternativa con pulsanti più grandi per un utente che utilizza il dito per l'input. Il codice seguente è relativo a un'applicazione che dispone di una funzione denominata createStylusUI() che assegna un unico set di elementi per l'interfaccia utente appropriata per l'interazione penna. Un'altra funzione, denominata createTouchUI(), assegna un altro set di elementi per l'interfaccia utente appropriata per l'interazione dito:

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