Princípios básicos da interação do usuário

A interação do usuário, por meio do teclado, do mouse, da câmera ou de uma combinação desses dispositivos, é a base da interatividade. No ActionScript 3.0, identificar e responder à interação do usuário envolve principalmente ouvir eventos.

A classe InteractiveObject, uma subclasse de DisplayObject, fornece a estrutura comum dos eventos e a funcionalidade necessária para manipular a interação do usuário. Você não cria diretamente uma ocorrência da classe InteractiveObject. Em vez disso, objetos de exibição como SimpleButton, Sprite, TextField e vários componentes da ferramenta de autoria do Flash e do Flex herdam o modelo de interação do usuário dessa classe e, desse modo, compartilham uma estrutura comum. Isso significa que as técnicas aprendidas e o código que você grava para manipular a interação do usuário em um objeto derivado de InteractiveObject são aplicáveis a todos os outros usuários.

Um objeto interativo pode receber o foco, programaticamente ou por meio de uma ação do usuário. Além disso, se a propriedade tabEnabled estiver definida como true, o usuário poderá passar o foco de um objeto para outro pressionando a tecla Tab. Observe que o valor de tabEnabled é false por padrão, exceto nos seguintes casos:

• Para um objeto SimpleButton, o valor é true.

• Para um campo de texto de entrada, o valor é true.

• Para um objeto Sprite ou MovieClip com buttonMode definido como true, o valor é true.

Em cada uma dessas situações, você pode adicionar um ouvinte para FocusEvent.FOCUS_IN ou FocusEvent.FOCUS_OUT a fim de fornecer outros comportamentos quando o foco for alterado. Isso é útil especialmente para campos de texto e formulários, mas também pode ser usado em entidades gráficas, clipes de filme ou qualquer objeto herdado da classe InteractiveObject. O exemplo a seguir mostra como ativar o ciclo do foco com a tecla Tab e como responder ao evento de foco subseqüente. Nesse caso, cada quadrado muda de cor assim que recebe o foco.

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

As APIs de descoberta de entradas permitem que você aproveite das capacidades do dispositivo do usuário ou fornecem alternativas quando essas capacidades não estejam disponíveis. Estas APIs são especialmente uteis para o desenvolvimento de aplicativos móveis e sensíveis ao toque. Por exemplo, se houver uma interface para um dispositivo móvel com botões pequenos para uso de stylus, você pode fornecer uma interface alternativa com botões maiores para um usuário que utiliza toques dos dedos como entrada. O seguinte código se refere a um aplicativo que possui uma função createStylusUI() que atribui um conjunto de elementos de interface do usuário apropriados para interação com stylus. Outra função, chamada de createTouchUI(), atribui outro conjunto de elementos de interface do usuário apropriados para interação com dedos:

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