Admin
 
 
Logo DIPLOX
Desplazamiento con easing
Volver Por sereno
  
Martes, 12/04/2011
Desplazamiento con easing
Hace poco que en el trabajo estrenamos la web de BlueOcean Events, uno de nuestros clientes de Boyldone.

Pues bien ahora vamos a presentarles una galería de imágenes y para el efecto que queremos hacer necesitábamos desplazar un movieclip a unas coordenadas dadas con un efecto de easing.

La ecuación básica es que la posición que va a tener el movieclip inmediatamente después es el valor actual al que se le suma la diferencia entre la posicion final menos el valor actual por el coeficiente de decelaración.
Vale, esto explicado así puede ser dificil de entender, mejor vamos a verlo con una fórmula:

posSiguiente += (posFinal - posActual)*coefDecel
Ahora vamos a proceder a hacer un ejemplo.
1.- Creamos un movieclip y le damos de nombre de instancia ‘cuadro_mc’
2.- Creamos dos botones (pueden ser dos movieclips): ‘Generar Animacion’ y ‘Reset’
3.- Seleccionamos el fotograma en el que vamos a insertar las acciones y escribimos:
stop ();
generarOk = false;

generar_mc.onPress = function (){
generarOk = true;
}
reset_mc.onPress = function (){
cuadro_mc._x = 11;
cuadro_mc._y = 16;
generarOk = false;
}
onEnterFrame = function (){
if (generarOk){
cuadro_mc._x += (posXFinal-cuadro_mc._x)*aceleracion;
cuadro_mc._y += (posYFinal-cuadro_mc._y)*aceleracion;
}
}
Explicamos el código -que por otra parte es muy sencillo-:
· Establecemos la variable ‘generarOk’ a false. Para que no se desplace nada más cargar el swf.
· Al boton de generar la animación le decimos que la variable ‘generarOk’ se establezca a true.
· Al boton de reset, ‘generarOk’ se establece a false (para que no se anime) e indicamos la posicion x e y originales del ‘cuadro_mc’.
· En el onEnterFrame le asignamos una función que lo que hace es lo que hemos comentado más arriba.


Volver Por sereno