Você está na página 1de 12

ANIMACIN

Otro elemento fundamental dentro de Flash es la Animacin. Gracias a ella se pueden realizar aplic
Flash ms atractivas. La animacin es un punto clave en el xito de Flash, puesto que la gran mayo
pginas web animadas lo hacen con Flash. Esto es debido a la facilidad y rapidez de la herramienta
obtener grficos animados.

Conceptos

Se entiende por animacin como cualquier cambio visual que se produce a lo largo del tiempo. Se
modificar varios aspectos de un elemento grfico para animarlo: posicion, tamao, rotacin, color,
transparencia... Al ir generando cambios en la imagen, se produce en el usuario la sensacin de
movimiento.

La animacin de grficos bidimensionales en general se basa en el concepto de fotograma o fram


animacin se compone por tanto de una secuencia de fotogramas que son mostrados al usuario en
uno detrs del otro. Por lo tanto un fotograma es un estado de los elementos que componen la anim
en un instante concreto de tiempo. La sucesin de estos fotogramas produce la sensacin de movim

La velocidad a la que se muestra la secuencia de fotogramas se llama velocidad FPS o fotogramas


segundo o frames per second. A partir de 25 fotogramas por segundo el ojo humano es incapaz de
distinguir la sucesin de fotogramas estticos, e interpreta la animacin como movimiento. En Flas
velocidad FPS no es un valor fijo, sino es el mximo valor deseado de velocidad. Esto quiere decir q
nuestra pelcula SWF se puede reproducir a una velocidad menor si es que el ordenador no dispone
recursos necesarios para reproducir la pelcula a dicha velocidad. De esta manera, si tenemos una
muy compleja, con muchos vectores, animaciones, transparencias, degradados, etc... es posible qu
reproduzca a una velocidad inferior a la indicada en los FPS. Adems este valor es variable a lo larg
reproduccin de la pelcula. Es decir, en algn momento nuestra pelcula puede ralentizarse bien po
contenido que manejemos dentro o bien por causas ajenas a la pelcula (otras aplicaciones ejecuta
mismo tiempo...).

Otro concepto importante es el de fotograma clave. Se trata de aquellos fotogramas en los que s
un nuevo estado con respecto a los fotogramas anteriores. En los fotogramas clave se realizan los
a la hora de generar las diferentes imgenes por las que pasa una animacin. Un volmen exagera
fotogramas clave puede hacer que nuestro archivo pese demasiado y que la animacin no se repro
forma fluda (ralentizacin). Por este motivo hay que evitar utilizar fotogramas clave en los elemen
estticos de la animacin.
Al hecho de transitar de un fotograma clave a otro fotograma clave separados en el tiempo se le
denominainterpolacin. El conjunto de fotogramas que quedan entre dos fotogramas clave con

interpolacin se les llama fotogramas interpolados. Estos fotogramas, a diferencia de los fotograma
no se almacenan en ninguna parte, sino que se calculan cuando se reproduce la pelcula. Por este m
los fotogramas interpolados reducen el peso de archivo. Sin embargo el clculo de interpolaciones c
demasiados elementos, o elementos grficos muy complejos (muchas transparencias y degradados
hacer que se ralentice la animacin.

Por otro lado la animacin tiene mucho que ver con la cintica (parte de la fsica que estudia el
movimiento de los objetos), por lo tanto siempre podremos utilizar algunas de sus frmulas y conc
Hablaremos de velocidad, aceleracin, tiempo,...

Tipos De Animacin

En el entorno de edicin de Flash existen dos tipos principales de animacin: Animacin fotograma
fotograma y animacin con interpolaciones. Ambos tipos se basan en los conceptos de fotograma y
fotograma clave.

Animacin fotograma a fotograma.


Se trata de realizar animaciones definiendo cada uno de los fotogramas de la secuencia. Estos foto
se definen como fotogramas clave siempre que los elementos se animen. Para crear fotogramas cla
podemos usar la tecla F6 o el men Insertar > Lnea de tiempos > Fotograma clave o el botn dere
ratn sobre la lnea de tiempos

Animacin por interpolacin.


Se trata de utilizar interpolaciones para crear una animacin. Esto siginifica que definiremos dos o
fotogramas clave y el resto de fotogramas sern fotogramas interpolados. Para crear una interpola
seguiremos el siguiente proceso:
1) Crear y definir los fotogramas clave
2) Seleccionar el tipo de interpolacin desde la pestaa Animar de la Barra de propiedades
3) Ajustar parmetros de la interpolacin
Existen dos tipos de Interpolaciones: de movimiento y de forma.
Interpolacin de movimiento.
- Siempre se produce sobre texto, grupos y/o smbolos (biblioteca)
- Sirve para animar propiedades de transformacin: x, y, width, height, rotation
- Sirve para animar propiedades de color: alfa, brillo, tinta, avanzado
- Se representa con color azul
- Se pueden crear por cdigo
- Animacin con guias de movimiento
Interpolacin de forma.

- Se produce sobre formas vectoriales (no agrupadas)


- Sirve para hacer "Morphs" entre grficos vectoriales ajustando las lneas y rellenos de un grfico
por medio de interpolaciones
- Se representa con color verde
- No se puede crear por cdigo
- Animacin con pistas de forma

Animacin Con ActionScript

La ventaja de utilizar ActionScript para animar objetos en Flash es que se pueden animar otros asp
diferentes a la transformacin/color y tambin se pueden transformar de diferentes maneras, no so
linealmente.
A la hora de utilizar animacin con ActionScript tenemos varias posibilidades:

1) Crear la animacin en un clip de pelcula (MovieClip) y manipular su reproduccin por medio de


sentencias play/stop. Se trata de un mtodo muy sencillo especialmente til si utilizamos animacio
complejas y lineales.

2) Cuando la animacin no est definida de antemano, sino que va cambiando bien por la interacci
usuario o o bien por la aleatoriedad de la aplicacin, resulta ms til hacer uso de una animacin c
por cdigo. Para ello podemos hacer uso de los eventos onEnterFrame o de la Clase Timer.

3) Tambin tenemos una opcin intermedia que consiste en ejecutar tramos de animacin de forma
separada haciendo uso de la Clase Tween.

Manipulacin de MovieClips

En un MovieClip la animacin ya est creada desde el editor de Flash. Sin embargo existen propied
mtodos relacionados con la animacin de los MovieClips que se deben conocer.
miMovieClip.play();
Reproduce la animacin desde el punto donde se encuentra.
miMovieClip.stop();
Detienen la animacin deteniendo la cabeza reproductora en el fotograma actual.

miMovieClip.gotoAndPlay(fotograma);

Reproduce la animacin comenzando desde un fotograma concreto


- fotograma:Object fotograma al cual se va a saltar (puede ser un nmero o un nombre de fotog
Los fotogramas se numeran desde 1.
miMovieClip.gotoAndStop(fotograma);

Salta a un determinado fotograma y detiene ah la animacin


- fotograma:Object fotograma al cual se va a saltar (puede ser un nmero o un nombre de fotog
Los fotogramas se numeran desde 1.
miMovieClip.currentFrame
Propiedad de solo lectura que contiene el nmero de fotograma actual
miMovieClip.currentLabel
Propiedad de solo lectura que contiene el nombre de fotograma actual (o anterior)
miMovieClip.totalFrames
Propiedad de slo lectura que contiene el nmero total de fotogramas del MovieClip

Ejemplo: Reproductor de animaciones

Reproductor de MovieClips

Archivo .FLA

Animacion con el evento Event.ENTER_FRAME

El evento Event.ENTER_FRAME es un evento que tienen todos los objetos de visualizacin por el he
encontrarse definido en la clase DisplayObject. Este evento se lanza cada vez que se muestra un fo
de la escena. Si nuestra animacin est parada (stop) tambin se lanza el evento Event.ENTER_FR
import flash.events.Event;
Importacin de la Clase Event.
miDisplayObject.addEventListener(Event.ENTER_FRAME,controladorEnterFrame);
Asociamos el evento Event.ENTER_FRAME con la funcin o mtodo que recoge el evento.
function controladorEnterFrame(e:Event){
...
}
Definimos la funcin que recoger el evento y que realizar las acciones pertinentes.

Ejercicio: Reloj

Reloj analgico utilizando la clase Date

Archivo .ZIP
En el mejor de los casos este evento se lanzar cada "1 / velocidadFPS" segundos, pero a veces el
no puede mostrar los fotogramas a esta velocidad y tarda ms en lanzar el evento.

Animacin con la Clase Timer

Otra alternativa al evento Event.ENTER_FRAME es hacer uso de la Clase Timer. Esta clase impleme
funcionalidad de un temporizador. Nos permite generar un evento cada cierto tiempo. Se puede uti
tanto en otras aplicaciones con otros propsitos distintos al de animar un objeto.
import flash.events.TimerEvent;
Importacin de la Clase TimerEvent.
miTimer = new Timer(milisegundos,[repeticiones]);

Constructor de la Clase Timer.


- milisegundos:Number tiempo en milisegundos que tarda en lanzar eventos TimerEvent.TIMER
- repeticiones:uint nmero de repeticiones que queremos que nos lance el evento TimerEvent.TI
especificamos 0 repeticiones lo repite indefinidamente. Por defecto se repite indefinidamente.
miTimer.addEventListener(TimerEvent.TIMER,controladorTimer);

Asociamos el evento TimerEvent.TIMER con la funcin o mtodo que recoge el evento. Se lanza en
repeticin.
miTimer.addEventListener(TimerEvent.TIMER_COMPLETE,controladorTimer);
Asociamos el evento TimerEvent.TIMER_COMPLETE con la funcin o mtodo que recoge el evento.
evento se lanza al final de todas las repeticiones.
function controladorTimer(e:TimerEvent){
...
}
Definimos la funcin que recoger el evento y que realizar las acciones pertinentes.

Aunque es una alternativa por lo general se aconseja utilizar la Clase Timer para intervalos ms lar
tiempo.

Ejercicio: Coches

Ejemplo con ENTER_FRAME (azul), TIMER (amarillo) y getTimer (rosa)

Archivo .ZIP

La funcin getTimer()

El evento Event.ENTER_FRAME tiene un problema que se debe a la imprecisin de la velocidad de


fotogramas. Este hecho puede hacer que vare la velocidad de la animacin de un momento a otro.
ciertas aplicaciones esto puede no ser un problema, pero existen juegos realizados en Flash donde
convierte en un problema.

Tambin la Clase Timer tiene un problema y es que los intervalos de tiempo se ajustan a la duracio
fotogramas, lo que hace que al final tengamos el mismo problema.

Para solucionar este problema podemos combinar el evento Event.ENTER_FRAME con la funcion ge
import flash.utils.getTimer;
var tiempo:Number = getTimer();

Esta funcin nos devuelve los milisegundos que han transcurrido desde que se empez a ejecutar l
aplicacin. Se trata de un valor mas preciso que la velocidad de fotogramas porque no depende de
de procesamiento del sistema.
//El primer paso es guardar el tiempo inicial en una variable
tiempoAnterior = getTimer();
public function controladorEnterFrame(e:Event){

//Calculamos el tiempo transcurrido entre fotogramas


var tiempoTranscurrido:Number = getTimer() - tiempoAnterior;
//Utilizamos el tiempo transcurrido para realizar la animacion
x += velocidadX*tiempoTranscurrido;
//...
//Lo dejamos actualizado para el siguiente fotograma
tiempoAnterior = getTimer();
}

Animacin Con La Clase Tween


La Clase Tween permite crear interpolaciones de movimiento en tiempo de ejecucin.

Ventajas:
- Versatilidad. Adems de manipular las propiedades de transformacin de un objeto
(x,y,width,height,rotation), puede manipular muchas otras propiedades, incluso de objetos definido
nosotros mismos.
- Simplicidad. Con una lnea de cdigo ya se consigue la interpolacin.
- Control de la animacin. En cualquier momento se puede detener o reanudar la animacin. Inclus
puede reproducir en sentido inverso.
- Deteccin de eventos. Entre la funcionalidad de esta clase podemos encontrar diversos eventos q
ayudarn a detectar momentos clave de la animacin.
Para crear una animacin sencilla:
import fl.transitions.Tween;

new Tween(objeto,propiedad,aceleracion,valorInicial,valorFinal,duracion,[usaSegun

El constructor de la Clase Tween crea y comienza la ejecucin de una interpolacin.


- objeto:Object objeto que se anima
- propiedad:String nombre de la propiedad publica del objeto que vamos a animar (numrica)
- aceleracion:Function funcion que indica la variacion a lo largo del tiempo de la propiedad a anim
- valorInicial:Number valor de la propiedad al inicio de la transicin
- valorFinal:Number valor que se alcanza al final de la animacin
- duracion:Number numero de segundos o fotogramas que dura la animacin
- usaSegundos:Booleanindica si se usan segundos o fotogramas(por defecto) para especificar la
de la animacin

Aqu vemos un ejemplo en el que movemos un objeto llamado "movil" desde la posicion 0 a la posi

en el eje de las X.
var miTween:Tween = new Tween(movil,"x",null,0,100,10,true);

Ejemplo:

Interpolaciones con la Clase Tween

Adems la clase tween nos proporciona varias propiedades interesantes:


-

looping:Boolean indica si se reproducen las interpolaciones en bucle


isPlaying:Boolean indica si se esta reproduciendo la interpolacin
position:Number valor actual de la propiedad animada en la interpolacin
time:Number tiempo actual de tiempo transcurrido desde el inicio
begin:Number valor inicial de la interpolacin
finish: Number valor final de la interpolacin

Y por otro lado dispone de un conjunto de mtodos que permite manipular la reproduccin de la
interpolacin:
-

start() inicia la interpolacin desde el principio


stop() detiene la interpolacin en el punto actual
resume() reanuda la reproduccion de la animacin
yoyo() reproduce de forma inversa la interpolacin
continueTo() prolonga la animacin hasta determinado valor final y con determinada duracin

Aceleracin.

La aceleracin o tambin llamada easing en una interpolacin indica como evoluciona la propiedad
del tiempo. Por defecto, si se especifica null como aceleracion, se realiza una transicin lineal desde

inicial hasta el final. Sin embargo existen varios tipos de transiciones que crean efectos llamativos
diferentes sobre las transiciones.

Para variar la aceleracin en una animacin existen varias clases que ayudan a controlarlo. Todas e
encuentran en el paquete fl.transitions.easing
import fl.transitions.easing.*;

Las clases disponibles son:


- Clase None: Movimiento no acelerado, es decir, lineal. (por defecto)
- Clase Regular: Movimiento acelerado ligeramente.
- Clase Strong: Movimiento acelerado.
- Clase Back: Movimiento acelerado en el que el objeto movil se pasa del valor y luego vuelve.
- Clase Elastic: Movimiento acelerado en el que el objeto oscila alrededor del valor hasta que se de
- Clase Bounce: Movimiento acelerado en el que el objeto rebota en el valor.

Cada clase tiene tres funciones de easing:


- easeIn: Generalmente la funcin va mas despacio al principio
- easeOut: Generalmente la funcin va ms despacio al final
- easeInOut: Generalmente la funcin ms despacio en los extremos de la animacin
* Existen tipos de aceleracin donde las funciones varan otros parmetros distintos a la aceleraci

Veamos ejemplos de movimientos acelerados: http://robertpenner.com/easing/easing_dem

Ejercicio:

Drag&Drop con animaciones Tween

Archivo .ZIP

Eventos de la Clase Tween

Existen un conjunto de eventos asociados a la clase Tween que nos permiten realizar operacines e
instantes relacionados con la reproduccin de la animacin. La clase TweenEvent es la que se utiliz
recoger los eventos relacionados con las interpolaciones Tween.
import fl.transtions.TweenEvent;

TweenEvent.MOTION_CHANGE: Lanza un TweenEvent en cada fotograma de la interpolacin.


TweenEvent.MOTION_FINISH: Lanza un TweenEvent cuando se llega al final y se termina la
interpolacin.
TweenEvent.MOTION_LOOP: Lanza un TweenEvent cuando se inicia un loop de la interpolacin.
TweenEvent.MOTION_START: Lanza un TweenEvent cuando se inicia la interpolacin.
TweenEvent.MOTION_STOP: Lanza un TweenEvent cuando se detiene la interpolacin con el metod
TweenEvent.MOTION_RESUME: Lanza un TweenEvent cuando se reinicia un la interpolacin con res

Ejercicio:

Secuencia de interpolaciones con Tweens

Archivo .ZIP

Otras Formas De Animar


Existen otras formas ms avanzadas de animar utilizando ActionScript:
Clase Animator: Clase de ActionScript que utiliza XML para crear animaciones.

Fuse: paquete de clases para ActionScript que permiten secuenciar animaciones de forma parecida
clase Tween.
Tweener: paquete de clases para ActionScript para secuenciar animaciones