Captura de entradas de ratón



Los clics del ratón crean eventos de ratón que pueden utilizarse para activar la funcionalidad de interacción. Se puede añadir un detector de eventos al objeto Stage para detectar los eventos de ratón que se produzcan en cualquier parte del archivo SWF. También se pueden añadir detectores de eventos a objetos del escenario que heredan de InteractiveObject (por ejemplo, Sprite o MovieClip); estos detectores se activan cuando se hace clic en el objeto.

Tal y como sucede con los eventos de teclado, los eventos de ratón se propagarán. En el siguiente ejemplo, dado que square es un objeto secundario de Stage, el evento se distribuirá tanto desde el objeto Sprite square como desde el objeto Stage cuando se haga clic en el cuadrado:

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

En el ejemplo anterior, el evento de ratón contiene información de posición sobre el clic. Las propiedades localX y localY contienen la ubicación donde tuvo lugar el clic en el objeto secundario inferior de la cadena de visualización. Por ejemplo, si se hace clic en la esquina superior izquierda de square, se notifican las coordenadas locales [0,0], ya que es el punto de registro de square. Como alternativa, las propiedades stageX y stageY hacen referencia a las coordenadas globales del clic en el escenario. El mismo clic notifica [50,50] para estas coordenadas, ya que square se movió a estas coordenadas. Ambos pares de coordenadas pueden ser útiles, dependiendo de cómo se desee responder a la interacción del usuario.

El objeto MouseEvent también contiene las propiedades booleanas altKey, ctrlKey y shiftKey. Se pueden utilizar estas propiedades para comprobar si también se está pulsando la tecla Alt, Ctrl o Mayús a la vez que se hace clic con el ratón.

Creación de funcionalidad de arrastrar y colocar

La funcionalidad de arrastrar y colocar permite a los usuarios seleccionar un objeto mientras se presiona el botón izquierdo del ratón, mover el objeto a una nueva ubicación en la pantalla y colocarlo en la nueva ubicación soltando el botón izquierdo del ratón. Esto se muestra en el siguiente ejemplo de código:

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

Para obtener más información, consulte la sección que describe la creación de interacción de arrastrar y soltar en Cambio de posición.

Personalización del cursor del ratón

El cursor (puntero) del ratón puede ocultarse o cambiarse por cualquier objeto de visualización en el escenario. Para ocultar el cursor del ratón, es necesario llamar al método Mouse.hide(). Para personalizar el cursor hay que llamar a Mouse.hide(), detectar el evento MouseEvent.MOUSE_MOVE en el objeto Stage y establecer las coordenadas de un objeto de visualización (el cursor personalizado) en las propiedades stageX y stageY del evento. El ejemplo siguiente muestra una ejecución básica de esta tarea:

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

Personalización del menú contextual

Cada objeto que hereda de la clase InteractiveObject tiene un menú contextual exclusivo, que se visualiza cuando un usuario hace clic con el botón derecho del ratón en el archivo SWF. Se incluyen varios comandos de manera predeterminada, incluidos Forward (Avanzar), Back (Atrás), Print (Imprimir), Quality (Calidad) y Zoom.

Se pueden eliminar todos los comandos predeterminados del menú, excepto Configuración y Acerca de. Si se establece la propiedad showDefaultContextMenu del objeto Stage en false, se eliminan estos comandos del menú contextual.

Para crear un menú contextual personalizado para un objeto de visualización específico hay que crear una nueva instancia de la clase ContextMenu, llamar al método hideBuiltInItems() y asignar dicha instancia a la propiedad contextMenu de la instancia de DisplayObject. El siguiente ejemplo proporciona un cuadrado dibujado dinámicamente con un comando de menú contextual para aplicarle un color aleatorio:

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

Administración de la selección

Un objeto interactivo puede recibir la selección mediante programación o mediante una acción del usuario. En ambos casos, al establecer la selección se cambia el valor de la propiedad focus del objeto a true. Además, si la propiedad tabEnabled se establece en true, el usuario puede pasar la selección de un objeto a otro mediante la tecla Tabulador. Hay que tener en cuenta que el valor de tabEnabled es false de manera predeterminada, salvo en los siguientes casos:

  • En un objeto SimpleButton, el valor es true.

  • Para un campo de texto de entrada, el valor es true.

  • En un objeto Sprite o MovieClip con buttonMode establecido en true, el valor es true.

En cada una de estas situaciones, se puede añadir un detector de FocusEvent.FOCUS_IN o FocusEvent.FOCUS_OUT para proporcionar un comportamiento adicional cuando cambie la selección. Esto es especialmente útil en los campos de texto y formularios, pero también se puede utilizar en objetos Sprite, MovieClip o en cualquier objeto que herede de la clase InteractiveObject. El siguiente ejemplo muestra cómo activar el cambio de selección de un objeto a otro con la tecla Tabulador y cómo responder al evento de selección posterior. En este caso, cada cuadrado cambia de color cuando se selecciona.

Nota: la herramienta de edición Flash utiliza métodos abreviados de teclado para administrar la selección; por lo tanto, para simular correctamente la administración de la selección, hay que probar los archivos SWF en un navegador o AIR en lugar de en 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); 
}