Pasos de la animación en flash

Primero vamos a explicar todos los pasos a seguir para realizar una animación utilizando el tan conocido sistema flash, que es sin duda la forma más sencilla de hacer que nuestros dibujos cobren vida. Iré explicando los pasos realizando un pequeño proyecto, más adelante explicaré detenidamente cada uno de ellos, con la finalidad de llegar a que puedas hacer una serie flash, que aunque no te lo creas, la puedes hacer tu solo, dependiendo de como de profesional quieres que sea, claro está. Estos son los pasos básicos para poder entender como se hacen las animaciones que ves en internet.

1. Practicar los trazos a lápiz

Si nunca antes habías dibujado nada, hay que realizar unos ejercicios sencillos. Coge lápiz y papel y dibuja estas formas a mano alzada y sin doblar la hoja. Puedes elegir el lapiz que más te guste o con el que más cómodo te encuentres, yo uso uno de dureza 2B, por que se desliza fácilmente sin ejercer mucha fuerza.

Intenta dibujar circulos, rectangulos, triangulos y formas circulares, pero sin prisas. Poco a poco te irás dando cuenta de que las formas te salen cada vez mejor, es cuestión de mucha práctica. Los circulos se practican de dos maneras, en espiral y circulo completo. Para hacer formas rectas practica primero con lineas retas, e igualmente con lineas curvas.

Puede que se tarde un tiempo en dominar la técnica completamente pero es necesario tanto ahora como cuando lo redibujemos a ordenador con ayuda de una tableta gráfica, aunque eso se verá un poco más adelante. Lo importante es coger mucha soltura con el lápiz para poder dibujar todo aquello que se nos ocurra.

2. Creación de personajes con formas básicas

 Todo buen dibujante tiene muy claro que cualquier personaje está creado partiendo de formas básicas como circulos, triangulos y rectangulos, que deformándolos consiguen que percibamos un buen dibujo. No tiene más secreto, eso es lo que debemos saber para crear personajes vistosos, ya después depende del arte de cada uno y su estilo propio a la hora de crear personajes y cualquier dibujo. Un consejo, coge unos cuantos folios y dibuja todo lo que se te ocurra de repente, un niño, un anciano, un perro..... Hay que tener muy claro qué es lo que queremos hacer, tener una idea original de un proyecto. Aquí es donde empieza todo el proceso de verdad, donde tenemos que pensar en algo que nos guste y que este dirigido a un tipo de público. Pues bien, para mostrarte todo el procedimiento he creado una pequeña animación que te ayudará a comprenderlo todo y servirá para cuando quieras realizar después tus propias animaciones. Empezamos. Lo primero es pensar de qué se va a tratar. Para este caso se me ha ocurrido un bebé que mirándo desafiante a un lado y a otro mientras gotea leche del biberón, dice varias frases, es algo sencillo y no muy trabajoso, pero que son las bases de la animación para cuando quieras hacer una serie flash. Por lo tanto tenemos varias cosas que dibujar: un bebe y un fondo. Para empezar, lo mejor es diseñar el bebé.

Como se puede apreciar, se dibuja a partir de dos formas. Para la cabeza, un semicirculo inclinado hacia arriba, y para el cuerpo, un triangulo, que por ultimo se le van dando detalles como el biberón o la coleta. Cuando quieras hacer la cara, que son los ojos, naríz, cejas y demás, debes hacer varias líneas para ayudarte a situar cada cosa y saber hacia dónde está mirando el presonaje. Fijate como en el dibujo del bebé, el cruze de la linea horizontal con la vertical indica la dirección en la que está mirado en el personaje. Cuando se hace una serie flash no sólo hay que dibujar el personaje en esa postura, si no que también y con las mismas medidas hay que diseñarlo de frente, de perfil izquierdo y derecho, y por último de espaldas, pero por ahora lo vamos a dejar así, para no complicar mucho la cosa. Ten en cuenta que dependiendo de la acción que quieres que el personaje realice, lo tienes que dibujar de una forma o de otra para que interactue completamente en la escena y quede algo creíble.

Y aquí tenemos el entorno o mejor dicho el fondo donde irá nuestro personaje, un parque de niños con un cajón de arena y juguetes, algo típico.

Una vez que tenemos dibujado el personaje y el fondo, tenemos que escanearlos con un escaner normal, para posteriormente pasarlo a limpio, otra forma de decir vectorizar el dibujo, que se trata de dibujar en el ordenador todo lo que hemos hecho a lápiz. Es quizas una de las partes más entretenidas de la animación en flash, ya que es un trabajo muy detallado y también se le dará las tonalidades de color a toda la imagen.

3. Nociones del programa Flash

Ya tenemos listos los bocetos que van a fomar parte de la animación,  como hemos dicho antes, hay que pasarlo al ordenador. Es algo muy sencillo, pero primero, hay que buscar un programa competente para lo que queremos hacer y que prácticamente lo usan gran mayoría de las personas que quieren realizar animaciones, el último es el flash cs 5 de adobe, que puedes bajar el producto de prueba directamente de su página web y la pantalla que presenta el programa es así:

Antes de nada, vamos a dar una rapida pasada explicándo cómo funciona un poco este entorno flash, que aunque es un programa muy orientativo, hay que dedicarle algunas hora si quieres dominarlo y que iremos desarrollando cada vez más a media que nos adentremos en la animación. En la parte superior tenemos una serie de pestañas que nos ayudarán a realizar todas las acciones que necesitemos referente a las animaciones que queremos hacer.

Primero, tenemos la pestaña de Archivo, através del cual exportaremos, importaremos, guardaremos, abriremos, etc... nuestros proyectos, y las distintas imagenes que iremos añadiendo a los mismos. Al lado, Edición, la cual nos da una serie de acciones muy interesantes como son cortar, pegar, pegar in situ, y todo lo que tenga que ver con la imagen que tenemos en ese momento para ir editándola a nuestro antojo.  Pero las mas importantes son: hacer y deshacer, que no es nada más y nada menos que dar un paso hacía atrás en lo que estamos dibujando si nos equivocamos en algo, por lo que es muy socorrido, por ejemplo si estás dibujando algún objeto y no sale como quieres, le das a deshacer, y vuelve hasta el último paso que has dado, por lo que puedes volver a intentarlo. Seguimos con la pestaña Ver, con la que podemos acercar o alejar el zoom de la imagen, ir a las diferentes escenas que tiene nuestra animación, que se utiliza cuando estamos haciendo una animación en serie y para contar una historia, va pasando cronológicamente por las diferentes escenas que la componen. La pestaña Insertar tiene que ver pura y abdolutamente con la animación: insertar símbolo, las interpolaciones de movimiento o de forma, insertar escena, la linea de tiempo, como son los diferentes tipos de fotogramas, etc...Todo esto lo explicaremos conforme vayamos realizando la animación que tenemos prevista, por que explicarlo directamente sin ver como funciona, te va a resultar un caos y primero hay que dejar claro de qué está compuesto todo el programa. La pestaña Modificar, como su propio nombre indica, modifica todo aquello qeu hemos insertado, como por ejemplo, tenemos la imagen de un objeto y podemos voltearlo a izquierda, a derecha, horizontal y verticalmente, etc...En Texto, igual que en Paint, te la opción de insertar un texto donde tu quieras y modificar su color, tamaño, distancia entra letras, etc...La pestaña Comandos nos la vamos a saltar en principio, pero trata sobre actionscript, algo un poco complicando si tenemos en cuenta que estamos empezando. Después tenemos la pestaña de Control, dentro de ella vienen varias posibilidades de probar la animación, es decir, podemos parar, continuar, abrir en formato swf para verla o si solo queremos ver una escena, y también por fotogramas. Por último tenemos Ventana, que nos da la posibilidad de ver todas la pequeñas ventanas referente el uso del programa que queremos ir viendo, como son herramientas, biblioteca, escena, color, muestra, y así hasta más de 20 pantallas.

Tras haber visto las pestañas, tenemos varios paneles que son muy importantes, el primero es el de herramientas.

En la fila de la izquierda empezando por arriba tenemos la flecha de selección, simplemente para seleccónar cualquier objeto. Debajo, la flecha de modificación libre, que es para señalar las partes que quiero modificar. La herramienta de pluma, que podemos utilizar en caso de no tener una tableta gráfica, y hace un dibujo vectorizado de cualquier forma. El lazo es para señalar una parte en concreto y puede ser modificable. Le sigue la herramienta de línea, que se ultiliza para hacer líneas rectas. El lápiz, para dibujar como si fuera un lápiz normal y corriente. Le sigue la herramienta Deco, que es para decorar un fondo con varias formas, como por ejemplo una enredadera de plantas. Después tenemos la herramienta huesos, que se utiliza para juntar las partes de un personaje, formando un esqueleto, ayudando un poco más para poder animar el personaje fácilmente. Debajo está la herramienta cuenta gotas, que sirve por ejemplo, para señalar un color que se encuentra en el fondo o en otro dibujo que tengamos en el momento y automáticamente se convierta en la herramienta cubo, para rellenar del mismo color otro objeto. La herramienta mano es para mover los objetos por la zona de trabajo y posicionarlos donde queramos. Los dos recuadros de colores son primero, el lapiz, para dibujar con el color escogido contornos y el cubo para rellenar zonas tanto completamente cerradas a abiertas. Después de hacer los contornos se pueden enderezar o suavizar dependiendo del estilo que queramos y como nos guste más, utilizando las dos herramientas de abajo del todo. Pasamos a la columna de la derecha y tenemos en primer lugar la flecha de subselección que tiene practicamente la misma función que la de elección. Debajo esta la heramienta de rotación, que se utiliza para rotar objetos en 3D. Le sigue la herramienta de texto, para escribir el texto, forma y espacio que queramos. La herramienta de formas sirve para realizar formas rectangulares, circulares, romboidales, etc... de forma automática, pinchado una sola vez y arrastrando hasta tener el ancho que deseamos, si quieres cambiar de una forma a otra pincha sobre la herramienta y deja pulsado durante un segundo. Un truco para dibujar formas de manera equilibadra es mantener pulsada la tecla shift mientras arrastramos con el ratón. La herramienta pincel es la más utilizada, ya que para dibujar prácticamente todo lo que hay en la escena de forma manual, es decir, con el lápiz de una tableta gráfica, se utiliza, y puede modificarse la forma de la pincelada y su grosor, siendo muy útil. La herramienta cubo nos vale para rellenar de color cualquier objeto ya se encuentre cerrado o abierto. Imagina que dibujamos un circulo, bueno, pues para pintar el interior del circulo, no tenemos que estar pasando el pincel una y otra vez, sino que automáticamente rellena todo el espacio con el color que quieres llegando hasta el perímetro. La herramienta goma es para borrar lo que queramos ,utilizandose de igual forma que el pincel pero al contrario. Por último, tenemos la lupa, con la que podemos aumentar o disminuir el zoom de la imgagen que tenemos.

La otra importantísima ventana es la de línea de tiempo en la que vamos construyendo toda la animación.

Bien, esta es la parte más importante y así es como funciona todo: Cuando creamos una animación, lo vemos como un todo, pero realmente está dividido en muchas partes, que unidas, la forman, apreciándose un todo por lo que hay que aprender a distinguirlas. Cuando se hace una animación, se distinguen muchas partes, primero el fondo y después el personaje, por lo que hay que tener claro que se construye en diferentes "niveles". Mejor explicado, todas las partes que apreciamos están unas encima de otras, por lo que si el fondo está detrás del personaje, se hace una CAPA, que es como se llama, del fondo, y se coloca atrás. Después tenemos el personaje y como queremos que se vea delante del fondo, hacemos una capa del personaje y la colocamos encima del fondo. Si te fijas en la imagen de la línea de tiempo, en su zona más ancha, hay una pestaña que pone Capa 1, pues bien toda esa columna de la izquierda iría de arriba a abajo superponiéndose unas capas sobre otras. A su lado derecho superior de donde pone la capa, hay marcados un ojo, que es para ocultar o no la capa que tengas señalada, un candado que es para bloquear la capa que quieras si estás trabando con otra, para que no se pisen y dibujes una encima de la otra uniéndose ambas. Y después tenemos un recuadro, cada capa tiene asignada un color y pulsando sobre los recuadros de las capas, verás los perímetros del color que te indica y sin ver los rellenos de colores de las mismas. En la parte de abajo tienes tres pequeños botones, una hoja, que es para añadir una capa, una carpeta que sirve para meter en ella capas y la papelera, para eliminarlas. Una vez terminado con las capas, pasamos al otro recuadro. Verás como hay unos números y debajo de estos y seguido de la capa, que por su puesto puedes ponerle el nombre que quieras, hay mucho pequeños cuadritos, y todos ellos bajos los números. Bueno, pues esos son los fotogramas que componen la animación. Un fotograma es una imagen de la animación en un momento determinado, que seguido de más fotogramas cambiando de posición, forman el movimiento. Un ejemplo sencillo, en un fotograma clave dibujamos un círculo a la izquierda, en el siguiente igualmente clave el mismo circulo en el centro y el siguiente también clave a la derecha. Una vez que vemos la animación en movimiento, percibimos cómo el círculo se mueve de izquierda a derecha. Entonces, la numeración que sale reflejado en la parte superior, es el número total de fotogramas que tiene la animación y cada capa lleva su propia línea de fotogramas independiente. Hay varios tipos de fotogramas, los clave, normal, vacios y clave vacios. Hay que tener muy claro cual se utiliza en cada caso: Los fotogramas clave son los que llevan los cambios de imágenes de unos a otros y cada vez que quieras pasar de una imagen a otra debes introducir un fotograma clave, entre estos estan los normales y los vacios es que no tienen ninguna imagen. El fotograma clave se distinque por que tiene un punto en el centro del mismo, los normales no tienen punto y los vacios están en blanco. Con el mismo ejemplo del circulo vamos a explicar las interpolaciones. Existen dos, la interpolación de movimiento en la que pones el circulo a la izquierda en el primer fotograma clave, dejas un espacio de algunos fotogramas, por ejemplo de diez, y vuelves aponer el círculo en elfotograma clave once, pero esta vez a la derecha, seleccionas los fotogramas que se encuentran entre los claves, donde están los circulos e insertas interpolación de movimiento, verás como pasa lenta y automáticamente de un lado a otro.

En conclusión, ya sabemos que una animación esta compuesta de muchas capas, que cada una de estas poseen su propia linea independiente de fotogramas y que para formar una animación hay que ir colocándolas unas encima de otras para que el resultado final, sea el que uno quiera. Para complicarlo un poco más, pero no mucho, lo único que queda es entender de que a la hora de construir el personaje, también está compuesto por capas, la cabeza, el cuerpo, cejas, ojos, pupilas, parpados, nariz, y todas las variantes de la boca, es decir la forma en que dibujar las bocas para que hable, A de una manera, E de otra, etc.... Todo esto irá almacenado en la biblioteca, a la que podremos acceder cuando estemos animando el personaje y queramos cambiar las piernas, los parpado y demás partes del cuerpo. Un último nombre y muy importante, "Símbolo", que es el nombre que recibe todo lo anterior, todas las partes del cuerpo, el fondo... se guarda en la biblioteca del programa como símbolo, que es perfectamente editable cuando quieras. Por lo que cuando dibujas por ejemplo una oreja, te indica: guardar símbolo, y pones el nombre de oreja.

Es necesario hecharle algunas horas para poder dominarlo, así que ten paciencia o no te desesperes cuando no te sale algo, todo tiene solución.

4. Pasar a limpio, construcción del personaje y fondo

Habiendo respasado un poco el funcionamiento del programa, vamos a trabajar con él. Lo que necesitamos, es el programa, un escáner y una tableta gráfica, que se pueden encontrar algunas a muy buen precio. Una vez que tenemos escaneado nuestros dibujos, abrimos Flash, le damos a nuevo y pinchamos en (archivo- importar a escenario), y elegimos uno, siempre empiezo por el personaje, pero para empezar a familiarizarnos con Flash vamos a abrir primero el fondo del parque de niños. Una vez que lo tenemos importado en el escenario, podemos graduar el tamaño, lo que se hace, es aumentar el tamaño de la imagen para ayudarnos y dibujar mejor ya una vez que tengamos la el fondo dibujado no pierda calidad cuando lo ponemos más pequeño o más grande. Verás como tenemos el fondo ya en nuestra pantalla principal de flash y también guardado en la pantalla biblioteca, que si no puedes verla ve a (ventana- biblioteca), bueno pues lo que hay que hacer ahora es redibujar, es decir, dibujar encima del dibujo original, y lo vamos a hacer es abir una nueva capa, pinchando en el icono de la hoja doblada en la linea de tiempo y se abre una nueva capa con nombre capa 2. Vamos a cambiar el nombre de capa 2 por (fondo parque), después bloqueamos la capa 1, que es el dibujo original dandole al candado y pulsamos en el primer fotograma de la capa fondo para empezar a dibujar, quedándonos así.

Una vez tenemos listo nuestro escenario de trabajo, es momento de ponerse a dibujar. Elegimos la herramienta pincel, modificando tamaño y forma como más nos guste y elegimos el color que queramos en el segundo recuadro del cubo, en principio escogeremos un color para cada contorno de cada objeto que aparece en la imagen teniendo como referencia el fondo importado. Al terminar de dibujar los contornos, eliminamos la capa 1 y nos quedará así.

El siguiente paso es colorear el fondo, para buscar un color en particular no solo tenemos el cuadro de colores que aparece pinchando en el cubo, también podemos elegir la tonalidad dirigiendonos a la pestaña (ventana- color), y nos aparecerá la ventana, que puedes colocar donde quieras. Ahí tienes un marcador donde ir desplazandolo hasta encontrar un color acertado. Una vez terminado quedaría de esta manera.

 

Ya tenemos terminado el fondo, ahora señalamos la imagen entera y con el botón derecho elegimos la opción convertir en símbolo, apareciéndonos una ventana en la que nos pide que le pongamos un nombre, le ponemos fondo parque y lo guardamos como gráfico, añadiendose a la biblioteca. Esto es importante, todos los símbolos por ahora los guardaremos como gráficos para evitarnos problemas a la hora de animar.