Grundlagen der Benutzerinteraktion

Die Benutzerinteraktion per Tastatur, Maus, Kamera oder einer Kombination dieser Geräte ist die Grundlage von Interaktivität. In ActionScript 3.0 wird das Erkennen von und Reagieren auf Benutzerinteraktionen in erster Linie durch Warten auf Ereignisse realisiert.

Die InteractiveObject-Klasse ist eine Unterklasse der DisplayObject-Klasse und stellt die allgemeine Ereignisstruktur und Funktionen bereit, die zum Verarbeiten von Benutzerinteraktionen erforderlich sind. Es ist nicht erforderlich, dass Sie direkt eine Instanz der InteractiveObject-Klasse erstellen. Stattdessen erben Anzeigeobjekte wie SimpleButton, Sprite, TextField und verschiedene Flash-Authoring-Tool- und Flex-Komponenten das entsprechende Benutzerinteraktionsmodell von dieser Klasse und weisen deshalb eine gemeinsame Struktur auf. Das bedeutet, dass die erlernten Techniken und der für von der InteractiveObject-Klasse abgeleitete Objekte programmierte Code zum Verarbeiten von Benutzerinteraktionen auch bei allen anderen Objekten anwendbar sind.

Ein interaktives Objekt kann den Fokus entweder durch Programmcode oder durch eine Benutzeraktion erhalten. Wenn die tabEnabled -Eigenschaft auf true gesetzt wird, können Benutzer zudem durch Drücken der TAB-Taste den Fokus zwischen Objekten weitergeben. Beachten Sie, dass der Wert für tabEnabled standardmäßig false ist, außer in den folgenden Fällen:

• Bei einem SimpleButton-Objekt lautet der Wert true .

• Bei Eingabetextfeldern ist dieser Wert true .

• Bei Sprite- oder MovieClip-Objekten, deren buttonMode -Eigenschaft auf true gesetzt ist, ist dieser Wert true .

In jedem dieser Fälle können Sie einen Listener für FocusEvent.FOCUS_IN oder FocusEvent.FOCUS_OUT hinzufügen, um zusätzliches Verhalten bei Fokusänderungen bereitzustellen. Dies ist besonders nützlich bei Textfeldern und Formularen, kann jedoch auch für Sprites, Movieclips oder andere Objekte eingesetzt werden, die von der InteractiveObject-Klasse erben. Im folgenden Beispiel ist dargestellt, wie Sie das zyklische Wechseln des Fokus über die TAB-Taste aktivieren und auf die daraufhin ausgelösten Fokusereignisse reagieren können. Im Beispiel ändert jedes der Rechtecke die Farbe, wenn es den Fokus erhält.

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

Über die APIs für die Eingabeerkennung können Sie die Fähigkeiten des Endgeräts nutzen oder Alternativen bereitstellen, wenn keine solchen Fähigkeiten vorhanden sind. Diese APIs sind besonders bei der Entwicklung von Anwendungen für mobile und berührungsempfindliche Geräte hilfreich. Wenn die Benutzeroberfläche für ein Mobilgerät beispielsweise kleine Schaltflächen für einen Stift aufweist, können Sie eine alternative Benutzeroberfläche mit größeren Schaltflächen bereitstellen, die für die Eingabe per Finger geeignet ist. Der folgende Code ist für eine Anwendung mit einer Funktion namens „createStylusUI()“ vorgesehen. Diese Funktion weist Benutzeroberflächenelemente für eine stiftgesteuerte Interaktion zu. Eine weitere Funktion namens „createTouchUI()“ weist andere Benutzeroberflächenelemente zu, die für die Interaktion per Finger vorgesehen sind:

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