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.
Hola, si quieres hacer tweening puedes usar las mismas clases que vienen con Flash, busca en la documentación. O si quieres algo mas profesional puedes pasar por estas páginas:
http://laco.wz.cz/tween/
http://hosted.zeh.com.br/mctween/
http://www.alex-uhlmann.de/flash/animationpackage/
http://www.mosessupposes.com/Fuse/index.html
De todos los paquetes el mas completo, profesional y actualizado es Fuse, debes suscribirte al foro para luego tener acceso al CVS. Cuando monte mi blog pienso escribir con mas detalle sobre estos temas, espero que sea pronto.
Saludos
Hola Rafael.
Muchas gracias por los links. Conocía -aunque nunca las había usado- las clases de tween de laco, el resto no tenía ni idea.
Con respecto al tema de las clases que vienen con Flash me parece recordar -corrígeme si me equivoco- que están disponibles para Flash 8 y no para MX ni MX 2004. Esto, unido a que realmente no lo hemos necesitado en grandes términos, pues decidi decantarme por este código simple.
No obstante se agradecen los enlaces, de nuevo muchas gracias.
PD: Cuando tengas armado el blog, notifícamelo y podemos hacer un intercambio de links. [info(at)martinpulido(dot)com].
Salu2
Santi M.