LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Efectos físicos con ActionScript 3, animación por AS segunda parte

| 6 Comments

Al mover objetos mediante código el siguiente paso será realizar sin dudas un efecto de física, como por ejemplo rebote, elasticidad o gravedad.

Para estos efectos no hay más opción que recurrir a las matemáticas y transcribir aquellas operaciones a funciones que simulen dicha realidad en un campo virtual.

Los efectos físicos sobre un objeto son innumerables, desde el movimiento lineal o ondulatorio, sea con aceleración o des aceleración en cualquiera de sus etapas inicial o final.
También sin dejar de lado todas las variantes que se pueden conseguir sumando gravedad y fricción de un objeto. Analizaremos los casos más comunes de la física, ya que los mismos son los mas recurrentes a la hora de realizar animaciones.

Aunque contemos con un solo fotograma el cabezal pasa por ese mismo cuantas veces indiquemos en los frames por segundos.

Aceleración

La aceleración de un objeto puede ser lineal y proporcional en su velocidad en la que se realiza el efecto. Un claro ejemplo de aceleración lineal es el siguiente.
Para este ejemplo se requiere un clip de película en el escenario con el nombre de instancia “peli_mc”.

ActionScript
< view plain text >
  1. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  2. function EventEnterFrame(e:Event):void
  3. {
  4. peli_mc.x +=  5;
  5. }
El movimiento lineal sea cualquiera su dirección se da proporcional e igual su velocidad de desplazamiento. (+=)

El movimiento lineal sea cualquiera su dirección se da proporcional e igual su velocidad de desplazamiento. (+=)

Aquí ya tenemos una simple interpolación donde el objeto se mueve linealmente y con una velocidad proporcional por cada pasada del cabezal.
Pero de seguro que la idea es lograr una aceleración y desaceleración del objeto, sea al principio, final o ambas.

Si por ejemplo queremos que un objeto de desplace a un punto indicado inicialmente rápido y se detenga gradualmente tendríamos que calcular la distancia entre ambos puntos, dividir la distancia en por un factor y a dicho resultado sumar a la posición actual del objeto, luego dividir ese segmento nuevamente por el mismo valor y sumar la posición actual del objeto, así sucesivamente hasta que no queda mas distancia. El ojo percibirá un efecto de desaceleración al final de la interpolación.

ActionScript
< view plain text >
  1. var destinoX:uint = stage.stageWidth - peli_mc.width;
  2. var velocidad:uint = 5;
  3. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  4. function EventEnterFrame(e:Event):void
  5. {
  6. peli_mc.x +=  (destinoX- peli_mc.x)/velocidad;
  7. }

Fíjese en el ejemplo que agregamos dos variables nuevas, una de ellas es el punto de destino final, el cual es el ancho del escenario menos el ancho del objeto.
El factor de velocidad, cuanto mas grande el numero el efecto demorara mas en completarse.

Cuando el objeto este mas próximo al destino final, su velocidad se reduce proporcional.

Elasticidad:

Este tipo de interpolación se destaca por el rebote en la animación, la que puede ser al inicio, final o en ambos extremos de la animación. El rebote esta dado por la multiplicación de sus valores relativos de posición por un factor asignado. Luego por cada ciclo repite los pasos de aceleración.

ActionScript
< view plain text >
  1. var destinoX:uint = stage.stageWidth - peli_mc.width;
  2. var velocidad:Number = 8;
  3. var locationObj:Number = 0;
  4. var rebote:Number = 0.8;
  5. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  6. function EventEnterFrame(e:Event):void
  7. {
  8. var distancia:Number(destinoX-peli_mc.x)/velocidad;
  9. locationObj +=  distancia;
  10. locationObj *=  rebote;
  11. peli_mc.x +=  locationObj;
  12. }
La elasticidad la simulación de un elástico, el objeto se pasa y vuelve de su destino final hasta detenerse. También puede darse en sentido inverso o en ambos.

La elasticidad la simulación de un elástico, el objeto se pasa y vuelve de su destino final hasta detenerse. También puede darse en sentido inverso o en ambos.

Gravedad:

El efecto de gravedad esta dado por varios factores que deben igualar la realidad de la vida cotidiana. Uno de ellos es el factor de fuerza y peso del objeto. También interviene un valor que representa el rebote del objeto para darnos una mejor experiencia sobre el efecto buscado.

Por lo tanto en este caso vamos a tener que declarar los valores iniciales como fuerza, peso y también los valores finales de tope o piso y también el factor de rebote. Sin dudas que si analizamos podemos ver como desde la animación simple lineal del primer ejemplo fuimos agregando efectos físicos sin muchos problemas y con resultados muy buenos sin incrementar la cantidad de frames de nuestra película.

ActionScript
< view plain text >
  1. var destinoY:uint = stage.stageHeight - peli_mc.height;
  2. var velocidad:Number = 0;
  3. var rebote:Number = 0.9;
  4. var gravedad:Number = 5;
  5. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  6. function EventEnterFrame(e:Event):void
  7. {
  8. velocidad = velocidad + gravedad ;
  9. peli_mc.y +=  velocidad/5;
  10. if (peli_mc.y &gt; destinoY) {
  11. peli_mc.y = destinoY ;
  12. velocidad *= -rebote ;
  13. }
  14. }

Como se puede observar aquí se declaran nuevas variables como velocidad, rebote y gravedad. La variable velocidad se va incrementando gradualmente mientras la animación se completa.

El rebote es el factor que se resta de la distancia por cada ciclo de movimiento, el mismo debe ser menor a 1 para que el objeto de la sensación de perdida de fuerza. Si lo dejamos el valor en 1 el objeto no deja de rebotar. Si en cambio lo incrementamos el objeto rebotara cada vez más lejos del límite o piso que indicamos.
La variable gravedad es la encargada de manejar la velocidad con la cual es atraído el objeto al punto final.

Nota: El punto final o destino fue definido en la línea.

ActionScript
< view plain text >
  1. var destinoY:uint = stage.stageHeight - peli_mc.height;

Estos tres principios básicos de física son los que mas se requieren a la hora de animación por código, o en su defecto son los más recurrentes para lograr otros efectos. Mezclando cualquiera de ellos o modificándolos levemente se puede lograr entornos muy realistas de simulación. No hay limites a la hora de simular formulas físicas en Actionscript, solo se requiere un poco de matemáticas y lógica.

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, para sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, conocimientos en CEO. Desarrollador de sitios multi plataformas en, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Director de la carrera de diseño gráfico, Profesor de Diseño III y Diseño Web, en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

6 Comments

  1. ¡EXCELENTE!
    Muchas gracias.

  2. Hola gracias por el tutorial, solo una pregunta: ¿que código necesito para que el efecto rebote vuelva a repetirse? tengo entendido que el evento ENTER_FRAME solo se ejecuta una vez.

    gracias.

  3. Joven una pregunta en la compilacion veo que hay prolema con esta linea if (peli_mc.y> destinoY) me da problemas con las sintaxis y atributos, me puedes ayudar con la explicacion del codigo XD

  4. Ah no ya disculpa las molestias, es que yo lo veia como if (peli_mc.y & gt ; destinoY) …….XD

  5. Grande! Te debo una jejeje…
    Un saludo.

Deja un comentario

Required fields are marked *.