Erfassen von Mauseingaben -- Flash CS3

Mausklicks erzeugen Mausereignisse, die zum Auslösen interaktiver Funktionen verwendet werden können. Sie können der Bühne einen Ereignis-Listener für sämtliche Mausereignisse innerhalb einer SWF-Datei hinzufügen. Sie können auch Ereignis-Listener für Objekte auf der Bühne hinzufügen, die von der InteractiveObject-Klasse erben (beispielsweise Sprite- oder MovieClip-Objekte). Diese Listener werden ausgelöst, wenn auf das entsprechende Objekt geklickt wird.

Wie bei Tastaturereignissen wird auch bei Mausereignissen die Aufstiegsphase durchlaufen. Da im folgenden Beispiel square ein der Bühne untergeordnetes Objekt ist, wird beim Klicken auf das Rechteck sowohl von der Sprite-Instanz square als auch vom Stage-Objekt ein Ereignis ausgelöst:

var square:Sprite = new Sprite();
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.addEventListener(MouseEvent.CLICK, reportClick);
square.x =
square.y = 50;
addChild(square);

stage.addEventListener(MouseEvent.CLICK, reportClick);

function reportClick(event:MouseEvent):void
{
    trace(event.currentTarget.toString() + 
        " dispatches MouseEvent. Local coords [" + 
        event.localX + "," + event.localY + "] Stage coords [" + 
        event.stageX + "," + event.stageY + "]");
}

Beachten Sie, dass im obigen Beispiel das Mausereignis Positionsangaben für den Mausklick enthält. Die Eigenschaften localX und localY enthalten die Mausklickposition im letzten untergeordneten Objekt der Anzeigekette. Beispielsweise führt das Klicken auf die obere linke Ecke von square zur Anzeige der lokalen Koordinaten [0,0], da dies der Registrierungspunkt von square ist. Alternativ verweisen die Eigenschaften stageX und stageY auf die globalen Koordinaten des Mausklicks auf der Bühne. Für denselben Mausklick wird für diese Koordinaten [50,50] angezeigt, da square auf diese Koordinaten verschoben wurde. Beide Koordinatenpaare können nützlich sein, je nachdem, wie Sie auf Benutzerinteraktionen reagieren möchten.

Das MouseEvent-Objekt enthält auch die booleschen Eigenschaften altKey, ctrlKey und shiftKey. Mithilfe dieser Eigenschaften können Sie überprüfen, ob zum Zeitpunkt des Mausklicks auch die Tasten ALT, STRG oder die UMSCHALTTASTE gedrückt wurden.

Erstellen von Drag & Drop-Funktionalität

Mithilfe von Drag & Drop-Funktionalität können Benutzer ein Objekt auswählen, es bei gedrückter linker Maustaste an eine andere Position auf dem Bildschirm ziehen und dann durch Loslassen der linken Maustaste dort ablegen. Im folgenden Code ist ein Beispiel hierfür dargestellt:

import flash.display.Sprite;
import flash.events.MouseEvent;

var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(0, 0, 40);

var target1:Sprite = new Sprite();
target1.graphics.beginFill(0xCCFF00);
target1.graphics.drawRect(0, 0, 100, 100);
target1.name = "target1";

var target2:Sprite = new Sprite();
target2.graphics.beginFill(0xCCFF00);
target2.graphics.drawRect(0, 200, 100, 100);
target2.name = "target2";

addChild(target1);
addChild(target2);
addChild(circle);

circle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) 

function mouseDown(event:MouseEvent):void
{
    circle.startDrag();
}
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

function mouseReleased(event:MouseEvent):void
{
    circle.stopDrag();
    trace(circle.dropTarget.name);
}

Anpassen des Mauszeigers

Der Mauszeiger kann ausgeblendet oder auch mit einem beliebigen Anzeigeobjekt auf der Bühne ausgetauscht werden. Wenn Sie den Mauszeiger ausblenden möchten, rufen Sie die Mouse.hide()-Methode auf. Passen Sie den Mauszeiger an, indem Sie Mouse.hide() aufrufen, auf das MouseEvent.MOUSE_MOVE-Ereignis für die Bühne warten und die Koordinaten eines Anzeigeobjekts (benutzerdefinierter Mauszeiger) auf die stageX-Eigenschaft und die stageY-Eigenschaft des Ereignisses setzen. Im folgenden Beispiel wird die grundlegende Vorgehensweise veranschaulicht:

var cursor:Sprite = new Sprite();
cursor.graphics.beginFill(0x000000);
cursor.graphics.drawCircle(0,0,20);
cursor.graphics.endFill();
addChild(cursor);

stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
Mouse.hide();

function redrawCursor(event:MouseEvent):void
{
    cursor.x = event.stageX;
    cursor.y = event.stageY;
}

Anpassen des Kontextmenüs

Jedes Objekt, das von der InteractiveObject-Klasse erbt, kann über ein zugehöriges Kontextmenü verfügen, das durch Drücken der rechten Maustaste in der SWF-Datei angezeigt wird. Standardmäßig sind mehrere Befehle enthalten, u. a. „Vorwärts", „Zurück", „Drucken", „Qualität" und „Zoom".

Sie können alle Standardbefehle mit Ausnahme der Optionen „Einstellungen" und „Info" aus dem Menü entfernen. Durch Setzen der Stage-Eigenschaft showDefaultContextMenu auf false werden diese Befehle aus dem Kontextmenü entfernt.

Wenn Sie für ein bestimmtes Anzeigeobjekt ein benutzerdefiniertes Kontextmenü erstellen möchten, müssen Sie eine neue Instanz der ContextMenu-Klasse erstellen, die hideBuiltInItems()-Methode aufrufen und dann die neue Instanz der contextMenu-Eigenschaft der entsprechenden DisplayObject-Instanz zuweisen. Im folgenden Beispiel wird ein dynamisch gezeichnetes Rechteck mit einem Kontextmenübefehl erstellt, der dessen Farbe auf einen zufällig ausgewählten Wert setzt:

var square:Sprite = new Sprite();
square.graphics.beginFill(0x000000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x =
square.y = 10;
addChild(square);

var menuItem:ContextMenuItem = new ContextMenuItem("Change Color");
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,changeColor);
var customContextMenu:ContextMenu = new ContextMenu();
customContextMenu.hideBuiltInItems();
customContextMenu.customItems.push(menuItem);
square.contextMenu = customContextMenu;

function changeColor(event:ContextMenuEvent):void
{
    square.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
    return new ColorTransform(Math.random(), Math.random(), 
        Math.random(),1,(Math.random() * 512) - 255, 
        (Math.random() * 512) -255, (Math.random() * 512) - 255, 0);
}

Fokusverwaltung

Ein interaktives Objekt kann den Fokus entweder durch Programmcode oder durch eine Benutzeraktion erhalten. In beiden Fällen wird die Eigenschaft focus des Objekts auf true gesetzt. 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:

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
{
    e.target.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
    // Zufallswerte für die Rot-, Grün- und Blaufarbkanäle generieren
    var red:Number = (Math.random() * 512) - 255;
    var green:Number = (Math.random() * 512) - 255;
    var blue:Number = (Math.random() * 512) - 255;
    
    // Ein ColorTransform-Objekt mit den Zufallswerten für die Farben erstellen und zurückgeben
    return new ColorTransform(1, 1, 1, 1, red, green, blue, 0);
}