La animación es el proceso de mover algo o, alternativamente, hacer que algo cambie con el tiempo. La animación mediante scripts es una parte fundamental de los videojuegos, que a menudo se utiliza para pulir y añadir útiles indicaciones de interacción a otras aplicaciones.
La idea fundamental en la que se basa la animación mediante scripts es la necesidad de realizar un cambio y de dividir dicho cambio en incrementos temporales. Repetir algo en ActionScript es tan sencillo como usar una sentencia de bucle común. Sin embargo, es necesario reproducir todas las repeticiones de un bucle para poder actualizar la visualización. Para crear animación mediante scripts, es necesario escribir código ActionScript que repita alguna acción a lo largo del tiempo y que además actualice la pantalla cada vez que se ejecuta.
Por ejemplo, imagine que desea crear una sencilla animación de una bola que se desplaza a través de la pantalla. ActionScript incluye un mecanismo sencillo que permite seguir el paso del tiempo y actualizar la pantalla de forma correspondiente, lo que significa que se puede escribir código que mueva la bola un poco cada vez hasta llegar a su destino. La pantalla se actualiza después de cada movimiento, de forma que el movimiento a través del escenario es visible para el espectador.
Desde un punto de vista práctico, tiene sentido sincronizar la animación mediante scripts con la velocidad de fotogramas del archivo SWF (es decir, hacer que una animación cambie cada vez que se muestra un nuevo fotograma), ya que define la frecuencia con la que Flash Player o AIR actualiza la pantalla. Cada objeto de visualización tiene un evento
enterFrame
que se distribuye según la velocidad de fotogramas del archivo SWF: un evento por fotograma. La mayoría de los desarrolladores que crean animación mediante scripts utilizan el evento
enterFrame
para crear acciones que se repiten a lo largo del tiempo. Se puede escribir un código que detecte el evento
enterFrame
y mueva la bola animada una cantidad determinada en cada fotograma y, al actualizarse la pantalla (en cada fotograma), redibuje la bola en la nueva ubicación, creando movimiento.
Nota:
otra forma de repetir una acción a lo largo del tiempo consiste en utilizar la clase Timer. Una instancia de Timer activa una notificación de evento cada vez que pasa un tiempo determinado. Se puede escribir código que lleve a cabo la animación mediante la gestión del evento timer de la clase Timer, si se define un intervalo de tiempo pequeño (alguna fracción de un segundo). Para obtener más información sobre el uso de la clase Timer, consulte
Control de intervalos de tiempo
.
En el ejemplo siguiente, se crea en el escenario una instancia de Sprite circular, denominada
circle
. Cuando el usuario hace clic en el círculo, se inicia una secuencia de animación mediante scripts que provoca la desaparición progresiva de
circle
(se reduce su propiedad
alpha
) hasta que es completamente transparente:
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
// draw a circle and add it to the display list
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x990000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
addChild(circle);
// When this animation starts, this function is called every frame.
// The change made by this function (updated to the screen every
// frame) is what causes the animation to occur.
function fadeCircle(event:Event):void
{
circle.alpha -= .05;
if (circle.alpha <= 0)
{
circle.removeEventListener(Event.ENTER_FRAME, fadeCircle);
}
}
function startAnimation(event:MouseEvent):void
{
circle.addEventListener(Event.ENTER_FRAME, fadeCircle);
}
circle.addEventListener(MouseEvent.CLICK, startAnimation);
Cuando el usuario hace clic en el círculo, se suscribe la función
fadeCircle()
como detector del evento
enterFrame
, lo que significa que se inicia su llamada una vez en cada fotograma. Esa función hace que
circle
desaparezca progresivamente cambiando su propiedad
alpha
, de modo que, una vez en cada fotograma, el valor de
alpha
del círculo se reduce en 0,05 (5 por ciento) y se actualiza la pantalla. Finalmente, cuando el valor de
alpha
es 0 (
circle
es completamente transparente), se elimina la función
fadeCircle()
como detector de eventos y finaliza la animación.
Este mismo código podría utilizarse, por ejemplo, para crear un movimiento de animación en lugar de la desaparición progresiva. Si se sustituye otra propiedad de
alpha
en la función que actúa como detector del evento
enterFrame
, esa propiedad se animará. Por ejemplo, si se cambia esta línea
circle.alpha -= .05;
por este código
circle.x += 5;
se animará la propiedad
x
, haciendo que el círculo se mueva hacia la derecha a través del escenario. La condición que finaliza la animación puede cambiarse para que la animación termine (es decir, se quite la suscripción del detector de
enterFrame
) al llegar a la coordenada x especificada.
