En el artículo anterior comenzamos a explicar la clase Fx.Tween y vimos ya un par de ejemplos sencillos. Ahora vamos a completar las explicaciones con nuevas prácticas un poco más complejas que sin duda serán de utilidad, puesto que realmente vienen muy bien para cumplir objetivos bastante necesarios en la creación de scripts con Mootools.

Lo que nos quedaba por ver eran básicamente los eventos que permite la clase Fx, que son heredados por otras clases para la realización de efectos, como Fx.Tween. Por ello, estas explicaciones sirven para todas las clases relacionadas con Fx.

Generalidades sobre eventos en Mootools

Antes de comenzar a tratar los eventos en efectos, cabe recordar a los lectores que en anteriores artículos del Manual de Mootools explicamos muchas de las generalidades que se deben conocer para poder crear eventos en este framework Javascript. No obstante, lo que tenemos que saber es que cualquier clase de Mootools que implementa Event, como los efectos, admite la creación y definición de eventos.

Para codificar comportamientos a realizar en respuesta a eventos tenemos dos posibilidades:

1. Codificar el evento dentro de los "options" enviados al contructor de la clase.
2. Codificar el evento por medio del método addEvent() sobre el objeto ya instanciado.

Veremos estos dos casos posibles para la definición de eventos.

Eventos en la clase Fx y las que heredan de ésta

Los eventos que soportan las clases de efectos en Mootools, es decir, las clases que dependen en la jerarquía de herencia de Fx, son los siguientes:

• Evento start: que se produce cuando el efecto comienza a ejecutarse
• Evento cancel: que se lanza cuando se para manualmente un efecto
• Evento complete: ocurre en el momento que el efecto termina su ejecución
• Evento chainComplete: en caso de encadenar varios eventos con chain, algo que no hemos visto todavía en el manual, se lanza cuando la pila de efectos ha sido completada.

Para aprender a crear eventos será ideal prestar atención al siguiente ejemplo. Vamos a crear un efecto en el que asignaremos funciones para ejecutar cuando ocurran los eventos "start" y "complete". Los tratamientos que realizaremos serán simplemente testimoniales, para mostrar un mensaje cuando el efecto empieza y acaba.

Podemos ver el ejemplo que vamos a construir en una página aparte.

Ahora veamos el código para conseguir este efecto y los eventos.

var efecto = new Fx.Tween("capaefectos",{
   property: 'width',
   duration: 1000,
   unit: "px",
   onStart: function(){
      $("mensaje").set("html", "Comenzando el efecto...");
   }
});

Como se puede ver, hemos creado el efecto con el constructor de Fx.Tween, pasando por parámetro el identificador de la capa sobre la que queremos aplicarlo y una serie de configuraciones adicionales por medio de un objeto "options".

En los "options" indicamos varias cosas como la propiedad CSS que queremos alterar con el efecto, la duración del mismo y las unidades CSS con las que vamos a trabajar. Además vemos un nuevo valor de "options" en el que asignamos una función, que es "onStart". Esa función tiene el código que deseamos ejecutar cuando el evento de comienzo del efecto se produzca.

Así que al comenzar el efecto (onStart) se ejecutará el código de la función, que simplemente alterará el HTML contenido en un elemento de la página que tiene el identificador "mensaje".

Así hemos visto la primera de las formas de asignar un evento a un objeto, por medio de la definición de un método en las "options" que tiene el nombre "on" seguido del nombre del evento que estamos codificando.

Ahora veremos otro modo posible de asignar eventos, que se hace con el propio evento instanciado y el método addEvent.

efecto.addEvent("complete", function(){
   $("mensaje").set("html", "Terminó el efecto.");
});

Con este código conseguimos que al efecto, instanciado en la variable "efecto", se le añada un evento "complete", que se ejecutará cuando el proceso del efecto termine.

El código del evento es bien simple, ya que sólo actualiza el HTML de la capa "mensaje".

Ahora, cuando iniciemos el efecto y éste se complete, se actualizará el texto de la capa mensaje. Sólo nos quedaría llamar al método start() del evento, que invocaremos cuando el usuario haga clic sobre un par de enlaces creados en la página.

$("enlaceencoger").addEvent("click", function(e){
   e.stop();
   efecto.start(100);
});
$("enlaceestirar").addEvent("click", function(e){
   e.stop();
   efecto.start(750);
});

Tenemos pues dos enlaces con identificadores "enlaceencoger" y "enlaceestirar", que llaman al método start() del efecto creado anteriormente, enviando el valor numérico que queremos asignar a la propiedad CSS dada de alta en las "options", que era width. Además, como en las "options" ya habíamos asignado las unidades CSS "px", con pasar un valor numérico a start(), será suficiente, porque el efecto ya sabe que son píxeles lo que estamos midiendo.

Podemos ver el código completo de esta página con efectos Mootools y eventos.

<html>
<head>
   <title>Eventos en efectos Mootools</title>
   <script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
   var efecto = new Fx.Tween("capaefectos",{
      property: 'width',
      duration: 1000,
      unit: "px",
      onStart: function(){
         $("mensaje").set("html", "Comenzando el efecto...");
      }
   });
   efecto.addEvent("complete", function(){
      $("mensaje").set("html", "Terminó el efecto.");
   });
      
   $("enlaceencoger").addEvent("click", function(e){
      e.stop();
      efecto.start(100);
   });
   $("enlaceestirar").addEvent("click", function(e){
      e.stop();
      efecto.start(750);
   });
});
</script>
</head>

<body>

<div id="capaefectos" style="width: 500px; background-color: #ffcc66; padding: 10px; overflow: hidden;">
Esta capa es sobre la que voy a crear los efectos con la clase Fx.Tween, a los que asignaremos diferentes eventos para probar.
</div>
<p>
<a href="#" id="enlaceestirar">Estirar capa con efecto</a> |
<a href="#" id="enlaceencoger">contraer capa con efecto</a>
</p>
<div id="mensaje"></div>

</body>
</html>

Para acabar, dejamos de nuevo el enlace para ver el ejemplo en marcha.

Esperamos que con estas indicaciones sea suficiente para que cualquier persona pueda realizar efectos mediante Mootools, con Fx.Tween o cualquier clase heredada de Fx, a los que asignar cualquiera de los eventos disponibles.