EffectsController

Hace muchos días que apenas posteo código, ando un poco escaso de tiempo. Hoy y aprovechando un thread de ASNativos he decidido publicar una clase para aplicar las ecuaciones de Robert Penner o cualquier otro tipo de ecuaciones.

Las clases de easing de Robert Penner se pueden descargar desde http://www.robertpenner.com.

El objetivo era hacer una clase fácil de reutilizar que nos permita aplicar distintas ecuaciones con distintos parámetros a distintas propiedades de un clip de película. De está forma podremos hacer animaciones de una forma relativamente sencilla. Para haceros a la idea podéis ver este ejemplo.

La clase ExtendedMC es una clase que extiende MovieClip y que de momento sólo tiene un método: applyEffect. Este método recibe como parámetros un array con los efectos a aplicar, un array de propiedades a las que aplicar los efectos, y un objeto con los valores de inicialización.

Creo que lo más sencillo es comentar el ejemplo.

   1:import com.robertpenner.easing.Bounce;
   2:
   3:p4.onRelease = p4.onReleaseOutside = function() {
   4:        this.stopDrag();
   5:        
   6:        var foo = {
   7:                initValue: [this._x,this._y,0],
   8:                increment: [-(this._x - this.initX),
   9:                            -(this._y - this.initY),360],
  10:                NFRAMES: [15,15,10]
  11:        }
  12:
  13:        this.applyEffect([Bounce.easeOut,Bounce.easeIn,
  14:                          Bounce.easeInOut],
  15:                         ["_x","_y","_rotation"],foo);
  16:}
  17:
  18:p4.onPress = function() {
  19:        this.clearTransition(false);
  20:        this.initX = this._x;
  21:        this.initY = this._y;
  22:        this.startDrag("");
  23:}
  24:
  25:p4.onTransitionComplete = function(prop) {
  26:        trace("transitionComplete " + prop);
  27:}

En el escenario tenemos un clip de película que hemos vinculado a a la clase com.code4net.movieClip.ExtendedMC. A este MC le configuramos los métodos onPress y onRelease para que sea un elemento arrastrable. La gracia del código está en las lineas 5 - 12. La línea 12 contiene la llamada al método applyEffect. De ella extraemos que a la propiedad _x le aplicaremos un efecto de easing con la ecuación Bounce.easeOut, a la propiedad _y el efecto Bounce.easeIn y a la propiedad _rotation el efecto Bounce.easeInOut. Los parámetros para dichas ecuaciones se encuentran en el objeto foo, declarado en la linea 5.

Dicho objeto contiene 3 propiedades de tipo Array. Cada array tiene tantas posiciones como propiedades a las que se van a aplicar efectos.

La primera propiedad es initValues, en la que indicamos el valor inicial de la propiedad.

La segunda propiedad es increment, que contiene la diferencia entre el valor final y el valor inicial de cada una de las propiedades.

La última es NFRAMES, que nos indica la duración en frames de la animación para cada una de las propiedades. Se puede dar un tiempo de animación distinto para cada propiedad.

Como hemos dicha, estas propiedades son arrays. La primera posición del array corresponde a los valores para la primera propiedad (en el ejemplo _x), el segundo para _y y el tercero para _rotation.

Por último he definido el evento onTransitionComplete. Este evento es disparado cada vez que se termina la animación de alguna de las propiedades. Recibe como parámetro el valor de la propiedad que se ha terminado de animar.

En el ejemplo he utilizado las ecuaciones de RobertPenner, pero podría haber utilizado las ecuaciones de easing que incorpora MX2004. Para ello, por ejemplo, en la linea en la que hago la llamada a applyEffect tendría que cambiar la referencia Bounce.easeOut por mx.transitions.easing.Bounce.easeOut, o en su defecto haber usado imort mx.transitions.easing.Bounce y después en la llamada a applyEffect poner Bounce.easeOut.

Realmente se pueden conseguir efectos de movimiento muy raros, si hacéis alguno realmente raro mandarlo que lo colgaremos ;-)

Por último aquí os podéis descargar el código completo de las dos clases necesarias y del ejemplo. Las clases de Robert Penner no estan incluidas, pero las podéis descargar de su site.