Comunidad de diseño web y desarrollo en internet online

Tuto : easing == "KK "

Citar            
MensajeEscrito el 05 Sep 2004 12:55 pm
Como oso injuriar a easing de esa forma , bueno ya se q easing da muchas alegrias y incluso te puede parecer q recrea movimientos suaves pero no es asi .

Es la peor de las ecuaciones para recrear un movimiento
- Nunca sabes cuando va llegar un clip ni el tiempo q le hace falta , la filosofia de easing es : llegaremos cuando lleguemos
- la desacceleracion es muy rapidad al principio y muy lenta al final , no tienes control sobre la acceleracion aunq tu creas q si.
- no puedes recrear un movimiento de acceleracion identica a la de easing .

Resumiendo : pasemos pagina ..., easing ha muerto desde hace mucho tiempo ...

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 acceleracion .



Miremos la Linear :

Código :

   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 :

Código :

   
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 ...
-la 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 :D

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

Código :

#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):

Código :

my_mc.tween(["_xscale","_yscale"],[50,50],2, "easeOutBounce" );


Se pueden hacer aberraciones de este tipo

Código :

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

Código :

   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 :

Código :

import mx.effects.*;
import com.robertpenner.easing.*;
//o la q vienen ya instaladas con flash
//import mx.transitions.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

Espero q ahora dejemos de usar easing porq easing == kk o no ?

nota :
algunas de las ecuaciones ya estan instaladas (C:\Documents and Settings\tu nombre de usuario\Local Settings\Application Data\Macromedia\Flash MX 2004\es\Configuration\Classes\mx\transitions\easing) 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 q 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/

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

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

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 



Ultima edición por buho29 el 06 Sep 2004 09:21 pm, editado 2 veces

unknown
Citar            
MensajeEscrito el 05 Sep 2004 02:38 pm
Juel buho qué arte, voy a ponerme a darle a las ecuaciones estas a ver si les cojo el tranquillo.
Por cierto a ver si vuelves por el IRC io, que tas perdio lo de las conferencias del 5dms que han estao muy interesantes.

Por TheOm3ga

267 de clabLevel

1 tutorial

1 ejemplo

 

To your south!!!

unknown
Citar            
MensajeEscrito el 05 Sep 2004 04:14 pm
como no le cojas el tranquillo en 5 min te acaneo XDXD , si es facilisimo ... , has guardado el log de la conferencia ?? , solo puedo conectarme 1h al dia :( y claro ... , dentro de 20 dias estreno un adsl 5 mg 8) mi hdd lo va agredecer mogollon XDXD

salu2

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 

unknown
Citar            
MensajeEscrito el 05 Sep 2004 04:54 pm
Buho, muy bueno, solo me quedan dos comentarios para poder montarlo en la sección de tutos de Cristalab

1) Puedes especificar (Recordando que personas de todo nivel entran a leer los tutos) de donde se descargan y como se instalan las clases de Robert Pnner para poder hacer el import siempre

2) Podrias incluir alguna imagen donde sea pertinente?

De resto, esta buenisimo; BUENISIMO; me ha gustado mucho, es claro y tiene lo que se necesita

Avisame no mas

PD.

buho29 escribió:

dentro de 20 dias estreno un adsl 5 mg 8) mi hdd lo va agredecer mogollon

Yo creo que sera al reves xD

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown
Citar            
MensajeEscrito el 05 Sep 2004 05:27 pm
Jejej pozi, lo he cogio del tirón :D
Por cierto, no te preocupes, Atari y compañía han grabado todas las ponencias y la semana que viene estarán online. 8)

Por TheOm3ga

267 de clabLevel

1 tutorial

1 ejemplo

 

To your south!!!

unknown
Citar            
MensajeEscrito el 05 Sep 2004 07:19 pm
TheOm3ga ya te dije q era una chorra y va de muerte ... (mira q te lo dije de veces ...)

En cuanto a la conferencia ya diras algo cuando sale :D


Referente a la instalacion de las clases de penner ya estan instaladas y el mxp de Zigo ya instala las de penner mas un tipo mas (easeOutIn) y ya hay algunas instaladas en flash (import mx.transitions.easing.*;) , pero si comentare algo sobre esto y los package

Fotos solo se me ocurren las graficas de acceleracion de cada clase (ya esta bien no ? , lo tengo q hacer a mano y to ... ) , tampoco os voy a llevar de la mano XD XD XD


PD.

buho29 escribió:
dentro de 20 dias estreno un adsl 5 mg mi hdd lo va agredecer mogollon

Yo creo que sera al reves


mmm , creo q no , estoy desintoxicado (creo XD ) , ya me tire 2 años bajando de media +30 gb/mes (es increible lo duro q es un hdd 24/dia a piñon!! y aun funcionan XD )

y despues de 1 y medio aun tengo material por ver ...

Solo en musica tengo 70 gb , ya me hecho mas selectivo , ademas creo q ya probe todos los programas serios de internet , soy una gran enciclopedia de soft , buscador de ftp , paginas guarrez (chinas , rusas ...) , dispongo de la mayor coleccion de ebooks de flash , diseño y programacion ... (pa q los quere si no entiendo ni papa de ingles )

Me matao yo solo no ?? XD XD XD

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 

unknown
Citar            
MensajeEscrito el 05 Sep 2004 09:03 pm
:? :? :? :? :?

En fin ... me avisas cuando pueda publicar el tuto :?

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown
Citar            
MensajeEscrito el 06 Sep 2004 05:24 pm
http://www.activicio.com/lab/GRAFICA.swf
http://www.activicio.com/lab/GRAFICA.rar

Q tal la foto ? ;)

y cuando no entiendas algo y ves q no es importante , dejalo correr ... :lol: :lol: :lol:

q a mi se me vaa la pelota cosa mala ...

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 

unknown
Citar            
MensajeEscrito el 06 Sep 2004 10:27 pm
Ya esta; tu primer tutorial ha sido montado
http://www.cristalab.com/vertutorial.php?id=58

Enjoy!

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown
Citar            
MensajeEscrito el 08 Sep 2004 11:50 am
que poco sabemos algunos... :?

Por Sisco

BOFH

3700 de clabLevel

12 tutoriales
4 articulos

Genero:Masculino   Bastard Operators From Hell

Catalunya

unknown
Citar            
MensajeEscrito el 10 Ago 2005 03:10 pm
hola buho29 ¿sabes dónde puedo conseguir la documentación de las bibliotecas de robert penner? es que descagué la biblioteca y la estoy explorando pero no me queda muy claro a que se refieren algunos parámetros de las funciones que vienen incluidas en esta grandiosa biblioteca

Por henker

50 de clabLevel



Genero:Masculino  

Colombia

opera
Citar            
MensajeEscrito el 10 Ago 2005 03:25 pm
Conferencias de que hablaban?, son online? donde las puedo ver ?

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

firefox
Citar            
MensajeEscrito el 17 Nov 2010 06:59 pm
Salu2s a todos!! Alguno de ustedes saben si estas ecuaciones sirven para otra cosa q no sea movimiento?

un abrazo

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.