Basis van gebruikersinteractie

Gebruikersinteractie via toetsenbord, muis, camera of een combinatie van deze apparaten, ligt ten grondslag aan interactiviteit. Voor het identificeren van en het reageren op gebruikersinteractie in ActionScript 3.0 staat het luisteren naar gebeurtenissen voorop.

De klasse InteractiveObject, een subklasse van de klasse DisplayObject, biedt de algemene structuur van benodigde gebeurtenissen en functionaliteit voor verwerking van gebruikersinteractie. U kunt niet rechtstreeks een instantie van de klasse InteractiveObject maken. Weergaveobjecten zoals SimpleButton, Sprite, TextField en diverse componenten van het Flash-programma voor het schrijven van programmacode en van Flex nemen daarentegen het gebruikersinteractiemodel van deze klasse over en hebben dus dezelfde structuur. Dit betekent dat de technieken die u leert en de code die u schrijft voor verwerking van gebruikersinteractie in een object dat is afgeleid van InteractiveObject, ook op alle andere objecten van toepassing zijn.

Een interactief object kan via programmacode of door een gebruikershandeling focus krijgen. Als de eigenschap tabEnabled op true wordt ingesteld, kan de gebruiker focus bovendien van een object naar het volgende object verplaatsen door op de Tab-toets te drukken. De waarde van tabEnabled is standaard false, behalve in de volgende gevallen:

• De waarde van een object SimpleButton is true.

• Voor een invoertekstveld is de waarde true.

• Voor een object Sprite of MovieClip waarvoor buttonMode is ingesteld op true, is de waarde true.

In beide situaties kunt u een listener voor FocusEvent.FOCUS_IN of FocusEvent.FOCUS_OUT toevoegen om additionele gedragingen mogelijk te maken wanneer de focus wijzigt. Dit is met name nuttig voor tekstvelden en formulieren, maar kan ook worden gebruikt voor Sprites, filmclips of andere objecten die van de klasse InteractiveObject overerven. In het volgende voorbeeld wordt weergegeven hoe u doorlopende focus met de Tab-toets mogelijk maakt en hoe u op de hieruit resulterende focusgebeurtenis kunt reageren. In dit geval verandert de kleur van elk vierkant zodra het vierkant focus krijgt.

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

Met de API's voor het vaststellen van het invoertype kunt u de functies van een apparaat volledig benutten of alternatieven bieden als bepaalde functies ontbreken. Deze API's zijn vooral handig voor het ontwikkelen van mobiele toepassingen en toepassingen die werken met aanraaktechnologieën. Als u bijvoorbeeld een interface hebt voor een mobiel apparaat met kleine knoppen voor een pen, kunt u een alternatief interface met grotere knoppen aanbieden voor gebruikers die met hun vingers willen invoeren. De volgende code is voor een toepassing met de functie createStylusUI() die één bepaalde set met gebruikersinterface-elementen toewijst die geschikt zijn voor peninvoer. Een andere functie, createTouchUI() genaamd, wijst een andere set met gebruikersinterface-elementen toe die geschikt is voor interactie via de vingers:

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