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 :
Tipos de acceleracion (la Linear son las cuatro identicas)
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 :
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):
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;
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros