Cristalab

Mover objetos con efecto easing en Flash

Por: FeNtO + 22.05.2007

Sobre este tema ya hay un tutorial dentro de Clab, sin embargo el tip que les voy a mostrar es una función que permite mover los objetos con efecto easing de autoría original de solislarg (moderador del difunto nomaster.com) modificada a mi gusto.

El código es el siguiente:

Código :

function Mover(x,y, aceleracion) { 
          NombreInstanciaClip.onEnterFrame = function() {
          this._x += (x-this._x)/aceleracion;
          this._y += (y-this._y)/aceleracion;
         if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 ) {
                 this._x = x;
                 this._y = y;
                 delete this.onEnterFrame;
           }
};
}


¿Cómo funciona? bueno, pues es bastante sencillo solo necesita tres parámetros, columna, fila, y aceleración, la columna y la fila es la posición final hacia la cual queramos que vaya este clip, lo interesante aquí es la aceleración. En que se basa, no es otra cosa mas que los puntos intermedios para llegar a ese punto dividiendo la distancia en varios tramos para hacer la animación fluida, (entre mas puntos, más fluido, pero mas lento)

Código :

NombreInstanciaClip.onEnterFrame = function() { 

Aquí cuando mandamos a llamar a la función, se le asigna al clip un enterframe para que realicé la función en cada iteración, se podría asignar el nombre del clip desde los parámetros, pero lo hago así para que sea más entendible,

Después

Código :

this._x += (x-this._x)/aceleracion; 
          this._y += (y-this._y)/aceleracion;


Esto es lo que hace el efecto, en cada iteración divide la distancia final, entre la actual, entre el numero de iteraciones y asigna las nuevas coordenadas a el clip

Código :

if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 ) { 
        this._x = x;
        this._y = y;
        delete this.onEnterFrame;
}


Esta parte lo único que hace es verificar que la coordenada de el clip tanto x como y no sean menores a 0.5 de diferencia respecto a la coordenada final por que una ves siendo menor, las iteraciones se pueden volver infinitas o mino muy tardadas, por eso en cuanto detecta esa diferencia, asigna las coordenadas finales a el clip y borra este enterframe para que ya no se siga moviendo

Es bastante sencillo pero servirá de base para futuros tutos Sonrisa

Etiquetas actionscript

Comentarios | Enviar un comentario
muy bueno, yo usaba algo parecido pero particular para cada cosa a mover. Con esto me has ahorrado un estrujamiento de neuronas Guiño

Un detalle: si 'aceleracion' es negativa el clip se nos va para el lado opuesto y nunca llegaría a destino, por lo que recomiendo un:

Math.abs(aceleracion)

o aprovecharía el signo para hacer "aceleración ( )" o "desaceleración (-), o sea, que comience lento y termine rápido, y que comience rápido y termine lento (como en el caso de este código).

Creo que voy a estrujarme la neurona para esto, aunque creo que con 4 o 5 líneas se resulve.

un saludo
Por: almendro_blog
no es más potente y flexible usar la funcion tween? con todas las ecuaciones de movimiento de penner, callbacks etc
en todo caso como ejercicio mental esta bien y sigo aplicándolo en la fabricación de scrollbars y otras cosas. Felicitaciones por este maravilloso blog, todos los dias me sorprende con algo interesante, y en castellano!
Por: Chaval_blog
supongo que te refirás a la opción "tween" que aparece en el inspector de propiedades. Bueno, claro que es más fácil si realizas los movimiento en los fotogramas de la línea de tiempo.

Esta opción es más compleja, pero te permite hacer cosas que en la línea de tiempo no. Si juegas con los valores de 'aceleracion' obtendrás diferentes velocidades y efectos.

Si tiene que mover un solo objeto y de manera sencilla probablemente la opción de fotogramas sea lo más apropiado, pero si tienes que mover muchos objetos encontrarás la ventaja de este código

He programado un "seguidor de mouse" ("mouse trailer" creo que le dicen)que coloca 100 movieclips en el escenario y todos usan esta función. Cuando quiero que se muevan más rápido, sólo cambio 1 variable. Espero poder subirlo pronto como tip para que veas el ejemplo.

un saludo a la comunidad
Por: almendro_blog

almendro_blog :

supongo que te refirás a la opción "tween" que aparece en el inspector de propiedades. Bueno, claro que es más fácil si realizas los movimiento en los fotogramas de la línea de tiempo.

No, creo que se refiere a la clase Tween, que permite crear interpolaciones por código.
Por: Zguillez
La clase Tween la busqué en la ayuda pero no la encontré. ¿y que tal trabaja, es potente y flexible? ¿algún ejemplo para ver? gracias
Por: almendro_blog

almendro_blog :

¿algún ejemplo para ver?

Aquí hice uno:
http://www.codigo.as/blog/?p=42
Por: Zguillez
Oye, gracias. Me ha venido al pelo aprender esto también. Saludos
Por: almendro_blog
Para un manejo avanzado de animaciones por codigo hecharle un vistazo al Fuse Kit:

http://www.mosessupposes.com/Fuse/
Por: VitillO_blog
holas
Bueno yo solo queria preguntar si alguno de ustedes me podria decir como hacer un efecto rapido en flsh pero para imagenes...
Lo he intentado de todo pero no me sale... necesito ayuda urgente...

Soy algo nueva en este programa y agradeceria enormemente la ayuda brindada. mi correo es alicemi6@hotmail.com o mine_iris@hotmail.com

Bueno con el efecto me gusto el tip y ahora se un poco mas. Gracias sinceramente.
Bueno ojala me ayuden. chau
Por: jasmine_blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.