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.

3.-Animación del maniquí

-El guión y el guión gráfico.

-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

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

Yo me parto...

Animar un cuerpo humano es de las acciones más complejas que se pueden llevar a cabo en un proyecto de animación. Es decir que si no tienes paciencia, más vale que olvides este tema, 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 o Brazo derecho o Antebrazo derecho

2. Capa cabeza o Cabeza

3. Capa piernaDer o Muslo derecho o Pierna derecha

4. Capa cuerpo o Cuerpo (tórax y abdomen)

5. Capa brazoIzq o Brazo izquierdo o Antebrazo izquierdo

6. Capa piernaIzq o Muslo izquierdo o Pierna izquierda

7. Capa fondo o 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

Caricaturas en Flash: Tutorial para copiar dibujosEscrito por Diego Trujillo el Jueves 21 de Noviembre de 2002 a las 00:00hs

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...

1 Buscamos la foto que queremos dibujar...

(Como ven ya la foto esta media pixelada y mal cortada)

2 - Abrimos Flash e importamos esta foto dentro de Flash

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 2: Lo que hacemos es correr la imagen hacia un costado (importante: no la borramos para tener una base de los colores que esta tiene) y nos quedara solamente el dibujo deliniado.

Numero 3: Tomamos la herramienta gotero  lo ponemos sobre la imagen original, y seleccionamos la parte que queremos pintar por ejemplo "la cabeza" el gotero nos tomará el color , y ese color lo aplicamos en nuestro dibujo de lineas. Con esta opcion nuestro dibujo tendra colores similares al original.

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 !!!!

1. Pasos previos y Organización.

1.1 Equipo necesario:

Antes de nada, deciros que si queréis dar un acabado medianamente profesional a vuestras animaciones, deberías invertir un poco de dinero en vuestro equipo.

Se puede trabajar simplemente con el ratón y Flash, pero la diferencia es notable si disponéis de lo siguiente:

Tableta gráfica: recomiendo la marca Wacom, es la marca de los profesionales y tienen una gran variedad. Para empezar podéis probar con el modelo “volito” (ronda los 50 o 60€).

Escáner : no olvidéis que el inicio de todo proyecto DEBERIA siempre empezar a fraguarse con papel y lápiz. Imagina que ya tienes tu personaje dibujado en papel, siempre será mas practico y preciso escanearlo y repasarlo en flash que volver a dibujarlo directamente , corriendo el riesgo de deformar las proporciones del personaje etc… (si tienes una buena cámara digital, puedes ahorrarte comprar el escáner).

1.2 Aptitud y actitud necesaria:

Vamos a dejar unas cosas claras: la animación no es hacer dibujitos, la animación no es fácil, no todo el mundo puede animar, la animación requiere unos conocimientos amplios de anatomía, movimiento e incluso de artes escénicas, suelen decir que un animador es un actor frustrado, la verdad es que no se si afirmaría tanto, pero cuanto más sepas de expresión corporal, mayor sentimiento tendrán tus animaciones.

Al igual que yo nunca podré ser astronauta o futbolista, no debes sentirte mal por no conseguir animar algo decente, no es bueno engañarse, si no tienes unas mínimas aptitudes para la creación, si dibujas un perro y parece un cerdo… o bien lo dejas, o bien aprendes de la forma tradicional: escuela de arte, de animación… pero déjate guiar por los profesionales.

Luego llegamos al tema de la actitud, este es tan importante como el hecho de saber dibujar, tienes que tener la mente preparada para afrontar un proyecto de animación, tienes que saber que para hacer cosas decentes, tienes que tomar mucho tiempo, y el proceso si no se enfoca correctamente puede ser algo realmente tedioso, yo he realizado animaciones de 1min en una semana, y no me considero rápido, pero eso no se debe hacer si significa quitar tiempo a los procesos previos como pueden ser los diseños de personajes, backgrounds etc… Otra cosa es que te paguen por ello y tengas que trabajar bajo presión (eso seria digno de otro tutorial) pero vamos a enfocarlo como un proyecto personal, ¿ok?.

1.3 Dar forma a las ideas (proceso de creación):

Paso uno: Storyboard.

Supongamos que ya tienes un argumento pensado y bien claro (eso ya es un logro).

Coge papel y lápiz, tirate en la cama, o en el lugar que más cómodo te encuentres y ponte a dibujarte un storyboard, será tu herramienta más importante y seguro que este primer storyboard te da las bases de lo que quieres, pero no será perfecto así que cambia cosas, modifica los planos, haz pruebas… Al final tendrás una 3ª o 4ª versión del story que será la definitiva. Hasta este momento no te preocupes si necesitas mucha o poca animación, hazlo como te gustaría y punto. (procura buscar más información para hacer buenos storyboards y no cometer fallos de racord y esas cosas)

Otra buena idea seria recortar las viñetas de tu storyboard y pincharlas en una pizarra de corcho, así es mas fácil modificar tu trabajo, cambias el orden de las viñetas, agregas alguna más o quitas las que sobren, todo esto ayuda a mejorar la forma en la que vas a narrar la historia.

Después de esto también es muy importante crear una animatica. La mayoría habréis visto que en los extras de algunos DVD hay una parte que dice: película vs. storyboard, pues es algo así, la animatica es un storyboard grabado y con los diálogos o las músicas por encima. podéis crear algo similar en flash, importando las viñetas del storyboard que habéis escaneado o fotografiado y poniendo en una capa superior al sonido (en caso de tenerlo). Esto os dará una idea mucho más clara del ritmo que tendrá vuestra película, y de la duración de la misma. En este proceso debéis ajustar la duración de cada plano y anotar los segundos que dura cada uno en un papel o una libreta. ¿Por qué hacemos esto? Por organización. Imagina que tienes un plano de un tipo corriendo de lado a lado de la pantalla, este plano dura 2 segundos, por lo tanto, (tenemos nuestra película configurada a 24fps) son 48 fotogramas los que vamos a utilizar para ejecutar esta acción, este dato nos sirve para no trabajar a “ciegas” y luego no tener que quitar o poner fotogramas para ajustarnos a la duración de nuestro plano.

Esto es muy bueno cuando tienes que coordinar acciones con la música, por ejemplo, en vuestra mano queda hacerlo o no, pero si queréis hacer las cosas bien, probadlo!.

Paso dos: Concept art.

Realmente no es el segundo paso, pues es perfectamente compatible hacer concept arts o bocetos mientras otro equipo planea el storyboard… pero si el trabajo es individual, personalmente veo más cómodo hacerlo después, eso ya es cuestión de gustos.

Bueno el tema no consiste ni más ni menos que en dibujar personajes en papel, escenarios, objetos, escenas… todo lo que creas necesario para dar un contexto a los personajes y ambientación a la historia, cuantos más dibujos tengas de este tipo mejor, nunca sobran y dan muchas ideas. El objetivo final es ir definiendo y puliendo el estilo, los personajes y escenarios. Posteriormente crearemos las hojas de modelo (model sheets) de los personajes acabados. Es muy interesante tener todo esto guardado en una carpeta para echarle un vistazo de vez en cuando. Como con el storyboard, es muy interesante buscar información más amplia de esto y ver muchos conceptos.

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.

Nota: el ejemplo se encuentra en la Escena 1 del archivo BRYAN.FLA

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.

Nota: el ejemplo se encuentra en el archivo BRYAN.fla

Como veis podemos organizar las carpetas como queramos, yo lo utilizo así, pero cada uno que se busque la manera más práctica.

About Beauty Bryan

He acompañado el tutorial con este personaje, sencillito y resulton. La razón de esto es ahorraros el tiempo de dibujo del personaje, para dedicaros directamente a la animación.

No tendría porque avisar esto pero lo hago: este personaje NO puede ser usado con ningún fin comercial, de hecho ningún elemento de este FLA debe ser usado para fines lucrativos o como imagen de NADA. Tened en cuenta que el fin para el que se ha creado es meramente el EDUCATIVO para vuestro beneficio personal.

Se ruega que se comunique cualquier uso fraudulento a este email.

2.2 Backgrounds (fondos).

En ocasiones crearemos nuestras animaciones sobre un fondo blanco, o con colores planos pero trabajarse un buen escenario puede ser algo muy gratificante.

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.

Organización y uso de capas:

Un fondo puede ser aun mas atractivo si le añadimos algo de movimiento y profundidad, esto lo conseguiremos poniendo algunos elementos en diferentes capas, que simularan los niveles de profundidad y haciéndolos aparecer con un uso moderado de las interpolaciones de movimiento que nos ofrece flash. Es recomendable estudiarse los movimientos de cámara que se usan en el cine y pensar la manera de trasladarlo a flash. Otro punto mas en el que demostrar el ingenio de cada uno.

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.

3.1 Animación limitada, full animation y rotoscopia (definiciones).

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.

3.2 Animación en sucio (rough) dibujos clave e intercalaciones.

Pasemos ahora al método:

Animación en sucio (rough):

Para plantear una animación, lo mas normal es dibujarla en sucio, mediante los encajes y volúmenes de nuestro personaje, esto sirve para tener una referencia clara del movimiento, y cuanto mas respetemos los volúmenes y proporciones en nuestra “rough animation” mejor funcionara nuestra animación.

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.

Nota: el ejemplo se encuentra en BRYAN.fla, escenas: “trae caja (3)clean up caja+cabeza bryan”.

Espero que con los ejemplos estéis entendiendo el sistema, realmente no es complicado es solo un método, como tantos otros.

3.3 Animación limitada.

Si aún no habeis descargado el archivo de ejemplo incluido en este tutorial, es el momento de hacerlo. Nada mejor que ver las cosas para entenderlas asi que esta es la explicación a todo el contenido del archivo.

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.

Movimientos sin ciclo:

Existen acciones concretas que realiza un personaje que no admiten ser ciclos, estas animaciones tenemos que tratarlas de otra forma, porque algunas tendremos que pensarlas nosotros, no hay un manual que nos diga como debemos representar cada movimiento, si un personaje esta sentado en una silla, da un golpe sobre la mesa y luego se levanta de la silla, tendremos que dibujar e imaginar la forma en la que realiza la accion y diseccionar el movimiento, tomando como dibujos claves de la animación las poses mas extremas o acentuadas y a partir de ellas trabajar para darlas una continuidad y un timming a la animacion.

Esto aplicado a flash, quiere decir que debemos hacer una animación en sucio, usando los encajes del cuerpo de nuestro personaje, y luego ir limpiando el dibujo en las capas superiores.

En el archivo de ejemplo tenemos una serie de escenas en la película en las que Bryan transporta una caja y la suelta en el suelo, esta es la forma en la que se trabaja.

Lipsync (animación de bocas):

La animación y sincronizacion de las bocas de los personajes con el sonido es un tema muy amplio, y bueno como en todo, el resultado dependera del tiempo que inviertas en el tema. Simplemente voy a dar unas pequeñas bases y ya profundizaremos en el tema en otra ocasión. Veamos la escena “Bocas” en el archivo de ejemplo de Bryan, como veis la forma de implementar las bocas puede ser tan sencilla como esta, pero podriais mejorarlo si ademas de las bocas, animais tambien el menton, pero bueno, para empezar es suficiente este metodo.

Existe un “codigo de bocas”, a cada letra le corresponde una forma de la boca, a partir de ahí trabajamos.

La cuestion en este momento es, si mi personaje dice: Buenos dias, ¿Tengo que copiar y pegar cada boca de cada letra? La respuesta es no, podeis hacer la prueba, pero eso os dara como resultado que el personaje mueva la boca deprisa y sin sentido. ¿Qué debes hacer? Pues lo mas facil es incluir solo las bocas correspondientes a las partes mas marcadas del sonido, pero eso debeis evaluarlo vosotros mismos, escuchando el sonido, pues depende tambien de la actitud con la que habla nuestro personaje.Por otra parte, en ocasiones se deben crear bocas de transición entre una letra y otra, para que vuestra animación sea mas suave. Es muy recomendable tener un espejo delante a la hora de realizar estos trabajos, es extremadamente util para tomar referencias de los labios, lengua, dientes etc…

Flash - AnimaciónPor 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

un fotograma (no clave). Se mostrará así: . El rectángulo blanco significa que no ha habido cambios de forma ni posición.

Podemos mover los fotogramas clave o los del rectángulo para cambiar los puntos de inicio o fin de la animación.

Podemos variar la velocidad de toda la animación en "Modificar-película-Veloc Fotogramas": nº de fotogramas/seg.

Podemos copiar un fotograma clave y pegarlo en otra posición para volver a esa situación después de haberla cambiado.

 

Cómo Crear Animaciones

Para crear una interpolación de movimiento, el mejor método es seguir exactamente los siguientes pasos:

1. Crear el objeto en el fotograma clave inicial 2. Crear interpolación de movimiento (con el botón derecho) 3. Insertar un fotograma clave al final 4. Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)

Si todo ha salido bien, se verá así:

En cambio, si falta el fotograma clave final, será así:

Y si lo que falta es crear la interpolación, veremos:

Para crear una interpolación de forma, el mejor método es seguir exactamente los siguientes pasos:

1. Crear el objeto en el fotograma clave inicial 2. Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación:

"Forma") 3. Insertar un fotograma clave al final 4. Modificar el objeto en el fotograma clave final

Si todo ha salido bien, se verá así:

Para crear un fundido de color, seguiremos los mismos pasos que en la interpolación de forma, pero en este caso debemos asignar diferentes colores a los fotogramas inicial y final. OJO: antes, hay que "separar" el texto.

 

Posibles problemas en las animaciones por interpolación:

Antes de animar mediante el panel "Fotograma" un objeto con borde (por ejemplo, un rectángulo o una elipse), o uno que esté formado por varios objetos, debemos agruparlos ("Modificar-Agrupar"). Si elegimos "crear una interpolación de movimiento usando el botón derecho, Flash agrupa automáticamente los objetos seleccionados.

No podemos animar independientemente cada letra de una palabra a no ser que las distribuyamos en diferentes capas (cada letra en una capa)

No podemos cambiar el color de un texto gradualmente si no está convertido a gráfico. ("Modificar-Separar")

Si dos objetos van a animarse de formas diferentes, es mejor colocar cada uno en una capa diferente.

Si queremos hacer una interpolación de forma y movimiento a la vez, debemos elegir la de forma.

Si sólo deseamos cambiar la posición, rotación o escala (tamaño), no debemos hacer una interpolación de forma. En su lugar, elegiremos una interpolación de movimiento.

 

Cómo crear una línea a través de la cual se moverá el objeto:

1. Crear el objeto en el fotograma clave inicial 2. Agregar una Guía de Movimiento (con el botón derecho encima del nombre

de la capa) 3. Crear interpolación de movimiento (con el botón derecho apuntando al

fotograma inicial) 4. Insertar un fotograma clave al final 5. Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo) 6. En la capa guía, crear un trazado (con el pincel, la pluma, el lápiz, el óvalo e

el rectángulo) 7. Insertar un fotograma clave en la capa guía, al final 8. Arrastrar el objeto en cada fotograma clave hasta que ajuste con el

comienzo o fin del movimiento trazado. 9. Si deseamos que la forma gire a la vez que el trazado, debemos elegir

"Orientar según trazado" en la paleta fotograma, en el fotograma inicial. 10. Podemos ocultar el trazado de guía ocultando la capa que lo contiene (botón

del ojo)

 

Cómo cambiar el color de un texto gradualmente:

Veamos cómo hacer el famoso efecto de "fade in" o "fade out" (desvanecimiento) de un texto, que cambiará de color poco a poco, del color de fondo a otro, o de otro al color del fondo (o entre dos colores cualesquiera)

1. Crear el objeto en el fotograma clave inicial, con el color inicial 2. Separar el texto ("Modificar-Separar") 3. Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación:

"Forma") 4. Insertar un fotograma clave al final 5. Cambiar el color del objeto en el fotograma final

 

¿Cómo hacer un giro de 360º o más?

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

1. La caja de herramientas   2. El menú de propiedades   3. La línea temporal de la animación   4. El escenario  5. La esfera de rotación   6. La esfera de iluminación   7. La paleta de colores y materiales

1. La caja de herramientas: es donde se encuentran los iconos que permiten el acceso rápido a las principales funciones. Estos iconos son los siguientes:

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.

Luces puntuales: Mediante este icono   iluminamos un área más concreta.

Mediante este otro  se puede seleccionar, como en el caso anterior, un destino u objetivo. Se utilizan para crear brillos o reflejos sobre un objeto.

Esfera de iluminación: Mediante la esfera podemos mover las luces y empleando los botones que se encuentran a ambos lados de la esfera, eliminar o agregarlas. Se pueden a ñadir la cantidad de luces que se quieran.

Propiedades: Cuando seleccionamos una luz en la esfera, aparecerán  sus características. Se puede cambiar el color de la luz. También podemos activarlas o desactivar, así como cambiar la sombra y el especulo de cualquiera de las luces que están en el escenario.

Las propiedades de cada tipo de luz difieren, cuando seleccionamos una luz puntual podemos además, realizar una decoloración, cambiar el radio de incidencia de la luz o hacer que el tamaño de incidencia cambie.

Los Objetos: Podemos añadir cualquier tipo de objetos a las escenas, ya sean objetos de texto o figuras geométricas.

Posición: pulsando sobre cualquiera de los objetos, estos aparecen seleccionados y arrastrándolos con el mouse podemos situarlos en cualquier parte del escenario.

Propiedades: Cuando seleccionamos el objeto aparecen una serie de propiedades que se pueden modificar, como por ejemplo la escala que se muestra en la siguiente figura:

Escala: Podemos escalar el objeto teniéndolo seleccionado y pulsando el botón derecho del mouse. Luego, si nos acercamos con el mouse al centro de objeto el mismo se

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

horizontal, vertical, rotarlo  o indicar el incremento en rotación  (lo mismo sucede para las luces).

Con respecto a los iconos que aparecen del lado derecho de la esfera, el primero es para resetear la posición de un objeto elegido en su posición original (cuando lo creamos o lo importamos).

E l segundo nos permite resetear el pivote, que es el punto a partir del cual gira el objeto. El tercer icono elimina cualquier tipo de rotación que realizamos sobre la figura seleccionada.

El cuarto vuelve a la posición inicial donde aparece la cámara con la cual vemos los objetos, es decir, vuelve a la vista original.

Los Materiales: A los objetos podemos aplicarle cualquier tipo de materiales, seleccionando el material del panel de materiales y luego arrastrando y pulsando sobre el objeto. Es importante conocer las características de las luces ya que de ellas van a depender los materiales.

Para crear o editar un material existente lo que hacemos es seleccionar desde el menú "Setup" y luego "Materials". Se abrirá la siguiente ventana:

Si creamos un material lo podemos incluir dentro de alguna categoría existente o crear una nueva.

Animaciones: Si bien el uso de la línea temporal es similar a Flash, existen algunas diferencias.

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.

Bueno, ahora veamos lo que es La Interpolación de Movimiento:Si recuerdan el pasado movimiento de la bola, me gustaría, hacer el mismo pero ahora con interpelación de movimiento o motion tween.

Para comenzar vamos a ver primero lo que es un símbolo / symbol , para poder trabajar con interpolación de movimiento en flash tenemos que utilizar símbolos, los cuales podemos crearlos convirtiendo objetos que tengamos en nuestro escenario (de objeto a símbolo), o crearlos vacíos y posteriormente insertarles algo(esto es un poco mas difícil, así es que lo veremos mas adelante), pero vamos a ver los que creamos convirtiendo un objeto en símbolo.

Volvamos dibujar la misma pelota (circulo) pero en una nueva película, al igual que en el ejemplo anterior.

Nota: Cuando nosotros le ponemos Crear interpolación de movimiento / create motion tween, automáticamente Flash nos convierte nuestro objeto (que en este caso es la bola) en un símbolo, pero esto no es conveniente manejarlo así, así es que mejor nosotros crearemos nuestro propio símbolo para poder definirle un nombre y tipo de símbolo que queremos que sea.

Muy bien, ahora que ya tenemos nuestra pelota, utilizaremos la herramienta flecha / arrow tool, y seleccionaremos la pelota dando clic en un lado de ella y arrastrándolo hasta cubrirla de esta manera:

y al soltar el clic del ratón se verá así:

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í:

Si tu pelota se ve de esta manera, ¡Felicidades!, ya tienes un símbolo movie clip.

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................