Skip to Content »

Detectores de eventos en AS3

  • 30/12/2007
  • 3:05 am
  • unijimpe

El manejo de eventos es el punto primordial para lograr interactividad en Flash, esto es detectar si el usuario realiza determinada acción (presiona un botón o una tecla por ejemplo) y de acuerdo a ello ejecutamos otra acción.

Utilizando Listeners
En ActionScript 3 (AS3) se ha hecho una cambio sustancial en el manejo de los eventos, se han eliminado completamente los eventos (onEnterFrame, onRollOver, onRelease, etc) y se ahora se pueden detectar la interacción utilizando listeners. Esto es si deseamos detectar un evento tenemos que agregar un listener especifico para llamar a una función cuando se detecte un evento.

  1. addEventListener("nombreEvento", nombreFuncion);

En donde tenemos que nombreEvento es el evento que deseamos detectar y nombreFuncion es el nombre de la función que vamos a ejecutar si se detecta el evento. Por ejemplo si deseamos detectar el evento ENTER_FRAME podemos agregar el listener de la forma:

  1. addEventListener(Event.ENTER_FRAME, onEnterClip);

Hay que notar que cada vez que ocurra el ENTER_FRAME nosotros ejecutaremos una función que en nuestro caso la hemos llamado onEnterClip.

Utilizando Eventos en Linea de Tiempo
Veamos primero la forma de implementar los eventos directamente en la linea de tiempo. Sea que tengamos un MovieClip llamado clip en el escenario de nuestra película, le agregamos el detector de eventos en el cual cambiamos de posición al clip.

  1. clip.addEventListener(Event.ENTER_FRAME, onEnterClip);
  2. function onEnterClip(event:Event) {
  3.     clip.x = clip.x + 2;
  4.     if (clip.x> 325) {
  5.         clip.x = -25;
  6.     }
  7. }

Con lo cual tenemos el siguiente resultado:

Cargando Flash

Utilizando Eventos en Clases
Veamos ahora el ejemplo anterior, pero utilizando clases, para ello primero importamos la clase flash.events.Event que nos permitirá utilizar las propiedades de los eventos.

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     public class ClipEvent extends Sprite {
  5.         public var clip:Sprite;
  6.         public function ClipEvent() {
  7.             clip = new Sprite();
  8.             addChild(clip);
  9.             // dibujamos el circulo
  10.             clip.graphics.beginFill(0x0099CC);
  11.             clip.graphics.drawCircle(0, 0, 25);
  12.             clip.graphics.endFill();
  13.             clip.x = stage.stageWidth/2;
  14.             clip.y = stage.stageHeight/2;
  15.             // agregamos el listener
  16.             clip.addEventListener(Event.ENTER_FRAME,onEnterClip);
  17.         }
  18.         public function onEnterClip(event:Event):void {
  19.             clip.x = clip.x + 2;
  20.             if (clip.x> 325) {
  21.                 clip.x = -25;
  22.             }
  23.         }
  24.     }
  25. }

Luego de exportar la película tenemos el siguiente resultado que es idéntico al ejemplo anterior.

Cargando Flash

Eventos para el Mouse
En ActionScript 2 todos los eventos del mouse eran detectados (mouseUp, mouseDown, mouseMove), ahora hay que agregar un listener si se desea detectar algún evento. Esto resulta ser optimo pues solo se detectarán los eventos a los que deseamos aplicarle alguna acción mejorando así el rendimiento de nuestra película.

Entonces ahora tenemos disponible una nueva clase flash.events.MouseEvent el cual brinda todos los eventos para el mouse los cuales son: CLICK, DOUBLE_CLICK, MOUSE_DOWN, MOUSE_MOVE, MOUSE_OUT, MOUSE_OVER, MOUSE_UP, MOUSE_WHEEL, ROLL_OUT, ROLL_OVER.

Entonces si deseamos agregarle un efecto cuando se para por encima de nuestro clip, agregaríamos dos listeners de la siguiente forma:

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     public class MouseClipEvent extends Sprite {
  6.         public var clip:Sprite;
  7.         public function MouseClipEvent() {
  8.             clip = new Sprite();
  9.             addChild(clip);
  10.             clip.graphics.beginFill(0x0099CC);
  11.             clip.graphics.drawCircle(0, 0, 25);
  12.             clip.graphics.endFill();
  13.             clip.x = stage.stageWidth/2;
  14.             clip.y = stage.stageHeight/2;
  15.             clip.addEventListener(Event.ENTER_FRAME,onEnterClip);
  16.             clip.addEventListener(MouseEvent.MOUSE_OVER, onOver);
  17.             clip.addEventListener(MouseEvent.MOUSE_OUT, onOut);
  18.         }
  19.         public function onOver(event:MouseEvent):void {
  20.             clip.alpha = 0.5;
  21.         }
  22.         public function onOut(event:MouseEvent):void {
  23.             clip.alpha = 1;
  24.         }
  25.         public function onEnterClip(event:Event):void {
  26.             clip.x = clip.x + 2;
  27.             if (clip.x> 325) {
  28.                 clip.x = -25;
  29.             }
  30.         }
  31.     }
  32. }

Con lo cual obtenemos un efecto cada vez que pasamos encima del clip como se muestra a continuación.

Cargando Flash

Eventos del Teclado
Para el caso del teclado ahora a traves de la clase flash.events.KeyboardEvent se tienen disponibles dos tipos de eventos KEY_DOWN y KEY_UP. Luego por ejemplo si deseamos controlar la posición de nuestro clip utilizando el teclado podemos tener el siguiente codigo.

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.events.KeyboardEvent;
  5.     import flash.ui.Keyboard;
  6.  
  7.     public class KeyboardClipEvent extends Sprite {
  8.         public var clip:Sprite;
  9.         public function KeyboardClipEvent() {
  10.             clip = new Sprite();
  11.             addChild(clip);
  12.             clip.graphics.beginFill(0x0099CC);
  13.             clip.graphics.drawCircle(0, 0, 25);
  14.             clip.graphics.endFill();
  15.             clip.x = stage.stageWidth/2;
  16.             clip.y = stage.stageHeight/2;
  17.             stage.addEventListener(KeyboardEvent.KEY_DOWN,onKey);
  18.         }
  19.         public function onKey(event:KeyboardEvent):void {
  20.             switch (event.keyCode) {
  21.                 case Keyboard.UP :
  22.                     clip.y -= 5;
  23.                     break;
  24.                 case Keyboard.DOWN :
  25.                     clip.y += 5;
  26.                     break;
  27.                 case Keyboard.LEFT :
  28.                     clip.x -= 5;
  29.                     break;
  30.                 case Keyboard.RIGHT :
  31.                     clip.x += 5;
  32.                     break;
  33.                 default :
  34.                     break;
  35.             }
  36.         }
  37.     }
  38. }

Ejecutando este código obtenemos el siguiente resultado:

Cargando Flash

Finalmente les dejo los archivos fuente de los ejemplos aqui mostrados para que puedan hacer sus practicas.

Posts Relacionados

Introducción a AJAX

  • 25/12/2007
  • 8:28 pm
  • unijimpe

AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web que permite comunicar el navegador del usuario con el servidor en segundo plano, es decir se pueden hacer cambios sobre la misma página sin necesidad de recargarla.

El Objeto XMLHttpRequest
XMLHttpRequest es el objeto primario que nos permitirá la comunicación con el servidor de forma asíncrona, originalmente fue implementada para Internet Explorer y basada en un ActiveX y ahora los otros navegadores también la soportan.

Entonces lo primero es detectar el tipo de navegador y crear una instancia del objeto XMLHttpRequest para poder utilizarlo posteriormente, para ello implementamos la siguiente función en Javascript.

  1. function createXMLHttpRequest() {    
  2.     if (window.ActiveXObject) {     
  3.         return new ActiveXObject("Microsoft.XMLHTTP");  
  4.     } else if (window.XMLHttpRequest) {     
  5.         return new XMLHttpRequest();    
  6.     }   
  7. }

Métodos y Propiedades
El objeto XMLHttpRequest dispone de los siguientes métodos:

  • send(content): permite enviar datos al servidor.
  • abort(): termina o cancela la petición actual.
  • getAllResponseHeaders(): devuelve todos los headers de respuesta a la petición HTTP como pares key/valor.
  • getResponseHeader("header"): devuelve una cadena con el valor del header especificado en "header".
  • open("method", "url"): permite realizar llamadas al servidor, el argumento del method puede ser GET, POST, o PUT.
  • setRequestHeader("header", "value"): define un header especifico al valor dado por open().

Además de ello las propiedades disponibles son las siguientes:

  • onreadystatechange: detector de eventos para ejecutar una función cada vez que se detecta el cambio en el estado de la petición.
  • readyState: es el estado de la petición. Se tienes cinco estados posibles: 0 (sin iniciar), 1 (cargando), 2 (cargado), 3 (interactuando), 4 (completo)
  • responseText: respuesta del servidor como un cadena de texto.
  • responseXML: respuesta del servidor como un XML.
  • status: código de estado HTTP del servidor (200, 404, etc.)
  • statusText: código de estado HTTP del servidor como texto (OK, Not Found, etc)

Ejemplo de Interacción
Sea que tenemos un campo de texto en donde un usuario ingresa su email, deseamos que nuestra página valide automáticamente si este email es correcto. Lo primero que hacemos es detectar que el usuario sale del campo de ingreso de email y un boton para llamar a una función Javascript que se encarga de verificar el email.

  1. Validar Email con AJAX: <br>
  2. <input type="text" id="email" name="email"><br>
  3. <input type="button" id="bt" value="Send" onClick="validMail();">

El siguiente paso es crear la función validMail, el cual tomará en email ingresado lo enviará a un script llamado validate.php que devolverá si es o no valido.

  1. var xmlHttp;
  2. function validMail() {
  3.     var email = document.getElementById("email");
  4.     var url = "validate.php?email=" + escape(email.value);
  5.     xmlHttp = createXMLHttpRequest();
  6.     xmlHttp.open("GET", url);
  7.     xmlHttp.onreadystatechange = onCompleteData;
  8.     xmlHttp.send(null);
  9. }
  10. function onCompleteData() {
  11.     if (xmlHttp.readyState == 4) {
  12.         alert(xmlHttp.responseText);
  13.     }
  14. }

Como se puede observar, creamos una instancia del objeto XMLHttpRequest utilizando la función creada anteriormente, luego procedemos a llamar al PHP utilizando el método GET para enviar los datos, luego cuando se detecta el cambio en el estado de la petición ejecutaremos la función onCompleteData, la cual la definimos posteriormente y se encarga de lanzar un alert con la respuesta del servidor.

Uniendo todos el código obtenemos nuestro ejemplo de AJAX funcionando y sin utilizar ninguna librería externa para ello:

  3. <title>Ajax Demo  - unijimpe</title>
  4. <script language="JavaScript" type="text/javascript">
  5. function createXMLHttpRequest() {   
  6.     if (window.ActiveXObject) {     
  7.         return new ActiveXObject("Microsoft.XMLHTTP");  
  8.     } else if (window.XMLHttpRequest) {     
  9.         return new XMLHttpRequest();    
  10.     }   
  11. }
  12. var xmlHttp;
  13. function validMail() {
  14.     var email = document.getElementById("email");
  15.     var url = "validate.php?email=" + escape(email.value);
  16.     xmlHttp = createXMLHttpRequest();
  17.     xmlHttp.open("GET", url);
  18.     xmlHttp.onreadystatechange = onCompleteData;
  19.     xmlHttp.send(null);
  20. }
  21. function onCompleteData() {
  22.     if (xmlHttp.readyState == 4) {
  23.         alert(xmlHttp.responseText);
  24.     }
  25. }
  26. </script>
  27. </head>
  29. Validar Email con AJAX: <br>
  30. <input type="text" id="email" name="email"><br>
  31. <input type="button" id="bt" value="Send" onClick="validMail();">
  32. </body>
  33. </html>

Pueden ver el ejemplo funcionando en ajax-demo.html y como como siempre les dejamos los archivos fuente para que lo descarguen y hagan sus experimentos.

Posts Relacionados

Nuevo código Google Analytics

  • 18/12/2007
  • 12:04 am
  • unijimpe

Google Analytics el popular servicio para registrar y reportear visitas a páginas webs se renueva y ahora nos presenta un nuevo código para hacer el seguimiento de las visitas. Esta nueva versión es mucho mas rápida y pequeña con lo cual se logra rapidez en el seguimiento de visitas

ga.gif

Características
Esta nueva versión es un cambio sustancial y nos trae las siguientes características:

  • Archivo mas pequeño y rápido
  • Fácil de utilizar y entender
  • Detección automática de HTTPS
  • Mayor seguridad de los nombres de espacio
  • Facilidad de personalizar el código de acuerdo a tus necesidades.
  • Conveniente para hacer seguimiento de e-commerce y cross-domain.

Hay que notar que el código actual va a seguir funcionando todavía, pero es recomendables cambiar el código para acelerar el seguimiento de visitas.

Implementando el Nuevo Código
El código de seguimiento de Google Analytics es un código Javascript que se coloca típicamente antes de cerrar el html que se desea analizar. Actualmente el código hace el llamado a un archivo de nombre urchin.js como el que se muestra a continuación, en donde UA-XXXXX-N el código de seguimiento del web.

  1. <script src="http://www.google-analytics.com/urchin.js"
  2. type="text/javascript"></script>
  3. <script type="text/javascript">
  4. _uacct = "UA-XXXXX-N";
  5. urchinTracker();
  6. </script>

Ahora el nuevo código va a llamar al archivo gs.js el cual es un nuevo script optimizado y con nuevas carácterisiticas. La nueva forma de escribir el código es de la forma:

  1. <script type="text/javascript">
  2. var gaJsHost = (("https:" == document.location.protocol)
  3. ? "https://ssl." : "http://www.");
  4. document.write("\<script src='" + gaJsHost +
  5. "google-analytics.com/ga.js' type='text/javascript'>\<\/script>")
  6. </script>
  7. <script type="text/javascript">
  8. var pageTracker = _gat._getTracker("UA-XXXXX-N");
  9. pageTracker._initData();
  10. pageTracker._trackPageview();
  11. </script>

Quiza para algunos es un poco mas complejo el código pero es mucho mas eficiente y autodetecta si se esta trabajando sobre protocolo seguro.

Seguimiento de descargas
Anteriormente para hacer el seguimiento de descargas se utilizaba la función urchinTracker de la forma:

  1. <a href="mydoc.pdf"
  2. onclick="urchinTracker('/mydoc.pdf');">Save PDF</a>

Desde ahora la función para el seguimiento de acciones es _trackPageview y lo podemos implementar de la forma:

  1. <a href="mydoc.pdf"
  2. onclick="pageTracker._trackPageview('/mydoc.pdf');">Save PDF</a>

Como pueden observar son cambios menores el código pero que van a acelerar en gran manera el seguimiento de visitas, acelerando de esta forma el acceso a nuestras páginas.

Si desean conocer mas detalles de las nuevas funciones e instrucciones disponibles se ha puesto disponible un documento PDF llamado Tracking Code Migration Guide Switching from urchin.js to ga.js con una guia detallada de como migrar al nuevo código.

Posts Relacionados