Diseo y animacin de personajes en Flash 8

Introduccin a "2,5D"

El hecho de que la interpolacin sea muy sencilla en Flash no significa que siempre se pueda confiar en ella para crear animaciones convincentes. No me malinterpreten: La interpolacin puede suponer un enorme ahorro de tiempo, siempre y cuando lo nico que se desee conseguir sean objetos que se muevan por el escenario. Pero y si se desea ir hasta el lmite de la interpolacin para dotar de mayor realismo al personaje? Y si pudiera aprovechar su simplicidad para hacerlo funcionar de formas en las que no muchos otros usuarios de Flash habrn pensado? Y si despus de haber aprendido todo lo que hay que saber sobre la interpolacin regresara al primer 10% de ese conocimiento y girara a la izquierda? Adnde llegara? En esta leccin, voy a revelar una tcnica de animacin de Flash realmente fascinante que genera lo que algunos consideran un convincente efecto en 3D. Lo ms alucinante es nunca se abandona el entorno de Flash; permanecemos en todo momento en el mbito de 2D. Nos encontramos en un limbo dimensional. Sigue siendo 2D pero parece 3D. Entonces, qu es exactamente? Bienvenido al mundo de la animacin en 2,5D. Si seor, la animacin en 2,5D. Me he inventado este nombre. No digo que yo haya inventado esta tcnica, pero, por lo pronto, el nombre de 2,5D s es posible que sea invencin ma. En la Figura 28 se muestra el personaje del logotipo de mi sitio Web, www.mudbubble.com*.

Figura 28. Muy mono, verdad? La Figura 29 demuestra que coloqu cada smbolo en su propia capa. He activado la funcin de contornos para que pueda apreciarse cmo se ha separado cada parte del cuerpo del personaje. Esto es muy importante porque las interpolaciones de movimiento slo requieren un smbolo por capa durante la interpolacin. Si prueba con dos smbolos diferentes en la misma capa dentro de la misma interpolacin de movimiento, la interpolacin no funcionar.

Figura 29. Cada smbolo tiene su propia capa Me he molestado incluso en asignar un nombre a cada capa. Aunque esto no es necesario, es conveniente que las capas tengan nombre, ya que, conforme crece la lnea de tiempo, es necesario desplazarse por ella continuamente. Tambin es importante cuando se trabaja en entornos de equipo, en los que es habitual compartir archivos. La organizacin nunca es excesiva.

Una vez que ha establecido la lnea de tiempo, puede comenzar a aplicar interpolaciones al personaje. En este ejemplo, he animado slo los smbolos que forman la cabeza del personaje, por lo que me asegur de que todas las dems capas estuvieran bloqueadas para evitar realizar cambios por error en otra u otras capas.
Cabezas que giran: Parte 1

En primer lugar, cre los fotogramas clave en los que deseaba que la cabeza comenzara y dejara de girar. Haga clic y arrastre verticalmente desde la capa superior a la inferior y convirtalas en fotogramas clave (F6). Hgalo dos veces, dejando entre 15 y 20 fotogramas entre los fotogramas clave. En el ejemplo, cre fotogramas clave en los fotogramas 15 y 30 (observe la Figura 30).

Figura 30. Preparacin para aplicar interpolaciones de movimiento Manteniendo la cabeza lectora en el fotograma en el que quera que se detuviera el giro de la cabeza del personaje, edit cada uno de los smbolos del escenario empleando la herramienta Transformacin libre.

Siga la cabeza. Comenc por uno de los ojos. Es preciso imaginar los ojos girando en una esfera (la cabeza). Si esto fuera realmente 3D, un ojo aumentara de tamao al acercarse hacia nosotros. Tampoco tendra una forma tan ovalada, por lo que hacerlo ms ancho es una buena idea. Dado que el ojo de mi personaje consta de tres smbolos diferentes, les apliqu escala conjuntamente manteniendo presionada la tecla Mays y seleccionando los tres smbolos (observe la Figura 31). Luego utilic la herramienta Transformacin libre para aplicarles escala a la vez. No se preocupe por hacerlo perfectamente en estos momentos. Siempre podr refinar la animacin posteriormente. Es casi un trabajo a ciegas, ya que no sabe exactamente qu aspecto tendr hasta que aplique las interpolaciones de movimiento.

Figura 31. Seleccin de los smbolos del ojo Pasemos a la nariz. Dado que el personaje se est girando hacia nosotros, todo lo que est ms cerca de nosotros tendr que moverse de derecha a izquierda. Si fuera realmente un objeto en 3D, la nariz saldra recta de la cabeza. Para hacerlo un poco ms convincente, la gir ligeramente hacia abajo al mover la nariz de derecha a izquierda (observe la Figura 32). No olvide aumentar un poco su escala, ya que est acercndose hacia el punto de vista del usuario.

Figura 32. Modificacin de la nariz Seguidamente, desplac el otro ojo aplicndole un tamao mayor y reduciendo su forma ovalada para hacerla ms circular. Tambin mov las dos cejas, las gir ligeramente y las hice ms grandes (observe la Figura 33).

Figura 33. Modificacin del otro ojo Llegado este punto, apliqu interpolaciones de movimiento a cada una de las capas en las que realic estos cambios. Es hora de revelar lo que hice realmente y determinar si es preciso efectuar ms ajustes. No se preocupe, casi siempre es necesario realizar bastantes retoques para que este efecto quede bien. La Figura 34 ilustra el giro de la cabeza del personaje en esta etapa del proceso.

Figura 34. Giro de la cabeza del personaje Vea el archivo mudbubble_boy.swf para ver el efecto de animacin final (observe la Figura 35). [an error occurred while processing this directive] Figura 35. Efecto de animacin final del giro de la cabeza No es mal comienzo, verdad? Con uno pocos cambios sencillos mediante la herramienta Transformacin libre, comenzar a ver cmo el efecto cobra vida. No es perfecto pero en estos momentos tampoco tiene que serlo. Puede continuar retocando la cantidad de escala, la posicin y el sesgo de los elementos hasta que logre el efecto deseado.
Cabezas que giran: Parte 2

A continuacin me ocupar de los restantes activos de la cabeza del personaje para poner mayor nfasis en el giro de la cabeza. La parte ms importante de esta ilusin es convencer al espectador de que este objeto plano bidimensional tiene volumen y masa. Tambin tiene que engaar al ojo del espectador para que perciba profundidad en la animacin. Tiene que imaginar este personaje como si se creara a partir de diversos objetos tridimensionales en

el espacio. Si el personaje girara realmente la cabeza en un espacio tridimensional, lo que est en primer plano se desplazara en direccin opuesta a lo que est en el fondo. Para contribuir a imaginar este efecto, piense en la tierra girando sobre su eje en el espacio. Bsicamente, la tierra gira en sentido contrario al de las agujas del reloj. Esto significa que la superficie ms cercana a nosotros viaja de derecha a izquierda. La superficie ms lejana a nosotros viaje de izquierda a derecha. Aplicaremos este principio a la cabeza de mi personaje. Dado que el smbolo de la cabeza en s es simplemente una forma ovalada, lo nico que tengo que hacer es sesgarla un poco. Tambin decid desplazarla un poco a la derecha. Lo hice porque cuando alguien gira la cabeza hacia nosotros, se ve ms carne a la derecha del ojo izquierdo. Adems, dado que esta forma de cabeza est ms atrs que los rasgos faciales, debera moverse ligeramente hacia la derecha unos pocos pxeles. No exagere demasiado estos movimientos. Este efecto se consigue mejor con muchos movimientos sutiles que con pocos movimientos grandes. Es la suma de las partes lo que hace el todo, ya que diversas animaciones sutiles forman el efecto dramtico global. A continuacin, gir la visera hacia la derecha de la cabeza del personaje (observe la Figura 36). Recuerde que los objetos ms alejados se desplazan en direccin opuesta a los objetos de primer plano.

Figura 36. Giro de la visera de la gorra

Tambin utilic las teclas de flecha para desplazar la visera hacia la derecha de forma que pareciera estar aun ms atrs del cuello del personaje. El mismo principio es aplicable a la gorra. Sesgu la gorra para hacerla ms delgada al desplazarla a la derecha unos cuantos pxeles (observe la Figura 37).

Figura 37. Ajuste de la gorra La oreja tambin qued un poco sesgada al moverla hacia arriba y hacia la izquierda (observe la Figura 38).

Figura 38. Sesgo de la oreja No se olvide del pelo. Dise el pelo como tres smbolos individuales para que fuera posible editarlos de manera independiente. Conforme la cabeza gira hacia el espectador, lo sesgu hacia los ojos del personaje, y lo acort como si estuviera apuntando un poco ms hacia el espectador (observe la Figura 39). Se trata de falsear un poco la perspectiva, lo que puede resultar

difcil de lograr. La cantidad de sesgo y la aplicacin de escala a un smbolo tienen un lmite. Recuerde que este efecto funciona mejor si se utiliza de forma sutil. Dicho de otro modo, menos es ms.

Figura 39. Sesgo del pelo A continuacin, aad algunas interpolaciones de movimiento al resto de las capas en las que realic modificaciones. Si ha seguido el proceso hasta ahora, reproduzca para comprobar el resultado. No est mal del todo, verdad? Se puede apreciar claramente el giro de la cabeza como si fuera un objeto tridimensional. Recuerde que la mayora de los personajes, si son humanos, tienen dos orejas. Para que la otra oreja del personaje aparezca por la parte derecha de la cabeza, cree una nueva capa debajo de todas las dems. Copie la oreja existente y pguela en esta nueva capa en un fotograma clave en blanco a medio camino entre las interpolaciones de movimiento (aproximadamente en el fotograma 22). Luego seleccione Modificar > Transformar > Voltear horizontalmente para invertirla. Site la oreja en la parte derecha, detrs de la cabeza, de manera que sobresalga la mitad. sta es aproximadamente la parte de la oreja que debe quedar visible (observe la Figura 40).

Figura 40. Colocacin de la otra oreja

Aada un segundo fotograma clave en el fotograma 30 (donde residen los dems fotogramas clave) como se muestra en la Figura 41.

Figura 41. Adicin de un segundo fotograma clave Regrese al primer fotograma clave de la oreja y cambie la posicin de la oreja de manera que quede casi completamente detrs de la cabeza. He convertido algunas de las otras capas en contornos para que pueda observarse la nueva posicin de la oreja (observe la Figura 42).

Figura 42. Cambio de posicin de la otra oreja Ahora simplemente aplique una interpolacin de movimiento. Reproduzca la animacin para ver cmo emerge la oreja cuando la cabeza gira hacia usted (observe la Figurar 43). Este pequeo detalle aade mucho realismo al giro de la cabeza, ya que contribuye a crear la ilusin de que la cabeza es una esfera (esto requiere Flash Player 8). [an error occurred while processing this directive] Figura 43. Efecto de animacin final de la oreja emergiendo durante el giro de la cabeza Desplace la lnea de tiempo y realice los ajustes que estime oportunos en los smbolos si hay algo que no acaba de funcionar

bien. Esto depender de su afn de perfeccionismo y de la complejidad del personaje. El personaje del nio de este ejemplo es bastante complejo, dada la cantidad de objetos que utilic en su diseo.
Panel Aceleracin/desaceleracin personalizada (slo Flash Professional 8)

Me gustara aadir otro retoque al giro de la cabeza. Como ya sabe, las interpolaciones de movimiento pueden resultar bastante estticas debido a su velocidad constante. Su reproduccin puede presentar bastantes interrupciones al principio. Sin embargo, gracias a una nueva funcin de Flash Professional 8, puede aadir "aceleracin y desaceleracin" para suavizar la transicin. El truco est en como acelerar y desacelera dentro de una sola interpolacin. El primer paso consiste en aplicar la interpolacin de movimiento. Puede hacerlo de dos formas:

Haga clic con el botn derecho del ratn en los fotogramas situados entre los dos fotogramas clave. Seleccione Crear interpolacin de movimiento del men emergente. Seleccione todas las capas con la herramienta de seleccin haciendo clic en ellas y arrastrando para resaltarlas todas en negro. En el men emergente Interpolacin del inspector de propiedades, seleccione Movimiento.

Observe que hay un botn Editar en el inspector de propiedades (observe la Figura 44).

Figura 44. Haga clic en el botn Editar para abrir el panel Aceleracin/desaceleracin personalizada.

Al hacer clic en este botn, se abre el nuevo panel Aceleracin/desaceleracin personalizada (observe la Figura 45).

Figura 45. Nuevo panel Aceleracin/desaceleracin personalizada Con el nuevo panel Aceleracin/desaceleracin personalizada, dispone de un control mucho mayor de la aceleracin y la desaceleracin que en versiones anteriores. En el panel Aceleracin/desaceleracin personalizada se muestra un grfico que representa el grado de movimiento en cada momento. El eje horizontal indica los fotogramas y el vertical los porcentajes de variacin del objeto. La velocidad de cambio del objeto queda as representada por la curva del grfico. Cuando la curva es horizontal (sin pendiente), la velocidad es cero; cuando es vertical, no existe ninguna aceleracin o desaceleracin en los movimientos del objeto. Si selecciona la casilla de verificacin Utilizar una configuracin para todas las propiedades, la curva actual se aplicar a todas las propiedades (Posicin, Rotacin, Escala, Color y Filtros). Si anula

la seleccin de esta casilla, puede aplicar una curva independiente a cada una de las propiedades de la siguiente forma:

Posicin: Especifica la configuracin personalizada en lo que se refiere a la posicin en el escenario de un objeto animado. Rotacin: Especifica la configuracin personalizada en lo que se refiere a la rotacin de un objeto animado. Por ejemplo, puede fijar con precisin la rapidez o lentitud con que un objeto animado gira sobre s mismo en el escenario hasta situarse de cara al usuario. Escala: Especifica la configuracin personalizada en lo que se refiere a la escala de un objeto animado. Por ejemplo, puede personalizar fcilmente la escala de un objeto de modo que parezca alejarse del espectador, luego acercarse y por fin alejarse de nuevo. Color: Especifica la configuracin personalizada en lo que se refiere a las transiciones de color aplicadas a un objeto animado. Filtros: Especifica la configuracin personalizada en lo que se refiere a los filtros aplicados a un objeto animado. Por ejemplo puede controlar la velocidad con que cambia de posicin una sombra que simula el cambio de direccin de una fuente de luz. Botones Reproducir y Detener: Le permiten previsualizar animaciones en el escenario utilizando todas las curvas de velocidad definidas actualmente en el cuadro de dilogo Aceleracin/desaceleracin personalizada. Botn Restablecer: Devuelve la curva de velocidad a su estado lineal predeterminado.

Haga clic una vez en la lnea para aadir un nuevo punto de control. Arrastrando la posicin de los puntos de control, puede controlar con precisin el movimiento de un objeto. Utilizando los indicadores de fotograma (representados mediante selectores cuadrados), puede determinar cundo desea que un objeto frene o acelere. Al hacer clic en el selector de un punto de

control (selector cuadrado) ste queda seleccionado y se muestran los puntos tangentes (crculos huecos) a cada lado del mismo. Puede utilizar el ratn o las teclas del teclado para arrastrar el punto de control o el punto tangente a sus nuevas posiciones. Sugerencia: De forma predeterminada, los puntos de control se ajustan a la cuadrcula. Puede desactivar esta funcin temporalmente manteniendo presionada tecla X mientras arrastra el punto de control. Al hacer clic en una parte de la curva alejada de los puntos de control, se aade un nuevo punto de control a la curva. Haciendo clic en cualquier lugar alejado de la curva y de los puntos de control, se anula la seleccin del punto de control seleccionado en ese momento. Para que una animacin se inicie y termine gradualmente, ajuste la curva de manera similar a la de la Figura 46. Le recomiendo que experimente con la creacin y edicin de puntos de control y tangentes y la reproduccin de la animacin empleando los botones Detener y reproducir de la esquina inferior izquierda del panel. No tardar en tener percibir la relacin entre la curva y su efecto en la animacin.

Figura 46. Utilizacin de esta ruta de aceleracin/desaceleracin Ahora reproduzca la animacin. Observe cmo se acelera y desacelera el giro de la cabeza al aproximarse al final. Para animar de nuevo el giro de la cabeza hacia su posicin original, slo tiene que copiar fotogramas del fotograma 1 y pegarlos despus de la interpolacin que acaba de crear. Repita el mismo procedimiento aadiendo una nueva interpolacin de movimiento, as como la aceleracin y desaceleracin, y tendr un personaje que gira la cabeza de un lado a otro de forma convincente.
Aplicacin de filtros

Pues s: lo imposible es ahora posible con Flash. Flash 8 incorpora filtros grficos y modos de mezclas, lo que ha sido recibido con los brazos abiertos por la comunidad de usuarios de Flash. Ahora puede aplicar efectos tales como Sombra, Desenfocar, Iluminado, Bisel, Iluminado degradado y Ajustar color a cualquier instancia de clip de pelcula. Divirtase aplicando una sombra al personaje. Lo primero que debe hacer es situar el personaje en un smbolo de clip de pelcula. En la lnea de tiempo, haga clic y arrastre para

seleccionar todos los fotogramas de todas las capas. (Sugerencia: comience en el fotograma 1 de la esquina superior izquierda y arrastre en diagonal hasta el ltimo fotograma de la ltima capa.) Se resaltarn en negro los fotogramas y las capas. Seleccione Edicin > Lnea de tiempo > Copiar fotogramas (o presione Ctrl+Alt+C) para copiar la lnea de tiempo completa al portapapeles. (Tambin puede hacer clic con el botn derecho del ratn en cualquier lugar de los fotogramas resaltados y seleccionar Copiar fotogramas del men contextual.) Ahora guarde ese pensamiento para el siguiente paso. Abra la Biblioteca (Ctrl+L) y, en el men desplegable superior derecho, seleccione Nuevo smbolo, seleccione el comportamiento de Clip de pelcula y haga clic en Aceptar. Ahora est en modo de edicin para este nuevo smbolo. Seleccione el primer fotograma de la lnea de tiempo y elija Edicin > Lnea de tiempo > Pegar fotogramas (o presione Ctrl+Alt+V) para pegar la seleccin, como se muestra en la Figura 47. (Tambin puede hacer clic con el botn derecho del ratn en el fotograma 1 y seleccionar Pegar fotogramas del men contextual.)

Figura 47. Clic derecho en el fotograma 1 y seleccin de Pegar fotogramas Regrese al escenario principal y cree una capa nueva. Localice el smbolo de clip de pelcula que acaba de crear en la Biblioteca y arrstrelo hasta esta nueva capa del escenario (observe la Figura 48).

Figura 48. Arrastre del clip de pelcula al escenario Elimine todas las dems capas que contienen el personaje original. Llegado este punto, la lnea de tiempo debe tener una capa y un smbolo de clip de pelcula que contiene la animacin del personaje. Puede crear sombras de dos tipos. Una sombra estndar crea una sombra debajo de la instancia, ligeramente desplazada del original. Este tipo de efecto suele ser muy plano y parecido a una sombra en ngulo sobre una pared u otra superficie plana. No resulta demasiado convincente si lo que se desea es una sombra en ngulo sobre el suelo. Para lograr un efecto de sombra ms realista, deber aadir una serie de pasos sencillos.

Duplique la instancia del clip de pelcula y sitela detrs de la instancia original. (Puede mantener el duplicado en la misma capa y colocarla detrs de la instancia original o pegarla en una nueva capa debajo de la capa del original.) Seleccione la instancia duplicada y, en la ficha Filtros del inspector de propiedades, seleccione Sombra del men ms (+) (observe la Figura 49). A continuacin, ajuste el nivel de intensidad en un 45% aproximadamente y seleccione Ocultar objeto. Esto oculta el objeto de clip de pelcula pero muestra las propiedades del filtro Sombra. Puede realizar otros ajustes estableciendo Calidad con los valores Baja, Media o Alta o modificando la cantidad de desenfoque, color, ngulo o distancia del efecto de desenfoque con respecto al grfico original.

Figura 49. Filtro Sombra aplicado a la instancia del clip de pelcula duplicado

Para evitar que este efecto se parezca demasiado al de una sombra contra una pared plana situada detrs del objeto original, utilice la herramienta Transformacin libre para sesgar la instancia del clip de pelcula filtrado. Esta tcnica exige realizar diversos intentos (con sus correspondientes errores) hasta aplicarla correctamente. Aplaste y sesgue la instancia hasta que parezca que la sombra cae sobre el suelo (observe la Figura 50). Puede que tenga que cambiar la posicin de la instancia para lograr que quede bien.

Figura 50. Clip de pelcula duplicado sesgado con la herramienta Transformacin libre Pruebe la pelcula y observe cmo el efecto cobra vida. Al combinar animaciones con reproduccin indefinida con otras animaciones con reproduccin indefinida, puede lograr resultados visuales sofisticados, como se muestra en la Figura 51 (esto requiere Flash Player 8). [an error occurred while processing this directive] Figura 51. Ejemplos del efecto 2,5D empleando el filtro Sombra En este ejemplo se observa cmo el efecto de sombra aade una interesante dimensin a la animacin. Esta animacin consta de

una serie de clips de pelcula que contienen animaciones con reproduccin indefinida de los personajes del nio y el perro. En un artculo posterior explicar cmo las pequeas animaciones con reproduccin indefinida pueden suponer una gran aportacin para sus pelculas. Espero que este artculo le haya ayudado a perfeccionar sus habilidades de diseo y animacin en Flash. Existen otras tcnicas de animacin que puede utilizar con Flash, como la animacin completa (a la que con frecuencia nos referimos como de fotograma-en-fotograma), interpolaciones de formas y secuencias de imgenes de programas de vdeo y animacin en 3D. Tambin existen diversos complementos interesantes disponibles a travs de otros diseadores y animadores que pueden ayudarle a acelerar el flujo de trabajo en Flash. No olvide consultar futuros artculos en los que describan estas tcnicas y herramientas.