Es la peor de las ecuaciones para recrear un movimiento
- Nunca sabes cuando va llegar un clip ni el tiempo q le hace falta , la filosofia de easing es : llegaremos cuando lleguemos
- la desacceleracion es muy rapidad al principio y muy lenta al final , no tienes control sobre la acceleracion aunq tu creas q si.
- no puedes recrear un movimiento de acceleracion identica a la de easing .
Resumiendo : pasemos pagina ..., easing ha muerto desde hace mucho tiempo ...
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 acceleracion .
Miremos la Linear :
Código :
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 :
Código :
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"); } } };
Bueno a q nos es tan dificil ?? , pues vamos ha hacerlo aun mas facil , vamos usar librerias q se basan en las ecuaciones de este mago
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 ...
-la 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 :
nota : la Zigo usa el nombre de las ecuaciones de as1 de penner (easeOutBounce == Bounce.easeOut) en la ayudad vienen todos los nombres ;D
Código :
#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 ?)
Comodo no ?
pues fijate en este ejemplo vamos a mover 2 propiedades de un tiron (pueden ser todas las q quierras):
Código :
my_mc.tween(["_xscale","_yscale"],[50,50],2, "easeOutBounce" );
Se pueden hacer aberraciones de este tipo
Código :
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
Al completo
Código :
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
Pasemos a la de Macromedia
veamos nuestro ejemplo anterior pero con 2 propiedades :
Código :
import mx.effects.*; import com.robertpenner.easing.*; //o la q vienen ya instaladas con flash //import mx.transitions.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;
Bueno es un pelin mas lioso , pero puedes mover cualquier cosa sin necesidad de ser una propiedad de MovieClip
Espero q ahora dejemos de usar easing porq easing == kk o no ?
nota :
algunas de las ecuaciones ya estan instaladas (C:\Documents and Settings\tu nombre de usuario\Local Settings\Application Data\Macromedia\Flash MX 2004\es\Configuration\Classes\mx\transitions\easing) y para acceder a ellas : import mx.transitions.easing.*; Si no as entendido este ultimo mira el tutorial de as2 o busca en la ayudad "Ruta de clases".
Decir q el componente de Ladislav Zigo ya instala la librerias de robert penner , y es la mas completa .
pagina para bajar la libreria de Ladislav Zigo :
http://laco.wz.cz/tween/
testar otras librerias
http://laco.wz.cz/tween/?page=benchmark
pagina de Robert Penner :
http://www.robertpenner.com/