Tutorial de ecuaciones de easing y transiciones de Flash

Creo q ya todo el mundo ha oido hablar de las ecuaciones de Robert Penner, el tio se ha fabricado 11 clases de movimientos q cada una tiene 4 tipos de acceleracion ,hacen un total de 44 movimientos (asusta no ??), y lo mejor trabaja sobre la duracion de el movimiento , puedes saber en todo momento donde esta el mc , todo un nuevo mundo se abre delante tus ojos

Clases de ecuaciones :

• Linear
• Quad
• Cubic
• Quart
• Quint
• Sine
• Expo
• Circ
• Elastic
• Back
• Bounce

Tipos de acceleracion (la Linear son las cuatro identicas)

• easeIn : accelerando
• easeOut : frenando
• easeInOut: rapido al principio y el final y mas lento en el centro
• easeOutIn: lento al principio y el final y mas rapido en el centro

Si añadimos q puedes crear tus propias ecuaciones en esta pagina : http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm

Como funciona esa ecuaciones ? , miremos la grafica de acceleracion , esta reperesentado por 2 ejes (posicion , duracion) , posicion es un valor de 0 a 1 (escala) 1 seria cuando llego al final de el movimiento , con duracion pasa igual llegaria a ser el tiempo de el movimiento , y 0 su inicio fijense en la Quart.easeOut es la mas parecida a easing de toa la vidad , la Linear carece de aceleracion.

   static function easeOut (t:Number, b:Number, c:Number, d:Number):Number {
      return c*t/d + b;
   } 

Recibe 4 parametros :

• t : tiempo
• b : posicion inicial
• c : distancia ha recorrer
• d : duracion

Un ejemplo sencillo de su uso :

//Debes tener instaladas las ecuaciones de Rober Penner
import com.robertpenner.easing.*;
// mc es un clip q tenemos en el escenario
with (mc) {
	inicio = 100;
	final = 300;
	distancia = final-inicio;
	duracion = 30;
	//frames
	tiempo = 0;
	//contador
}
mc.onEnterFrame = function() {
	with (this) {
		_x = Circ.easeIn(tiempo++, inicio, distancia, duracion);
		if (tiempo>duracion) {
			delete onEnterFrame;
			trace("Se acabo el movimiento :D");
		}
	}
};

He elegido 2 tipos de librerias por varios motivos pero existen mas ( incluso hice una para as1 , paso de pasarlo a as2 porq estas son perfectas para el 100% de los casos):

• Ladislav Zigo : para mover propiedades de MovieClip , es la mas rapidad de todas , y para mi la mas comoda , su peso anda sobre 5 k pero tienes una montaña de metodos como mover color , puede mover muchas propiedades de un tiron , viene como componente , con su ayudad en flash , mirenla merece la pena ...
• Las de Macromedia : para mover cualquier cosa , su peso anda por 1.5 k , lo q no puedas hacer con la de zigo lo puede hacer con esta

Usando de la de Ladislav Zigo con el ejemplo anterior :

//Debes tener en la misma carpeta del FLA el .as de Ladislav Zigo

#include "lmc_tween.as"
mc._x = 100;
mc.duracion = 2;
// la duracion es en sg : :D
mc.tween("_x", 300, mc.duracion, "easeOutBounce", 0, function () {
	trace("Se acabo el movimiento :D");
});
//0 es el tiempo de espera andes de iniciar el movimiento , (guapo no ?) 
	

Pues fijate en este ejemplo vamos a mover 2 propiedades de un tiron (pueden ser todas las q quierras):

my_mc.tween(["_xscale","_yscale"],[50,50],2, "easeOutBounce" ); 

mc.tween("_x", 300 , 2, "easeOutBounce" ,0,"trace(Se acabo el movimiento :D)");
//llamas una function pero lo pasas como String tambien puede ser un object

mc.tween(
		propiedad,
		valores final,
		duracion (sg),
		tipo de animacion,
		tiempo de espera (sg) ,
		llama a una function cuando se acaba el movimiento);

Bueno las posibilidades de esta libreria es increible y tampoco las voy a nombrar todas no ? q pa eso sta la ayudad xD

Pasemos a la de Macromedia

Veamos nuestro ejemplo anterior pero con 2 propiedades

import mx.effects.*;
import mx.transitions.easing.*;
//O las de penner
//import com.robertpenner.easing.*; 
mc.onTweenUpdate = function(value) {
	//value es en este caso un array con los valores en curso
	// para q lo puedas aplicar a lo q quierras
	this._xscale = value[0];
	this._yscale = value[1];
	trace("se esta ejecutando el movimiento");
};
mc.onTweenEnd = function(value) {
	//y cuando se acaba el movimiento
	this._xscale = value[0];
	this._yscale = value[1];
	trace("Se acabo el movimiento :D");
};
//Tween(mc, inicio ,final, tiempo en msg);
var tw = new Tween(mc, [100, 100], [200, 300], 2000);
// reescribimos la ecuacion q viene por defecto en la clase
tw.easingEquation = Bounce.easeOut;

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo