Comunidad de diseño web y desarrollo en internet online

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.

Miremos la Linear :
   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");
}
}
};
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 ...
  • 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 :

Nota: La Zigo usa el nombre de las ecuaciones de as1 de penner (easeOutBounce == Bounce.easeOut) en la ayudad vienen todos los nombres ;D
//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 ?)
Comodo 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" ); 
Se pueden hacer aberraciones de este tipo
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
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;
Bueno es un pelin mas lioso , pero puedes mover cualquier cosa sin necesidad de ser una propiedad de MovieClip
Nota : Algunas de las ecuaciones ya estan instaladas (C:Documents and Settings u nombre de usuarioLocal SettingsApplication DataMacromediaFlash MX 2004esConfigurationClassesmx ransitionseasing) 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 que 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/

Probar otras librerias
http://laco.wz.cz/tween/?page=benchmark

Pagina de Robert Penner :
http://www.robertpenner.com/

¿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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate