flash 8

CURSOS FLASHflash

Diseño y animación de caracteres en Flash 8

Jen deHaan

Redactora técnica senior
Macromedia
weblogs.macromedia.com/
dehaan*
www.flash-mx.com*
www.flash8forums.com*
Muchos animadores utilizan Macromedia Flash para crear animaciones vectoriales detalladas. Una de las virtudes de Flash radica en la versatilidad de su flujo de trabajo y su proceso de producción. He desarrollado una serie de técnicas personalizadas que pueden ayudarle a crear y administrar las diversas partes móviles de un carácter animado complejo. En este artículo revelo algunos de mis secretos mejor guardados sobre Flash para convertir un boceto a lápiz de un carácter en un dibujo totalmente animado de Flash.

Requisitos

Para aprovechar al máximo este tutorial, necesitará el software y los archivos siguientes:

Macromedia Flash Professional 8

• Probar
• Comprar

Tutoriales y archivos de muestra:

• mudbubble_boy.zip (ZIP, 106K)

Conocimientos previos

Ninguno en absoluto. Este artículo pueden seguirlo desde principiantes hasta usuarios con experiencia en Flash.

Dibujo en Flash

Macromedia Flash ofrece diversas herramientas de dibujo que permiten crear, entre otras cosas, personajes muy atractivos. Todas las herramientas son diferentes y proporcionan resultados estilísticos distintos. Algunas herramientas crean archivos de gran tamaño, mientras que otras crean archivos más pequeños. Conforme vaya familiarizándose con estas herramientas, aprenderá a elegir la herramienta más idónea para el estilo artístico que desea crear y para cumplir posibles requisitos de tamaño de archivo a los que deba amoldarse. Es sencillamente un equilibrio entre el tamaño de archivo y los tiempos de descarga y el rendimiento de la reproducción. En esta sección observaremos las distintas herramientas de dibujo de Flash y debatiremos sus pros y sus contras.

Herramienta Pincel

La herramienta Pincel, que se muestra en la Figura 1, es probablemente la más versátil de todas las herramientas, especialmente si se combina con una tableta sensible a la presión.

Figura 1. Herramienta Pincel

Dibujar con la herramienta Pincel es lo mismo que dibujar con formas. Es la herramienta cuyo uso resulta más natural, ya que ofrece sensibilidad a la presión y a la inclinación. Wacom fabrica tabletas muy populares con diferentes tamaños que incluyen un lápiz inalámbrico y sin batería denominado pluma y que funciona estupendamente con Flash. Dado que una tableta Wacom puede funcionar con su ratón actual o reemplazarlo totalmente, su uso no se limita a Flash. Muchos diseñadores digitales utilizan una tableta con diversos editores gráficos y programas de animación, entre ellos Adobe Photoshop, Adobe Illustrator y Macromedia FreeHand. Pero no se preocupe: si no dispone actualmente de una tableta, puede continuar utilizando la herramienta Pincel con una limitación: que las funciones de sensibilidad a la inclinación y la presión no estarán disponibles.
Si tiene instalada una tableta sensible a la presión, la selección de la herramienta Pincel le proporcionará dos subopciones que afectan a la calidad de la línea. En la parte inferior de la caja de herramientas, verá las opciones de sensibilidad a la presión y la inclinación (observe la Figura 2). Con una o ambas de estas opciones seleccionadas, se obtienen resultados muy diversos al emplear la herramienta Pincel en Flash.

Figura 2. Opciones de sensibilidad a la presión y la inclinación

La Figura 3 muestra lo que ocurre al dibujar con la herramienta Pincel. El resultado de la izquierda es una forma (lo que significa que dispone de puntos vectoriales en todos los lados). Cuantos más puntos tiene un objeto, mayor es el tamaño del archivo. Yo he dibujado esta forma en concreto empleando una tableta sensible a la presión. Observe los extremos en huso y el grosor irregular de la línea que se obtiene al aplicar una presión variable al trazo. La forma de la derecha también la dibujé con la herramienta Pincel; sin embargo, en este caso desactivé la configuración de sensibilidad a la presión.

Figura 3. Forma dibujada con la configuración de sensibilidad a la presión activada (izquierda) y desactivada (derecha)

La herramienta Pincel ofrece diversas subopciones que ayudan a dibujar determinados efectos (observe la Figura 4):

• Pintar Normal: Pinta sobre las líneas y rellenos de la misma capa
• Rellenos de Pintura: Pinta dentro de un color de relleno y fuera de una forma (en el escenario)
• Pintar detrás: Pinta detrás de los rellenos y trazos existentes
• Pintar Selección: Le permite pintar dentro de un relleno seleccionado solamente
• Pintar Dentro: Le impide salirse de las líneas después de empezar a pintar dentro de un relleno

Figura 4. Efectos de la herramienta Pincel

Dibujo de objeto

Dibujo de objeto es una función nueva de Flash 8. Le permite dibujar formas como objetos individuales que permanecen como objetos independientes unos de otros. Ya no es necesario dibujar cada forma en una capa independiente para evitar que las formas se "corten" entre ellas. Con Flash 8, puede simplemente activar o desactivar Dibujo de objeto como subopción de cualquiera de las herramientas de dibujo (Pincel, Lápiz, Pluma, Óvalo y Rectángulo) bajo Opciones (observe la Figura 5). Los usuarios que conozcan Macromedia FreeHand o Adobe Illustrator agradecerán esta incorporación a Flash que ya les resultará familiar.

Figura 5. Botón de subopción Dibujo de objeto

Como puede observar en la Figura 6, al dibujar una forma sobre otra ya existente sin Dibujo de objeto, las formas se mezclan, lo que provoque una de ellas corte la otra. Esto se conoce como modo de dibujo de fusión. Este modo puede resultar útil para cortar formas y crear otras nuevas.

Figura 6. Modo de dibujo de fusión

Al dibujar una forma en el modo Dibujo de objeto, ésta se convierte automáticamente en un dibujo de objeto y no puede mezclarse con otras formas. Puede superponer Dibujos de objetos sin que éstos queden cortados (observe la Figura 7). Esto resulta útil en situaciones en las que desee cambiar la posición de los objetos o simplemente necesite mantenerlos como objetos independientes.

Figura 7. Modo Dibujo de objeto

Yo creé el personaje de niño de marca registrada (observe la Figura 8) completamente con el ratón y las herramientas Rectángulo y Óvalo. Nunca había utilizado la tableta Wacom en combinación con la herramienta Pincel. Podría haber elegido la herramienta Pincel, pero el uso de las herramientas de formas proporcionaba la calidad de líneas ultra-limpias que intentaba conseguir. Con frecuencia, la herramienta Pincel puede generar diversos puntos innecesarios que hacen aumentar el tamaño de los archivos y dan bastantes dolores de cabeza al intentar editar las formas posteriormente. En el caso del gráfico del niño, buscaba formas sencillas y el menor tamaño de archivo posible.

Figura 8. Personaje creado mediante las herramientas de formas

Herramienta Lápiz

La herramienta Lápiz, que se muestra en la Figura 9, es la herramienta perfecta si se desea lograr un grosor de línea homogéneo en toda la imagen y con el menor tamaño de archivo posible.

Figura 9. Herramienta Lápiz

Las líneas dibujadas con la herramienta Lápiz constan de menos puntos vectoriales. Una línea totalmente recta sólo tiene dos puntos, uno a cada extremo. Una línea curva tiene tres puntos o más, dependiendo del número de curvas (observe la Figura 10).

Figura 10. Líneas dibujadas con la herramienta Lápiz

La herramienta Lápiz también ofrece diversos modos de calidad de línea (observe la Figura 11):

• Enderezar: Esta opción es estupenda cuando se desea dibujar líneas muy rectas a mano alzada. Aunque le tiemble el pulso, las líneas se "ajustarán" a la recta después de terminar de dibujar el trazo.
• Suavizar: Si utiliza esta opción, las líneas se suavizan automáticamente conservando la forma básica que se desea crear.
• Tinta: Esta opción deja sin modificar la calidad de la línea. Se trata de una opción magnífica para dibujos a mano alzada o de estilo libre.

Figura 11. Modos de calidad de la herramienta Lápiz

Herramientas de formas

Las herramientas de formas (Óvalo y Rectángulo) crean rellenos y trazos primitivos (observe la Figura 12). Manteniendo presionada la tecla Mayús en combinación con la herramienta de forma, se crea un círculo o un cuadrado perfecto.

Figura 12.Herramientas de formas: Ovalo y Rectángulo

Puede seleccionar el color de relleno y de trazo a través del inspector de propiedades (observe la Figura 13). Al hacer clic en cualquiera de las muestras, se abre el panel de color, que le permite editar el trazo o la opción de color.

Figura 13. Inspector de propiedades de la herramienta Rectángulo

Puede incluso no especificar ningún color para el trazo o relleno seleccionando el cuadrado con la línea diagonal roja (observe la Figura 14).

Figura 14. Seleccione este cuadrado para dibujar sin color

Herramienta Pluma

Para dibujar trazados precisos como líneas rectas o como curvas suaves, puede utilizar la herramienta Pluma (observe la Figura 15). Puede crear segmentos de líneas rectas o curvas y ajustar el ángulo y la longitud de los segmentos rectos, así como la pendiente de los segmentos curvos.

Figura 15. Herramienta Pluma

Con la herramienta Pluma, puede hacer clic para crear puntos en los segmentos de las líneas rectas o bien hacer clic y arrastrar para crear puntos en los segmentos de las líneas curvas. Puede ajustar los segmentos de las líneas curvas y rectas ajustando los puntos de las líneas. Puede convertir líneas curvas en líneas rectas y viceversa.
Al crear líneas curvas, observará que Flash crea selectores de tangentes para cada punto de anclaje. Las líneas pueden editarse posteriormente con la herramienta Subselección (Flecha blanca) seleccionando un anclaje y arrastrando los selectores de tangente (observe la Figura 16). Al mover los selectores con respecto al punto de anclaje, cambia la forma de la curva.

Figura 16. Segmento de línea dibujado con la herramienta Pluma que se está editando con la herramienta Subselección.

Herramienta Papel cebolla

La herramienta Papel cebolla está situada en la parte inferior del panel de línea de tiempo (observe la Figura 17).

Figura 17. Herramienta Papel cebolla

Al seleccionar la herramienta Papel cebolla, la aplicación añade marcadores de Papel cebolla al indicador de la cabeza lectora de la línea de tiempo (observe la Figura 18). Puede arrastrar estos marcadores para ampliar el número de fotogramas antes y después del fotograma actual.

Figura 18. Efecto de papel cebolla

Flash ofrece dos tipos de papel cebolla:

• Papel cebolla normal: El fotograma actual se muestra a todo color mientras los fotogramas anteriores y posteriores se atenúan progresivamente. Con esto se consigue dar la sensación de que hay una serie de dibujos creados en papel semitransparente apilados unos sobre otros (observe la Figura 18).
• Modo de contornos de papel cebolla: El fotograma actual se muestra a todo color, mientras que los fotogramas anteriores y posteriores se muestran como contornos (observe la Figura 19). Esto es más fácil de ver cuando se trabaja con varios fotogramas clave situados antes y después del fotograma actual.

Figura 19. Modo de contornos de papel cebolla

Trabajo con símbolos

Los símbolos son la propia esencia de Flash. Puede convertir en símbolo cualquier dibujo que haga o que importe. Además, deberá hacerlo casi en todos los casos. El motivo de ello es el siguiente: cuando un objeto se convierte en símbolo, este se convierte automáticamente en un elemento de la biblioteca de documentos de Flash. Cada documento de Flash tiene su propia biblioteca desde la que puede arrastrar un símbolo al escenario. Al hacerlo, nos referimos al objeto del escenario como instancia. Con independencia del número de instancias de un símbolo que haya en el escenario, Flash sólo necesita cargarlo una vez. Esto permite a Flash ofrecer animaciones en flujo con un tamaño de archivo reducido. Es una técnica muy eficiente reutilizar símbolos tantas veces como sea posible. Puede aplicar a las instancias efectos tales como Escala, Tinta, Alfa y Brillo, así como aplicarles interpolaciones de movimiento en combinación con uno o varios efectos.
No obstante, para ir por orden, os presentaré los símbolos y sus comportamientos.
Cree un objeto (bastará con una forma sencilla). Selecciónelo (Ctrl+A) y luego conviértalo en símbolo eligiendo Modificar > Convertir en símbolo o presionando la tecla F8. Se abrirá el cuadro de diálogo Convertir en símbolo (observe la Figura 20).

Figura 20. Cuadro de diálogo Convertir en símbolo

En el cuadro de diálogo Convertir en símbolo, puede escribir el nombre del símbolo, seleccionar uno de los tres comportamientos y determinar el punto de registro del objeto. En la siguiente lista se explica en qué consiste cada comportamiento y qué significa:

• Clip de película: Los clips de película son dinámicos, lo que significa que pueden especificarse como destino del código ActionScript, que es el lenguaje de programación de Flash. Pueden tener cualquier número de capas y fotogramas, pero sus líneas de tiempo son independientes de todas las demás líneas de tiempo. Piense en el sistema solar: cada planeta es un clip de película que se reproduce indefinidamente y de manera independiente alrededor del sol, que es la línea de tiempo principal.
• Botón: Los botones tienen cuatro estados: Arriba, Sobre, Presionado y Zona activa. Éstos se representan como fotogramas clave en un símbolo de botón. Puede colocar gráficos en cualquiera de estos estados y luego aplicar código ActionScript a la instancia de un botón para añadir interactividad a la película Flash.
• Gráfico: Los símbolos gráficos son muy similares a los clips de película, con la diferencia de que no son dinámicos y no pueden especificarse como destino del código ActionScript. Sin embargo, puede colocar un símbolo gráfico dentro de un símbolo de clip de película. Los símbolos gráficos pueden tener cualquier número de fotogramas y capas. La características más importante es que siempre están sincronizados con la línea de tiempo principal y unos con otros. Esto es muy importante cuando se desea crear animaciones basadas en el tiempo.

En este tutorial de animación, recomiendo utilizar el comportamiento Gráfico. Esto le permite desplazar la línea de tiempo para ver la reproducción de la animación dentro del entorno de edición de Flash. Desplazamiento significa aquí mover manualmente la cabeza lectora hacia delante y hacia atrás para reproducir el contenido de la línea de tiempo. El contenido de los símbolos de clips de película no se reproduce más allá del fotograma 1 a no ser que pruebe la película Flash (Ctrl+Intro) o exporte la película como archivo SWF.

Limpieza de los bocetos

Todo buen diseño empieza normalmente con el lápiz y el papel de toda la vida. Algunos de los momentos de mayor creatividad los he experimentado durante sesiones de gestión largas y aburridas; otras veces, un simple garabato en una servilleta de papel puede servir de inspiración para un gran personaje. El hecho es que nunca sabemos cuándo va a llegar la inspiración, por lo que lo mejor es llevar siempre un lápiz en el bolsillo o detrás de la oreja.
Puede crear un boceto en Flash empleando cualquiera de las herramientas que hemos descrito. Si tiene dibujos en papel que desea utilizar como base para un personaje en Flash, necesitará un escáner para escanearlos y guardarlos como archivos gráficos. La mayoría de los escáners se suministran con software que facilita este proceso. Algunos de los formatos gráficos más utilizados que pueden importarse a Flash son PNG, GIF, JPEG, TGA y TIFF.
Tras importar el boceto a Flash, deberá pensar en cómo dividirlo en elementos individuales. Esta es la parte más difícil. Se trata de un proceso muy conceptual que depende en último término de su estilo de animación y del estilo del personaje.
Parafraseando una campaña publicitaria de Volkswagen, podemos decir que la forma está al servicio de la función, lo cual resulta crucial en el diseño de un personaje. Debe visualizar cómo cree que podría moverse el personaje, lo que en último término condiciona su diseño global.
La Figura 21 muestra el ejemplo de un boceto y luego el producto acabado después de redibujarlo en Flash. Este personaje se creó completamente con las herramientas Óvalo y Rectángulo. Observe cómo he utilizado el boceto original como referencia, realizando cambios y ajustes sutiles al refinar la imagen, trazándola con las herramientas de dibujo de Flash.

Figura 21. Del boceto a Flash -- mi personaje de marca comercial

Tras crear un fotograma clave en blanco (F7) junto al boceto, puede activar la función Papel cebolla para ver una estela del boceto. Puede utilizar cualquiera de las herramientas de dibujo para dibujar, empleando como guía el boceto en papel cebolla. Como puede observarse en la Figura 22, he utilizado la herramienta Óvalo para crear la cabeza del personaje del niño. Al crear partes del cuerpo y diversos accesorios del personaje, intente imaginar y, seguidamente, dibujar la forma completa. Debe visualizar el personaje como si realmente se tratara de un objeto tridimensional existente en el espacio. Aunque éste es un formato bidimensional, pensar como un diseñador tridimensional puede ayudar a visualizar determinadas partes que irán unidas a otras.

Figura 22. Cabeza del personaje definida mediante una forma ovalada

Cuando termine de dibujar un objeto del personaje, cópielo y péguelo en una nueva capa. Yo prefiero seleccionarlo y convertirlo en símbolo en este momento. También puede asignar nombre a las capas.

Cómo ahorrar tiempo al colocar los símbolos en capas

Siempre convierto los objetos en símbolos y les asigno nombre siguiendo una convención de denominación sencilla pero descriptiva. Por ejemplo, head1, eye1, mouth_wide, etc. No obstante, no asigno nombre a las capas en este momento porque existe una forma mucho más rápida y sencilla de hacerlo. Una vez que he creado todos los símbolos y les he asignado nombre, simplemente los selecciono todos (Ctrl+A) y los copio (Ctrl+C). Seguidamente creo una capa nueva y los pego (Ctrl+Alt+V). Esto hace que todos se peguen en una capa, aunque como símbolos independientes. Elimine todas las demás capas de forma que quede sólo la capa que contiene todos los símbolos del personaje.
El siguiente paso es el más interesante. Selecciónelo todo de nuevo, haga clic con el botón derecho del ratón en el personaje y seleccione Distribuir en capas (observe la Figura 23).

Figura 23. Selección de todos los símbolos, clic derecho en el personaje y selección de Distribuir en capas

¡Ya está! ¡Flash no sólo ha situado cada símbolo en su propia capa, sino que ha asignado a cada capa un nombre en función del nombre de su símbolo correspondiente! No está nada mal, ¿verdad?

Cómo ahorrar tiempo mediante una correcta administración de documentos

La Figura 24 es un ejemplo del aspecto que puede tener la línea de tiempo una vez que he diseñado el personaje, he realizado la conversión a símbolos y estoy preparado para aplicarle animación. Si desea editar el nombre de una capa, haga doble clic en el nombre de la capa y escriba el que desee. La asignación de nombres descriptivos a las capas es una práctica aconsejable por lo que respecta a la línea de tiempo y la administración de archivos. Esto es especialmente importante cuando se trabaja con varios artistas (y lo es aún más cuando se trabaja en entornos de equipo).

Figura 24. Partes del cuerpo y símbolos de mi personaje de marca comercial en la línea de tiempo

Desde Flash MX (versión 6), existe la posibilidad de crear carpetas de capas. Una carpeta de capas es sencillamente una capa nueva que actúa a modo de carpeta en la que están contenidas las otras capas. Pueden expandirse o contraerse. Esto resulta extremadamente útil al trabajar con varias capas para diversos personajes. Puede crear una carpeta de capas para cada personaje y colocar todas las capas dentro de estas carpetas, lo que le da la posibilidad de contraerlas todas excepto el personaje en el que está trabajando (observe la Figura 25). Esto evita tener que desplazar continuamente la línea de tiempo y supone un tremendo ahorro de tiempo.

Figura 25. Cómo ahorrar tiempo con carpetas de capas

Otra forma de administrar el documento Flash es a través de la creación de una biblioteca organizada. Como ya he mencionado anteriormente, puede crear un símbolo o convertir algo en un símbolo, con lo que se convierte automáticamente en un objeto de la biblioteca de la película. Para abrir la biblioteca, seleccione Ventana > Biblioteca o presione Ctrl+L. La biblioteca (observe la Figura 26) le ofrece diversas opciones e información sobre cada uno de los símbolos que contiene. Puede seleccionar uno haciendo clic en el nombre del símbolo, con lo que se muestra una miniatura en la ventana de previsualización de la biblioteca.

Figura 26. Biblioteca del personaje de marca comercial

Si el símbolo contiene una animación, también verá un botón Detener y Reproducir en la esquina superior derecha de la ventana de previsualización. Estos botones permiten obtener una vista previa de la animación dentro de la ventana de previsualización.
La esquina superior derecha de la biblioteca contiene un menú emergente con diversas opciones (observe la Figura 27). Puede crear un símbolo, una carpeta, una fuente o un vídeo nuevos. También puede cambiar el nombre de un símbolo, mover símbolos a carpetas, duplicar o eliminar un símbolo o editar y obtener propiedades de un símbolo.

Figura 27. Las opciones de administración de la biblioteca

Introducción a "2,5D"

El hecho de que la interpolación sea muy sencilla en Flash no significa que siempre se pueda confiar en ella para crear animaciones convincentes. No me malinterpreten: La interpolación 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 límite de la interpolación 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 habrán pensado? ¿Y si después de haber aprendido todo lo que hay que saber sobre la interpolación regresara al primer 10% de ese conocimiento y girara a la izquierda? ¿Adónde llegaría?
En esta lección, voy a revelar una técnica de animación de Flash realmente fascinante que genera lo que algunos consideran un convincente efecto en 3D. Lo más 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 animación en 2,5D.
Si señor, la animación en 2,5D. Me he inventado este nombre. No digo que yo haya inventado esta técnica, pero, por lo pronto, el nombre de 2,5D sí es posible que sea invención mía.
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 símbolo en su propia capa. He activado la función de contornos para que pueda apreciarse cómo se ha separado cada parte del cuerpo del personaje. Esto es muy importante porque las interpolaciones de movimiento sólo requieren un símbolo por capa durante la interpolación. Si prueba con dos símbolos diferentes en la misma capa dentro de la misma interpolación de movimiento, la interpolación no funcionará.

Figura 29. Cada símbolo 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 línea de tiempo, es necesario desplazarse por ella continuamente. También es importante cuando se trabaja en entornos de equipo, en los que es habitual compartir archivos. La organización nunca es excesiva.
Una vez que ha establecido la línea de tiempo, puede comenzar a aplicar interpolaciones al personaje. En este ejemplo, he animado sólo los símbolos que forman la cabeza del personaje, por lo que me aseguré de que todas las demás 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 conviértalas en fotogramas clave (F6). Hágalo 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. Preparación para aplicar interpolaciones de movimiento

Manteniendo la cabeza lectora en el fotograma en el que quería que se detuviera el giro de la cabeza del personaje, edité cada uno de los símbolos del escenario empleando la herramienta Transformación 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 aumentaría de tamaño al acercarse hacia nosotros. Tampoco tendría una forma tan ovalada, por lo que hacerlo más ancho es una buena idea. Dado que el ojo de mi personaje consta de tres símbolos diferentes, les apliqué escala conjuntamente manteniendo presionada la tecla Mayús y seleccionando los tres símbolos (observe la Figura 31). Luego utilicé la herramienta Transformación libre para aplicarles escala a la vez. No se preocupe por hacerlo perfectamente en estos momentos. Siempre podrá refinar la animación posteriormente. Es casi un trabajo a ciegas, ya que no sabe exactamente qué aspecto tendrá hasta que aplique las interpolaciones de movimiento.

Figura 31. Selección de los símbolos del ojo

Pasemos a la nariz. Dado que el personaje se está girando hacia nosotros, todo lo que esté más cerca de nosotros tendrá que moverse de derecha a izquierda. Si fuera realmente un objeto en 3D, la nariz saldría recta de la cabeza. Para hacerlo un poco más 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á acercándose hacia el punto de vista del usuario.

Figura 32. Modificación de la nariz

Seguidamente, desplacé el otro ojo aplicándole un tamaño mayor y reduciendo su forma ovalada para hacerla más circular. También moví las dos cejas, las giré ligeramente y las hice más grandes (observe la Figura 33).

Figura 33. Modificación 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 más 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 animación final (observe la Figura 35).

Figura 35. Efecto de animación final del giro de la cabeza

No es mal comienzo, ¿verdad? Con uno pocos cambios sencillos mediante la herramienta Transformación libre, comenzará a ver cómo el efecto cobra vida. No es perfecto pero en estos momentos tampoco tiene que serlo. Puede continuar retocando la cantidad de escala, la posición y el sesgo de los elementos hasta que logre el efecto deseado.

Cabezas que giran: Parte 2

A continuación me ocuparé de los restantes activos de la cabeza del personaje para poner mayor énfasis en el giro de la cabeza.
La parte más importante de esta ilusión es convencer al espectador de que este objeto plano bidimensional tiene volumen y masa. También tiene que engañar al ojo del espectador para que perciba profundidad en la animación. 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 desplazaría en dirección 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. Básicamente, la tierra gira en sentido contrario al de las agujas del reloj. Esto significa que la superficie más cercana a nosotros viaja de derecha a izquierda. La superficie más lejana a nosotros viaje de izquierda a derecha. Aplicaremos este principio a la cabeza de mi personaje.
Dado que el símbolo de la cabeza en sí es simplemente una forma ovalada, lo único que tengo que hacer es sesgarla un poco. También decidí desplazarla un poco a la derecha. Lo hice porque cuando alguien gira la cabeza hacia nosotros, se ve más carne a la derecha del ojo izquierdo. Además, dado que esta forma de cabeza está más atrás que los rasgos faciales, debería moverse ligeramente hacia la derecha unos pocos píxeles. 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 dramático global.
A continuación, giré la visera hacia la derecha de la cabeza del personaje (observe la Figura 36). Recuerde que los objetos más alejados se desplazan en dirección opuesta a los objetos de primer plano.

Figura 36. Giro de la visera de la gorra

También utilicé las teclas de flecha para desplazar la visera hacia la derecha de forma que pareciera estar aun más atrás del cuello del personaje.
El mismo principio es aplicable a la gorra. Sesgué la gorra para hacerla más delgada al desplazarla a la derecha unos cuantos píxeles (observe la Figura 37).

Figura 37. Ajuste de la gorra

La oreja también 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 símbolos 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 más hacia el espectador (observe la Figura 39). Se trata de falsear un poco la perspectiva, lo que puede resultar difícil de lograr. La cantidad de sesgo y la aplicación de escala a un símbolo tienen un límite. Recuerde que este efecto funciona mejor si se utiliza de forma sutil. Dicho de otro modo, menos es más.

Figura 39. Sesgo del pelo

A continuación, añadí 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 mayoría 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 demás. Copie la oreja existente y péguela 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.
Sitúe la oreja en la parte derecha, detrás 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. Colocación de la otra oreja

Añada un segundo fotograma clave en el fotograma 30 (donde residen los demás fotogramas clave) como se muestra en la Figura 41.

Figura 41. Adición de un segundo fotograma clave

Regrese al primer fotograma clave de la oreja y cambie la posición de la oreja de manera que quede casi completamente detrás de la cabeza. He convertido algunas de las otras capas en contornos para que pueda observarse la nueva posición de la oreja (observe la Figura 42).

Figura 42. Cambio de posición de la otra oreja

Ahora simplemente aplique una interpolación de movimiento. Reproduzca la animación para ver cómo emerge la oreja cuando la cabeza gira hacia usted (observe la Figurar 43). Este pequeño detalle añade mucho realismo al giro de la cabeza, ya que contribuye a crear la ilusión de que la cabeza es una esfera (esto requiere Flash Player 8).

Figura 43. Efecto de animación final de la oreja emergiendo durante el giro de la cabeza

Desplace la línea de tiempo y realice los ajustes que estime oportunos en los símbolos si hay algo que no acaba de funcionar bien. Esto dependerá de su afán de perfeccionismo y de la complejidad del personaje. El personaje del niño de este ejemplo es bastante complejo, dada la cantidad de objetos que utilicé en su diseño.

Panel Aceleración/desaceleración personalizada (sólo Flash Professional 8)

Me gustaría añadir otro retoque al giro de la cabeza. Como ya sabe, las interpolaciones de movimiento pueden resultar bastante estáticas debido a su velocidad constante. Su reproducción puede presentar bastantes interrupciones al principio. Sin embargo, gracias a una nueva función de Flash Professional 8, puede añadir "aceleración y desaceleración" para suavizar la transición. El truco esté en como acelerar y desacelera dentro de una sola interpolación.
El primer paso consiste en aplicar la interpolación de movimiento. Puede hacerlo de dos formas:

• Haga clic con el botón derecho del ratón en los fotogramas situados entre los dos fotogramas clave. Seleccione Crear interpolación de movimiento del menú emergente.
• Seleccione todas las capas con la herramienta de selección haciendo clic en ellas y arrastrando para resaltarlas todas en negro. En el menú emergente Interpolación del inspector de propiedades, seleccione Movimiento.

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

Figura 44. Haga clic en el botón Editar para abrir el panel Aceleración/desaceleración personalizada.

Al hacer clic en este botón, se abre el nuevo panel Aceleración/desaceleración personalizada (observe la Figura 45).

Figura 45. Nuevo panel Aceleración/desaceleración personalizada

Con el nuevo panel Aceleración/desaceleración personalizada, dispone de un control mucho mayor de la aceleración y la desaceleración que en versiones anteriores. En el panel Aceleración/desaceleración personalizada se muestra un gráfico que representa el grado de movimiento en cada momento. El eje horizontal indica los fotogramas y el vertical los porcentajes de variación del objeto.
La velocidad de cambio del objeto queda así representada por la curva del gráfico. Cuando la curva es horizontal (sin pendiente), la velocidad es cero; cuando es vertical, no existe ninguna aceleración o desaceleración en los movimientos del objeto.
Si selecciona la casilla de verificación Utilizar una configuración para todas las propiedades, la curva actual se aplicará a todas las propiedades (Posición, Rotación, Escala, Color y Filtros). Si anula la selección de esta casilla, puede aplicar una curva independiente a cada una de las propiedades de la siguiente forma:

• Posición: Especifica la configuración personalizada en lo que se refiere a la posición en el escenario de un objeto animado.
• Rotación: Especifica la configuración personalizada en lo que se refiere a la rotación de un objeto animado. Por ejemplo, puede fijar con precisión 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 configuración personalizada en lo que se refiere a la escala de un objeto animado. Por ejemplo, puede personalizar fácilmente la escala de un objeto de modo que parezca alejarse del espectador, luego acercarse y por fin alejarse de nuevo.
• Color: Especifica la configuración personalizada en lo que se refiere a las transiciones de color aplicadas a un objeto animado.
• Filtros: Especifica la configuración personalizada en lo que se refiere a los filtros aplicados a un objeto animado. Por ejemplo puede controlar la velocidad con que cambia de posición una sombra que simula el cambio de dirección 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 diálogo Aceleración/desaceleración personalizada.
• Botón Restablecer: Devuelve la curva de velocidad a su estado lineal predeterminado.

Haga clic una vez en la línea para añadir un nuevo punto de control. Arrastrando la posición de los puntos de control, puede controlar con precisión el movimiento de un objeto.
Utilizando los indicadores de fotograma (representados mediante selectores cuadrados), puede determinar cuándo 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 (círculos huecos) a cada lado del mismo. Puede utilizar el ratón 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 cuadrícula. Puede desactivar esta función 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 añade 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 selección del punto de control seleccionado en ese momento.
Para que una animación se inicie y termine gradualmente, ajuste la curva de manera similar a la de la Figura 46. Le recomiendo que experimente con la creación y edición de puntos de control y tangentes y la reproducción de la animación empleando los botones Detener y reproducir de la esquina inferior izquierda del panel. No tardará en tener percibir la relación entre la curva y su efecto en la animación.

Figura 46. Utilización de esta ruta de aceleración/desaceleración

Ahora reproduzca la animación. Observe cómo se acelera y desacelera el giro de la cabeza al aproximarse al final. Para animar de nuevo el giro de la cabeza hacia su posición original, sólo tiene que copiar fotogramas del fotograma 1 y pegarlos después de la interpolación que acaba de crear. Repita el mismo procedimiento añadiendo una nueva interpolación de movimiento, así como la aceleración y desaceleración, y tendrá un personaje que gira la cabeza de un lado a otro de forma convincente.

Aplicación de filtros

Pues sí: lo imposible es ahora posible con Flash. Flash 8 incorpora filtros gráficos 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 película. Diviértase aplicando una sombra al personaje.
Lo primero que debe hacer es situar el personaje en un símbolo de clip de película. En la línea 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 resaltarán en negro los fotogramas y las capas. Seleccione Edición > Línea de tiempo > Copiar fotogramas (o presione Ctrl+Alt+C) para copiar la línea de tiempo completa al portapapeles. (También puede hacer clic con el botón derecho del ratón 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 símbolo, seleccione el comportamiento de Clip de película y haga clic en Aceptar. Ahora está en modo de edición para este nuevo símbolo. Seleccione el primer fotograma de la línea de tiempo y elija Edición > Línea de tiempo > Pegar fotogramas (o presione Ctrl+Alt+V) para pegar la selección, como se muestra en la Figura 47. (También puede hacer clic con el botón derecho del ratón en el fotograma 1 y seleccionar Pegar fotogramas del menú contextual.)

Figura 47. Clic derecho en el fotograma 1 y selección de Pegar fotogramas

Regrese al escenario principal y cree una capa nueva. Localice el símbolo de clip de película que acaba de crear en la Biblioteca y arrástrelo hasta esta nueva capa del escenario (observe la Figura 48).

Figura 48. Arrastre del clip de película al escenario

Elimine todas las demás capas que contienen el personaje original. Llegado este punto, la línea de tiempo debe tener una capa y un símbolo de clip de película que contiene la animación del personaje.
Puede crear sombras de dos tipos. Una sombra estándar 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 más realista, deberá añadir una serie de pasos sencillos.
Duplique la instancia del clip de película y sitúela detrás de la instancia original. (Puede mantener el duplicado en la misma capa y colocarla detrás 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ú más (+) (observe la Figura 49). A continuación, ajuste el nivel de intensidad en un 45% aproximadamente y seleccione Ocultar objeto. Esto oculta el objeto de clip de película 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 gráfico original.

Figura 49. Filtro Sombra aplicado a la instancia del clip de película duplicado

Para evitar que este efecto se parezca demasiado al de una sombra contra una pared plana situada detrás del objeto original, utilice la herramienta Transformación libre para sesgar la instancia del clip de película filtrado. Esta técnica 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 posición de la instancia para lograr que quede bien.

Figura 50. Clip de película duplicado sesgado con la herramienta Transformación libre

Pruebe la película y observe cómo el efecto cobra vida.
Al combinar animaciones con reproducción indefinida con otras animaciones con reproducción indefinida, puede lograr resultados visuales sofisticados, como se muestra en la Figura 51 (esto requiere Flash Player 8).

Figura 51. Ejemplos del efecto 2,5D empleando el filtro Sombra

En este ejemplo se observa cómo el efecto de sombra añade una interesante dimensión a la animación. Esta animación consta de una serie de clips de película que contienen animaciones con reproducción indefinida de los personajes del niño y el perro. En un artículo posterior explicaré cómo las pequeñas animaciones con reproducción indefinida pueden suponer una gran aportación para sus películas.
Espero que este artículo le haya ayudado a perfeccionar sus habilidades de diseño y animación en Flash. Existen otras técnicas de animación que puede utilizar con Flash, como la animación completa (a la que con frecuencia nos referimos como de fotograma-en-fotograma), interpolaciones de formas y secuencias de imágenes de programas de vídeo y animación en 3D. También existen diversos complementos interesantes disponibles a través de otros diseñadores y animadores que pueden ayudarle a acelerar el flujo de trabajo en Flash. No olvide consultar futuros artículos en los que describan estas técnicas y herramientas.

Acerca del autor

Jen deHaan, una canadiense un tanto peculiar, es aficionada a los robots y a los piratas (incluidos los piratas robotizados). Jen trabaja en el departamento de documentación de Macromedia en San Francisco. Mantiene además un blog en el sitio www.markme.com/dehaan* y cree que _root y las dietas bajas en carbohidratos son especialmente malas.

Posted in: FLASH,RECURSOS FLASH