Grunderna i användarinteraktion

Flash Player 9 och senare, Adobe AIR 1.0 och senare

Ditt program kan skapa interaktivitet via ActionScript 3.0 för att svara på användaråtgärder. Observera att du för det här avsnittet förutsätts ha grundläggande kunskaper om ActionScript 3.0-händelsemodellen. Mer information finns i Hantera händelser .

Samla in indata från användarna

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.

Viktiga termer och begrepp

Det är viktigt att du känner till följande terminologi för användarinteraktion innan du fortsätter:

Teckenkod
En numerisk kod som representerar ett tecken i den aktuella teckenuppsättningen (associerad till en tangent som trycks ned på tangentbordet). ”D” och ”d” är exempelvis olika teckenkoder trots att de skapas med samma tangent på ett standardtangentbord.

Snabbmeny
Den meny som öppnas när användaren högerklickar eller använder en speciell tangentbords- och muskombination. Kommandona på snabbmenyn gäller vanligtvis för det som användaren klickar på. En snabbmeny för en bild kan exempelvis innehålla kommandon för att visa bilden i ett separat fönster och för att ladda ned den.

Fokus
Indikationen på att det markerade elementet är aktivt och att det är målet för tangentbords- eller musinteraktionen.

Tangentkod
En numerisk kod som motsvarar en fysisk tangent på tangentbordet.

Hantera fokus

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.

Obs! Eftersom kortkommandon används för att hantera fokus i Flash Professional bör du testa SWF-filer i en webbläsare eller AIR, och inte i Flash, för att få korrekt fokussimulering.
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); 
}

Identifiera indatatyper

I Flash Player 10.1 och Adobe AIR 2 introducerades en möjlighet att testa körningsmiljön för stöd av särskilda indatatyper. Du kan använda ActionScript om du vill testa ifall enheten på vilken körningen för närvarande finns:
  • Stöder indata med styluspenna eller finger (eller ingen pekdata alls).

  • Har ett virtuellt eller fysiskt tangentbord för användaren (eller inget tangentbord alls).

  • Visar en markör (om ingen markör visas fungerar inte funktioner som bygger på att en markör hålls över ett objekt).

ActionScript API:er för identifiering av indatatyper omfattar:

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(); 
}
Tänk på följande kompatibilitetstabell när du utvecklar program för miljöer med olika indatatyper:

Miljö

supportsCursor

touchscreenType == FINGER

touchscreenType == STYLUS

touchscreenType == NONE

Vanlig dator

true

false

false

true

Enheter med kapacitiv pekskärm (tablet-datorer, handdatorer och telefoner som känner av mänsklig beröring, till exempel Apple iPhone eller Palm Pre)

false

true

false

false

Enheter med resistiv pekskärm (tablet-datorer, handdatorer och telefoner som känner av exakt punktberöring, till exempel HTC Fuze)

false

false

true

false

Enheter utan pekskärm (telefoner och enheter som kan köra program men som inte har någon skärm som kan känna av beröring)

false

false

false

true

Obs! Olika enhetsplattformar kan ha stöd för flera olika kombinationer av indatatyper. Se den här tabellen som en allmän vägledning.