Típicamente cuando uno crea efectos de movimiento en ActionScript estos son lineales, es decir los objetos se mueven con velocidad constante, en esta ocasión haremos el movimiento pero con efecto de desaceleración o Easing que consiste en mover un objeto con la velocidad que va disminuyendo conforme se acerca al punto donde debe llegar.
[SWF]http://blog.unijimpe.net/wp-content/uploads/2007/01/easing.swf, 300, 70[/SWF]
Preparando los elementos
Como primer paso creamos dos MovieClips, uno llamado btplay que lo utilizaremos para llamar al efecto de movimiento y el segundo llamado ball que es el movieclip que moveremos. Creamos el evento para el botón btplay.
[as]
btplay.onPress = function() {
easingClip();
}
[/as]
Implementando el efecto Easing
El siguiente paso es crear la función easingClip que hará efecto para el movimiento deseado, donde primero se definen las variables que contendrán la posición inicial y la posición final. El siguiente paso es colocar el movie en la posición inicial.
Pero como se hace el calculo para obtener estos valores de las posiciones? Calculamos la distancia que hay entre la posición actual del movie al punto final y movemos el movie en la mitad de la distancia, luego volvemos a hacer el mismo calculo y así sucesivamente con lo cual nos iremos acercando en espacios mas pequeños a medida que nos acercamos al final con lo cual logramos el efecto de desaceleración.
Seguidamente creamos un onEnterFrame que nos permita efectuar nuestro calculo repetidamente, dentro de este onEnterFrame cambiamos el valor de la propiedad _x del movie para ir posicionando cada vez mas cerca del punto final.
[as]
function easingClip() {
var xini:Number = 10;
var xfin:Number = 275;
clip._x = xini;
clip.onEnterFrame = function() {
clip._x += (xfin-clip._x)/2;
}
}
[/as]
Cambiando la aceleración
En el ejemplo hemos movido el objeto en la mitad de la distancia que le faltaba para llegar al punto final, pero tambien podemos moverlo en la tercera, cuarta, quinta… parte de la distancia con ello estariamos logrando cambiar la aceleración. Entonces podemos guardar en una variable este valor.
[as]
function easingClip() {
var xini:Number = 10;
var xfin:Number = 275;
clip._x = xini;
clip.onEnterFrame = function() {
clip._x += (xfin-clip._x)/8;
}
}
[/as]
Finalizando
Finalmente calculamos la posición actual del movie para verificar que llego al punto final y eliminamos el onEnterFrame que de otra forma se quedaría ejecutandose. Uniendo todo el código tenemos nuestro efecto easing.
[as]
btplay.onPress = function() {
easingClip();
}
function easingClip() {
var xini:Number = 10;
var xfin:Number = 275;
clip._x = xini;
clip.onEnterFrame = function() {
clip._x += (xfin-clip._x)/8;
if (xfin – clip._x < 0.001) {
delete clip.onEnterFrame;
}
}
}
[/as]
En nuestro ejemplo hemos hecho el movimiento solo en el eje X, podemos hacerlo tambien en el eje Y con lo cual ya nuestro movie se moveria en cualquier dirección.
Comentarios Total 6 comentarios
Publicado: 28/03/2007 8:42 am
en realidad todos los ejemplos qu eencuentro en la web son muy interesantes pero no logro acceder a un ejemplo qu eme demuestre como hacer que al mover un objeto se me detenga en una posición determinada.
el movimiento lo realizo con las teclas de cursores con la derecha por ejemplo el personaje comienza a moverse pero necesito que no se me vaya de la pantalla por que si no quien lo coge.
saludos ojala me den una idea de como hacer esto
Publicado: 18/09/2008 9:21 am
Este script esta bueno, pero no sirve para que el clip se desplace de derecha a izquiera.
Saludos
Publicado: 30/07/2009 7:50 pm
Lo que me ha costado encontrar este efecto con un codigo tan simple y limpio como el tuyo!
Gracias!
Publicado: 09/01/2010 2:27 pm
Me gustaria saber como realizar este efecto con varios botones
Publicado: 18/08/2011 12:55 pm
Cómo harías para que el efecto de easing se active luego de x segundos? Es x que lo quiero aplicar a una galería de imágenes.
Saludos!
Publicado: 18/08/2011 2:20 pm
Para esperar x mili segundos antes de ejecutar el tween puedes utilizar setTimeout, entonces para ejecutar la animación después de 350 mili-segundos sería de la siguiente forma:
setTimeout(easingClip, 350);