Grunderna i användarinteraktion

Användarinteraktion, oberoende av om det är via tangentbord, mus, kamera eller en kombination av alla tre, utgör själva grunden för all interaktivitet. I ActionScript 3.0 innebär att identifiera och besvara användarinteraktion huvudsakligen att avlyssna händelser.

Klassen InteractiveObject, en underklass till klassen DisplayObject, ger en grundläggande struktur för händelser och funktioner som är nödvändiga för att hantera användarinteraktionen. Du skapar inte direkt en instans av klassen InteractiveObject. I stället ärver visningsobjekt som SimpleButton, Sprite, TextField och olika Flash-utvecklingsverktyg och Flex-komponenter sina respektive användarinteraktionsmodeller från den här klassen och de delar därför en gemensam struktur. Detta betyder att de tekniker som du lär dig och de koder som du skriver för att hantera användarinteraktionen i ett objekt, härlett från InteractiveObject, även går att använda för de övriga.

Ett interaktivt objekt kan erhålla fokus antingen via programkoden eller genom en användarinteraktion. Om dessutom egenskapen tabEnabled är true, kan användaren flytta fokus från ett objekt till ett annat med tabbtangenten. Observera att värdet tabEnabled som standard är false förutom i följande fall:

• För ett SimpleButton-objekt är värdet true .

• För ett textinmatningsfält är värdet true.

• För ett Sprite- eller ett MovieClip-objekt, med buttonMode satt till true, är värdet true.

I alla dessa situationer kan du lägga till en avlyssnare för FocusEvent.FOCUS_IN eller FocusEvent.FOCUS_OUT för att erhålla ytterligare beteenden när fokus ändras. Detta är speciellt användbart för textfält och formulär, men det kan också användas för spriter, filmklipp eller objekt som ärver från klassen InteractiveObject. I exemplet nedan visas hur du aktiverar fokusändringar med tabbtangenten och hur du svarar på den efterföljande fokushändelsen. I detta fall ändras färgen på varje ruta när den erhåller fokus.

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

Genom API:erna för identifiering av indata kan du dra nytta av användarens enhetsfunktioner, eller tillhandahålla alternativ om användaren saknar de aktuella funktionerna. Dessa API:er är särskilt användbara vid utveckling av mobila program och program med pekfunktioner. Om du till exempel använder ett gränssnitt för en mobil enhet med små knappar som är avsedda för en styluspenna kan du tillhandahålla ett alternativt gränssnitt med större knappar för användare som använder pekfunktioner med fingret. Följande kod är för ett program med funktionen createStylusUI(), som tilldelar en uppsättning användargränssnittselement som passar för styluspennor. En annan funktion, kallad createTouchUI(), tilldelar en annan uppsättning användargränssnittselement som passar för pekfunktioner som utförs med fingrarna:

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