Animaciones dinámicas con clase Tween de Actionscript 2

En un paseo por los foros me he dado cuenta que aun son muchos (incluyéndome hasta no hace mucho ) los que no conocen las ventajas del uso de la clase Tween; es por eso que me decidí a hacer este tip para aclarar como es su funcionamiento.

Empecemos
Esta clase sirva para hacer transiciones de los valores de las distintas propiedades de un MovieClip: _x, _y, _xscale, _yscale, _alpha...

En primer lugar debemos entender la clase Tween está en el paquete de mx.transitions, por lo que lo más habitual es que tengamos que importarla antes de usarla, como? pues asi:

Código :

import mx.transitions.Tween;

Ahora bien, ¿como la utilizamos?
Pues así:

Código :

var miTween:Tween = new Tween(obj, prop, func, begin, finish, duration, useSeconds)

a primera vista lo que vemos es una variable de tipo Tween, donde:

• obj es el objeto de clip de película al que se refiere la instancia de Tween.
  
• prop es un nombre de cadena de una propiedad de obj cuyos valores se interpolarán.
  
• func es el método de suavizado que calcula un efecto de suavizado para los valores de propiedad del objeto interpolado. Osea, lo que antaño conocíamos como easing.
  
• begin es un número que indica el valor inicial de propiedad del objeto de destino que se interpolará.
  
• finish es un número que indica el valor final de propiedad del objeto de destino que se interpolará.
  
• duration es un número que indica la duración del movimiento de interpolación. Si se omite, se establece la duración en infinity de forma predeterminada.
  
• useSeconds es un valor booleano relacionado con el valor especificado en el parámetro duration, que indica que se deben utilizar segundos si se establece como true o fotogramas si se establece como false.
  

ejemplo:

Código :

import mx.transitions.Tween;
var miTween:Tween = new Tween(miClip, "_x", null, 5, 300, 2, true);

este codigo lo que hace es mover un MovieClip instanciado como "miClip" desde la posición "5" hasta "300" en el eje de x en 2 segundos

Ahora bien esto no termina aqui, como habrán notado en el ejemplo anterior pasamos como null al valor de la función, ya que estas también deben importarse, y se hace de la siguiente manera

Código :

import mx.transitions.easing.*;

esta funcion dispone de 6 métodos a saber:

• back: Extiende la animación cuando se supera el límite de la transición en uno o ambos extremos y produce un efecto como ser empujado hacia atrás desde el límite.
  

  Código :

  import mx.transitions.Tween;
  import mx.transitions.easing.*;
  var miTween:Tween = new new Tween(miClip, "_x", Back.easeOut, 5, 300, 2, true);

  
  
  
  ----------------------------------------------------------------------------------------------------------------------------------
  
• bounce: Añade un efecto de rebote dentro del rango de la transición en uno o ambos extremos. El número de rebotes depende de la duración: cuanto mayor sea la duración, producirá un mayor número de rebotes.
  

  Código :

  import mx.transitions.Tween;
  import mx.transitions.easing.*;
  var miTween:Tween = new new Tween(miClip, "_x", Bounce.easeOut, 5, 300, 2, true);

  
  
  
  ----------------------------------------------------------------------------------------------------------------------------------
  
• elastic:Añade un efecto elástico que está fuera del rango de la transición en uno o ambos extremos, en esata opcion la duración no afecta al grado de elasticidad.
  

  Código :

  import mx.transitions.Tween;
  import mx.transitions.easing.*;
  var miTween:Tween = new new Tween(miClip, "_x", Elastic.easeOut, 5, 300, 2, true);

  
  
  
  ----------------------------------------------------------------------------------------------------------------------------------
  
• regular: Añade un movimiento más lento en uno o ambos extremos. Esta función permite añadir un efecto de aceleración, desaceleración o ambos. (el mas conocido, aquel viejo easing)
  

  Código :

  import mx.transitions.Tween;
  import mx.transitions.easing.*;
  var miTween:Tween = new new Tween(miClip, "_x", Regular.easeOut, 5, 300, 2, true);

  
  
  
  ----------------------------------------------------------------------------------------------------------------------------------
  
• strong:Añade un movimiento más lento en uno o ambos extremos. Este efecto es similar al suavizado Regular, pero más pronunciado.
  

  Código :

  import mx.transitions.Tween;
  import mx.transitions.easing.*;
  var miTween:Tween = new new Tween(miClip, "_x", Strong.easeOut, 5, 300, 2, true);

  
  
  
  ----------------------------------------------------------------------------------------------------------------------------------
  
• none Añade un movimiento uniforme de principio a fin sin efectos, osea lineal lo mismo que si no pusieramos nada (null)
  

Como se ve en los ejemplos anteriores después de cada método hay otra propiedad, en este caso "easeOut", estos seis métodos tienen a su vez cuatro clases de suavizado:

• easeIn: suavizado al principio de la transición.
  
• easeOut: suavizado al final de la transición.
  
• easeInOut: suavizado al principio y al final de la transición.
  
• easeNone: indica que no se va a utilizar ningún cálculo de suavizado. Sólo se proporciona en la clase de suavizado None.
  

Espero sirva

 

Tweet