Rilevamento dell'input da mouse -- Flash CS3

I clic del mouse creano degli eventi del mouse che è possibile utilizzare per attivare delle funzionalità interattive. Un listener di eventi può essere aggiunto allo stage per intercettare gli eventi del mouse che si verificano in qualunque punto all'interno del file SWF. È anche possibile aggiungere dei listener di eventi agli oggetti sullo stage che ereditano da InteractiveObject (ad esempio, Sprite o MovieClip); questi listener vengono attivati quando si fa clic sull'oggetto.

Come accade con gli eventi da tastiera, anche gli eventi del mouse si propagano. Nell'esempio seguente, dal momento che square è un elemento secondario dello stage, l'evento viene inviato sia dallo Sprite square che dall'oggetto Stage quando viene fatto clic sul quadrato:

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 + "]");
}

Nell'esempio precedente, si noti che l'evento mouse contiene le informazioni sul clic. Le proprietà localX e localY contengono la posizione del clic sull'elemento di livello più basso nella catena di visualizzazione. Ad esempio, se si fa clic sull'angolo in alto a sinistra di square vengono visualizzate le coordinate locali [0,0], dal momento che si tratta del punto di registrazione di square. In alternativa, le proprietà stageX e stageY fanno riferimento alle coordinate globali del clic sullo stage. Lo stesso clic visualizza [50,50] per queste coordinate, dal momento che square è stato spostato in corrispondenza di queste coordinate. Entrambe queste coppie di coordinate possono essere utili a seconda del tipo di risposta che si desidera dare all'interazione dell'utente.

L'oggetto MouseEvent contiene le proprietà booleane altKey, ctrlKey e shiftKey, che possono essere utilizzate per verificare se al momento del clic del mouse viene premuto anche il tasto Alt, Ctrl o Maiusc.

Creazione della funzionalità di trascinamento della selezione

La funzionalità di trascinamento della selezione consente agli utenti selezionare un oggetto mentre premono il pulsante sinistro del mouse, spostarlo in una nuova posizione sullo schermo e qui posizionarlo rilasciando il pulsante sinistro del mouse. Nel codice seguente ne viene illustrato un esempio:

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

Personalizzazione del cursore del mouse

Il cursore del mouse (puntatore) può essere nascosto o sostituito con qualunque oggetto di visualizzazione sullo stage. Per nascondere il cursore del mouse, chiamare il metodo Mouse.hide(). È possibile personalizzare il cursore chiamando Mouse.hide(), intercettando sullo stage l'evento MouseEvent.MOUSE_MOVE e impostando le coordinate di un oggetto di visualizzazione (il cursore personalizzato) sulle proprietà stageX e stageY dell'evento. Nell'esempio seguente viene illustrata un'esecuzione di base di questa operazione:

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

Personalizzazione del menu di scelta rapida

Ogni oggetto che eredita dalla classe InteractiveObject può avere un menu di scelta rapida univoco, visualizzato quando l'utente fa clic con il pulsante destro del mouse all'interno del file SWF. Alcuni comandi sono inclusi per impostazione predefinita: Avanti, Indietro, Stampa, Qualità e Zoom.

È possibile rimuovere i comandi predefiniti dal menu, a eccezione delle opzioni Impostazioni e Informazioni su. Se si imposta la proprietà dello stage showDefaultContextMenu su false, vengono rimossi questi comandi dal menu di scelta rapida.

Per creare un menu di scelta rapida personalizzato per un oggetto di visualizzazione specifico, creare una nuova istanza della classe ContextMenu, chiamare il metodo hideBuiltInItems() e assegnare tale istanza alla proprietà contextMenu di tale istanza DisplayObject. L'esempio seguente fornisce a un quadrato tracciato dinamicamente un comando di un menu di scelta rapida per convertirlo in un colore casuale:

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

Gestione degli elementi attivi

Un oggetto interattivo può essere attivato, sia a livello di codice che attraverso un'azione dell'utente. In entrambi i casi, l'attivazione imposta la proprietà focus dell'oggetto su true. Inoltre, se la proprietà tabEnabled è impostata su true, l'utente può rendere attivo un nuovo oggetto premendo il tasto Tab. Si noti che il valore tabEnabled è false per impostazione predefinita, a eccezione dei casi seguenti:

In ognuna di queste situazioni, è possibile aggiungere un listener per FocusEvent.FOCUS_IN o FocusEvent.FOCUS_OUT per fornire un comportamento aggiuntivo quando cambia l'elemento attivo. Ciò è particolarmente utile per i campi di testo e i form, ma può essere utilizzato anche su sprite, clip filmato o qualunque oggetto che erediti dalla classe InteractiveObject. L'esempio seguente mostra come abilitare il cambiamento ciclico dell'attivazione con il tasto Tab e come rispondere al conseguente evento focus di attivazione. In questo caso, ogni quadrato cambia colore quando diventa l'elemento attivo.

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
{
    // Genera valori casuali per i canali di colore rosso, verde e blu.
    var red:Number = (Math.random() * 512) - 255;
    var green:Number = (Math.random() * 512) - 255;
    var blue:Number = (Math.random() * 512) - 255;
    
    // Crea e restituisce un oggetto ColorTransform con i colori casuali.
    return new ColorTransform(1, 1, 1, 1, red, green, blue, 0);
}