Aspectos básicos de la interacción con el usuario

La interacción con el usuario, ya sea con el teclado, el ratón, la cámara o una combinación de estos dispositivos, es la base de interactividad. En ActionScript 3.0, identificar la interacción del usuario y responder a la misma requieren básicamente detectar eventos.

La clase InteractiveObject, una subclase de la clase DisplayObject, proporciona la estructura común de eventos y la funcionalidad necesaria para controlar la interacción con el usuario. Las instancias de la clase InteractiveObject no se crean directamente. Los objetos de visualización, como SimpleButton, Sprite, TextField y diversos componentes de Flex y la herramienta de edición de Flash heredan su modelo de interacción con el usuario de esta clase y, por tanto, comparten una estructura común. Esto significa que las técnicas que aprenda y el código que escriba para controlar la interacción del usuario en un objeto derivado de InteractiveObject son aplicables a todos los demás.

Un objeto interactivo puede recibir la selección mediante programación o mediante una acción del usuario. Además, si la propiedad tabEnabled se establece en true, el usuario puede pasar la selección de un objeto a otro mediante la tecla Tabulador. Hay que tener en cuenta que el valor de tabEnabled es false de manera predeterminada, salvo en los siguientes casos:

• En un objeto SimpleButton, el valor es true.

• Para un campo de texto de entrada, el valor es true.

• En un objeto Sprite o MovieClip con buttonMode establecido en true, el valor es true.

En cada una de estas situaciones, se puede añadir un detector de FocusEvent.FOCUS_IN o FocusEvent.FOCUS_OUT para proporcionar un comportamiento adicional cuando cambie la selección. Esto es especialmente útil en los campos de texto y formularios, pero también se puede utilizar en objetos Sprite, MovieClip o en cualquier objeto que herede de la clase InteractiveObject. El siguiente ejemplo muestra cómo activar el cambio de selección de un objeto a otro con la tecla Tabulador y cómo responder al evento de selección posterior. En este caso, cada cuadrado cambia de color cuando se selecciona.

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

Las API de detección de entrada permiten aprovechar las capacidades del dispositivo del usuario u ofrecer alternativas si dichas capacidades no están presentes. Estas API son especialmente útiles para desarrollar aplicaciones móviles y con tecnología táctil. Por ejemplo, si tiene una interfaz para dispositivo móvil con botones demasiado pequeños para un lápiz stylus, puede proporcionar una interfaz alternativa con botones más grandes que el usuario puede tocar con los dedos. El siguiente código es para una aplicación con una función llamada createStylusUI() que asigna un conjunto de elementos de interfaz de usuario indicados para lápices stylus. Otra función, llamada createTouchUI(), asigna otro conjunto de elementos de interfaz de usuario indicados para operaciones táctiles:

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