ANIMACIN

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

Conceptos
Se entiende por animacin como cualquier cambio visual que se produce a lo largo del tiempo. Se puede 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 frame. La animacin se compone por tanto de una secuencia de fotogramas que son mostrados al usuario en orden y uno detrs del otro. Por lo tanto un fotograma es un estado de los elementos que componen la animacin en un instante concreto de tiempo. La sucesin de estos fotogramas produce la sensacin de movimiento. La velocidad a la que se muestra la secuencia de fotogramas se llama velocidad FPS o fotogramas por 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 Flash la velocidad FPS no es un valor fijo, sino es el mximo valor deseado de velocidad. Esto quiere decir que nuestra pelcula SWF se puede reproducir a una velocidad menor si es que el ordenador no dispone de los recursos necesarios para reproducir la pelcula a dicha velocidad. De esta manera, si tenemos una pelcula muy compleja, con muchos vectores, animaciones, transparencias, degradados, etc... es posible que se reproduzca a una velocidad inferior a la indicada en los FPS. Adems este valor es variable a lo largo de la reproduccin de la pelcula. Es decir, en algn momento nuestra pelcula puede ralentizarse bien por el contenido que manejemos dentro o bien por causas ajenas a la pelcula (otras aplicaciones ejecutadas al mismo tiempo...).

Otro concepto importante es el de fotograma clave. Se trata de aquellos fotogramas en los que se define un nuevo estado con respecto a los fotogramas anteriores. En los fotogramas clave se realizan los cambios a la hora de generar las diferentes imgenes por las que pasa una animacin. Un volmen exagerado de fotogramas clave puede hacer que nuestro archivo pese demasiado y que la animacin no se reproduzca de forma fluda (ralentizacin). Por este motivo hay que evitar utilizar fotogramas clave en los elementos 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 fotogramas clave, no se almacenan en ninguna parte, sino que se calculan cuando se reproduce la pelcula. Por este motivo los fotogramas interpolados reducen el peso de archivo. Sin embargo el clculo de interpolaciones con demasiados elementos, o elementos grficos muy complejos (muchas transparencias y degradados), puede 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 conceptos. Hablaremos de velocidad, aceleracin, tiempo,...

Tipos De Animacin
En el entorno de edicin de Flash existen dos tipos principales de animacin: Animacin fotograma a 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 fotogramas se definen como fotogramas clave siempre que los elementos se animen. Para crear fotogramas clave podemos usar la tecla F6 o el men Insertar > Lnea de tiempos > Fotograma clave o el botn derecho del ratn sobre la lnea de tiempos

Animacin por interpolacin. Se trata de utilizar interpolaciones para crear una animacin. Esto siginifica que definiremos dos o ms fotogramas clave y el resto de fotogramas sern fotogramas interpolados. Para crear una interpolacin 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 a otro 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 aspectos diferentes a la transformacin/color y tambin se pueden transformar de diferentes maneras, no solo 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 animaciones complejas y lineales. 2) Cuando la animacin no est definida de antemano, sino que va cambiando bien por la interaccin del usuario o o bien por la aleatoriedad de la aplicacin, resulta ms til hacer uso de una animacin creada 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 propiedades y 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 fotograma) 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 fotograma) 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 hecho de encontrarse definido en la clase DisplayObject. Este evento se lanza cada vez que se muestra un fotograma de la escena. Si nuestra animacin est parada (stop) tambin se lanza el evento Event.ENTER_FRAME. import flash.events.Event; Importacin de la Clase Event. miDisplayObject.addEventListener(Event.ENTER_FRAME,co ntroladorEnterFrame); 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 sistema 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 implementa la funcionalidad de un temporizador. Nos permite generar un evento cada cierto tiempo. Se puede utilizar por 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.TIMER. Si especificamos 0 repeticiones lo repite indefinidamente. Por defecto se repite indefinidamente. miTimer.addEventListener(TimerEvent.TIMER,controlador Timer); Asociamos el evento TimerEvent.TIMER con la funcin o mtodo que recoge el evento. Se lanza en cada repeticin. miTimer.addEventListener(TimerEvent.TIMER_COMPLETE,co ntroladorTimer); Asociamos el evento TimerEvent.TIMER_COMPLETE con la funcin o mtodo que recoge el evento. Este 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 largos de 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. En ciertas aplicaciones esto puede no ser un problema, pero existen juegos realizados en Flash donde esto se convierte en un problema. Tambin la Clase Timer tiene un problema y es que los intervalos de tiempo se ajustan a la duracion de los 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 getTimer(). import flash.utils.getTimer; var tiempo:Number = getTimer(); Esta funcin nos devuelve los milisegundos que han transcurrido desde que se empez a ejecutar la aplicacin. Se trata de un valor mas preciso que la velocidad de fotogramas porque no depende de la carga 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 definidos por 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. Incluso se puede reproducir en sentido inverso. - Deteccin de eventos. Entre la funcionalidad de esta clase podemos encontrar diversos eventos que nos ayudarn a detectar momentos clave de la animacin. Para crear una animacin sencilla: import fl.transitions.Tween; new Tween(objeto,propiedad,aceleracion,valorInicial,v alorFinal,duracion,[usaSegundos]); 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 animar - 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 duracion de la animacin Aqu vemos un ejemplo en el que movemos un objeto llamado "movil" desde la posicion 0 a la posicion 100 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 a lo largo del tiempo. Por defecto, si se especifica null como aceleracion, se realiza una transicin lineal desde el valor inicial hasta el final. Sin embargo existen varios tipos de transiciones que crean efectos llamativos y diferentes sobre las transiciones. Para variar la aceleracin en una animacin existen varias clases que ayudan a controlarlo. Todas ellas se 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 detiene. - 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 aceleracin Veamos ejemplos de movimientos acelerados: http://robertpenner.com/easing/easing_demo.h tml

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 en instantes relacionados con la reproduccin de la animacin. La clase TweenEvent es la que se utiliza para 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 metodo stop(). TweenEvent.MOTION_RESUME: Lanza un TweenEvent cuando se reinicia un la interpolacin con resume().

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 a la clase Tween. Tweener: paquete de clases para ActionScript para secuenciar animaciones