domingo, 12 de junio de 2011

TÉCNICAS DE ANIMACIÓN EN FLASH

La acción básica de la animacion flash

La acción más básica de la animacion flash es la interpolación de movimiento, que consta del desplazamiento de un símbolo Flash de un lugar al otro desde el escenario (donde se desarrolla la acción)
Animacion flash

Se dice que es la mas sencilla porque este efecto se puede lograr solo con dos fotogramas, (para mejores resultados son convenientes mas de dos) ya que basta únicamente con la posición inicial y final que consiste en una trayectoria en línea recta y la representan. Y además de realizable resulta provechoso porque optimiza mucho el rendimiento de la película.

Cómo Crear Animaciones

Para crear una interpolación de movimiento, el mejor método es seguir exactamente los siguientes pasos:
  1. Crear el objeto en el fotograma clave inicial
  2. Crear interpolación de movimiento (con el botón derecho)
  3. Insertar un fotograma clave al final
  4. Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)



Si todo ha salido bien, se verá así: 
En cambio, si falta el fotograma clave final, será así: 
Y si lo que falta es crear la interpolación, veremos: 

Para crear una interpolación de forma, el mejor método es seguir exactamente los siguientes pasos:
  1. Crear el objeto en el fotograma clave inicial
  2. Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación: "Forma")
  3. Insertar un fotograma clave al final
  4. Modificar el objeto en el fotograma clave final



Si todo ha salido bien, se verá así: 

Para crear un fundido de color, seguiremos los mismos pasos que en la interpolación de forma, pero en este caso debemos asignar diferentes colores a los fotogramas inicial y final. OJO: antes, hay que "separar" el texto.

Posibles problemas en las animaciones por interpolación:

  • Antes de animar mediante el panel "Fotograma" un objeto con borde (por ejemplo, un rectángulo o una elipse), o uno que esté formado por varios objetos, debemos agruparlos ("Modificar-Agrupar"). Si elegimos "crear una interpolación de movimiento usando el botón derecho, Flash agrupa automáticamente los objetos seleccionados.
  • No podemos animar independientemente cada letra de una palabra a no ser que las distribuyamos en diferentes capas (cada letra en una capa)
  • No podemos cambiar el color de un texto gradualmente si no está convertido a gráfico. ("Modificar-Separar")
  • Si dos objetos van a animarse de formas diferentes, es mejor colocar cada uno en una capa diferente.
  • Si queremos hacer una interpolación de forma y movimiento a la vez, debemos elegir la de forma.
  • Si sólo deseamos cambiar la posición, rotación o escala (tamaño), no debemos hacer una interpolación de forma. En su lugar, elegiremos una interpolación de movimiento.

Cómo crear una línea a través de la cual se moverá el objeto:

  1. Crear el objeto en el fotograma clave inicial
  2. Agregar una Guía de Movimiento (con el botón derecho encima del nombre de la capa)
  3. Crear interpolación de movimiento (con el botón derecho apuntando al fotograma inicial)
  4. Insertar un fotograma clave al final
  5. Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)
  6. En la capa guía, crear un trazado (con el pincel, la pluma, el lápiz, el óvalo e el rectángulo)
  7. Insertar un fotograma clave en la capa guía, al final
  8. Arrastrar el objeto en cada fotograma clave hasta que ajuste con el comienzo o fin del movimiento trazado.
  9. Si deseamos que la forma gire a la vez que el trazado, debemos elegir "Orientar según trazado" en la paleta fotograma, en el fotograma inicial.
  10. Podemos ocultar el trazado de guía ocultando la capa que lo contiene (botón del ojo)

Cómo cambiar el color de un texto gradualmente:

Veamos cómo hacer el famoso efecto de "fade in" o "fade out" (desvanecimiento) de un texto, que cambiará de color poco a poco, del color de fondo a otro, o de otro al color del fondo (o entre dos colores cualesquiera)
  1. Crear el objeto en el fotograma clave inicial, con el color inicial
  2. Separar el texto ("Modificar-Separar")
  3. Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación: "Forma")
  4. Insertar un fotograma clave al final
  5. Cambiar el color del objeto en el fotograma final

 

¿Cómo hacer un giro de 360º o más?

Si intentamos hacer una interpolación de movimiento para un objeto que deseamos girar 360º, o incluso varias vueltas, veremos que no funciona mediante el método normal, puesto que Flash realizará el cambio por el camino más corto. Si lo hemos girado 380º, Flash sólo girará 20 (380-360). Si la rotación es múltiplo de 360º, el objeto vuelve a quedar en la misma posición en la que estaba, por lo que no se girará nada en absoluto.
El método adecuado para rotar una vuelta o más es:
  1. Crear el objeto en el fotograma clave inicial
  2. Crear interpolación de movimiento (con el botón derecho apuntando al fotograma inicial)
  3. En la paleta "Fotograma", elegir Rotar: "CMR" para que gire en el sentido de las agujas del reloj, o CCRM, en el contrario.
  4. En la paleta "Fotograma", elegir el número de vueltas completas
  5. Insertar un fotograma clave al final


TIPOS DE ANIMACIÓN
Un segundo consta de 24 fotogramas. Hasta aquí llegamos todos, ¿verdad? Y la animación
consiste en grabar 24 imágenes cada segundo para crear la ilusión de realidad. La mayor parte
de largometrajes de Disney se realizaron de este modo; 24 dibujos por segundo, 1440 dibujos
por minuto, 86400 por hora... una verdadera proeza que requiere una inversión humana y
económica enorme. A esto se le llama animar en unos.
Ahora bien, en la década de 1930, debido a la escasez de personal, y con el objetivo de abaratar
costes, algunos estudios (incluído Disney) comenzaron a experimentar grabando cada ilustración
dos veces; 12 ilustraciones por segundo, lo que incluía la mitad de costes de producción. A esto
se le llama animar en doses.
En muchas producciones de anime, sin embargo, le han dado una vuelta de tuerca a este sistema,
utilizando tan sólo 8 dibujos por segundo; cada ilustración se repite durante tres fotogramas.
A esto se le llama  animar en treses.
¿Cuál es el método más adecuado? Indudablemente, casi todas las escenas quedarán mejor
animadas a unos, pero lo ideal es combinar unos y doses según las carácterísticas de la acción
en la que estamos trabajando. Para acciones normales, se trabaja con doses. Para acciones
rápidas o especialmente lentas, con unos.


TIMING Y SPACING
Hablando de forma genérica, podemos decir que la animación se compone de tiempo (timing)
y espaciado( spacing). Imaginemos una pelota rebotando de un lado a otro de la pantalla. Cada
uno de los botes que da la pelota en el suelo es el timing de nuestra animación. El espaciado,
sin embargo, es la separación de la pelota en cada fotograma intermedio entre bote y bote.
¿Complicado? El siguiente ejemplo gráfico lo dejará un poco más claro.
Si aumentamos el espaciado, la pelota dará la sensación de moverse más deprisa. En la imagen,
por ejemplo, la pelota se mueve más rápido del fotograma 1 al 5 que del fotograma 6 al 10.
Con esto conseguimos dar la sensación de que la pelota acelera cada vez que rebota, pero que
decelera cuando llega al punto más alto de cada bote. Aumentando o reduciendo el numero de
fotogramas entre cada bote (timing), lograremos también subir o bajar la velocidad de nuestra
pelota. Jugando con estos dos factores las posibilidades son infinitas


TÉCNICAS DE ANIMACIÓN
Aplastar y estirar (squash and stretch): la visión es el sentido que más nos engaña. Nuestro
cerebro ordena la información recibida por el ojo, pero la interpreta a su manera. Recordemos
el ejemplo de la pelota que rebota. Si animaramos la escena con los fotogramas del anterior
ejemplo, nos daríamos cuenta bien pronto de que algo falla. Y es que nuestra visión necesita
ciertas pistas visuales acerca de lo que está viendo. Observa el siguiente ejemplo:
Si hacemos que la pelota cambie de forma según su estado aumentaremos la impresión de
movimiento, y sobretodo, que la pelota sobre el escenario tiene masa (peso) propia. En efecto,
la pelota se aplasta cuando toca el suelo, pero luego se alarga cuando sale despedida hacia
arriba, o cuando está a punto de tocar el suelo. Sin embargo, conserva su forma en los fotogramas
intermedios (breakdown position), que ¡oh, sorpresa! es también el punto donde la pelota va
más lenta. A esto lo llamamos aplastar y estirar.
Es una técnica imprescindible en animación, y podemos usar los mismos principios para casi
todas las acciones. Estira el brazo de un jugador de beisbol en el momento que suelta la pelota.
O las piernas de un personaje cuando salta. Sin embargo, aplasta la figura cuando aterrice.
Veamos un ejemplo aplicado a la pelota:
Recuerda también que en animación conviene exagerar los movimientos y las reacciones de los
personajes. A la hora de aplastar y estirar, distorsiona la figura todo lo que quieras para crear
la sensación de movimiento.
Anticipación: 
cualquier acción requiere un movimiento previo. Antes de disparar una flecha se
debe tensar el arco. Antes de chutar una pelota se levanta el pie. A esto lo llamamos movimiento
de anticipación, y será vital su utilización en todas y cada una de las escenas que animes.
Combinado con la técnica de aplastar y estirar, mejorará drasticamente el aspecto visual de las
acciones de tu personaje. Veremos esta técnica en profundidad cuando pasemos a Flash.
Acción: el movimiento del personaje posterior a la anticipación. En los ejemplos anteriores sería
el movimiento de la flecha antes de impactar en el blanco, el chut del futbolista, un puñetazo...
Reacción
las consecuencias visuales de la acción anterior. La flecha, después de impactar en
el blanco, seguramente seguirá moviéndose aunque la punta se quede clavada en la diana,
mientras el arco se destensa y vuelve a su posición original. Después de chutar el balón, el
futbolista continua avanzando el pie debido a la inercia. Puede que incluso efectúe un pequeño
salto si ha disparado la pelota muy rápida.
Animaciones secundarias: ciertos elementos de la acción, como el pelo o la ropa de un personaje,
acompañan al cuerpo pero no siguen el mismo movimiento (porque tienen una masa inferior,
o mayor volumen).  Estos elementos a menudo tienen reacciones en dirección contraria a la que
sigue el resto del cuerpo.
Imagina un personaje con el pelo largo que da un salto hacia adelante, aterrizando en el suelo.
Durante el ascenso, el pelo del personaje se mantiene pegado al cuerpo, pero al llegar la cabeza
al punto más alto, el pelo continuará subiendo, ya que tiene un peso inferior y ofrece menos
resistencia a la inercia. Cuando el personaje baje, el pelo continúa en la misma posición (la del
punto más alto), siguiendo la acción de la cabeza, pero cuando aterrice seguramente el pelo
continuará cayendo (e incluso sobre la cara del personaje, si no ha tenido la precaución de
hacerse una coleta) al menos durante un par de fotogramas más. El siguiente ejemplo nos dará
alguna pista más sobre este tipo de animaciones.

QUE ES UNA ANIMACIÓN EN FLASH?

Por animación entenderemos que los objetos que aparecen en la pantalla cambien de posición, tamaño, aspecto, color, que giren, se deformen, etc...

Las animaciones flash son un tipo de animación que emplea gráficos vectoriales y que suelen emplearse principalmente en la web.


Las animaciones flash se han convertido en un estándar para la animación web, junto con Shockwavede la misma empresa, pues actualmente la mayoría de los navegadores las soportan.


Tipos de Animación

En Flash existen tres tipos de animación:

  • fotograma a fotograma 
  • interpolación de movimiento
  • interpolación de forma
En la animación fotograma a fotograma, debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además, el archivo debe almacenar los cambios de cada fotograma.
La animación por interpolación consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente los pasos intermedios. En este caso, el archivo sólo almacena los estados inicial y final.
La animación por interpolación de movimiento es que la debemos elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación
La animación por interpolación de forma ese diferencia en que gradúa el cambio de la forma del objeto, realizada a través de la manipulación de sus puntos de control bezier. También permite cambiar el color.