Eventos click y doble click en un botón con Actionscript 3

Siguiendo el tema abierto por tomydb, en el que explicaba cómo detectar un doble click sobre un botón en flash con actionscript 2, explicaré cómo hacerlo con actionscript 3 ya que ahora es más sencillo gracias a que la clase MouseEvent nos permite detectar directamente el evento dobleclick.

El uso de la clase MouseEvent es muy simple y ya ha sido explicada en otros tips. Únicamente hemos de crear un listener que detecte el evento y ejecutar una acción.

Código :

clip.doubleClickEnabled = true
clip.addEventListener(MouseEvent.DOUBLE_CLICK, onDobleClick);
function onDobleClick(event:MouseEvent)
{
   trace("doble click");
}

Hemos de fijarnos en la propiedad doubleClickEnabled que es la que nos indica si la acción de doble click está activa o no. Por defecto la propiedad está con valor false, con lo que debemos pasarla a true en caso contrario el dobleclick no se ejecutaría.

Ahora, para hacer el tip más interesante (y para que a Bleend el tip no le parezca demasiado corto...) explicaré cómo detectar si hemos hecho un click o un dobleclick sobre el mismo botón. Es decir, que si clicamos sobre el botón una vez ejecute una acción y si clicamos doble ejecute otra distinta.

Siguiendo lo explicado en este otro tip empezaremos el código creando la clase para nuestro botón. Crearemos la clase Boton.as

A este botón le añadiremos los eventos de click y double_click.

Código :

package 
{
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   //-----------------------------------------
   public class Boton extends MovieClip
   {
      //-----------------------------------------
      public function Boton()
      {
         doubleClickEnabled = true;
         addEventListener(MouseEvent.CLICK, onClick);
         addEventListener(MouseEvent.DOUBLE_CLICK, onDobleClick);
      }
      //-----------------------------------------
      private function onClick(event:MouseEvent):void
      {
         trace("click");
      }
      private function onDobleClick(event:MouseEvent):void
      {
         trace("doble click");
      }
      //-----------------------------------------
   }
}

Si publicasemos ahora este botón veríamos el siguiente problema... al ejecutar el dobleclick tambien se ejecutaría el click normal, ya que los dos listeners son detectados. En el panel salida nos marcaría esto:

panel salida :

Esto no es lo que nos interesa, solo queremos que se ejecute una de las dos. Para solucionar el problema ampliaremos la clase siguiendo este proceso:

Crearemos una variable boleana donde indicaremos si hemos realizado un click o un dobleclick

Código :

private var isDobleClick:Boolean;

El valor de la variable lo cambiaremos a través de las funciones de los eventos:

Código :

private function onClick(event:MouseEvent):void
{
   isDobleClick = false;
}
private function onDobleClick(event:MouseEvent):void
{
   isDobleClick = true;
}

Escribiremos una tercera función que ejecute las acciones según el valor de la variable.

Código :

private function controlaClick(event:TimerEvent):void
{
   if (isDobleClick == false) {
      trace("click");
   } else {
      trace("doble click");
   }
}

Esta función controlaClick() la ejecutaremos desde la función onClick(), pero hemos de darle un margen de tiempo para detectar si hemos realizado un dobleclick, así que la ejecutaremos desde un intervalo. La función quedaría así:

Código :

private function onClick(event:MouseEvent):void
{
   isDobleClick = false;
   espera = new Timer(200, 1);
   espera.addEventListener(TimerEvent.TIMER, controlaClick);
   espera.start();
}

Cómo añadido podemos hacer que si damos un solo click sobre el botón pulsando la tecla "Ctrl" se ejecuten las acciones de un dobleclick, para eso utilizaremos la propiedad ctrlKey del evento MouseEvent. Esta propiedad devuelve true o false según esté pulsada la tecla en el momento del click. (Esta propiedad también está para "shift" y "Alt")

Código :

if (event.ctrlKey) {
   isDobleClick = true;
}

La clase completa sería esta:

Código :

package 
{
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   import flash.utils.Timer;
   import flash.events.TimerEvent;
   //-----------------------------------------
   public class Boton extends MovieClip
   {
      private var isDobleClick:Boolean;
      private var espera:Timer;
      //-----------------------------------------
      public function Boton()
      {
         doubleClickEnabled = true;
         addEventListener(MouseEvent.CLICK, onClick);
         addEventListener(MouseEvent.DOUBLE_CLICK, onDobleClick);
      }
      //-----------------------------------------
      private function onClick(event:MouseEvent):void
      {
         isDobleClick = false;
         espera = new Timer(200, 1);
         espera.addEventListener(TimerEvent.TIMER, controlaClick);
         espera.start();
         if (event.ctrlKey) {
            isDobleClick = true;
         }
      }
      private function onDobleClick(event:MouseEvent):void
      {
         isDobleClick = true;
      }
      private function controlaClick(event:TimerEvent):void
      {
         if (isDobleClick == false) {
            trace("click");
         } else {
            trace("doble click");
         }
      }
      //-----------------------------------------
   }
}

PD. zguillez no se hace responsable del suicidio de ningún diseñador.

Artículos Relacionados

• Cómo abrir una ventana PopUp en ActionScript 3
• Deshabilitar todos los botones interiores de un MovieClip
• Obtener información de la dirección URL desde Actionscript 3

actionscript_3

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario