Share on facebook
Share on twitter
Share on whatsapp

Transición en Flash usando tween, para darle un toque profesional a nuestras animaciones

La clase tween es realmente muy útil, con ella podemos crear movimientos naturales desde As (Action Script). Aquí les dejo una breve descripción sobre su uso:

Transición de imágenes en Flash

La clase se importa al fla de la siguiente manera

import mx.transitions.Tween;

Estamos listos para comenzar a usarla…

Los parámetros de la clase son los siguientes:

Tween (mc, “propiedad”, metodo, ini, fin, tiempo, tipo);

  • mc: El movie clip que animaremos
  • propiedad: Identifica la propiedad que modificaremos (_x”, “_y”,”_width”,”_height”,”_xscale”,”_yscale”,”_alpha, etc.)
  • metodo: el tipo de transición que se usara para la animación
  • ini: valor inicial para método
  • fin: valor final para método
  • tiempo: el tiempo que durara la animación
  • tipo: segundos o frames.

Aquí el elemento interesante es metodo, y lo declaramos así:

metodo = mx.transitions.easing.Back.easeIn;

Existen diferentes métodos de transición, como por ejemplo:

  • Back: Le da un efecto de rebote al final de la animación.
  • Bounce: Le da un efecto de “retardo”
  • Elastic: Es un efecto elastico.
  • Regular: Desacelera la animación al final
  • Strong: Acelera al comienzo y al final
  • None: Solo realiza el movimiento.

A su vez, podemos modificar el comportamiento de la transición con estas variables:

  • easeIn: Aceleramos el inicio de la transición.
  • easeOut: Aceleramos el final de la transición
  • easeInOut: Aceleramos el inicio y el final de la transición.
  • easeNone: no aceleramos nada.

Bien, ahora un ejemplo de su uso.

var met = mx.transitions.easing.Back.easeIn;
boton.onrelease = function() {
var movimiento:Tween = new Tween(circulo, “_y”, met, 0, 400, .5, true);
}

Cuando presionamos el botón, el circulo se mueve según los parámetros de met, desde la posición 0 a 500.

Para controlas lo eventos podemos usar:

movimiento.onMotionStarted = function() {
Acciones que se ejecutan al comienzo cuando usamos movimiento.start()
};
movimiento.onMotionChanged = function() {
Acciones que se ejecutan durante la transición
};
movimiento.onMotionFinished = function() {
Acciones que se ejecutan al finalizar la transición al momento de usar movimiento.stop(),
};
movimiento.onMotionStopped = function() {
Acciones que se ejecutan al momento que usamos movimiento.stop(); y paramos la transición.
};
movimiento.onMotionResumed = function() {
Acciones que se ejecutan al momento que restablecemos la transición con movimiento.resume()
};

Los siguientes cuadros los saque desde la ayuda de Flash (que realmente es excelente)
En la tabla siguiente, se enumeran los métodos de la clase Tween:

Tween.continueTo()
Indica a la animación interpolada que continúe desde su valor actual hasta un nuevo valor.
Tween.fforward()
Avanza la animación interpolada directamente al final de la animación.
Tween.nextFrame()
Avanza la animación interpolada al siguiente fotograma.
Tween.prevFrame()
Dirige la animación interpolada al fotograma anterior al actual.
Tween.resume()
Reanuda una animación interpolada a partir del punto en que se ha detenido en la animación.
Tween.rewind()
Retrocede una animación interpolada hasta el principio de la misma.
Tween.start()
Inicia la animación interpolada desde el principio.
Tween.stop()
Detiene la animación interpolada en su posición actual.
Tween.toString()
Devuelve el nombre de clase, “[Tween]”.
Tween.yoyo()
Ordena a la animación interpolada que se reproduzca a la inversa desde el último sentido de los incrementos de la propiedad de interpolación.
En la tabla siguiente, se enumeran las propiedades de la clase Tween.
Tween.duration
Duración de la animación interpolada en fotogramas o segundos. Sólo lectura.
Tween.finish
Último valor interpolado del final de la animación interpolada. Sólo lectura.
Tween.FPS
Número de fotogramas por segundo de la animación interpolada. Sólo lectura.
Tween.position
Valor actual de la propiedad del clip de película de destino que se está interpolando. Sólo lectura.
Tween.time
Tiempo transcurrido de la duración de la animación. Sólo lectura.
Es realmente fácil de usar y le da a nuestras animaciones un toque de profesionalismo, aparte están muy de moda.

Por Ing. Guadalupe Cano León
www.canoleon.com.ar
[email protected]

Para convertirte en un experto en Photoshop, inscríbete ahora en nuestro curso gratis de Photoshop