Tutorial de Animación y Expresión de Personajes en Flash

Tutorial de animación y expresión de personajes en Flash || Cristalab
Cristalab > Tutoriales > Tutorial de animación y expresión de personajes en Flash
Tutorial de animación y expresión de personajes en Flash

Autor: Sisco | Otros tutoriales de Sisco | 2 de Octubre del 2004
Este tutorial lo he dividido en tres partes:
1.-Teoría del movimiento y de los gestos
- Articulaciones humanas, caminar, el lenguaje de los gestos y el rostro.
2.- Creación de un maniquí como maqueta
- Paso a paso para construir un maniquí como boceto para crear animaciones. Sisco
3.-Animación del maniquí Mensajes: 886

Tutoriales: 4
Ejemplos(.FLA): 0
-El guión y el guión gráfico.
Archivos del tutorial
¿Preguntas de este tutorial?
-El maniquí camina.
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 Botón con fade-in y fade-out animado
Interpolación de movimiento y guias en Flash
Física en Flash: Rebote y movimiento de
1.- Teoría del movimiento y de los gestos cuerpo rígido
Tutorial de movimiento de objetos en Flash
(motion tweening)
Yo me parto... Movimiento de una bandera dinámicamente
por ActionScript
Detección de colisiones y movimiento en
Animar un cuerpo humano es de las acciones más complejas que se pueden llevar a cabo en un
ActionScript
proyecto de animación. Es decir que si no tienes paciencia, más vale que olvides este tema,
http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (1 de 29)19/10/2005 10:18:22 a.m.
dedícate a otra cosa... Pero si has dedicido animar y quieres seguir leyendo, pues empezamos por repasar un poco la anatomía del cuerpo
humano.
El cuerpo humano está constituido por huesos y músculos en su aparato locomotor, que es el que nos interesa para nuestro propósito. Para que
un cuerpo se mueva, se necesita de la fuerza de un grupo muscular flexible y de un conjunto de huesos rígidos que los sostengan. Pero, lo más
importante de todo son las articulaciones, ya que es ahí donde se producen los movimientos, veamos:
1.- Principales articulaciones del esqueleto humano
● 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:
2.- Progresión del acto de caminar erguido (un paso)
(Volver a "Yo ando", no hagas caso si aún no lo has leído)
1. El miembro inferior izquierdo (según imagen) propulsa el cuerpo hacia delante.

2. La otra extremidad, librada del peso del cuerpo, lleva el pie hacia delante.
3. El peso del cuerpo pasa a la extremidad derecha y vuelta a empezar.
4. Con estos movimientos el cuerpo sube y baja ligeramente.
5. Pues nada que me voy a sentar ya, que tanto caminar cansa...
Ahora vamos a adentrarnos en el mundo sutil de los gestos, lo insignificante hace que una animación parezca verosímil, y le indica al
espectador, con pequeños detalles, a veces inconscientes, las emociones y pensamientos del personaje.

El cuerpo humano es genial, ya que no veréis a dos personas caminando igual. Eso quiere decir que según la constitución de una persona, sus
caminares serán diferentes. También habrá que tener en cuenta el estado de ánimo del personaje cuando montemos una animación. Lo mismo
ocurre con correr, es bastante diferente que caminar, puesto que aparte de exagerar las flexiones hay que añadir saltos a cada zancada.
Breve introducción a los gestos: mensajes subliminares

Nuestro cuerpo refleja nuestros pensamientos y emociones de forma inconsciente. Las expresiones faciales son un libro abierto a nuestras
emociones. Las posiciones que adoptamos con nuestro cuerpo reflejan que pensamos, o que actitud tenemos con respecto a la situación
concreta en la que nos hallemos. Ciertos gestos son propios de una cultura. Los indúes mueven la cabeza diciendo no para decir que sí. Si
alguien va de viaje y pregunta a un taxista que si puede llevarte a algún lado y éste le contesta que no, será que sí. Menudo lío!!!
Quiero que se entienda esta sección como una aproximación en líneas generales. Cuando se desarrollan personajes de forma profesional, se
tiene que realizar un estudio del carácter del personaje, y según esos datos, se configuran los gestos y las expresiones faciales que éste tendrá.
(Esto último no se si es cierto, pero queda muy bien, je, je). Un capítulo importante es la voz, su timbre y tonalidad, que no trataré en este
artículo.
A continuación veremos algunos gestos populares:
● Yo no se nada de nada: encogerse de hombros
3.- Gesto de encogerse de hombros
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

6.- Gesto de 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?
7.- El número y la sección áurea
1. Geométricamente, tomamos el punto medio de la base de un cuadrado (M), y trazamos una diagonal hasta el punto opuesto (N).
2. Trazamos un arco de circunferencia con centro en (M) y radio (M) (N) hasta encontrar la prolongación de la base del cuadrado.
3. Obtenemos los segmentos a, b, c que se encuentran entre si a una proporción de a · a = c ·b
4. Encontramos las proporciones que estructuran el cuerpo humano.
5. Si la distancia entre la base del mentón y el entrecejo equivale a 1, encontramos 0,618 desde el entrecejo hasta la raíz de los cabellos.

Etc.(véase Fig. 8)
6. Si no se quieren frustrar, dejen el metro, háganme caso, yo ya lo probé.
¿Como se si soy guapo/a? (Por cierto, no es lo mismo ser guapo que ser un guaperas)
En resumidas cuentas, y en líneas generales, más guapo/a son aquellas personas que más cerca de hallen de este equilibrio proporcional,
independientemente de las culturas, razas u otras diferencias. Lo mismo se puede aplicar para el cuerpo.
Si quieres dibujar un personaje guapo/a básate en estas proporciones. Aléjate de ellas para crear los malos (que siempre suelen ser feos)
8.- El rostro áureo
¿Y qué puedo hacer para serlo yo?

- ¿...mmmm...?, pues no encuentro esa ecuación...
- Noooo, ¿dónde la habré dejado?
- Prometo que la voy a encontrar.
- ¿Dónde habré metido el teléfono de "Maikel Jason"?
Seis formas básicas faciales

He evitado, para no extenderme demasiado, dar las explicaciones del porqué tienen los diversos significados estas formas. tendréis que confiar
o investigar por vuestra cuenta. Lo que viene a continuación no es ciencia, son observaciones de algunos psicólogos. A saber:
9.- Formas esquemáticas de los rostros
1. a) Representa a una persona voluntariosa, pensar sentir y actuar consecuentemente. Pero si la cabeza es cuadrada, significa tozudería,
dureza y materialismo.
2. b) La curva simboliza lo femenino, así como el ángulo lo masculino, representará la búsqueda de la armonía, puede ser una persona
afectiva, emotiva. Pero si es tipo pelota de rugby, pues representará a un individuo excesivamente emotivo, impráctico e imprevisible.
3. c) Predominio de la mente, pienso mucho, aunque hago poco.
4. d) Este tipo de cara es el del reprimido, es decir, pensará y sentirá equilibradamente, pero a la hora de materializarlos no disfrutará.
5. e) Existe un equilibrio entre los instintos y las emociones, aunque piensa poco antes de actuar.
6. f) Este individuo representará a un bruto, puesto que en su vida predomina la parte instintiva, y tiene todos los números para convertirse
en un devorador de placeres.
Breve introducción a la mímica y el carácter del personaje.

Las facciones de la cara en estado "normal" informan sobre el pasado del personaje, más que sobre el presente. Ahora bien, enfatizando ciertos
rasgos, podremos provocar que nuestro dibujo muestre diversas cualidades psicológicas. Veamos los pares de valores músculo-expresión
Veo, veo...
● Superciliar: indica concentración, atención sostenida y reacciones rápidas a las impresiones externas.

10.- Mirada concentración, atención sostenida
● Superciliar vertical, obstinación, tenacidad, tozudez
11.- Mirada con obstinación.
Tiene narices... y morro

● Elevador superficial, percepción de lo desagradable, capacidad para percibir los defectos, poco optimista, denota amargura

12.- Percepción de lo desagradable
● Cigomático menor, el sujeto está sufriendo, dolor moral o psíquico
13.- Sufrimiento psíquico
Esa boquita...
● Orbiculares externos, indica deseo, es una dependencia, la persona necesita de los demás y existe falta de autocontrol.

14.- Deseo, dependencia, falta de autocontrol
● Canino, orgullo, amor propio, satisfacción de uno mismo.
15.- Orgullo, amor propio
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:
17.- Relleno del rectángulo
con unas medidas de 45 X 85
18.- Ancho y alto del rectángulo

3.- Con la figura seleccionada, la convertimos en un símbolo apretando F8 en el teclado , y le ponemos el nombre cuerpo. Guardarlo con el
punto de registro en el centro.
19.- El punto de registro tiene que estar en el centro
4.- Ahora creamos la cabeza. Para ello trazaremos una elipse con la herramienta óvalo. Sus medidas serán de 37 ancho por 45 alto. Con la
figura seleccionada pulsamos F8 y lo convertimos en un símbolo que llamaremos cabeza. Su punto de registro también estará en el centro.
Todas las partes del muñeco se guardarán con el punto de registro en el centro.
5.- El brazo derecho lo creamos con una elipse de medidas 22 por 63 con el color de relleno #666666. Su nombre de símbolo será brazoDer.
6.- El brazo izquierdo lo haremos duplicando el izquierdo, a continuación del menú modificar seleccionamos separar, para desvincularlo del mc
brazoDer. Veréis que en el panel de propiedades ahora pone gráfico. Entonces, lo mismo de siempre, F8, nombre brazoIzq. Hacemos doble
click sobre éste y le ponemos el color #CCCCCC.
7.- Después, pulsar sobre Escena 1 para volver a la línea de tiempo principal.
20.- Pulsar sobre Escena 1 para volver a la línea de tiempo principal
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.
13.- Ya tenemos que tener en el escenario más o menos lo siguiente:

23.- Partes del maniquí.
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:
25.- Partes acabadas del maniquí.

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
3.- Animación del maniquí
El guión y el guión gráfico

Creo que el mayor problema de un animador autónomo es el guión. Señores/as, sin una buena idea, hasta el dibujante más fabuloso del mundo
fracasa. Así que veamos unas ideas para organizar una película en Flash
1. ¿Por dónde empezamos? Preparar el guión. Necesitaremos una buena idea y un esquema para llevarla a cabo. Así que hay que coger
lápiz y papel, y ponerse bien cómodo en el sofá, pensar. Cuando ya tenemos la historia creada, a continuación la dividimos en escenas.
Qué cuando se cambia de escena, pues en principio lo lógico es cambiar cuando el fondo también lo haga, así podemos organizar mejor
la historia y modificar las partes de ésta por separado fácilmente.
2. ¿Y si no se me ocurre nada, puedo coger "el código D'Vinci" y hacer un plagio? Pues sí. Pero no te lo aconsejo. Primero, porque tiene
los derechos de autor reservados, y segundo porque a no ser que seas un vampiro y vivas más de 500 años la llevas clara!
3. El paso siguiente es el guión gráfico, que no es otra cosa que las imágenes con componen cada escena de la historia secuencialmente.
Dicen que una imagen vale más que mil palabras, pues fácil ¿no?
4. ¿Cuando tengo el guión gráfico hecho, como lo pongo en Flash? El guión gráfico puedes realizarlo en papel y luego escanearlo. Si no
tienes escaner, pues lo puedes dibujar con tu programa de dibujo favorito y después importarlo a Flash, sean vectores o bitmaps. Una
vez en Flash los bitmaps se pueden trazar y convertirse en vectores editables. Es interesante hacer una lista con los objetos que
aparecen en las escenas y comprobar cuales podremos aprovechar para varias escenas.
5. Los objetos los puedes crear también a mano o a máquina, con lápiz 2HB o Fireworks, etc. tu eliges.
6. Flash también tiene herramientas bastante buenas para dibujar digamos "a mano alzada" o con la combinación de figuras geométricas.
7. No hay que olvidar los sonidos, la banda sonora, y las voces que acompañarán la historia.
8. Por último, se trata de distribuir los objetos por las escenas.

9. ¿Has encontrado la ecuación matemática para conseguir la belleza? -estoy en ello...
Para nuestra animación el guión será el siguiente:
-Se ve un maniquí caminando.
-El escenario es un paisaje que se desplaza.
-Vaya historia más sencilla, pero estará bien para empezar...
Cámaras, luces, aaaacción!
El punto y la coma (teclas rápidas olvidadas por los "ActionScript+Ters")

Tienes que saber un par de métodos abreviados de teclado: el punto ( . ) y la coma ( , )
Con ellas podemos avanzar un fotograma con el punto y atrasarlo con la coma. Puesto que de configuraciones físicas de teclado hay muchas,
según los países y los idiomas, para saber cuales te corresponden, tienes que activar el menú control y verás las opciones avanzar un
fotograma y retroceder un fotograma. En su derecha estarán las "teclas rápidas" a utilizar.
La utilización de estas teclas es para realizar comparaciones antes/después. Si mantienes pulsada la tecla punto avanzará la cabeza lectora o
se retrasará con la coma. Si quieres ver los detalles de la animación poco a poco, pues debes ir pulsando repetidamente la tecla que necesites.
Puedes verla hacia delante y hacia atrás, como es obvio.
¿Tiene algo que ver la animación con el boca a boca?

Lo primero, la animación, es el arte de mover un objeto, llámese personaje o cualquier otra cosa. El boca a boca es más bien:
re-animación.
En Flash podemos animar usando lo que se llaman fotogramas clave. Son los fotogramas donde se hallan los inicios y finales del movimiento.
Supongamos que quiero levantar el brazo. En el fotograma 1 tengo el brazo abajo, en el 5 lo tengo arriba. Los otros 3 intermedios son los que
se pueden interpolar o bien, si esta opción no es posible, se tendrán que realizar 3 fotogramas clave más y dibujar en ellos las posiciones
intermedias. La velocidad será de 24 fotogramas por segundo. Explicaremos esto último con un poquito más de detalle. A saber:
● El ojo humano es incapaz de percibir más de 24 imágenes diferentes por segundo.Si en una animación existen 24 imágenes para dar un
paso, y en otra existen 12 con el mismo tiempo, está claro que estará más definido el movimiento que tenga más pasos intermedios.
● Se pueden conseguir buenos resultados para web con 15 fotogramas por segundo.
Otra técnica para conseguir buenas animaciones es la rotoscopia. Consiste en dibujar los movimientos de un personaje o escena desde un
video. No la trataré en este tutorial.
interpolación de movimiento
Puesto que trabajamos con símbolos, estos se pueden animar con interpolación, veamos un ejemplo:
27.- Tres caras con interpolación de movimiento.
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:
30.- Primer fotograma de la animación del MNQ.
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.
10.- Algo importante, después de acabar de construir el movimiento del MNQ
-Se tienen que seleccionar todos los fotogramas de todas las capas y copiarlos.
-Seguidamente insertas un nuevo símbolo, y pegas los fotogramas, de forma que el maniquí queda todo él como un mc.
-Limpia el escenario (borrando las capas del MNQ), y creas las capas necesarias para ActionScript, fondos, y MNQ.
-Como es un ejercicio yo he puesto un stop(); al final de la película en la capa AS. Sin embargo, no le he dado nombre de
instancia al MNQ para poder interactuar con él, ni le he dado ninguna orden de parar, realiza un bucle infinito.
11.- Ahora, tienes que modificar el maniquí dándole la forma que quieras. Puedes modificar los mc de las partes para que quede con forma
humana, con vestidos, cambiar el color, etc. El fondo es importante en una animación, ya que da profundidad el movimiento del personaje.
Ponerle sonido también es muy importante. Por ejemplo, piensa en una película de terror, si bajas el volumen de la banda sonora, queda
bastante ridículo verla así.
12.- También puedes crear una capa por encima de todas, dentro del mc bloquearlas otras capas y dibujar a mano alzada tu personaje,
fotograma a fotograma.
Conclusión y apéndice
Creo que ya va siendo hora de que acabe esta breve introducción a la animación en flash. Espero que sirva de base para que surgan nuevos
horizontes en las mentes de los usuarios de Cristalab, y que permita que desarrollen ingeniosas, atractivas películas de dibujos animados.
Una cosa más: el audio de las animaciones.

Como habréis leído, han quedado cosas en el tintero, como los símbolos (psicológicos) en la decoración de las escenas, o ambientación, el
sonido de la película, etc. Así que aquí va un comentario sobre el sonido.
Respuesta a las armonías musicales, la provocación de emociones.
Al igual que los colores provocan determinados estados de ánimo, la música posee la capacidad de emocionar casi siempre al que la escucha.
Emocionar significando no una expresión sentimental (aunque también), sino, más bien como que te hace reaccionar, con aceptación o rechazo
a determinadas frecuencias musicales, induciendo a coger su ritmo, debido al efecto de la resonancia. Que una música te guste o no depende
de si tus frecuencias coinciden ésta, causando rechazo o indiferencia, o aceptándola e interiorizándola.La armonía y escalas utilizadas en las
bandas sonoras influyen, y mucho, en el significado conjunto que se quiera dar a la película.
La octava perfecta: Provoca sensación de descanso, simboliza la unión.
La quinta: Estimula las sensaciones de movimiento y energía.
La cuarta: Llega hasta el corazón y resuena en él, algunas personas se pueden sentir incómodas.
La séptima: Despierta sensaciones de distancia y necesidad de resolución.
Puedes usar flash para crear divertidas tiras cómicas, dibujos animados, comics, animaciones interactivas. El límite sólo existe en tu
imaginación...
Llegamos a una bifurcación con dos caminos, un destino:

A)
1. Lavarte los dientes e ir a dormir un poco.

2. Comprarte un buen libro de animación.
3. Salir de flash y borrar este archivo.
4. Reprochar al autor por no haber dibujado un maniquí en condiciones.
5. Agradecer al autor, responder al tema en el foro , aportando el comentario que quieras en Cristalab.
B)
1. Completar la animación creando un personaje.

2. Acabar la escena, haciendo que le ocurra algo.
3. Poner el resultado en tu página y disfrutar de lo bien que ha quedado.
4. Seguir la zaga, creando otro capítulo del mismo estilo.
5. ¿Quieres saber la ecuación matemática para conseguir la belleza? Pues busca en Cristalab
Información adicional
Archivos del tutorial

Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
Cristalab | Comic | Blog | Foros | Tutoriales | Anime Blog | Ejemplos(.FLA) | Eventos | Personajes | FAQ (Preguntas Frecuentes) | Colaborar

Tutorial de Animación y Expresión de Personajes en Flash - Cristalab

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial de Animación y Expresión de Personajes en Flash - Cristalab

Cargado por

Copyright:

Formatos disponibles

Tutorial de animación y expresión de personajes en Flash || Cristalab

Cristalab > Tutoriales > Tutorial de animación y expresión de personajes en Flash

Este tutorial lo he dividido en tres partes:

1.-Teoría del movimiento y de los gestos

- Articulaciones humanas, caminar, el lenguaje de los gestos y el rostro.

2.- Creación de un maniquí como maqueta

3.-Animación del maniquí Mensajes: 886

1.- Principales articulaciones del esqueleto humano

(Bueno, vale ya de rascarse!!!)

Caminante no hay camino, se hace camino al andar...

2.- Progresión del acto de caminar erguido (un paso)

(Volver a "Yo ando", no hagas caso si aún no lo has leído)

1. El miembro inferior izquierdo (según imagen) propulsa el cuerpo hacia delante.

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (3 de 29)19/10/2005 10:18:23 a.m.

Breve introducción a los gestos: mensajes subliminares

A continuación veremos algunos gestos populares:

● Yo no se nada de nada: encogerse de hombros

3.- Gesto de encogerse de hombros

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (4 de 29)19/10/2005 10:18:23 a.m.

hacia arriba y abiertas, las cejas levantadas y los hombros encongidos.

4.- No está de acuerdo con lo que escucha

● Que nadie se atreva a desafiarme: actitud dominante

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (5 de 29)19/10/2005 10:18:23 a.m.

5.- Mujer dominante

Si, si, bien! que contenta estooooooy!: frotarse las manos

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (6 de 29)19/10/2005 10:18:23 a.m.

6.- Gesto de frotarse las manos

Leer el rostro, todo un arte.

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (7 de 29)19/10/2005 10:18:23 a.m.

geométrica, que obedece a un canon arquetípico.

x^2 - x - 1 = 0 // equis elevado al cuadrado, menos equis, menos 1, igual a cero.

7.- El número y la sección áurea

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (8 de 29)19/10/2005 10:18:23 a.m.

8.- El rostro áureo

¿Y qué puedo hacer para serlo yo?

- Noooo, ¿dónde la habré dejado?

- Prometo que la voy a encontrar.

- ¿Dónde habré metido el teléfono de "Maikel Jason"?

Seis formas básicas faciales

9.- Formas esquemáticas de los rostros

Breve introducción a la mímica y el carácter del personaje.

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (10 de 29)19/10/2005 10:18:23 a.m.

10.- Mirada concentración, atención sostenida

● Superciliar vertical, obstinación, tenacidad, tozudez

11.- Mirada con obstinación.

Tiene narices... y morro

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (11 de 29)19/10/2005 10:18:23 a.m.

12.- Percepción de lo desagradable

● Cigomático menor, el sujeto está sufriendo, dolor moral o psíquico

13.- Sufrimiento psíquico

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (12 de 29)19/10/2005 10:18:23 a.m.

14.- Deseo, dependencia, falta de autocontrol

● Canino, orgullo, amor propio, satisfacción de uno mismo.

15.- Orgullo, amor propio

2.- Creación de un maniquí como maqueta paso a paso.

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (13 de 29)19/10/2005 10:18:23 a.m.

(Volver al punto 18, no hagas caso si aún no lo has leído)

Abrimos Flash MX 2004, con un archivo en blanco y empezamos el paso a paso.

http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (14 de 29)19/10/2005 10:18:23 a.m.

16.- Vista de las capas

17.- Relleno del rectángulo

con unas medidas de 45 X 85