Principes de base de l’interaction utilisateur

L’interaction utilisateur, au moyen du clavier, de la souris, de la caméra ou d’une combinaison de ces périphériques, est à la base de l’interactivité. Dans ActionScript 3.0, l’identification et la réponse à l’interaction utilisateur impliquent principalement l’écoute d’événements.

La classe InteractiveObject, une sous-classe de la classe DisplayObject, fournit la structure d’événements courante et la fonctionnalité nécessaire à la gestion de l’interaction utilisateur. Vous ne créez pas directement une occurrence de la classe InteractiveObject. Affichez plutôt des objets tels SimpleButton, Sprite, TextField et ainsi des composants divers de l’outil de programmation Flash et de Flex héritent leur modèle d’interaction utilisateur à partir de cette classe. Ils partagent alors une structure commune. Cela signifie que les techniques que vous apprenez et le code que vous écrivez pour gérer l’interaction utilisateur dans un objet dérivé de InteractiveObject sont applicables à tous les autres.

Un objet interactif peut recevoir le focus, soit par programmation, soit par le biais d’une action utilisateur. En outre, si la propriété tabEnabled a la valeur true , l’utilisateur peut transmettre le focus d’un objet à un autre en appuyant sur la touche Tabulation. La valeur tabEnabled est false par défaut, excepté dans les cas suivants :

• Pour un objet SimpleButton, la valeur est true .

• Pour un champ de texte d’entrée, la valeur est true .

• Pour un objet Sprite ou MovieClip dont buttonMode a la valeur true , la valeur est true .

Dans chacune de ces situations, vous pouvez ajouter un écouteur pour FocusEvent.FOCUS_IN ou FocusEvent.FOCUS_OUT pour étendre les comportements possibles lors du changement de focus. Si cette technique est pratique pour les champs texte et les formulaires, vous pouvez aussi l’utiliser avec les sprites, les clips et tout autre objet qui hérite de la classe InteractiveObject. L’exemple suivant montre comment activer le changement de focus avec la touche de tabulation et comment répondre à l’événement focus qui en découle. Dans ce cas, chaque carré change de couleur lorsqu’il reçoit le focus.

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

Les API de découverte de saisie permettent d’exploiter les capacités du périphérique de l’utilisateur ou proposent une autre solution lorsque ces capacités n’existent pas. Ces API s’avèrent particulièrement utiles pour développer des applications tactiles et mobiles. Ainsi, si l’interface d’un périphérique mobile possède des boutons de petite taille adaptés à un stylet, vous pouvez proposer une autre interface dotée de boutons de taille supérieure que l’utilisateur peut toucher du doigt. Le code suivant se rapporte à une application dont la fonction createStylusUI() affecte un jeu d’éléments d’interface utilisateur adaptés à l’interaction avec un stylet. Une autre fonction, appelée createTouchUI(), affecte un autre jeu d’éléments d’interface utilisateur adaptés à l’interaction tactile :

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