Untitled Document ActionScript: hacer retroceder una animación(rew)

[Publicado: Viernes 08 de Octubre 2004.]
[Autor: Paco Naranjo.]

Este articulo se lo dedico a Itziar y Juan Muro.

Hay muchas maneras de conseguir por código actionscript el efecto de retroceso en una linea de tiempo, una de ellas, y la que esplicare a continuación, es programando el evento onEnterFrame.
Este evento se invoca cada cierto tiempo, este tiempo viene dado por el 'frame rate' de la película. Voy a mostrar unos ejemplos de como programarlo para hacer unos controles de 'a lante' y 'a tras' que afecten a un MovieClip determinado.

Creamos dos funciones, una moverá la line de tiempo del clip hacia alante, otra la moverá hacia atrás:

function marcha_atras(_movieclip:MovieClip) {
   /*si el movieclip solo tiene un fotograma no se puede hacer retroceder*/
   if (_movieclip._totalframes>1) {
      /*se programa el evento on enter frame*/
      _movieclip.onEnterFrame = function() {
         /*hacemos un trace para poder visualizar la ejecución de la función.*/
         trace("fotograma actual: "+_movieclip._currentframe);
         if (_movieclip._currentframe<=1) {
              /* anulamos la función que estaba sociada al evento asociando al evento el valor nulo.
              si no hicieramos esto la funcion seguiria ejecutandose lo que perjudicaria
              el  rendimiento de la aplicación.*/

              _movieclip.onEnterFrame = null;
              trace("onEnterFrame desactivado.");
          }
          /*retrocedemos un fotograma en la linea de tiempo.*/
          this.prevFrame();
      };
   }
}
function marcha_alante(_movieclip:MovieClip) {
   /*si el clip esta retrocediendo lo paramos, para ello ponemos a null
   el evento onEnterFrame. Este es el estado del evento por defecto.*/

   _movieclip.onEnterFrame = null;
   _movieclip.play();
}

Bien, ahora supongamos que queremos poner unos controles de ‘marcha alante’ y ‘ marcha atrás’ que actúen sobre un clip de película, que llamaremos ‘cuadrado’. Este clip de película contiene en su interior una línea de tiempo con una animación. En el ultimo y el primer fotogramas clave de esta animación pondremos un stop().

Ahora creamos un botón cualquiera que servira de ‘marcha alante’ y le insertamos el siguiente código:

on(press){
   _root.marcha_alante(_root.cuadrado)
}

Y hacemos lo mismo con el otro botón ‘marcha atrás’ y el código siguiente:

on(press){
   _root.marcha_atras(_root.cuadrado)
}

Ok, ya esta hecho, publicamos nuestra película y podemos probarla clickeando en los botones.

Otra aplicación de este efecto puede ser crear un efecto de rollOver en un movieClip.
Para ello usamos el mismo clip que hemos creado anteriormente con la animación, el que nombramos como ‘cuadrado’. Entramos dentro del clip y en el primer fotograma insertamos el siguiente código:

stop()
/*programamos el evento on rollOver de manera que activa la animación.*/
this.onRollOver=function(){
   _root.marcha_alante(this)
}
/*el evento onRolOut y onReleaseOutside ponen la película marcha atrás.*/
this.onRollOut=this.onReleaseOutside=function(){
   _root.marcha_atras(this)
}

ahora puedes probarlo, al pasar el ratón por encima del clip se pondrá en marcha la animación y al hace rollOut, la animación ira marcha atrás. Experimenta con este efecto, que aunque simple es muy útil.

Puedes descargar el codigo del ejemplo.

Aquí dejo el código de las dos funciones quitando los ‘trace’ ,que pueden ralentizar la ejecución de la película en el editor de flash(al sacar por pantalla el texto), y los comentarios .

function marcha_atras(_movieclip:MovieClip) {
   if (_movieclip._totalframes>1) {
      _movieclip.onEnterFrame = function() {
         if (_movieclip._currentframe<=1) {
           _movieclip.onEnterFrame = null;
         }
         this.prevFrame();
      };
   }
}
function marcha_alante(_movieclip:MovieClip) {
   _movieclip.onEnterFrame = null;
   _movieclip.play();
}

Sugerencias:
Paginas amigas: