Basis van gebruikersinteractie

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

Uw toepassing kan interactiviteit creëren door met ActionScript 3.0 op gebruikersactiviteit te reageren. Let op: deze sectie veronderstelt dat u het gebeurtenismodel van ActionScript 3.0 al kent. Zie Gebeurtenissen afhandelen voor meer informatie.

Gebruikersinvoer vastleggen

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.

Belangrijke concepten en termen

Het is van belang dat u bekend bent met de volgende belangrijke termen op het gebied van gebruikersinteractie voordat u verdergaat:

Tekencode
Een numerieke code die een teken uit de huidige tekenset vertegenwoordigt (gekoppeld aan het drukken op een toets van het toetsenbord). ‘D’ en ‘d’ hebben bijvoorbeeld verschillende tekencodes, ook al worden deze op een Nederlands toetsenbord met behulp van dezelfde toets gemaakt.

Contextmenu
Het menu dat wordt weergegeven wanneer de gebruiker met de rechtermuisknop klikt of een bepaalde combinatie maakt met toetsenbord en muis. Opdrachten uit een contextmenu worden doorgaans rechtstreeks toegepast op het item waarop is geklikt. Een contextmenu voor een afbeelding kan bijvoorbeeld een opdracht bevatten waarmee de afbeelding in een apart venster wordt weergegeven en een opdracht waarmee de afbeelding wordt gedownload.

Focus
De aanduiding dat een geselecteerd element actief is en het doel is van interactie via toetsenbord of muis.

Toetscode
Een numerieke code die overeenkomt met een fysieke toets op het toetsenbord.

Focus beheren

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.

Opmerking: Flash Professional gebruikt sneltoetsen om focus te beheren; om focusbeheer correct te simuleren, moeten SWF-bestanden worden getest in een browser of AIR in plaats van in Flash.
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); 
}

Invoertypen vaststellen

Vanaf Flash Player 10.1 en Adobe AIR 2 kunt u de runtimeomgeving testen op ondersteuning voor specifieke invoertypen. Met ActionScript kunt u testen of het apparaat waarop het runtimeprogramma op dat moment wordt uitgevoerd:
  • Ondersteuning biedt voor invoer met de pen of vinger (of geen ondersteuning biedt voor aanraakinvoer)

  • Beschikt over een virtueel of fysiek toetsenbord voor de gebruiker (of juist geen enkel toetsenbord heeft).

  • Een cursor weergeeft (als dit niet het geval is, werken functies niet die afhankelijk zijn van een cursor die boven een object wordt geplaatst).

De ActionScript-API's waarmee het type invoer wordt vastgesteld zijn onder andere:

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(); 
}
Bij het ontwikkelen van toepassingen voor verschillende invoeromgevingen moet u rekening houden met de volgende compatibiliteitsgrafiek:

Omgeving

supportsCursor

touchscreenType == FINGER

touchscreenType == STYLUS

touchscreenType == NONE

Traditionele bureaubladcomputer

true

false

false

true

Apparaten met capacitieve aanraakschermen (tablets, PDA's en telefoons die subtiele aanrakingen kunnen detecteren, zoals de Apple iPhone of Palm Pre)

false

true

false

false

Apparaten met resistieve aanraakschermen (tablets, PDA's en telefoons die precieze, harde aanrakingen detecteren, zoals de HTC Fuze)

false

false

true

false

Apparaten met schermen die niet op aanrakingen reageren (telefoons en apparaten met geavanceerde functies waarop toepassingen worden uitgevoerd, maar die niet werken met aanraakschermen)

false

false

false

true

Opmerking: Verschillende apparaatplatforms bieden ondersteuning voor allerlei combinaties van invoertypen. Gebruik deze grafiek als een algemene richtlijn.