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

Animación por medio de ActionScript 3, primera parte.

| 2 Comments

Las interpolaciones básicas en Flash realizadas manualmente son útiles para cuando es algo sencillo y rápido. Pero son tediosas si son muchos objetos, si esos objetos dependen de un evento, si sus cualidades son adquiridas dinámicamente etc. Para dar solución a esto recurrimos a la animación mediante el uso de código.

Cuando trabajamos con una extensa cantidad de objetos en nuestra lista de visualización y los mismos requieren movimiento o transformación de sus características como tamaño, transparencia o color, o detectar eventos como un clic del Mouse, la interpolación tradicional es una desventaja ya que la misma se vuelve excesivamente pesada e incontrolada en algún punto. También en muchos proyectos nos encontramos con la necesidad de mover elementos según su estado anterior por ejemplo la posición de un punto a otro aleatoriamente.

Ventajas
Sin dudas las ventajas son mucho mas a la hora de programar movimiento mediante código, lo seguro que si la experiencia es buena, es que jamás se vuelva a crear interpolaciones manuales, ya que descubrirá que al final se tiene mejor control sobre los objetos, mejor calidad y menos tiempo de corrección.

Veamos el ejemplo más simple: Se nos requiere mover un objeto en el escenario de un punto x a otro con un total de tiempo de 3 segundo para la animación completa.
En modo tradicional es muy simple, agregamos el objeto al escenario, creamos una interpolación de imagen, nos fijamos en cuantos cuadros por segundos esta la película y multiplicamos por ejemplo 24 cuadros por 3 segundo, esto nos da la cantidad total de nuestro próximo fotograma clave (key frame) donde finalizara nuestra interpolación.

Muy bien! El objetivo fue cumplido satisfactoriamente y nos podríamos sentir que algo tan simple no debería presentar problemas a ninguna persona que viese nuestra animación. Pero comienza a surgir los primeros problemas, como por ejemplo el equipo (hardware): Las animaciones manuales dependen mucho de el tipo de hardware donde se este ejecutando el player, en un equipo con poca memoria RAM y un video pobre, sin dudas que los cuadros por segundos que definimos en 24/s caerá abruptamente a mas de la mitad, por lo tanto nuestra animación estimada en 3 segundo finalizara en aproximadamente 5.
En la animación por código no sucede eso ya que se define la velocidad en cuadros o en tiempo, por lo tanto la sincronización es realizada por el player según las prestaciones de donde se ejecute.
Otro problema es si el cliente nos pide una modificación en la distancia recorrida. Aquí no solo vamos a tener que editar los puntos de inicio y fin sino también ajustar la cantidad de frames. En contrapartida desde código con unos 10 segundos de nuestro tiempo nos alcanzara para editar ese cambio.
Pero como la realidad supera la ficción nuestro cliente nos sugiere que el movimiento no sea tan lineal, que prefiere por ejemplo un rebote al final.
Hasta aquí en lo tradicional nos tomaría un buen rato entre frames y movimientos para lograr algo “parecido”. Desde código con solo indicar la física en una línea logramos resultados óptimos.

Principios Básicos
Cualquier tipo de animación mediante código requiere un medio donde ejecutarse linealmente, así como un objeto sobre el escenario utiliza la línea de tiempo, en código usaremos la constante ENTER_FRAME del paquete flash.events y hereda de Event, para desencadenar un evento por cada pasada del cabezal en un fotograma.

ActionScript
< view plain text >
  1. Pelicula_mc.addEventListener(Event.ENTER_FRAME,enterFrameEvent)

Aunque en la línea de tiempo solo tengamos 1 frame la película ejecutara la pasada del cabezal las veces que indiquemos en los fotogramas por segundos. Al crear un objeto como por ejemplo un movieClip desde Actionscript el mismo hereda su línea de tiempo (time line) propia con las mismas propiedades de la línea principal del escenario. Por ejemplo los frames por segundos. Utilizando el evento ENTER_FRAME podemos entonces aplicar por cada entrada a un frame una propiedad al objeto, como desplazarlo en un eje, por lógica ya estamos creando una interpolación de movimiento. Los eventos ENTER_FRAME son agregados a los objetos heredados de InteractiveObject (Stage, Sprite, MovieClip, TextField, etc.) mediante un listener (escuchadores), podemos tener cuantos escuchadores y objetos en el escenario o un ENTER_FRAME en el Stage para administrar todos los objetos.

ActionScript
< view plain text >
  1. this.addEventListener(Event.ENTER_FRAME,enterFrameEvent)
  2.  
  3. function enterFrameEvent (e:Event):void {
  4. trace("acción por cada pasada del cabezal")
  5. }

El evento ENTER_FRAME no cuenta con las fases de captura ni de propagación así que por lo tanto dicho evento se agrega a cualquier elemento heredado de InteractiveObject este o no en la lista de visualización.
Otra de las ventajas que se cuenta con la animación mediante código es el incremento de rendimiento que se logra con respeto a la animación tradicional.
El procesador y placa de video son mejor administrados por el FlashPlayer y en su ultma version 10.1 incorpora aceleración por hardware.
Es importante destacar que al agregar un listener ENTER_FRAME a un objeto este no deja de emitir el evento hasta que el mismo no sea removido, por lo tanto es una muy buena costumbre de que aquellos ENTER_FRAME que no utilicemos los removamos, esto incrementara el rendimiento del player.

ActionScript
< view plain text >
  1. stage.addEventListener(MouseEvent.CLICK,stageClick);
  2. stage.addEventListener(Event.ENTER_FRAME,enterFrameEvent);
  3.  
  4. function enterFrameEvent(e:Event):void
  5. {
  6. trace(this.mouseX);
  7. }
  8.  
  9. function stageClick(e:MouseEvent):void
  10. {
  11. stage.removeEventListener(Event.ENTER_FRAME,enterFrameEvent);
  12. trace("click")
  13. }

El siguiente ejemplo elimina el evento ENTER_FRAME al hacer clic en el escenario. Eliminado el evento nuevamente puede ser creado indefinidamente.

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.

2 Comments

  1. Muy bièn el tutorial.

  2. gracias porel ejemplo muy buena explicacion

Deja un comentario

Required fields are marked *.