Animación. Clase 01 y 02

Febrero 8 y 15.

A manera introductoria, esta clase aborda los temas básicos relacionados  con la animación y el movimiento de elementos en un concepto 2D.

Principios básicos:

Una animación es una serie de imágenes consecutivas, dibujadas o fotográficas, que, bajo ciertas condiciones, reproducen la sensación de movimiento.
Las imágenes pueden plasmarse  sobre una película y proyectarse, como en los dibujos animados, o dibujarse en las páginas de un libro y observarse en rápida frecuencia. (Flip Book)

Como usamos Flash como soporte de animación, veamos algunos aspectos básicos y primordiales de su uso:

Tipo de archivo que genera Flash:

1- SWF – El archivo que crea el programa con el archivo abierto cuando previsualizamos la animación o presentación en cuestión.
2- FLA –Es el archivo raíz del programa, es decir, es el archivo editable de Flash (equivale al PSD de Photoshop)
3- EXE –Es llamado EL PROYECTOR y se ejecuta desde un swf, fuera del programa, es un archivo ejecutable independiente que integra un “motor” de ejecución del archivo cuando se carece de programas para visualizarlo.

CONSIDERACIONES

1- Todo dibujo o forma que vaya a ser animado (a menos que sea fondo, forma para ser animada como forma o un tipo de animación como el Stop Motion o similares) deben ser convertidos al lenguaje de Flash, para ello deben ser transformadas en Gráficos.
(Las otras dos opciones son los Movie Clips –Clips de Película y los Botones)

2- Métodos para su conversión: Dibujar la forma/ Click derecho sobre lo forma y darle convertir a símbolo y allí en gráfico. (También seleccionando la forma y el menú INSERTAR/Convertir a símbolo ó seleccionando la forma y darle Click a la tecla F8 para activar el cuadro de conversión a símbolo)

3- Los tres tipos de símbolos en Flash: El Gráfico –en esencia, cualquier forma que se desee trabajar -, El Botón –Que en esencia, son eso, botones- y por último, están los MovieClips o Clips de Película que son pequeñas películas para ser usadas dentro de otras.

4- Para la animación deben tener en cuenta:

El fotograma clave inicial, el fotograma clave final y la interpolación de movimiento.

La idea es proporcionarle al programa la información básica de ubicación del elemento
(o el estado) desde donde va a iniciar su proceso de animación –Fotograma Clave inicial-
Luego, ubicar su posición final en la animación –Fotograma clave final- es decir, desde donde arranca la animación y en donde termina, por último en el medio de los dos, ubicamos la interpolación o la orden de movimiento.

En la animación tradicional, una de las formas de movimiento, requiere que indique la posición inicial y final de un movimiento, esto es hecho por un dibujante principal, posteriormente los dibujos intermedios (intercalados o interpolaciones) son hechos por otro u otros dibujantes que se llaman intercaladores y complementan la acción o movimiento.

En nuestro caso tenemos tres tipos de fotogramas: LOS FOTOGRAMAS VACIOS: en los que no hay nada ubicado, LOS FOTOGRAMAS CLAVES: que ya tienen un elemento ubicado, y LOS FOTOGRAMAS: que son los cuadritos donde están puestos los elementos, que también se ubican al final de una línea de tiempo SIEMPRE y cuando el elemento no vaya a moverse.

5- El proceso es simple: Dibujar forma, convertirla en símbolo, establecer la posición inicial de la forma (ubicación) y luego crear el fotograma clave final para después mover la forma hasta la posición en donde termina el movimiento, y una vez allí, Ubicarse entre los dos fotogramas y dar Click derecho e interpolación de movimiento: (USUARIOS DE CS4 darle INTERPOLACION CLASICA)

6 –Cada símbolo debe ocupar una capa, (no deben haber varios en la misma capa ocupando espacios compartidos) todo debe estar separado por capas.

7 – Cada símbolo y cada capa, TIENE que tener un nombre que las distinga para el orden adecuado de los elementos.

Ejercicio de desplazamiento básico:

1- Dibujar forma.
2- Convertirla en Símbolo. (Al hacerlo YA se está generando el fotograma clave inicial)
2- Crear el fotograma clave final y mover la forma de posición.
3- pararse en la mitad de los dos fotogramas claves en la línea de tiempo y darle click derecho y decirle (Interpolación de movimiento – “clásica” si tienes CS4)
4- Control/enter para previsualizar el resultado.
5- Y lo más importante de todo, guardar el archivo raíz desde el principio.

Ejercicio de interpolación de forma:

1- Dibujar una forma PERO NO convertirla en símbolo.
2- Ir unos fotogramas más adelante en la línea de tiempo e insertar un fotograma clave (F6).
3- Una vez ahí, modifícala en su aspecto, córtale un pedazo, mézclala con otra forma, en pocas palabras hazle algún cambio (no vayas a exagerar)
4- Entre ambos fotogramas claves, el inicial y el final, inserta una INTERPOLACION DE FORMA.
5- Hecho.

Ejercicio de Interpolación de Rotación:

1- Dibuja la forma.
2 -Conviértela en símbolo.
3 -Ve unos fotogramas mas adelante y crea otro fotograma clave –la posición final-.
4 –Crea una interpolación de movimiento (Clásica si estas en CS4)  -no muevas de posiciones los objetos.
5 –Inmediatamente, ubícate en medio de los fotogramas claves en la línea de tiempo, haz clic en la línea y mira en la ventana PROPIEDADES (abajo en CS3 y al lado derecho en CS4 –si no aparece, búsquenla en el menú ventana)
6- en propiedades, busque ROTACION: y la casilla escoja CW ó CCW (Con las manecillas del reloj o en dirección contraria) y listo.

La velocidad de una animación, está supeditada a lo que quiere la persona que hace la animación, el estándar de velocidad es por lo general 24 cuadros /fotogramas por segundo. Pero puede hacerse en mas o menor cantidad dependiendo de lo que se busca.

En el caso de Flash, la velocidad se puede determinar en dos formas: o lo hacemos extendiendo los fotogramas (shift/F5) porque entre mas fotogramas: más lento. O reduciéndolos, entre menos fotogramas: más rápido.

La otra forma es recurrir al cuadro de dialogo que aparece debajo de la línea de tiempo y allí podemos reducir o aumentar velocidad.

CLIP DE PELICULA – MOVIE CLIPS

Cuando hacemos una pequeña película para que sea un loop (animación de movimiento repetitivo, perpetuo, cíclico, etc.) las convertimos en el otro tipo de símbolos que maneja Flash, estoy hablando de los Clips de Película o Movie Clips, que pueden resumir una animación a un fotograma clave para ser parte de una animación mas grande.

Procedimiento:

De las muchas maneras que se puede crear un MovieClip, hablemos de esta:

1 – Primero que todo, realiza la animación que quieres hacer.
2 – Una vez que ya está hecha, selecciona el primer fotogramas clave de esa animación, haz click en el ultimo fotograma clave de esa animación con la tecla Shift presionada.
(al hacerlo, estarás seleccionando toda la línea de tiempo con fotogramas claves incluidos) y Luego, click derecho y “Copiar fotogramas” 

3 – Abres un documento nuevo (Ctrl+N) y con la tecla Shift presionada, haz click en F8 al tiempo y así aparecerá el cuadro de dialogo de crear símbolo, solo que en este caso, estarás creando EL DOCUMENTO como símbolo. Dale click y un nombre.  

4 – El área de trabajo esta creada, te paras en el primer fotograma de la línea de tiempo y click derecho “Pegar fotogramas” allí habrás pegado la animación que copiaste del otro archivo. 

5 – Por último, regresas a escena 1 y abres la biblioteca CTRL+L y ahí está con el loguito de la rueda dentada, el archivo de tu MovieClip que lo que debes hacer es arrastrarlo desde la biblioteca hasta el área de trabajo en blanco y listo. 
6 – Tu Clip de Película o MovieClip solo ocupa ahora un fotograma, para entrar en el solo debes darle doble click a la imagen, y si quieres que se mueva ese MovieClip úsalo como fotograma  clave inicial y el resto del procedimiento es igual que con un gráfico…

EJERCICIOS PARA REALIZAR:

1 –  Un carro con llantas que se mueven (cada llanta es un Clip de película)

2 – Una pista de carros vista desde arriba para que puedan manejar la velocidad de los carros con la distancia y tamaño de cada línea de tiempo de cada carro (cada carro debe estar en una capa y cada carro debe ser un símbolo = gráfico)

COMO CREAR EL “BAMBOLEO” o VAIVEN del carro al andar.

1 – Ya se da por hecho que tienen las llantas hechas y convertidas como clip de película, esto es, que deben tener en el archivo abierto, una imagen que tiene los tres elementos en el mismo plano: las dos llantas (que ya son clip de película cada una) y el carro.

2 – Inmediatamente, señalan los tres elementos, le dan click derecho y cada parte queda en una capa diferente cada una y cada capa tiene el nombre del elemento automáticamente (por favor, hacer Shift cuando creen el circulo de las ruedas para que no queden como un huevo y rueden mal)

3 – Posteriormente, se acomodan los elementos para que parezcan juntos (pero la verdad es que cada uno de ellos, es una capa diferente)

4 – Al darle CONTROL-ENTER  pueden ver como las llantas del carro se mueven, pero no el carro, hay que darle un leve movimiento a la carrocería.

5 – Para eso, primero colocamos en orden las capas, la llanta 1 primero, la 2 le sigue y por último la carrocería, (la capa vacía que tenía todo antes, puede ser borrada)

6 – Primero, le damos continuidad al carro y las llantas en la línea de tiempo respectiva de cada elemento y al final le ubicamos un fotograma clave, (puede ser el 20) a cada uno.

7 – Posteriormente, le damos una interpolación de Movimiento (clásica si es en CS4) en la línea de tiempo de cada llanta y la carrocería.

8 – Posteriormente, a las líneas de tiempo de las llantas le activo la propiedad del girar (en propiedades)

9 – Como la línea de tiempo de carrocería tiene 20 fotogramas, cada cinco fotogramas, inserto un fotograma clave (F5)

10 – Cada fotograma intermedio, con las teclas de desplazamiento de flecha arriba o abajo, le doy tres o cuatro espacios (con la tecla flecha hacia arriba) para mover el carro arriba y abajo)

11 – Cuando este hecho, al previsualizar el carrito, deben girar las ruedas y el carro debe tener cierto vaivén que indique que se está moviendo, posteriormente, empaqueten esa animación en un Movie-Clip y se la llevan a un escenario donde pueden hacer desplazar el carro.

EJERCICIO DEL BRAZO MECÁNICO

La siguiente imagen, les muestra como pueden acomodar los brazos para el movimiento, y sobre todo, como queda la disposición de las capas y los fotogramas.

Para evitar que al moverse (girar) los brazos de hundan, creamos fotogramas claves especiales adicionales en las partes que giran para minimizar este hecho. (imagen)