Migración

Por diversos motivos, este blog ha sido copiado en Design for Coffee. Es allí donde están estos posts y los que se generen desde este momento.

Animación Tradicional (1)

Vamos a repasar los conceptos principales de Flash que nos permitirán realizar animaciones tradicionales. Además, estableceremos la terminología que usaremos en el resto de explicaciones.
En la imagen he remarcado los conceptos fundamentales que vamos a utilizar.

Lo primero que tenemos que entender es que Flash nos va a permitir realizar animaciones tradicionales de forma sencilla y que nos va a asistir en el proceso.

La animación tradicional consiste en la reproducción de una serie de dibujos de manera consecutiva y a una velocidad adecuada de forma que de la sensación de movimiento. La cantidad de dibujos que se reproducen en un segundo viene definida por el valor FPS (Frames Per Second o Fotogramas Por Segundo). Esta, tradicionalmente, era de 24 fps, aunque en algún momento dado alguien se dió cuenta de que a 12 fps el acabado no estaba mal. Durante muchos años, los japoneses han realizado producciones a 8 fps. Para mantener los tiempos, cuando se trabajaba con 12 fps, se proyectaba cada fotograma 2 veces (animation on twos) y cuando se trabaja con 8 fps se proyectaba cada fotograma 3 veces (animation on threes). Es de cajón que cuando se usa 24 fps se proyecta cada fotograma 1 vez (animation on ones).

Realmente, la fluidez de la animación no va a venir sólo definida por los fps que utilicemos, sino que la disposición de los elementos en el espacio para cada momento va a ser también un factor determinante.

Cuando en un instante de tiempo exista información (aunque dicha información sea que el instante de tiempo permanece vacío), tendremos una secuencia (o al menos lo llamaremos así...). Una secuencia será un periodo de tiempo en el que se presenta un conjunto de elementos. La primera secuencia con la que nos podemos encontrar es una secuencia de un fotograma vacio. Será un rectángulo blanco con un circulo blanco en su interior. Si extendemos la duración de esa secuencia insertando fotogramas (NO 'fotograma clave', sino 'fotograma'), veremos que en el último fotograma de la secuencia aparece un rectangulo blanco con un rectángulo blanco en su interior.

Si, en cualquier momento, dibujamos algo en cualquiera de los fotogramas que componen una secuencia, ese dibujo se verá reflejado en todos los fotogramas que componen la secuencia. Esto es que realmente la secuencia nos define el instante de tiempo en el que permanece una determinada composición, como hemos dicho antes. En el caso de que el fotograma no esté vacio, se representa con un rectángulo de color gris que puede contenes un circulo negro en su interior (en caso de que sea el primer fotograma de la secuencia, al que nos referiremos como fotograma clave) o un rectángulo blanco (que nos indicará el último fotograma de la secuencia).

NOTA: Se pueden insertad fotogramas haciendo click con el botón derecho en la línea de tiempos (en la horizontal de la capa correspondiente), a través de los menús Insertar / Línea de tiempo / Fotograma o pulsando F5.

Obviamente, las secuencias que tienen una duración de un sólo fotograma no presentan un rectángulo blanco en su último fotograma. Como sólo tienen un fotograma nos mostrarán el indicador de inicio de secuencia.

Revisemos más cosas que he querido remarcar en la captura de pantalla...

• Capas: Cuanto más arriba se encuentra una capa en la línea de tiempos, más cerca se encuentra del espectador. Es decir, las capas superiores se superponen a las capas inferiores en la animación. Podemos hacer click en los puntos que hay a la derecha del nombre de las capas para obtener distintos resultados. El lápiz nos indica que es la capa que estamos editando. El ojo que la capa se encuentra visible en este momento. El candado, que la capa es editable. Y el cuadrado de color, pasa al modo de representación de contornos y vuelve. En este modo, el contorno de los elementos que hay en la capa es lo único que veremos, y lo veremos en el color que nos marque el cuadrado. Podemos hacer doble click en el cuadrado para cambiar el color y en el nombre para cambiar el nombre.
• Hay tres números que nos indican el número del fotograma sobre el que está el cabezal, la velocidad de reproducción y el instante de tiempo en el que comienza a visualizarse el fotograma sobre el que está el cabezal.
• En el escenario podemos ver un área blanca, que corresponde con el área de la pantalla de reproducción y un área gris, que es el espacio que utilizamos para realizar las animaciones y que, en principio, no será visible a la hora de reproducir. Es como... el backstage.

Destacar también que la inserción de un fotograma clave en una capa realizac una copia identica, aunque independiente, del último fotograma presente antes del nuevo.

Con lo que hemos visto ya podemos realizar sencillas animaciones tradicionales, dibujando en cada fotograma un elemento.

Un ejemplo sencillo de animación tradicional [VER]

Adobe Flash CS3 y Flash for Coffee

Actualmente, contamos en el aula con la versión CS3 de Adobe Flash. Lo primero que tenemos que hacer a la hora de trabajar con este programa (al margen de adquirirlo e instalarlo, claro está...) es hacernos con la última versión del manual. El manual puede ser descargado gratuitamente desde la página web de Adobe. En concreto, desde la sección de Soporte/Documentación/Flash. En la página a la que llegamos, encontramos un montón de documentación relacionada con Flash. De todos esos archivos sólo nos interesa (de momento) la última versión de la Guía de Usuario - Utilización de Flash. No es necesario imprimir el manual, pero si que es interesante tenerlo a mano.

Normalmente es una buena idea revisar la documentación de los programas que queremos aprender a utilizar. Por ejemplo, en este caso, si comenzamos a leer el capítulo 1 (ese que siempre parece que no tenga nada de interés) descubriremos que entre tanta información sobre Adobe y el resto de programas de la Suit CS3 y de todo lo que acompaña o deja de acompañar a Flash CS3 encontramos una bonita referencia a los tutoriales que Adobe ofrece sobre el programa.

En definitiva, ¿qué es lo que deberíamos resaltar de este post y del capítulo 1 del manual?

• Hacerse con el manual del programa es más que interesante.
• Existen unos bonitos tutoriales en video que nos enseñan a utilizar este y otros programas de Adobe.
• Si ya conocíamos Flash (hasta la versión anterior), es interesante echarle un ojo al apartado que nos indica las Novedades en esta versión, que luego pasa lo que pasa...
  

Flash for Coffee

La idea de Flash for Coffee nació durante el curso académico 2007-2008 en el que una alumna llegó a un acuerdo conmigo por el cual yo le prepararía unas notas sobre los conceptos de Flash que habíamos visto y ella me invitaría a un café. Durante un tiempo, estuvo online una web en la que se explicaban aquellos conceptos, pero debido a diversos problemas (particularmente la falta de tiempo unida a la muerte súbida del servidor en el que se alojaba la página...) no estuvo demasiado tiempo en marcha. Este año retomo la idea con intenciones un poco más a largo plazo. A ver que pasa... :D