Capture des entrées de souris -- Flash CS3

Les clics de souris créent des événements souris qui permettent de déclencher une fonctionnalité interactive. Il est possible d'ajouter un écouteur d'événement à la scène afin d'écouter les événements de souris qui se produisent à tout endroit du fichier SWF. Vous pouvez également ajouter des écouteurs d'événements à des objets sur la scène qui héritent de InteractiveObject (par exemple, Sprite ou MovieClip) ; ces écouteurs sont déclenchés lorsque vous cliquez sur l'objet.

Comme les événements de clavier, les événements de souris se propagent vers le haut. Dans l'exemple suivant, square étant un enfant de la scène, l'événement est distribué à la fois du sprite square et de l'objet scène en cas de clic sur le carré :

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

Dans l'exemple précédent, vous pouvez remarquer que l'événement de souris contient des informations sur l'endroit où le clic s'est produit. Les propriétés localX et localY indiquent l'emplacement du clic sur l'enfant le plus bas de la chaîne d'affichage. Par exemple, si vous cliquez dans l'angle supérieur gauche de square, les coordonnées locales [0,0] sont signalées car il s'agit du point d'alignement de square. Autrement, les propriétés stageX et stageY se réfèrent aux coordonnées globales du clic sur la scène. Le même clic signale [50,50] pour ces coordonnées car square y a été déplacé. Ces deux paires de coordonnées peuvent être utiles, selon la façon dont vous souhaitez répondre à l'interaction utilisateur.

L'objet MouseEvent contient aussi les propriétés booléennes altKey, ctrlKey et shiftKey. Vous pouvez utiliser ces propriétés pour vérifier si la touche Alt, Ctrl, ou Shift est appuyée également au moment du clic de la souris.

Création de fonctionnalité glisser-déposer

La fonctionnalité glisser-déposer permet aux utilisateurs de sélectionner un objet tout en maintenant le bouton gauche de la souris enfoncé, de déplacer l'objet à un nouvel endroit sur l'écran et de l'y déposer en relâchant le bouton gauche de la souris. Le code suivant en est un exemple :

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

Personnalisation du curseur de la souris

Le curseur de la souris (pointeur de la souris) peut être masqué ou remplacé pour tout objet d'affichage de la scène. Pour masquer ce curseur, appelez la méthode Mouse.hide(). Personnalisez le curseur en appelant Mouse.hide(), en écoutant l'événement MouseEvent.MOUSE_MOVE en provenance de la scène et en définissant les coordonnées d'un objet d'affichage (votre curseur personnalisé) sur les propriétés stageX et stageY de l'événement. L'exemple suivant illustre une exécution de base de cette tâche :

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

Personnalisation du menu contextuel

Chaque objet issu de la classe InteractiveObject peut posséder un menu contextuel exclusif, qui s'affiche lorsque l'utilisateur clique avec le bouton droit de la souris dans le fichier SWF. Plusieurs commandes sont incluses par défaut, notamment des commandes d'avance, de recul, d'impression, de qualité et de zoom.

Vous pouvez supprimer toutes les commandes par défaut du menu, à l'exception des commandes Settings (Paramètres) et About (A propos). Lorsque vous définissez la propriété Stage showDefaultContextMenu sur false, ces commandes sont supprimées du menu contextuel.

Pour créer un menu contextuel personnalisé pour un objet d'affichage particulier, créez une instance de la classe ContextMenu, appelez la méthode hideBuiltInItems() et affectez cette instance à la propriété contextMenu de cette instance DisplayObject. L'exemple suivant crée un carré dessiné dynamiquement avec une commande de menu contextuel qui permet de modifier sa couleur au hasard :

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

Gestion du focus

Un objet interactif peut recevoir le focus, soit par programmation, soit par le biais d'une action utilisateur. Dans les deux cas, la définition du focus change la propriété focus de l'objet sur true. En outre, si la propriété tabEnabled a la valeur true, l'utilisateur peut transmettre le focus d'un objet à un autre en appuyant sur la touche Tabulation. La valeur tabEnabled est false par défaut, excepté dans les cas suivants :

Dans chacune de ces situations, vous pouvez ajouter un écouteur pour FocusEvent.FOCUS_IN ou FocusEvent.FOCUS_OUT pour étendre les comportements possibles lors du changement de focus. Si cette possibilité est pratique pour les champs texte et les formulaires, vous pouvez aussi l'utiliser avec les sprites, les clips et tout autre objet qui hérite de la classe InteractiveObject. L'exemple suivant montre comment activer le changement de focus avec la touche de tabulation et comment répondre à l'événement focus qui en découle. Dans ce cas, chaque carré change de couleur lorsqu'il reçoit le focus.

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
{
    // générer des valeurs aléatoires pour les canaux rouge, vert et bleu.
    var red:Number = (Math.random() * 512) - 255;
    var green:Number = (Math.random() * 512) - 255;
    var blue:Number = (Math.random() * 512) - 255;
    
    // créer et renvoyer un objet ColorTransform avec ces couleurs aléatoires.
    return new ColorTransform(1, 1, 1, 1, red, green, blue, 0);
}