tutorial de animacion y expresion de personajes en flash _ cristalab

Tutorial de animacin y expresin de personajes en Flash || Cristalab

Cristalab > Tutoriales > Tutorial de animacin y expresin de personajes en Flash

Tutorial de animacin y expresin de personajes en FlashAutor: Sisco | Otros tutoriales de Sisco | 2 de Octubre del 2004

Este tutorial lo he dividido en tres partes: 1.-Teora del movimiento y de los gestos - Articulaciones humanas, caminar, el lenguaje de los gestos y el rostro. 2.- Creacin de un maniqu como maqueta - Paso a paso para construir un maniqu como boceto para crear animaciones. 3.-Animacin del maniqu -El guin y el guin grfico. -El maniqu camina. Este tutorial va dirigido tanto al principiante que quiere hacer una animacin convincente de un personaje desde cero, como al que ya domina Flash pero quiere saber algo ms sobre animacin y expresin de personajes. El usuario avanzado puede saltarse el punto 2Archivos del tutorial Preguntas de este tutorial?

SiscoMensajes: 886 Tutoriales: 4 Ejemplos(.FLA): 0

1.- Teora del movimiento y de los gestos Yo me parto...Animar un cuerpo humano es de las acciones ms complejas que se pueden llevar a cabo en un proyecto de animacin. Es decir que si no tienes paciencia, ms 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.

Botn con fade-in y fade-out animado Interpolacin de movimiento y guias en Flash Fsica en Flash: Rebote y movimiento de cuerpo rgido Tutorial de movimiento de objetos en Flash (motion tweening) Movimiento de una bandera dinmicamente por ActionScript Deteccin de colisiones y movimiento en ActionScript


dedcate a otra cosa... Pero si has dedicido animar y quieres seguir leyendo, pues empezamos por repasar un poco la anatoma del cuerpo humano. El cuerpo humano est constituido por huesos y msculos en su aparato locomotor, que es el que nos interesa para nuestro propsito. Para que un cuerpo se mueva, se necesita de la fuerza de un grupo muscular flexible y de un conjunto de huesos rgidos que los sostengan. Pero, lo ms importante de todo son las articulaciones, ya que es ah donde se producen los movimientos, veamos:

1.- Principales articulaciones del esqueleto humanoq

q

q

q

q

La cabeza se mueve gracias al cuello. ste puede realizar todos los movimientos, es decir, rotacin (decir no), flexin y extensin (decir s), lateralizacin (inclinar la cabeza hacia los lados). El hombro es una de las articulaciones ms complejas, y sintetizando mucho tiene dos conjuntos, el escapulotorcico, que comprende movimientos los movimientos de elevacin del hombro (como diciendo no se), giro hacia atrs o hacia delante, (sacar pecho, hundir pecho) y el conjunto escapulohumeral, que comprende los movimientos de extensin, rotacin, flexin, o sea, mover el brazo. El codo, pues fcil, se flexiona y se extiende, aunque en un grado ms de realismo, podemos decir que rota (supinacin y pronacin, como cuando se indica con la mano "ms o menos") La cadera, es como el hombro, pues mueve las extremidades inferiores, pero tambin puede elevarse y bajarse. La articulacin pubofemoral contiene todos los movimientos, rotacin, flexin, extensin, aduccin y abduccin. La rodilla como el codo, se flexiona y se extiende., aunque tiene cierto grado de rotacin, no tiene casi relevancia en animacin, aunque

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


q

si en anatoma claro. Los tobillos y los pies tambin se flexionan y se extienden.

Despus 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 ms equilibrado posible. Por ejemplo, si estoy sentado, y hecho el brazo hacia atrs para rascarme las costillas pues flexiono la articulacin del hombro al mismo tiempo que la del codo y el cuerpo (columna) rota un poco hacia un lado, a continuacin se flexionan los dedos y se realizan pequeos movimientos adelante y hacia atrs. Podis probar de rascaros las pantorrillas, el cuello, o la espalda, y podris comprobar como en realidad son conjuntos de articulaciones las que entran en accin. (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.- Progresin del acto de caminar erguido (un paso)

(Volver a "Yo ando", no hagas caso si an no lo has ledo) 1. 2. 3. 4. 5. El miembro inferior izquierdo (segn imagen) propulsa el cuerpo hacia delante. La otra extremidad, librada del peso del cuerpo, lleva el pie hacia delante. El peso del cuerpo pasa a la extremidad derecha y vuelta a empezar. Con estos movimientos el cuerpo sube y baja ligeramente. 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 animacin parezca verosmil, y le indica al espectador, con pequeos detalles, a veces inconscientes, las emociones y pensamientos del personaje.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.


El cuerpo humano es genial, ya que no veris a dos personas caminando igual. Eso quiere decir que segn la constitucin de una persona, sus caminares sern diferentes. Tambin habr que tener en cuenta el estado de nimo del personaje cuando montemos una animacin. Lo mismo ocurre con correr, es bastante diferente que caminar, puesto que aparte de exagerar las flexiones hay que aadir saltos a cada zancada.

Breve introduccin a los gestos: mensajes subliminaresNuestro 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 situacin concreta en la que nos hallemos. Ciertos gestos son propios de una cultura. Los indes mueven la cabeza diciendo no para decir que s. Si alguien va de viaje y pregunta a un taxista que si puede llevarte a algn lado y ste le contesta que no, ser que s. Menudo lo!!! Quiero que se entienda esta seccin como una aproximacin en lneas generales. Cuando se desarrollan personajes de forma profesional, se tiene que realizar un estudio del carcter del personaje, y segn 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 captulo importante es la voz, su timbre y tonalidad, que no tratar en este artculo. A continuacin veremos algunos gestos populares:q

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 mirandohttp://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.q

A quien quieres engaar con esa historia... no me creo nada: la mano en la barbilla

4.- No est de acuerdo con lo que escucha

Ese seor tiene una actitud de evaluacin crtica, 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 tapndose 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.q

Que nadie se atreva a desafiarme: actitud dominante



5.- Mujer dominante

Esta mujer muestra una actitud dominante o agresiva, enseando 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 creble o no con respecto a lo que se expresa hablando.

Leer el rostro, todo un arte."Porqu signo se reconoce la evolucin 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 expresin del rostro, en la armona de los gestos." - Omraam M. A. Nuestro rostro es la expresin 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 ms luminoso, ms recto, ms firme, su mirada brilla. En cambio, cuando vemos a alguien con el rostro "desfigurado" todos percatamos que a aquella persona no le estn yendo bien las cosas, o que pasa por un mal momento. As que depende de la expresin que le demos a un personaje crearemos la sensacin 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 cuestin matemticahttp://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.


geomtrica, que obedece a un canon arquetpico. La ecuacin matemtica 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 races de esta ecuacin es el "nmero ureo" (1,618.....) y la otra es la "seccin urea" (0,618...) y cmo se traduce esto en belleza?

7.- El nmero y la seccin urea

1. 2. 3. 4. 5.

Geomtricamente, tomamos el punto medio de la base de un cuadrado (M), y trazamos una diagonal hasta el punto opuesto (N). Trazamos un arco de circunferencia con centro en (M) y radio (M) (N) hasta encontrar la prolongacin de la base del cuadrado. Obtenemos los segmentos a, b, c que se encuentran entre si a una proporcin de a a = c b Encontramos las proporciones que estructuran el cuerpo humano. Si la distancia entre la base del mentn y el entrecejo equivale a 1, encontramos 0,618 desde el entrecejo hasta la raz de los cabellos.



Etc.(vase Fig. 8) 6. Si no se quieren frustrar, dejen el metro, hganme 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 lneas generales, ms guapo/a son aquellas personas que ms 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 bsate en estas proporciones. Aljate 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 ecuacin... - Noooo, dnde la habr dejado? - Prometo que la voy a encontrar. - Dnde habr metido el telfono de "Maikel Jason"?

Seis formas bsicas facialesHe evitado, para no extenderme demasiado, dar las explicaciones del porqu tienen los diversos significados estas formas. tendris que confiarhttp://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (9 de 29)19/10/2005 10:18:23 a.m.


o investigar por vuestra cuenta. Lo que viene a continuacin no es ciencia, son observaciones de algunos psiclogos. A saber:

9.- Formas esquemticas de los rostros

1. a) Representa a una persona voluntariosa, pensar sentir y actuar consecuentemente. Pero si la cabeza es cuadrada, significa tozudera, dureza y materialismo. 2. b) La curva simboliza lo femenino, as como el ngulo lo masculino, representar la bsqueda de la armona, puede ser una persona afectiva, emotiva. Pero si es tipo pelota de rugby, pues representar a un individuo excesivamente emotivo, imprctico 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 nmeros para convertirse en un devorador de placeres.

Breve introduccin a la mmica y el carcter del personaje.Las facciones de la cara en estado "normal" informan sobre el pasado del personaje, ms que sobre el presente. Ahora bien, enfatizando ciertos rasgos, podremos provocar que nuestro dibujo muestre diversas cualidades psicolgicas. Veamos los pares de valores msculo-expresin

Veo, veo...q

Superciliar: indica concentracin, atencin sostenida y reacciones rpidas a las impresiones externas.



10.- Mirada concentracin, atencin sostenida

q

Superciliar vertical, obstinacin, tenacidad, tozudez

11.- Mirada con obstinacin.

Tiene narices... y morroq

Elevador superficial, percepcin de lo desagradable, capacidad para percibir los defectos, poco optimista, denota amargura



12.- Percepcin de lo desagradable

q

Cigomtico menor, el sujeto est sufriendo, dolor moral o psquico

13.- Sufrimiento psquico

Esa boquita...q

Orbiculares externos, indica deseo, es una dependencia, la persona necesita de los dems y existe falta de autocontrol.



14.- Deseo, dependencia, falta de autocontrol

q

Canino, orgullo, amor propio, satisfaccin de uno mismo.

15.- Orgullo, amor propio

Bueno, creo que con esto es suficiente como para que uno pueda hacer sus pinitos con la animacin y caracterizacin de personajes, as que pongmonos el mono de faena, y a trabajar. Aih, Aih

2.- Creacin de un maniqu como maqueta paso a paso.Ahora vamos a construir paso a paso un maniqu que nos servir para preparar alguna animacin posteriormente.



DescripcinEl maniqu lo vamos a simplificar quitndole el movimiento de las muecas, y el cuello. As que consta de las siguientes partes: 1. Capa brazoDer r Brazo derecho r Antebrazo derecho 2. Capa cabeza r Cabeza 3. Capa piernaDer r Muslo derecho r Pierna derecha 4. Capa cuerpo r Cuerpo (trax y abdomen) 5. Capa brazoIzq r Brazo izquierdo r Antebrazo izquierdo 6. Capa piernaIzq r Muslo izquierdo r Pierna izquierda 7. Capa fondo r Fondo (Volver al punto 18, no hagas caso si an no lo has ledo) En este orden tienen que estar colocadas las 7 capas que crearemos, en las cuales pondremos cada parte del maniqu. Esta disposicin 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 botn operacin hasta tenerlas todas, copia de la ilustracin: nueva capa. Le ponemos el nombre correspondiente, y repetimos la



16.- Vista de las capas

2.- A dibujar, con la herramienta rectngulo

seleccionada , dibujamos uno en la capa fondo. con un relleno gris #999999 y sin contorno:

17.- Relleno del rectngulo

con unas medidas de 45 X 85

18.- Ancho y alto del rectngulohttp://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (15 de 29)19/10/2005 10:18:23 a.m.


3.- Con la figura seleccionada, la convertimos en un smbolo 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 sern de 37 ancho por 45 alto. Con la figura seleccionada pulsamos F8 y lo convertimos en un smbolo que llamaremos cabeza. Su punto de registro tambin estar en el centro. Todas las partes del mueco se guardarn 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 smbolo ser brazoDer. 6.- El brazo izquierdo lo haremos duplicando el izquierdo, a continuacin del men modificar seleccionamos separar, para desvincularlo del mc brazoDer. Veris que en el panel de propiedades ahora pone grfico. Entonces, lo mismo de siempre, F8, nombre brazoIzq. Hacemos doble click sobre ste y le ponemos el color #CCCCCC. 7.- Despus, pulsar sobre Escena 1 para volver a la lnea de tiempo principal.

20.- Pulsar sobre Escena 1 para volver a la lnea de tiempo principal

8.- Los dos muslos los crearemos duplicando un brazo, y despus 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, sern de 27 por 69. 9.- Las medidas sern de 18 por 64 de las pantorrillas (piernas). piernaDer y color #CCCCCC para la derecha y piernaIzq, color #666666 para la izquierda. Utilizaremos tambin un valo.http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (16 de 29)19/10/2005 10:18:23 a.m.


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 sern de 17 por 67. Dos valos pero con un crculo en el extremo inferior de 18 X 18 que simular la mano.

21.- Smbolo del antebrazo izquierdo del maniqu, que incluye un valo y un crculo en el extremo inferior.

12.- Las medidas para los pies son 33 por 13, utilizando el valo. Desde el men ver seleccionamos la opcin reglas. Con la ayuda de una lnea gua que pondremos en el escenario pulsando sobre la regla y arrastrando al escenario hasta la parte interior del pie. Despus con la flecha de seleccin, trazamos un rectngulo para seleccionar la zona inferior y eliminarla (ver ilustracin). Sus nombres pieDer, y pieIzq.

22.- Pie con la regin inferior seleccionada con la ayuda de una lnea gua.

13.- Ya tenemos que tener en el escenario ms 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 smbolos. 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 smbolos de forma que el punto de registro quede en la zona de la articulacin. Explicaremos la cabeza. 16.- Hacemos doble click sobre el mc cabeza y estaremos en el modo edicin de smbolo 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 flexin y extensin, que traducido en Flash sera rotacin + -. 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 tambin lo haremos flexionar desde su base. Los muslos desde la regin de la cadera, y las piernas en la articulacin de las rodillas. Los pies, en el tercio posterior, en lo que sera la articulacin tibioperoneaastragalina. Vase:

25.- Partes acabadas del maniqu.



18.- Distribuimos por fin, con la ayuda de los comandos cortar y pegar cada mc en su sitio, segn dijimos en la descripcin (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 lnea negra, de 1 de grosor justo debajo de los pies del maniqu.

26.- Maniqu acabado, listo para moverse.

No sera mal momento para volver a guardar los cambios con la combinacin de teclas CONTROL+S

3.- Animacin del maniqu El guin y el guin grficoCreo que el mayor problema de un animador autnomo es el guin. Seores/as, sin una buena idea, hasta el dibujante ms fabuloso del mundo fracasa. As que veamos unas ideas para organizar una pelcula en Flash 1. Por dnde empezamos? Preparar el guin. Necesitaremos una buena idea y un esquema para llevarla a cabo. As que hay que coger lpiz y papel, y ponerse bien cmodo en el sof, pensar. Cuando ya tenemos la historia creada, a continuacin la dividimos en escenas. Qu cuando se cambia de escena, pues en principio lo lgico es cambiar cuando el fondo tambin lo haga, as podemos organizar mejor la historia y modificar las partes de sta por separado fcilmente. 2. Y si no se me ocurre nada, puedo coger "el cdigo 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 ms de 500 aos la llevas clara! 3. El paso siguiente es el guin grfico, que no es otra cosa que las imgenes con componen cada escena de la historia secuencialmente. Dicen que una imagen vale ms que mil palabras, pues fcil no? 4. Cuando tengo el guin grfico hecho, como lo pongo en Flash? El guin grfico puedes realizarlo en papel y luego escanearlo. Si no tienes escaner, pues lo puedes dibujar con tu programa de dibujo favorito y despus 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 tambin a mano o a mquina, con lpiz 2HB o Fireworks, etc. tu eliges. 6. Flash tambin tiene herramientas bastante buenas para dibujar digamos "a mano alzada" o con la combinacin de figuras geomtricas. 7. No hay que olvidar los sonidos, la banda sonora, y las voces que acompaarn la historia.http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (20 de 29)19/10/2005 10:18:23 a.m.


8. Por ltimo, se trata de distribuir los objetos por las escenas. 9. Has encontrado la ecuacin matemtica para conseguir la belleza? -estoy en ello... Para nuestra animacin el guin ser el siguiente: -Se ve un maniqu caminando. -El escenario es un paisaje que se desplaza. -Vaya historia ms sencilla, pero estar bien para empezar...

Cmaras, luces, aaaaccin! El punto y la coma (teclas rpidas olvidadas por los "ActionScript+Ters")Tienes que saber un par de mtodos 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 fsicas de teclado hay muchas, segn los pases y los idiomas, para saber cuales te corresponden, tienes que activar el men control y vers las opciones avanzar un fotograma y retroceder un fotograma. En su derecha estarn las "teclas rpidas" a utilizar. La utilizacin de estas teclas es para realizar comparaciones antes/despus. Si mantienes pulsada la tecla punto avanzar la cabeza lectora o se retrasar con la coma. Si quieres ver los detalles de la animacin poco a poco, pues debes ir pulsando repetidamente la tecla que necesites. Puedes verla hacia delante y hacia atrs, como es obvio.

Tiene algo que ver la animacin con el boca a boca?Lo primero, la animacin, es el arte de mover un objeto, llmese personaje o cualquier otra cosa. El boca a boca es ms bien: re-animacin. 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 opcin no es posible, se tendrn que realizar 3 fotogramas clave ms y dibujar en ellos las posiciones intermedias. La velocidad ser de 24 fotogramas por segundo. Explicaremos esto ltimo con un poquito ms de detalle. A saber:q

q

El ojo humano es incapaz de percibir ms de 24 imgenes diferentes por segundo.Si en una animacin existen 24 imgenes para dar un paso, y en otra existen 12 con el mismo tiempo, est claro que estar ms definido el movimiento que tenga ms pasos intermedios. Se pueden conseguir buenos resultados para web con 15 fotogramas por segundo.

Otra tcnica para conseguir buenas animaciones es la rotoscopia. Consiste en dibujar los movimientos de un personaje o escena desde unhttp://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (21 de 29)19/10/2005 10:18:23 a.m.


video. No la tratar en este tutorial.

interpolacin de movimientoPuesto que trabajamos con smbolos, estos se pueden animar con interpolacin, veamos un ejemplo:

27.- Tres caras con interpolacin de movimiento. Para realizar esta animacin, simplemente se insertan fotogramas clave. Despus se cambias las propiedades de rotacin, anchura y altura y posicin respectivamente desde el panel transformaciones, para que automticamente, desde el panel de propiedades podamos efectuar una interpolacin de movimientos intermedios.

28.- Fotogramas con interpolacin de movimiento. Los puntos negros son los fotogramas clave.



Si queremos un movimiento preciso, podemos utilizar interpolacin con lneas gua. No explicar como se usan las lneas gua porque llevo una barba de tres das, pero dir que son de gran utilidad cuando necesitamos trazar trayectos con diversas curvas, por ejemplo el vuelo de algn ave o insecto. Por otra parte, la animacin 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 acompaan en la flexin. As que no toca ms remedio que desplazar las partes del maniqu, aparte de efectuar sobre ellas alguna rotacin, por que con una interpolacin no obtendramos el resultado deseado, y con un trayecto de lnea gua es mucho ms costoso cuando se puede realizar mediante la tcnica 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 visin del personaje, teniendo en cuenta la perspectiva. Para ello no nos toca ms remedio que dibujar a "mano alzada" cada uno de los fotogramas. Aunque como ya existe esta previsin, 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 posicin y/o ngulo cada una de sus partes.

Qu es el papel de cebolla?Por suerte, mi madre es modista. Y de pequeo de dejaba jugar con el papel de cebolla. Calcar los dibujos de Mazinger-Z era genial (lo que ms me gustaba era aquello de pechos fuera! Pero no se trata de copiar, ni mucho menos de pechos, si no de ver a travs de l gracias a su transparencia. La idea es que dibujamos la posicin inicial del personaje, despus en otro fotograma, la final. Si pulsamos en el icono veremos todos los fotogramas intermedios cuando estn dibujados. papel de cebolla,



29.- Ejemplo de un maniqu con el papel de cebolla activado, mostrando la sucesin de fotogramas que va por delante.

El papel de cebolla de Flash no se vende en las libreras, as que se puede usar cmodamente cuando necesitemos: 1. 2. 3. 4. Ver la posicin inicial y la final. Dibujar o desplazar los mc's a posiciones intermedias. Comprobar la sincronizacin de los movimientos. 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 posicin.

Yo andoVolvemos a centrarnos en la animacin de nuestro maniqu, que a partir de ahora lo llamar MNQ. Esta animacin realizar un ciclo completo, es decir un paso. Si repetimos la animacin (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 tambin se tienen que girar.

transformacin libre (Q). Tienes que 2.- Que cmo? Pues puedes usar el panel transformar (CONTROL+T) o con la herramienta trabajar a ojo, ya que considero inltil poner los grados y los desplazamientos _x e _y debido a que no te crean ninguna imagen mental de la posicin que queremos conseguir. Mirar la siguiente ilustracin:http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (24 de 29)19/10/2005 10:18:23 a.m.


30.- Primer fotograma de la animacin del MNQ.

3.- Insertaremos un fotograma clave en el nmero 22. Podemos crear el fotograma 22 seleccionando y usando el botn 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 posicin del maniqu. Hubisemos podido insertar directamente todos los fotogramas clave, como algunos estarn pensando. Pero de esta forma, primero se podra valorar si existe algn objeto que se pueda interpolar, y aprovecharamos el primer y el ltimo fotograma claves para realizar la interpolacin. Como dudo mucho que con un MNQ se puedan lograr buenos resultados, pues lo trabajaremos manualmente. Tambin si tenemos una posicin inicial y otra final, podemos hacernos una idea de los pasos intermedios (ver Figura 33). Adems, cuando insertemos un fotograma clave, ste poseer el contenido del fotograma anterior, y as podremos seguir moviendo donde lo dejamos, pues que si insertramos todos los fotogramas clave de golpe, tendramos que empezar a mover el MNQ desde su posicin 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 posicin 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 ms o menos 1 segundo. Entonces si la pelcula va a 24F por segundo, necesito 24 fotogramas para realizar un paso (adelante, atrs). (Claro que depende de lo rpido o lento que queramos que camine el personaje) En nuestro ejercicio le costar dar un paso 22 fotogramas, o sea 22/24=0,9 dcimas de segundo. Lo que significa que cada segundo dar aproximadamente 1 paso.http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (26 de 29)19/10/2005 10:18:23 a.m.


8.- Ahora, con la ayuda del ( . ) y de la ( , ) y del mouse tendrs que ir seleccionando cada parte del maniqu y movindolo para conseguir todas las posiciones intermedias entre el 1 y el 22 fotograma, insertando cada 3 fotogramas 1 clave, con lo cual tendrs que hacer siete posiciones diferentes completar el ciclo. Si quieres, puedes poner las posiciones intermedias para cada uno de los fotogramas aadiendo 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.- Animacin del maniqu con un fondo que se desplaza. 10.- Algo importante, despus 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 smbolo, 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.http://www.cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash (27 de 29)19/10/2005 10:18:23 a.m.


-Como es un ejercicio yo he puesto un stop(); al final de la pelcula 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 dndole 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 animacin, ya que da profundidad el movimiento del personaje. Ponerle sonido tambin es muy importante. Por ejemplo, piensa en una pelcula de terror, si bajas el volumen de la banda sonora, queda bastante ridculo verla as. 12.- Tambin puedes crear una capa por encima de todas, dentro del mc bloquearlas otras capas y dibujar a mano alzada tu personaje, fotograma a fotograma.

Conclusin y apndiceCreo que ya va siendo hora de que acabe esta breve introduccin a la animacin 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 pelculas de dibujos animados.

Una cosa ms: el audio de las animaciones.Como habris ledo, han quedado cosas en el tintero, como los smbolos (psicolgicos) en la decoracin de las escenas, o ambientacin, el sonido de la pelcula, etc. As que aqu va un comentario sobre el sonido. Respuesta a las armonas musicales, la provocacin de emociones. Al igual que los colores provocan determinados estados de nimo, la msica posee la capacidad de emocionar casi siempre al que la escucha. Emocionar significando no una expresin sentimental (aunque tambin), sino, ms bien como que te hace reaccionar, con aceptacin o rechazo a determinadas frecuencias musicales, induciendo a coger su ritmo, debido al efecto de la resonancia. Que una msica te guste o no depende de si tus frecuencias coinciden sta, causando rechazo o indiferencia, o aceptndola e interiorizndola.La armona y escalas utilizadas en las bandas sonoras influyen, y mucho, en el significado conjunto que se quiera dar a la pelcula. La octava perfecta: Provoca sensacin de descanso, simboliza la unin. La quinta: Estimula las sensaciones de movimiento y energa. La cuarta: Llega hasta el corazn y resuena en l, algunas personas se pueden sentir incmodas. La sptima: Despierta sensaciones de distancia y necesidad de resolucin. Puedes usar flash para crear divertidas tiras cmicas, dibujos animados, comics, animaciones interactivas. El lmite slo existe en tu imaginacin... Llegamos a una bifurcacin con dos caminos, un destino:



A) 1. 2. 3. 4. 5. B) 1. 2. 3. 4. 5. Completar la animacin creando un personaje. Acabar la escena, haciendo que le ocurra algo. Poner el resultado en tu pgina y disfrutar de lo bien que ha quedado. Seguir la zaga, creando otro captulo del mismo estilo. Quieres saber la ecuacin matemtica para conseguir la belleza? Pues busca en Cristalab Lavarte los dientes e ir a dormir un poco. Comprarte un buen libro de animacin. Salir de flash y borrar este archivo. Reprochar al autor por no haber dibujado un maniqu en condiciones. Agradecer al autor, responder al tema en el foro , aportando el comentario que quieras en Cristalab.

Informacin adicionalArchivos 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 animacion y expresion de personajes en flash _ cristalab

Documents

Transcript of tutorial de animacion y expresion de personajes en flash _ cristalab