La animación de un objeto en programación es el proceso mediante el cual se crea la ilusión de movimiento (Keith Peters, autor del libro Action Script 3.0 Making things move).
De hecho, los orígenes de la animación consisten en poner un conjunto de cuadros, fotogramas con distintas posiciones estáticas de los objetos, los que, al deslizarlos rápidamente en torno a un punto fijo dan la sensación de que se mueven. Esto descubre el secreto de que los cuadros o fotogramas pueden contener no sólo objetos en distintas posiciones, sino además también pueden hasta cambiar de forma para ilusionarnos de movimiento.
De aquí en adelante, nuestro concepto de animación responde a esa idea esencial: cómo crear la ilusión de que los objetos se mueven. Esta es la base de la línea de tiempo: poder ubicar objetos de modo tal que al variar su posición, forma, o bien, posición y forma combinada, quien vea dichos objetos experimente la sensación de que los objetos efectivamente se mueven. El efecto de mostrar cómo un hombre se convierte en lobo, no es más que eso, por supuesto con tecnología sofisticada que hace más realista el efecto.
Cosas importantes que aparecen con la animación:
1.El tiempo 2.Los cambios mencionados 3.El espacio (se está aquí y luego allá, o bien estoy de un modo y luego de otro: hay transformación en el espacio.
Está claro que si no hay cambios no hay animación, pero además tampoco hay sentido de temporalidad, una cuestión intrínseca al movimiento. En definitiva, la animación es un truco de cambio espacio-temporal.
Y la mente “compra” esto. Por eso es que la animación es tan interesante en tantos ámbitos.
Animación Estática y Animación Dinámica
Keith Peters también hace una distinción interesante en relación a si una animación es estática o dinámica.
Parece, a simple vista, una contradicción hablar de animación estática. Pero veamos por qué Peters nos hace reflexionar sobre esta distinción. Vámonos a cualquier película que usted haya visto. Usted vio la película en TV, DVD o en el cine. Cualquiera sea el medio, si usted detiene la proyectora, o apaga el TV o el DVD, al volver a ver la película no habrá cambio de desenlace. Cada vez que usted vuelva a ver esa película, volverá a ver lo mismo. Algo similar ocurre con miles de “intro” de flash en sitios web. Usted abre la página y verá una y mil veces la misma secuencia y el mismo desenlace. Eso, Peters lo califica de animación estática.
En cambio, usted puede realizar una animación cuyo desenlace sea distinto cada vez. Usted puede animar el crecimiento de una flor desde la semilla hasta cuando se torna en flor. Eso sería animación estática. Pero, ¿qué tal si su animación muestra un crecimiento metamorfósico dinámico? Cada vez que entremos en la página, la animación termina de un modo distinto, o la película no tiene un desenlace sino muchos y aleatorios. Eso sería animación dinámica. Un ejemplo de esto son aquellas animaciones de una bolita que se mueve por la pantalla y choca con supuestos muros que hacen que sus movimientos estén sistémicamente influidos por los ángulos de la colisión y las partes con que colisiona. Cada movimiento tiene un desenlace inesperado porque no sabemos cuál será el lugar donde irá a dar la bolita la próxima vez que colisione. La aleatoriedad de las posiciones puede a su vez generar direcciones aleatorias y velocidades diferenciadas las que dependen del tipo de impacto, fuerza del mismo, etc. Un ejemplo de animación dinámica clásico es el juego de estrategia.
Esta distinción no es trivial. Usted puede generar más interés con una animación dinámica que con una estática. No obstante, deberá reflexionar sobre el contexto de la animación, su propósito, su costo en recursos de uso de memoria y de proceso, su alcance, etc.
Fabricando una animación estática: movimiento horizontal simple
¿Contexto? Entre en su carpeta aprendizaje y con el mouse derecho cree una nueva carpeta. Póngale por nombre animacion. La clase que crearemos estará aquí. Vea la figura. Hemos creado un nuevo package llamado animacion.
Clase Base ¿Sprite o MovieClip? Haremos una clase que no utilizará fotogramas o timeline así que Sprite es lo adecuado. Por lo tanto debemos importar Sprite.
El movimiento es un evento. Así que ahora integraremos un nuevo package que nos ayude: el package events de flash. ¿Por qué? porque como ya lo explicáramos, la animación es un evento que ocurre en términos espacio-temporales, para lo cual se necesita de fotogramas a fin de crear la ilusión de animación.
Usted dirá: ¡¡¡Pero cómo!!!! Nos acaba de decir que no utilizaremos la timeline y ahora nos habla de fotogramas!!. Sí, es una aparente contradicción. Lo que sucede es que a través del código simularemos que la acción se realiza a través de fotogramas, pero en realidad lo que hacemos es trabajar con unidades de tiempo. Haremos un paréntesis para explicar mejor esta “contradicción” y resolverla.
En la secuencia anterior se puede ver que a cada frame o fotograma le corresponde un cuadrado cuya orientación hacia la derecha podría generar la ilusión de movimiento al pasar rápidamente por ellos. Flash, por ejemplo, podría tener una tasa de 30 cuadros por segundo, lo que significa que por cada segundo aparecerá lo que se encuentre en los 30 frames o cuadros, que en este caso es un cuadrado en diferentes posiciones, lo que generaría la ilusión de movimiento.
Renderizar es el proceso de generar en pantalla una imagen a partir de unos datos. El responsable de representar por pantalla todo lo que sucede en una película Flash, tanto en el escenario como en el código, es el sistema de renderizado del runtime (tiempo de ejecución).
Debido a que ActionScript es un lenguaje 100% visual, tener un conocimiento profundo de este proceso nos ayudará a la hora de escribir y optimizar nuestro código, y evitará que cometamos errores normalmente difíciles de detectar.
Este tema adquiere una importancia muy grande en lo que se refiere al proceso de código, especialmente en relación con el evento ENTER_FRAME, ya que involucra aspectos tales como tiempo de refresco de la pantalla, uso de CPU, etc. Es importante saber que este evento siempre está sincronizado con la tasa de frames por segundo de la película (fps), y normalmente esta tasa no es la real, sino más baja. Recomiendo encarecidamente leer elsiguiente artículo, muy bien documentado y con demostraciones prácticas.
http://llops.com/blog/2008/05/24/el-sistema-de-renderizado-de-flash-player/
Durante el paréntesis descubrimos la noción de animación “behind the stage” o tras bambalinas. Antes del paréntesis dijimos que la animación es un evento. Juntemos ahora ambos elementos: al evento de entrar un fotograma (enter frame), debería ocurrir la animación del objeto. Por lo tanto necesitamos agregar a nuestros recursos el package events de flash para utilizar un controlador del evento de animación que dispare la función o maquinita animadora del objeto.
Por lo tanto, agregamos import flash.events.Event (la clase Event del package events). Haremos una clase que pueda mover nuestro cuadrado, así que también importaremos la clase Cuadrado.
Muy bien, ahora vamos a las propiedades: ¿Qué propiedades necesitamos para animar un objeto?
1.Una posición original x,y en el escenario.
2.Una posición x,y final o destino al cual llegará nuestro objeto. Esto puede obviarse por el momento.
3.Una propiedad velocidad que tomará el método como input para mover al objeto. 4.Algo que mover, un objeto. Aprovecharemos nuestro objeto cuadrado.
Ahora vamos al método. El método que tenemos que crear corresponde a la maquinita que moverá al objeto. Veremos un método ultra simplificado que permitirá mover horizontalmente un objeto a través del escenario en el eje x. La maquina “movilizadora” sólo hará que el objeto se vaya moviendo en un pixel por segundo hacia la derecha. Es el método más simple y equivale a un mecanismo tipo bicicleta en relación con un mecanismo tipo automóvil con más complejidad.
Construyamos la clase entonces:
package com.aprendizaje.animacion
{
import flash.events.Event;
import com.aprendizaje.dibujo.Cuadrado;
public class MoverObjeto
{
public var destino:Cuadrado;
public var velX:Number;
public var velY:Number;
function MoverObjeto(dest:Cuadrado, xVel:Number, yVel:Number)
{
destino = dest;
velX = xVel;
velY = yVel;
}
protected function updatePosition(event:Event):void {
destino.x += velX;
destino.y += velY;
}
private function iniciaAnimacion():void
{
destino.addEventListener(Event.ENTER_FRAME, updatePosition);
}
private function detieneMovim():void
{
destino.removeEventListener(Event.ENTER_FRAME, updatePosition);
}
}
}
Descompongamos la clase para entenderla:
¿Por qué no están en orden? Sí lo están. La función principal es la de animar, pero necesita saber cuándo iniciar y cuando terminar para remover al listener o “escuchador” (“soplón”) que trabaja para ella.
Ok. En el próximo envío hablaremos de los listeners. Hasta la próxima.
Comentarios recientes