Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Este tutorial va dirigido tanto al principiante que quiere hacer una animación convincente
de un personaje desde cero, como al que ya domina Flash pero quiere saber algo más sobre
animación y expresión de personajes. El usuario avanzado puede saltarse el punto 2
• La cabeza se mueve gracias al cuello. Éste puede realizar todos los movimientos, es decir,
rotación (decir no), flexión y extensión (decir sí), lateralización (inclinar la cabeza hacia los
lados).
• El hombro es una de las articulaciones más complejas, y sintetizando mucho tiene dos
conjuntos, el escapulotorácico, que comprende movimientos los movimientos de elevación del
hombro (como diciendo no se), giro hacia atrás o hacia delante, (sacar pecho, hundir pecho) y
el conjunto escapulohumeral, que comprende los movimientos de extensión, rotación, flexión,
o sea, mover el brazo.
• El codo, pues fácil, se flexiona y se extiende, aunque en un grado más de realismo, podemos
decir que rota (supinación y pronación, como cuando se indica con la mano "más o menos")
• La cadera, es como el hombro, pues mueve las extremidades inferiores, pero también puede
elevarse y bajarse. La articulación pubofemoral contiene todos los movimientos, rotación,
flexión, extensión, aducción y abducción.
• La rodilla como el codo, se flexiona y se extiende., aunque tiene cierto grado de rotación, no
tiene casi relevancia en animación, aunque si en anatomía claro.
• Los tobillos y los pies también se flexionan y se extienden.
Después de este breve repaso, obvio, pero necesario para comprender la complejitud de los
movimientos humanos, hemos de entender que un movimiento, por lo general, no se produce en
solitario, entran en juego grupos de articulaciones y compensan las posiciones adoptadas para estar
siempre lo más equilibrado posible.
Por ejemplo, si estoy sentado, y hecho el brazo hacia atrás para rascarme las costillas pues flexiono la
articulación del hombro al mismo tiempo que la del codo y el cuerpo (columna) rota un poco hacia un
lado, a continuación se flexionan los dedos y se realizan pequeños movimientos adelante y hacia atrás.
Podéis probar de rascaros las pantorrillas, el cuello, o la espalda, y podréis comprobar como en realidad
son conjuntos de articulaciones las que entran en acción.
(Bueno, vale ya de rascarse!!!)
Caminante no hay camino, se hace camino al andar...
Entonces, cuando hacemos el acto de caminar, debemos fijarnos en lo siguiente:
Este gesto indica que la persona no entiende o no sabe algo. Las tres partes principales de este conjunto
de gesto con las palmas mirando hacia arriba y abiertas, las cejas levantadas y los hombros encongidos.
• A quien quieres engañar con esa historia... no me creo nada: la mano en la barbilla
4.- No está de acuerdo con lo que escucha
Ese señor tiene una actitud de evaluación crítica, está pensando algo así como "no me gusta lo que dice
y no estoy de acuerdo". Las tres partes principales de este conjunto son la mano tapándose la boca en la
barbilla con el índice levantado, las piernas muy cruzadas y el brazo cruzado sobre el pecho (defensa),
mientras que la cabeza está un poco inclinada hacia abajo, lo que denota hostilidad.
• Que nadie se atreva a desafiarme: actitud dominante
5.- Mujer dominante
Esta mujer muestra una actitud dominante o agresiva, enseñando los pulgares, que asoman de los
bolsillos, y tiene el cuerpo ligeramente inclinado hacia adelante, mostrando seguridad en si misma. Los
pulgares expresan superioridad.
Si, si, bien! que contenta estooooooy!: frotarse las manos
El acto de frotarse las manos significa que la persona está contenta con "lo que tiene entre manos" .
Recordemos que es el conjunto de gestos lo que hacen una actitud creíble o no con respecto a lo que se
expresa hablando.
Leer el rostro, todo un arte.
"¿Porqué signo se reconoce la evolución de un hombre?" y el Maestro respondió: "Por la intensidad de la
luz que emana de él. Y aunque esta luz ciertamente no es visible, puede percibirse en la mirada, en la
expresión del rostro, en la armonía de los gestos."
- Omraam M. A.
Nuestro rostro es la expresión de la experiencia de la vida. Todo el mundo sabe que cuando una persona
se siente bien, su rostro y todo su cuerpo lo demuestran, se ve más luminoso, más recto, más firme, su
mirada brilla. En cambio, cuando vemos a alguien con el rostro "desfigurado" todos percatamos que a
aquella persona no le están yendo bien las cosas, o que pasa por un mal momento. Así que depende de
la expresión que le demos a un personaje crearemos la sensación oportuna.
El canon de la belleza...
En canon de la belleza es conocido desde tiempos antiguos. Aunque los artistas son reacios a aceptarlo,
se debe a una cuestión matemática-geométrica, que obedece a un canon arquetípico.
La ecuación matemática de segundo grado que sirve para definir la belleza es:
x^2 - x - 1 = 0 // equis elevado al cuadrado, menos equis, menos 1, igual a cero.
Una de las raíces de esta ecuación es el "número áureo" (1,618.....) y la otra es la "sección áurea"
(0,618...) y ¿cómo se traduce esto en belleza?
Esa boquita...
• Orbiculares externos, indica deseo, es una dependencia, la persona necesita de los demás y
existe falta de autocontrol.
Bueno, creo que con esto es suficiente como para que uno pueda hacer sus pinitos con la animación y
caracterización de personajes, así que pongámonos el mono de faena, y a trabajar. Aihó, Aihó
2.- Creación de un maniquí como maqueta paso a paso.
Ahora vamos a construir paso a paso un maniquí que nos servirá para preparar alguna animación
posteriormente.
Descripción
El maniquí lo vamos a simplificar quitándole el movimiento de las muñecas, y el cuello. Así que consta
de las siguientes partes:
1. Capa brazoDer
○ Brazo derecho
○ Antebrazo derecho
2. Capa cabeza
○ Cabeza
3. Capa piernaDer
○ Muslo derecho
○ Pierna derecha
4. Capa cuerpo
○ Cuerpo (tórax y abdomen)
5. Capa brazoIzq
○ Brazo izquierdo
○ Antebrazo izquierdo
6. Capa piernaIzq
○ Muslo izquierdo
○ Pierna izquierda
7. Capa fondo
○ Fondo
(Volver al punto 18, no hagas caso si aún no lo has leído)
En este orden tienen que estar colocadas las 7 capas que crearemos, en las cuales pondremos cada
parte del maniquí. Esta disposición se corresponde con el maniquí mirando hacia nuestra derecha >>>>.
Abrimos Flash MX 2004, con un archivo en blanco y empezamos el paso a paso.
1.- Lo primero, crear las capas, para lo cual utilizaremos el botón nueva capa. Le ponemos el nombre
correspondiente, y repetimos la operación hasta tenerlas todas, copia de la ilustración:
16.- Vista de las capas
2.- A dibujar, con la herramienta rectángulo seleccionada , dibujamos uno en la capa fondo. con un
relleno gris #999999 y sin contorno:
8.- Los dos muslos los crearemos duplicando un brazo, y después de separarlo (como en el punto 6) les
pondremos respectivamente los nombres y los colores musloDer, color #CCCCCC; musloIzq, color
#666666. En cuanto a las medidas, serán de 27 por 69.
9.- Las medidas serán de 18 por 64 de las pantorrillas (piernas). piernaDer y color #CCCCCC para la
derecha y piernaIzq, color #666666 para la izquierda. Utilizaremos también un óvalo.
10.- Para los pies, seguiremos con los colores correspondientes a cada extremidad, y lo realizaremos con
un óvalo de 34 por 13. Los llamaremos pieDer y pieIzq para los nombres de clip.
11.- Las medidas para los antebrazos serán de 17 por 67. Dos óvalos pero con un círculo en el extremo
inferior de 18 X 18 que simulará la mano.
21.- Símbolo del antebrazo izquierdo del maniquí, que incluye un óvalo y un círculo en el extremo inferior.
12.- Las medidas para los pies son 33 por 13, utilizando el óvalo. Desde el menú ver seleccionamos la
opción reglas. Con la ayuda de una línea guía que pondremos en el escenario pulsando sobre la regla y
arrastrando al escenario hasta la parte interior del pie. Después con la flecha de selección, trazamos
un rectángulo para seleccionar la zona inferior y eliminarla (ver ilustración). Sus nombres pieDer, y
pieIzq.
22.- Pie con la región inferior seleccionada con la ayuda de una línea guía.
14.- Ahora vamos a distribuir las diferentes partes del maniquí en capas. Así podremos aislar una zona
concreta del cuerpo para estudiar su movimiento, y podremos mover a nuestro antojo todos los
símbolos. Pero antes... guardamos el archivo como tuto_Animacion_Cristalab.fla
15.- Bueno, tenemos que hacer que las articulaciones del cuerpo sean parecidas en cuanto al
movimiento. Así que desplazaremos uno a uno todos los símbolos de forma que el punto de registro
quede en la zona de la articulación. Explicaremos la cabeza.
16.- Hacemos doble click sobre el mc cabeza y estaremos en el modo edición de símbolo en contexto. el
punto de registro se halla situado en el centro. Pensemos... La cabeza, tal como hemos construido
nuestro maniquí, solo podrá realizar los movimientos de flexión y extensión, que traducido en Flash
sería rotación + ó -. Así que con la ayuda del teclado, usando la flecha arriba, desplazamos la cabeza
hacia arriba hasta que quede así:
24.- Punto de registro de la cabeza en la parte inferior.
17.- Claro, los brazos pueden rotar desde el hombro, los antebrazos desde el codo. El cuerpo también lo
haremos flexionar desde su base. Los muslos desde la región de la cadera, y las piernas en la
articulación de las rodillas. Los pies, en el tercio posterior, en lo que sería la articulación
tibioperoneaastragalina. Véase:
18.- Distribuimos por fin, con la ayuda de los comandos cortar y pegar cada mc en su sitio, según dijimos
en la descripción (aquí).
19.- Lo organizamos de manera que parezca un maniquí formado, entrecruzando un poco las
articulaciones. Si pulsas CONTROL+T aparecerá el panel transformar, el cual te será útil para rotar las
articulaciones en ángulos de 15, 30, 60, 90 con el signo - (menos) para flexionar, o en positivo para
extender las articulaciones.
20.- Para el fondo, en principio, bastará con dibujar una línea negra, de 1 de grosor justo debajo de los
pies del maniquí.
26.- Maniquí acabado, listo para moverse.
No sería mal momento para volver a guardar los cambios con la combinación de teclas
CONTROL+S
Para realizar esta animación, simplemente se insertan fotogramas clave. Después se cambias las
propiedades de rotación, anchura y altura y posición respectivamente desde el panel transformaciones,
para que automáticamente, desde el panel de propiedades podamos efectuar una interpolación de
movimientos intermedios.
28.- Fotogramas con interpolación de movimiento. Los puntos negros son los fotogramas clave.
Si queremos un movimiento preciso, podemos utilizar interpolación con líneas guía. No explicaré como
se usan las líneas guía porque llevo una barba de tres días, pero diré que son de gran utilidad cuando
necesitamos trazar trayectos con diversas curvas, por ejemplo el vuelo de algún ave o insecto.
Por otra parte, la animación fotograma a fotograma. en nuestro ejercicio del maniquí, ya que en un
cuerpo (o engendro, como nuestro maniquí) cuando le flexionamos la cadera, la rodilla y el pie
acompañan en la flexión. Así que no toca más remedio que desplazar las partes del maniquí, aparte de
efectuar sobre ellas alguna rotación, por que con una interpolación no obtendríamos el resultado
deseado, y con un trayecto de línea guía es mucho más costoso cuando se puede realizar mediante la
técnica imagen a imagen con papel de cebolla.
Flash no es 3D (menos mal), así que hay que olvidarse de la coordenada z. El único 3D posible con
dibujos es el simulado. Si nuestro personaje gira, tendremos que dibujar los cambios de ángulo de visión
del personaje, teniendo en cuenta la perspectiva. Para ello no nos toca más remedio que dibujar a
"mano alzada" cada uno de los fotogramas. Aunque como ya existe esta previsión, Flash nos proporciona
una herramienta de calidad llamada papel de cebolla.
En nuestro ejercicio, no tendremos que dibujar cada fotograma, ya que se trata de un maniquí y lo
único que haremos será cambiar de posición y/o ángulo cada una de sus partes.
¿Qué es el papel de cebolla?
Por suerte, mi madre es modista. Y de pequeño de dejaba jugar con el papel de cebolla. Calcar los
dibujos de Mazinger-Z era genial (lo que más me gustaba era aquello de ¡pechos fuera! Pero no se trata
de copiar, ni mucho menos de pechos, si no de ver a través de él gracias a su transparencia.
La idea es que dibujamos la posición inicial del personaje, después en otro fotograma, la final. Si
pulsamos en el icono papel de cebolla, veremos todos los fotogramas intermedios cuando estén
dibujados.
29.- Ejemplo de un maniquí con el papel de cebolla activado, mostrando la sucesión de fotogramas que va por delante.
El papel de cebolla de Flash no se vende en las librerías, así que se puede usar cómodamente cuando
necesitemos:
1. Ver la posición inicial y la final.
2. Dibujar o desplazar los mc's a posiciones intermedias.
3. Comprobar la sincronización de los movimientos.
4. Comprobar las distancias equidistantes entre dibujos de distintos fotogramas.
En la captura anterior (Figura 29) se puede apreciar las distancias de la cabeza entre fotogramas, y de
esta forma corregir su posición.
Yo ando
Volvemos a centrarnos en la animación de nuestro maniquí, que a partir de ahora lo llamaré MNQ. Esta
animación realizará un ciclo completo, es decir un paso. Si repetimos la animación (loop) parecerá que
este caminando.
1.- Colocamos el MNQ con la pierna izquierda avanzada y la otra atrasada:
-Como el tercer dibujo empezando por la izquierda de la Figura 2. Los pies también se tienen que girar.
2.- ¿Que cómo? Pues puedes usar el panel transformar (CONTROL+T) o con la herramienta
transformación libre (Q). Tienes que trabajar a ojo, ya que considero inúltil poner los grados y los
desplazamientos _x e _y debido a que no te crean ninguna imagen mental de la posición que queremos
conseguir. Mirar la siguiente ilustración:
3.- Insertaremos un fotograma clave en el número 22. Podemos crear el fotograma 22 seleccionando y
usando el botón derecho del mouse:
31.- Ejemplo de como se inserta un fotograma clave en el fotograma 8 usando el menú contextual, pero nosotros lo
insertaremos en el 22.
4.- Pulsamos en el papel cebolla y arrastramos los controladores al primero y al último fotograma:
32.- Controladores del papel de cebolla de 8 fotogramas (inicial, final)
6.- Vamos a insertar los fotogramas clave a medida que vayamos cambiando la posición del maniquí.
Hubiésemos podido insertar directamente todos los fotogramas clave, como algunos estarán pensando.
Pero de esta forma, primero se podría valorar si existe algún objeto que se pueda interpolar, y
aprovecharíamos el primer y el último fotograma claves para realizar la interpolación.
Como dudo mucho que con un MNQ se puedan lograr buenos resultados, pues lo trabajaremos
manualmente. También si tenemos una posición inicial y otra final, podemos hacernos una idea de los
pasos intermedios (ver Figura 33). Además, cuando insertemos un fotograma clave, éste poseerá el
contenido del fotograma anterior, y así podremos seguir moviendo donde lo dejamos, pues que si
insertáramos todos los fotogramas clave de golpe, tendríamos que empezar a mover el MNQ desde su
posición en el primer fotograma. En nuestro caso, crearemos un ciclo completo que empieza y acaba
igual (un paso tras otro).
33.- Imagen de un maniquí "karateka" con dos posturas inicial y final en dos fotogramas clave, con el papel de cebolla
activado.
7.- Cuantos fotogramas necesitamos para que un MNQ pase de una posición a otra depende del tiempo
que le cueste, de la complejidad del movimiento. Me explico, si me levanto y doy un paso, ¿cuanto
tiempo me cuesta? Pues... a ver un momento... Ya está más o menos 1 segundo. Entonces si la película
va a 24F por segundo, necesito 24 fotogramas para realizar un paso (adelante, atrás). (Claro que
depende de lo rápido o lento que queramos que camine el personaje) En nuestro ejercicio le costará dar
un paso 22 fotogramas, o sea 22/24=0,9 décimas de segundo. Lo que significa que cada segundo dará
aproximadamente 1 paso.
8.- Ahora, con la ayuda del ( . ) y de la ( , ) y del mouse tendrás que ir seleccionando cada parte del
maniquí y moviéndolo para conseguir todas las posiciones intermedias entre el 1º y el 22º fotograma,
insertando cada 3 fotogramas 1 clave, con lo cual tendrás que hacer siete posiciones diferentes
completar el ciclo. Si quieres, puedes poner las posiciones intermedias para cada uno de los fotogramas
añadiendo fotogramas clave, pero, no es necesario para este ejercicio.
9.- Puedes guiarte de la Figura 2 para las posiciones de los pasos intermedios, así lo he hecho yo. Este es
el resultado (vale, vale, ya se que me hubiese podido quedar mejor!):
34.- Animación del maniquí con un fondo que se desplaza.
Para aquellos que no tienen imaginacion y desean tener una buena animacion del pato lucas o
de lo que sea, lean este articulo.
Mucha gente, y lo veo todo el tiempo, cuando tiene que poner algun personaje en su pagina,
hace lo siguiente... buscador... imagenes... ej: astroboy ....3 o 4 fotos elejimos y punto. Pero
que pasa cuando la foto no es del tamañao deseado o simplemente cuando tiene una
resolucion mas pedorra que ninguna...ponemos eso ?? porque no probar de dibujarla ? pero yo
no puedo dibujar ni la tipica casita de campo ? Bueno lo que tenemos que hacer es lo
siguiente...
3 - Asi como aparece la centramos y en la parte de capas (en la linea de tiempo) apretamos el
candadito para ke no se nos mueva....y nombramos esa capa como "original".
4 - Agregamos una capa mas le ponemos el nombre de "dibujo" y la situamos arriba de la capa
"original" (esto lo podemos hacer arrastando la capa de "dibujo" hacia arriba) Todo esto nos
tendria ke quedar asi...
Bueno, despues vamos y elejimos la opcion lapiz con la opcion de suavizar (sino caza una
ver la opcion de trazos en esta misma pagina).
Lo que primero vamos a hacer es hacer el contorno de todo el dibujo, por adentro tambien
hacemos lo mismo ...osea que nos quede todo el dibujo en lineas.
Remendaciones
Como nuestro pulso no es el distinguido, lo que podemos hacer es usar la herramienta de
linea , realizamos una recta haciendo coincidir los extremos de la linea con los extremos
de la curva, y posicionamos el mouse en la mitad de la linea y vamos a ver ke el puntero se
convierte pudiendo asi mover esa linea en forma de curva.
Cuando trazes la lineas del dibujo recorda trazar tambien sombras e iluminaciones
importantes, porque una vez ke borres el dibujo de fondo es mas dificil pintarlas.
Numero 1: Vemos como quedaron las lineas sobre la foto o dibujo.
Numero 4: En esta parte tendremos ke tener en cuenta el tema de las sombras y brillo, para
hacer que el dibujo sea lo mas real posible (ver Caricaturas con Flash: Sombreado, en esta
misma pagina)
Numero 5: Lo mejor de todo esto es que vamos a poder hacer miles de cosas con nuestro
"astroboy" en el ejemplo lo que hice fue quitarle todas las lineas asi me queda como un dibujo
en 3d (o algo similar) y agregarle una sombra por detras. Pero no te quedes con esta idea
sola, ya que esto te permitirá hacer muchisimas cosas mas a tu libre imaginación, como
sacarles las lineas del contorno, agrandar la imagen o achicarla (siempre que selecciones la
imagen y la conviertas en grafico) cambiarle los colores y muchas cosillas mas !!!!
2. Dibujo en Flash.
2.1 Personajes.
Voy a tratar de explicar un planteamiento lo mas completo y correcto posible para crear personajes
sólidos y “animables”.
Model sheets:
Son las llamadas hojas de personaje, en ellas se dibuja al personaje en varias vistas; frontal, lateral, en
¾ y de espaldas, pudiendo añadir hojas de referencia adicionales con detalles de las manos,
complementos de la ropa, expresiones de la cara y poses variadas “for inspiration only”. Estas hojas
sirven para que, en el caso de que el trabajo se haga entre varias personas, todos los artistas dibujen al
personaje de la misma manera, con las mismas proporciones, estilo, etc… Para el trabajo individual son
necesarias también, para tener clara la construcción de nuestro personaje y respetar siempre las
proporciones. Aquí os dejo un ejemplo de model sheet:
No voy a hacer de esto un tutorial de dibujo tradicional, hay muchos circulando por la red, quizás otro
día, pero por ahora vamos a usar flash.
Clean up:
Más conocido como “pasar a limpio el dibujo”, en animación tradicional (lápiz y papel) el proceso de
clean up se hace con la ayuda de la mesa de luz (o mesa de animación) aquí tenéis una foto:
Es recomendable construirse una, yo recurro a ella a veces cuando no tengo claro el movimiento en el
PC, pero no es obligatorio tenerla. (Por cierto si decidis construir una, recomiendo que en lugar de
redonda, la hagais cuadrada)
El proceso de Clean up en flash es tan fácil como importar el dibujo de tu personaje previamente
escaneado, a una capa, esto puedes hacerlo presionando Ctrl.+ R o mediante el menú Archivo/importar.
Una vez tengamos el dibujo en una capa, la bloquearemos para evitar que se mueva y crearemos un par
de capas más por encima de la capa que contiene el dibujo (iremos creando mas capas según las
necesitemos). El objetivo es vectorizar nuestro personaje y darle el aspecto definitivo que mantendrá
durante la animación, esto lo podríamos hacer con ratón… pero es más rápido usar nuestra nueva y
flamante tableta Wacom . así que activaremos las siguientes opciones:
Esto sirve para que Flash detecte la presión de la punta del lápiz sobre la tableta, cuanto mas
presionemos la punta, el grosor del trazo será mayor, esto es una gran ventaja a la hora de hacer líneas
como estas:
Descomposición de la criatura:
Vamos a ir dibujando nuestro personaje por piezas, empezaremos por la cabeza por ejemplo, tenemos
que pensar que partes de la cabeza van a ser móviles, lo lógico es que estas sean los ojos, las cejas y la
boca, cierto? Ok, ¿y que partes de los ojos se mueven? Las pupilas y los parpados, por lo tanto todos
estos elementos deben ir separados, no deben pertenecer al mismo dibujo, así que crearemos símbolos
con cada uno de estos elementos que vayamos dibujando, tal y como vemos aquí:
Este mismo proceso lo seguiremos con todas las partes del cuerpo, el esquema de la descomposición
suele ser este:
• Cabeza: ojos (globo ocular, pupilas y parpados) cejas, boca, pelo
• Cuello (en caso de tenerlo)
• Tronco (puedes dividirlo en dos, pecho y cintura, si lo crees conveniente)
• Brazos
• Manos
• Piernas
• Pies
Es importante que tengamos cuidado con el despiece del personaje para que no se aprecien demasiado
los miembros cercenados. Si a la hora de hacer una pose determinada, los cortes se notan demasiado,
será mejor dibujar esa pose entera o dibujar otras “piezas” que encajen mejor, en esto punto tenéis
que demostrar un poco vuestro ingenio.
En esta escena podéis comprobar el troceo del personaje y el modo en el que sustituimos las bocas.
Preparación de la biblioteca:
Bien ya tenemos una pose neutra de nuestro personaje hecho “pedazos”, ahora dedicaremos un poco de
tiempo a planificar.
Tenemos nuestro storyboard, compuesto de varias escenas. La idea es la misma que se emplea en el
cine de verdad, vamos a trabajar cada escena independientemente de las demás, así que observemos
nuestro story y seleccionemos una escena, no demasiado complicada ni larga (se supone que será la
primera vez que animemos en flash, así que mejor empezar por lo fácil).
Seguidamente analizaremos la escena y los elementos que intervendrán en ella, centrando nuestra
atención en el personaje. ¿Girara la cabeza? ¿pestañeara? ¿Doblara un brazo? ¿Señalara con el dedo?
¿Sonreirá?... Pues es el momento de dibujar TODO lo que nos haga falta, cabezas giradas, poses de
manos, brazos y piernas dobladas a diferentes ángulos, bocas sonrientes, tristes, cejas de furia, de
asombro… todo ello convertido en símbolos, que pasaran a engrosar nuestra biblioteca.
Seguro que estáis muy felices por tener que realizar tanto trabajo :D, yo también.
Muy importante también, es tener ordenada la biblioteca, por lo tanto usaremos carpetas y
clasificaremos los símbolos, manos, brazos, cabezas… todo organizado y disponible para su uso en
cualquier momento!
Se que esta parte del trabajo es muy dura, pero pensad que una vez realizado este trabajo, nos
ahorraremos mucho tiempo a la hora de animar ya que no tendremos que pararnos a dibujar y
realizaremos las animaciones prácticamente de seguido.
Como veis podemos organizar las carpetas como queramos, yo lo utilizo así, pero cada uno que se
busque la manera más práctica.
Clean up:
Es exactamente el mismo proceso que hemos llevado acabo con el personaje, escanearemos nuestro
fondo y en las capas superiores procederemos a darle el aspecto definitivo, aunque esta vez podremos
ser mas detallistas pues en general el fondo carece de movimiento.
3. Animación en Flash.
Flash se ha convertido en una gran herramienta para los animadores. Puede utilizarse flash para animar
dibujos, recortes de foto, plastilina…para realizar animaciones experimentales mezclando todo tipo de
técnicas, así que mi sugerencia es que veamos a Flash como una herramienta de animación, en la que
tenemos libertad, no estamos obligados a hacer las llamadas “animaciones tipo Flash” que ahora
abundan en múltiples webs, me refiero a aquellas animaciones de personajes horribles, con una
animación… (si se le puede llamar animación) limitadísima. Se puede hacer eso, nadie lo prohíbe, de
hecho cuando estamos aprendiendo podemos hacerlo, pero no os dejéis arrastrar por la moda de hacer
las cosas con poco esfuerzo y dudoso humor. Una vez dicho esto, paso a exponeros las tecnicas de
animación mas utilizadas.
Animación limitada:
Bien, aquí tenemos un referente muy claro: Hanna-Barbera, los reyes de la animación limitada,
recomendaría que vierais un episodio de Los Picapiedras porque os daréis cuenta enseguida de lo que
hablo. En este tipo de animación, apreciamos que el personaje realiza las acciones con los movimientos
justos, si tiene que hablar, hablara, pero su cuerpo permanecerá estático, o moverá un brazo, o los
ojos, pero lo justo para realizar las acciones. Además de limitar la animación, este tipo de series de
animación reutilizaban muchas animaciones para los siguientes episodios, así que se podría decir que
muchos de ellos eran un “cortar” y “pegar”, así conseguían una gran velocidad de producción para
atender la demanda televisiva. Este tipo de animación es la mas utilizada en flash, y la que vamos a
explicar en este tutorial.
Full animation:
Como referente, no podía ser de otra forma, los largometrajes de Disney. En estas producciones el
objetivo primordial es mimar mucho la animación, cada detalle, el vuelo de la ropa, el movimiento del
pelo, la respiración… Full animation es la animación más trabajada, donde cada movimiento es realizado
con todo lujo de detalles y normalmente a 24fotogramas por segundo.
Rotoscopia:
No es exactamente una modalidad, sino un recurso más para ayudar a los animadores, la rotoscopia
consiste en “calcar” los movimientos grabados de personas reales. Con flash esto es muy fácil de
conseguir y dotamos a nuestra obra un ápice de espectacularidad, difícil de conseguir sino somos
grandes animadores. Simplemente tenemos que importar un video en la capa inferior y trabajarlo como
deseemos en las capas superiores. La rotoscopia puede verse en algunos momentos de películas como
Titan AE o Anastasia.
Nota: el ejemplo se encuentra en BRYAN.fla, Escenas: “corre” y “trae caja (2) rough
caja+bryan”.
Esa es la base del trabajo, debemos emplear un tiempo en hacer que esta animación en sucio se parezca
al movimiento que hemos pensado, si la animación en sucio falla, seguro que la animación es un fiasco
(aunque en flash es mas fácil arreglar los errores que dibujando en papel).
Dibujos clave:
Para hacer la animación en sucio tenemos que tener en cuenta sobre todo las poses o dibujos clave de
cada movimiento, para esto hay que tener algo de formación en el tema pero también es aplicar un
poco de lógica: por ejemplo, imaginemos que nuestro personaje tiene que lanzar una piedra, las poses
clave serían:
1. El personaje en la posición inicial (reposo)
2. El personaje con el brazo atrás cogiendo impulso para lanzar la piedra.
3. El personaje con el brazo estirado hacia delante en el momento del lanzamiento.
Como veis son poses “extremas” de un movimiento, en los ciclos de andar o correr hay mas poses clave,
que coinciden con el momento en que un pie toca el suelo, cuando se impulsa con el pie para subir la
otra pierna, el movimiento de los brazos etc…
Intercalaciones:
Son los dibujos que hacemos entre cada pose clave, son los que otorgan continuidad y fluidez al
movimiento. El sistema es hacer primero los dibujos clave y después meter intercalaciones para que el
movimiento funcione.
Seguidamente organizaremos la línea de tiempo de forma que la animación en sucio quede por debajo
de las capas a las que arrastraremos los miembros cercenados (jeje) del personaje. Usaremos tantas
capas como haga falta e intentaremos no mezclar en una capa una pierna con una cabeza y cosas así,
mas que nada por organización.
Take:
Un “take” es la reacción de un personaje hacia una circunstancia que le afecta, puede ser una sorpresa,
una idea, un susto… Puede estar contento y después del take cambiar su estado de ánimo y estar
asustado… En el archivo .fla he incluido una escena llamada “take” en la que podemos ver el pequeño
bote con el que el personaje cambia de expresión, este bote puede ser tan exagerado o tan sutil como
se necesite, según el estilo de la animación, de esta manera no será lo mismo un take de estilo
“cartoon” a un take de anime, mucho más sutil…
En la animación del ejemplo, podemos ver un take muy normalito, nada estridente pero evidentemente
de estilo cartoon. Bryan se encoje en un primer momento, para anticipar el bote, seguidamente se
estira hacia arriba, para luego volver a aplastarse un poco y por ultimo recuperar su forma original.
Sencillo ¿verdad?.
Ciclos de movimiento:
Un tipo andando, el vuelo de un pajaro, el galope de un caballo… son ejemplos de situaciones en las que
podemos crear un movimiento ciclico, es decir que se repite continuamente. Este podria ser un esquema
de un ciclo cualquiera, simplemente se desarrolla el movimiento y el ultimo dibujo debe ser un
intermedio entre la ultima pose clave y la primera. Asi pues tendremos por ejemplo un tipo corriendo en
la pantalla, todo el tiempo que lo necesitemos.
Flash - Animación
Por animación entendermos que los objetos que aparecen en la pantalla cambien de
posición, tamaño, aspecto, color, que giren, se deformen, etc...
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.
Consideraciones
Se llaman Fotogramas Clave a los que contienen cambios en la forma o posición del
objeto
Para que un objeto se muestre en pantalla en un fotograma determinado, debe crearse
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
Animaciones 3D en Flash
Swift 3D es una de las herramientas Flash más fácil y potente para realizar gráficos 3D,
es de gran ayuda para los diseñadores y desarrolladores web.
La aplicacion Swift 3D es una excelente herramienta para incluir contenidos 3D dentro
de flash. A continuación conoceremos esta aplicación.
La Interfaz
•
• Estos permiten crear un documento nuevo, abrir uno ya existente o
grabar el documento activo.
•
• Estos se utilizan para la creación de texto y de los distintos objetos.
•
• Los siguientes iconos permiten insertar diferentes puntos de luz.
•
• Estas herramientas permiten crear dos tipos diferentes de cámaras,
la cámara libre y la cámara con un objetivo.
•
• Para convertir el texto a curvas.
•
• Este botón se utiliza para cambiar el tamaño de los objetos.
•
• Estos permiten controlar ciertos aspectos de las cámaras como abrir
una ventana o mover toda la escena.
•
• Herramienta que se utiliza para realizar zoom.
•
• Estos se utilizan para renderizar una parte o todo el escenario para
ver de esta manera el resultado final.
•
• Botón que se utiliza para realizar una animación.
1. El menú de propiedades: donde aparece una lista de las
propiedades que se aplican a los objetos y al escenario.
2. La línea temporal de la animación: similar a la de Flash, utilizada
para que tengan movimiento los objetos.
3. El escenario: donde se pueden ver diferentes vistas de la imagen.
4. La esfera de rotación: que nos va a permitir ajustar la rotación de
los objetos en el escenario.
5. La esfera de iluminación: que nos permitir controlar la ubicación y
el tipo de luces.
6. La paleta de colores y materiales donde se encuentran tres tipos
de herramientas, los materiales, el entorno y las animaciones.
Los paneles se pueden arrastrar y así cambiarlos de posición. También podemos ampliar
o disminuir el espacio que ocupa cada panel.
La Iluminación del escenario y de los objetos: Disponemos de dos tipos de luces, por
un lado, los puntos de luz que iluminan todo el escenario al igual que las bombitas de
luz y por el otro las luces puntuales que iluminan solamente un área.
Puntos de luz: Mediante este icono podemos crear un punto de luz. Mediante este
otro lo que hacemos es seleccionar un objetivo donde queremos que la luz incida,
pudiendo modificar el punto de partida como el objetivo.
agranda y si nos alejamos lo achicamos. También podemos usar este icono para
realizar lo mismo.
Agrupaciones: Para trabajar con un conjunto de objetos podemos realizar
agrupaciones. Para esto debemos seleccionar los objetos manteniendo pulsada la tecla
"mayúscula" y seleccionar la opción del menú "Arrange" y luego "Group".
La esfera de rotación: Mediante los iconos que se encuentran a la izquierda de la
esfera, podemos indicar el sentido en que queremos mover el objeto, ya sea en sentido
Para realizar una animación en una escena se debe pulsar el botón . La línea de
tiempo esta dividida en fotogramas. Podemos crear una película modificando cada
fotograma o determinar el fotograma de inicio y el final para que Swift 3D realice las
animaciones intermedias. Un fotograma clave representa un punto en la animación en el
que realizamos una modificación.
La forma más sencilla de introducir un movimiento es tener el objeto en un fotograma y
luego posicionarse en otro para realizar una modificación, como por ejemplo una
rotación. De esta manera Swift 3D genera una interpolación de movimiento o animación
intermedia. Cuando los fotogramas aparecen en color verde significa que el objeto esta
en movimiento y cuando aparecen en rojo significa lo contrario.
Cada objeto que se encuentra en el escenario posee su propia línea de tiempo. También
se puede incluir movimiento a las cámaras o a las luces.
Propiedades: Las propiedades que pueden modificarse en el objeto son la posición, la
rotación (el cambio lo hacemos desde el panel de rotación) y la escala.
aventura en Flash, “el movimiento de un objeto” (esto puede ser cualquier cosa que tengamos sobre el
escenario), una bola, un mono, un auto, una imagen lo que sea. Verán una diagonal cada vez que ponga
una palabra en ingles/español.
Tenemos dos clases de movimiento las cuales llamaremos cuadro a cuadro / frame to frame, e
interpolación de movimiento / motion tween.
Empecemos por la animación cuadro a cuadro:
Este tipo de animación todos la conocemos, es mas o menos como se realizan las caricaturas o dibujos
animados, ya ven que para esto realizan un dibujo, y después realizan el mismo dibujo pero un poco
diferente, y así sucesivamente, después los hacen pasar todos muy rápido, y esto nos da una sensación
de movimiento, bueno pues esto es lo que se hace en flash para hacer una animación cuadro a cuadro,
solo que aquí no tenemos que volver a dibujar la misma imagen varias veces, si no, que podemos
trabajar con la misma, solo que la iremos modificando poco a poco.
Veamos un ejemplo:
Abran un archivo nuevo en flash, ahora dibujemos un circulo, como se muestra en la imagen, utilizando
la herramienta de ovalo (muestro las herramientas en el tutorial de Flash por partes),
A continuación nos dirigimos a la línea de tiempo, e insertamos otro fotograma clave / key frame aparte
del que ya esta (ya saben, puede ser con F6, o clic derecho, new key frame), entonces tenemos dos key
frames en la línea de tiempo, el primero es donde tenemos la bola como aparecerá inicialmente, ahora
damos clic en el segundo frame de modo que quede seleccionado, nos dirigimos a la bola, y la movemos
un poco a la derecha, vamos a la línea de tiempo e insertamos otro fotograma clave, y movemos otro
poco la bola a la derecha, así repetimos esta acción como unas diez veces, hasta que nuestra bola
quede del otro del escenario.
Ahora si, tenemos nuestro primer movimiento cuadro a cuadro, a continuación lo que tienes que hacer
es presionar y mantener presionada la tecla Control y presionar enseguida Enter (sin soltar control hasta
que ayas presionado enter) para ver tu película en acción, la película va a realizar un ciclo, esto es que
tu animación se va a estar repitiendo y repitiendo sin fin, después de ver tu animación, puedes
presionar control + W para terminarla, o dar clic en la cruz superior de la derecha (hay dos cruces, es la
de abajo).
Espero que te aya funcionado, si tienes alguna duda, no dudes en hacérmela llegar, yo te responderé lo
mas rápido que pueda.
Esto es porque la bola lleva relleno y línea en la orilla, y si solo le damos un clic puede ser que solo
seleccionemos uno de los dos.
Bueno, ya que tenemos la bola seleccionada, vamos existen dos maneras de convertirla en símbolo, la
primera es ir al menú en la parte de arriba, en la sección de Insertar / Insert , escoges la opción de
Convertir en símbolo / convert to symbol, y la segunda forma es la mas fácil, solamente después de que
tenemos el objeto seleccionado tenemos que presionar F8 y listo, automáticamente después de
cualquier de las dos formas pasadas veremos esta ventana:
Aquí es donde le daremos el nombre a nuestro símbolo, en la parte donde dice “Name”, colocaremos el
nombre que le deseamos dar a nuestro símbolo, que este caso será “bola”, dejamos el “Behavior” como
esta, en Movie Clip (de esto dependen las propiedades que va a tener nuestro símbolo, pero eso lo
veremos mas adelante), “Registration” también lo dejamos como esta, ya que este caso no lo vamos a
utilizar, el Registration es como si le pusieras un clavo a tu símbolo, y al momento que quieres
modificarlo a escala (el tamaño), es hacia donde va a crecer, crecerá al lado contrario de donde le
pones el clavo. Muy bien, ahora después de ponerle el nombre demos clic en OK, y nuestra pelota se
verá así:
Nota: Al momento que tu has creado tu símbolo o movie clip, pasa algo que te ayuda de mucho,
automáticamente este se agrega a tu librería. ¿Y que es la librería?, pues la librería es una parte de
flash, en donde se van guardando todos los símbolos que tu utilizas en la película, de modo, que si
necesitas otra pelota, no tengas que volver a dibujarla, si no, solamente tienes que insertarla desde la
librería, talvez con la pelota no te parece tan maravilloso, pero que tal si tienes un auto con el cual te
tardaste 3 horas dibujándolo, y ahora solo es cuestión de insertarlo de nuevo, pero esto no es todo,
además, puedes importar librerías que hiciste en otras películas, lo ves, eso es un auxilio muy grande,
pero bueno, lo entenderás mejor cuando empieces a trabajarlo. Y por ultimo, para ver la librería, el
acceso rápido es presionando (Control + L).
Muy bien, ahora que ya tenemos nuestro símbolo, vamos a ver la interpolación de movimiento / motion
tween:
En este momento tenemos nuestra línea de tiempo de esta manera:
A continuación vamos a dar clic derecho en el frame / fotograma numero 40 de nuestra línea de tiempo,
y en el menú contextual que sale, vamos a dar clic en la opción de “insert frame / insertar fotograma”,
y nuestra línea de tiempo lucirá así:
Dirigimos el puntero del ratón al primer frame / fotograma, y damos un clic derecho sobre el, en el
menú contextual que emerge seleccionaremos la opción de “create motion tween / crear interpolación
de movimiento” y la línea del tiempo se rellenara con una línea punteada así:
Ahora ya tenemos nuestra interpolación de movimiento, ya solo tenemos que indicar una cosa, “el
movimiento”, y esto se hace de la siguiente manera:
Demos un clic en el frame / fotograma numero 40, de modo que quede seleccionado (esto lo sabemos
porque queda sombreado, de color negro).
Ahora nos dirigimos al escenario / stage, y tomamos la bola con el puntero del ratón, la arrastramos
hasta el otro extremo del escenario / stage, que quede de esta forma:
Como pueden ver en la línea de tiempo se creó una flecha desde el frame / fotograma numero uno,
hasta el numero 40, me supongo que ustedes ya lo habían visto verdad??, bueno, pues esta flecha indica
interpolación de movimiento, pero en si ¿que es lo que ocurre con esto?, pues solamente hacemos que
flash trabaje por nosotros, lo que pasa con la interpolación de movimiento es que nosotros solamente
indicamos el principio y el fin de nuestro símbolo, y FLASH CREA TODOS LOS FRAMES / FOTOGRAMAS
INTERMEDIOS, muy bien, para entendernos mejor, ¿por que no dejamos de una vez que corra nuestra
película?, vamos, presionemos (Control + Enter) para ver que pasa.
¿Lo lograste?, wow, que bien verdad, pues como ves, espero que ahora me entiendas mejor, cuando me
refiero a que flash crea automáticamente los frames intermedios. Una ultima cosa, colócate en frame
20 y arrastra la pelota un poco hacia abajo, veras que se crea otro punto negro (key frame / fotograma
clave) en la línea de tiempo, y ahora son dos flechas, muy bien, corre la película para que veas que es
lo que pasa. Sigue experimentando con estos movimientos todo lo que quieras, verás que solo depende
de ti y tus ideas para darles un buen uso.
................QUHO................