Estilos de diseo

LAS TCNICAS descritas en este libro dan por supuesto un

nivel razonable de conocimientos en el manejo de Flash.
En captulos posteriores, analizaremos diferentes formas
de trabajar que conllevan el uso de smbolos, lneas de
tiempo y diversas otras tcnicas de animacin. Este primer captulo, por su parte, servir como recordatorio de los
fundamentos del diseo para la animacin y presentar,
de paso, unas cuantas tcnicas novedosas de dibujo.
Ms adelante, se analizarn con ms detalle los smbolos,
la interpolacin de formas y movimiento, as como la lnea
de tiempo.

Estilos de diseo

Dibujar con formas bsicas

DOG CHARACTER: COPYRIGHT MUDBUBBLE LLC

I DE NIO JUG con los bloques de

construccin de LEGO encontrar este
estilo de dibujar, que consiste en utilizar unas
cuantas formas bsicas e ir conectndolas
entre s, bastante familiar, o cuando menos
intuitivo. Dicha tcnica requiere que dividamos cada parte del cuerpo de un personaje en
varias partes bsicas mediante las herramientas Rectangle y Oval. De este modo, podremos
simplificar con rapidez y eficiencia cualquier
personaje en secciones ms manejables, al
tiempo que logramos un estilo de dibujos animados muy profesional.
Vamos a usar unas formas para hacer recortes en otras; lo que constituye una tcnica
muy til para hacer agujeros en los objetos, as
como para modificar los bordes de las formas.
Como parece lgico, esta tcnica se puede
usar tambin con los elementos del fondo.
La idea central es emplear formas simples
para construir imgenes complejas, aptas para
el estilo de animacin Flash, que veremos en
captulos posteriores.

Aqu tenemos un dibujo original a

lpiz, una vez escaneado y guardado en formato JPG. Prefiero comenzar
con lpiz y papel simplemente porque
encuentro que los resultados son siempre ms, digamos, artsticos.

Para hacer el contorno negro, seleccionamos la forma, la copiamos con

Cc Lc y la pegamos en su lugar
con CSv LSv. Mientras
est seleccionada, elegimos un color
diferente del mezclador y disminuimos
su tamao hasta el 80% del original.

Una vez importada la imagen, insertamos un fotograma en blanco

en el fotograma 2 y activamos la herramienta Onionskin. Esto nos permitir
realizar un trazado de la imagen en un
nuevo fotograma al tiempo que usamos
el original como referencia.

La forma original permanecer presente bajo la nueva. El truco consiste en situar la nueva forma algo
descentrada respecto a la original para
lograr un contorno de distinto grosor.

Trucos con Flash CS5

Usar las herramientas Oval o y

Rectangle r nos permite lograr
rpidamente las formas bsicas de
nuestro personaje. La herramienta de
seleccin es magnfica para convertir
estas formas bsicas en un bosquejo de
nuestro personaje.

Activamos la opcin Snap (icono

en forma de imn) y arrastramos
las esquinas de forma que se solapen.
Esto no es un proceso muy diferente a
construir objetos con las piezas de LEGO
como hacamos de pequeos.

Seguidamente, pulsamos y
arrastramos los bordes de las formas para convertirlas en curvas. Este
proceso es muy divertido porque vamos
viendo cmo toma forma nuestro personaje.

10

En el paracaidista utilizamos una

tcnica ligeramente distinta que
podemos llamar de recorte. Comenzamos con la herramienta Oval para realizar la forma bsica del paracadas.

Podemos realizar cortes en esta forma con otras formas de diferentes

colores, como la elipse azul. La situamos
sobre el rea que deseamos recortar, la
deseleccionamos, la seleccionamos de
nuevo y pulsamos la tecla D.

TRUCO
A medida que
vayamos terminando las distintas secciones
de nuestro personaje, es conveniente copiarlas y pegarlas
en capas nuevas
y, seguidamente, bloquearlas.
Esto evitar que
las editemos
de forma inadvertida. Algo
incluso mejor es
convertirlas en
smbolos en ese
momento.

Una vez que hemos logrado la

forma deseada, podemos utilizar la herramienta Inl Bottle s para
aadirle rpidamente un contorno.
ATAJOS
MAC WIN AMBOS

Estilos de diseo

Formas geomtricas y

VECTOR ILLUSTRATION: CHRIS GEORGENES

ISEAR USANDO LAS FORMAS

bsicas no est limitado a la
creacin de personajes. En la mayora
de proyectos de Flash es aconsejable
empezar con formas primitivas sin que
tenga mucha importancia qu objeto estemos diseando, lo que incluye
accesorios y fondos. En su nivel ms
bsico, comenzaremos los diseos simplemente con elipses y rectngulos y,
a partir de ah, construiremos poco a
poco imgenes ms complejas. Esta es
una de las mejores caractersticas del
trabajo con vectores: la capacidad de
deformarlos hasta conseguir cualquier
cosa que se desee; es casi como si fueran de arcilla.

Para dar forma a un rbol con una

frondosa copa llena de hojas, no
tenemos que dibujarlas todas. Por el
contrario, como el diseo est orientado a nios de corta edad, mantenemos
el nivel de detalle al mnimo. Primero,
seleccionamos la herramienta Oval o y
un color que nos guste y dibujamos una

elipse. Despus, la giramos para que

adopte una posicin inclinada.
Luego, copindola y pegndola repetidas veces, creamos el resto de
hojas, de distinto tamao. En este
punto no hay error posible, somos
nosotros quienes decidimos la apariencia que tendr nuestro rbol.

Vamos a disear el tronco del rbol

de una forma similar a lo hecho con
la copa. Primero, creamos un rectngulo con la herramienta Rectangle r
y usamos la herramienta Selection v
para alterar los lados y los vrtices del
mismo, de forma que quede ligeramente
curvado y afilado en su parte superior.

Cada rama es un duplicado de la forma

bsica del tronco que haremos pulsando OA al tiempo que hacemos clic
sobre el tronco y lo arrastramos a su
lugar correspondiente. Luego, basta con
modificar su orientacin y tamao para
dar forma a las ramas.

mienta Selection v, sus dos vrtices

superiores hasta que encajen con los
dos vrtices inferiores del tringulo.
Para dar una impresin de perspectiva,
podemos inclinar un poco la forma con
la herramienta Distort, que es una subseccin de Free Transform q.

Activamos Snap to objects y arrastramos un vrtice sobre otro

hasta que encajen. Esta opcin facilita la tarea de unir cuidadosamente
dos formas distintas. Para completar la
fachada de la pajarera, debemos crear
otro cuadrado y arrastrar, con la herra-

Trucos con Flash CS5

orgnicas

Repetimos el paso 1, copiando y pegando la elipse de

forma que sugiera un follaje abundante. Como vemos,
es necesario escalar, torcer y rotar las formas y situarlas en
posiciones diferentes a la original. Debemos crear una forma
orgnica no simtrica que ofrezca las imperfecciones que
aparecen en la naturaleza. Recordemos que no hay nada en
la naturaleza que sea perfectamente horizontal, vertical,
circular o cuadrado. Por este motivo, no es posible cometer

errores, de hecho, los errores en las formas son bienvenidos. En la imagen se puede ver cmo hemos utilizado cuatro
elipses en total para dar forma a la copa del rbol. Podran
haber sido cinco, o tres, pero el resultado con cuatro es
satisfactorio. Lo cierto es que nada nos impide experimentar
con el nmero de elipses que deseemos. En este punto,
aadimos un pequeo matiz de textura mediante la
herramienta Brush b con un ligero matiz amarillo.

herramienta Subselection a, seleccionamos uno de los vrtices y pulsamos D para borrarlo. El cuadrado es ahora
un tringulo que giramos con la herramienta Free Transform
q mientras pulsamos la tecla S para restringir la rotacin a ngulos de 45. Giramos el tringulo hasta que el lado
inferior sea plano y el superior, en punta.

La pajarera est formada a partir de formas bsicas. En

este caso, debemos activar la opcin Snap to objects,
representada por el icono del imn en la barra de herramientas, en el momento de seleccionar la herramienta Rectangle
r. Para crear un cuadrado perfecto, pulsamos la tecla S
mientras arrastramos con la herramienta Rectangle. Con la

TRUCO
Es fcil comprobar que cada
forma dispone de una caja
a su alrededor. Esto es as
ya que tenamos activado
el modo Object
Drawing j en
el momento
de su creacin.
De este modo,
podemos superponer objetos sin
fusionarlos unos
con otros.

Como es fcil suponer, las formas restantes que completan la pajarera son tambin rectngulos y elipses. Deberemos mantener activada la opcin Snap to objects, arrastrar
los vrtices adecuados, unos sobre otros, para unir formas y,
como dibujos de objeto que son, podremos superponer unas
formas sobre otras para completar la imagen.

ATAJOS
MAC WIN AMBOS

Estilos de diseo

La herramienta Brush

ANDREA CHARACTER: COPYRIGHT MUDBUBBLE LLC

A HERRAMIENTA BRUSH es probablemente la ms verstil de

todas las que tenemos a nuestra disposicin;
en particular, cuando la combinamos
con una tableta digitalizadora. Usaremos esta herramienta esencialmente
para dibujar formas de la manera ms natural posible, gracias a su soporte de niveles de
presin y grados de inclinacin.
Wacom es el fabricante de una serie de
tabletas digitalizadoras que funcionan
estupendamente en Flash. Las tabletas de
Wacom pueden funcionar junto con nuestro ratn, o bien reemplazarlo por completo.
Son muchos los diseadores que utilizan una
tableta con cualquier editor grfico, como
Adobe Photoshop y Adobe Illustrator.
Las circunstancias ms adecuadas para
utilizar la herramienta Brush dependen de
nuestras preferencias y estilo. Para este personaje en concreto, queremos lograr un estilo gil, de bosquejo a mano, de modo que la
eleccin de Brush era obvia.

El primer ajuste que debemos realizar cuando usamos la herramienta Brush b

es el grado de suavidad que deseamos aplicar. Esta opcin aparece junto a un
control deslizante en el panel Properties cuando seleccionamos la herramienta Brush.
La cantidad precisa de suavizado que debemos aplicar depender de nuestras preferencias personales. Cuanto mayor sea el nmero, ms suave ser la lnea, y viceversa.
Para este personaje en concreto, vamos a seleccionar una cantidad baja de suavizado
porque pretendemos conservar una cierta cualidad orgnica en el trazado.

Para mantener la coherencia con el estilo de boceto a mano alzada que estamos empleando, aadimos colores de relleno que se salgan ligeramente de los
contornos de las formas. Esto se puede hacer de varias formas: pintando, por ejemplo, sobre una nueva capa bajo los trazos del boceto, o bien configurando el pincel
para que pinte por detrs de los trazos (Paint Behind) en la misma capa.

Trucos con Flash CS5

Es necesario tener presente el propsito par el que estemos diseando los personajes, en este caso: la animacin. La forma sigue a la funcin y el estilo de animacin
puede dictar a menudo el diseo de un personaje. Los ms
perfeccionistas querrn que cada mechn de pelo sea lo
ms individual posible. Para ello, debemos evitar disear el
cabello como un nico objeto plano y grande. Por el contrario, dibujaremos mltiples mechones y bucles como objetos

El resultado final muestra el estilo de boceto

que andbamos buscando. Los trazos son bastante naturales y reflejan las imperfecciones normales del dibujo a mano alzada. Tengamos presente
que, en este caso, no se trata de lograr un diseo

independientes que se puedan mover individualmente. Para

ello, activamos el modo Object Drawing, que es una subseccin de la herramienta Brush que nos permite dibujar formas
como objetos diferenciados. Estos objetos tienen la caracterstica de que se pueden dibujar unos sobre otros sin que se
fusionen. Ms tarde, podemos seleccionar cada uno de estos
objetos con la herramienta Selection v y convertirlos en
smbolos.

preciso y pulcro, sino que buscamos transmitir

el estilo imperfecto de los trazos a mano alzada.
Dicho estilo se presta para su uso en personajes
infantiles, por cuanto la limpieza del trazado es
similar a la que realizara un nio.

TRUCO
Es interesante
experimentar
con diferentes niveles de
ampliacin del
escenario mientras dibujamos.
Personalmente,
prefiero dibujar
en una escala ms grande y
con el escenario ampliado en
un 400%. Como
resultado se
obtienen lneas
ms suaves.

ATAJOS
MAC WIN AMBOS

Estilos de diseo

Mezclar colores

l panel Color de Flash

se ha remodelado ligeramente en la versin CS5.
En lugar de tener que decidir
entre HSB y RGB, ahora disponemos de ambos de forma
simultnea y podemos definir
los valores de color con precisin gracias a los controles

VECTOR ILLUSTRATION: CHRIS GEORGENES FOR BIG PINK

Un procedimiento de trabajo tpico a la

hora de mezclar colores consiste en hacer
pulsar y arrastrar en la ventana del degradado para seleccionar un color aproximado al que
buscamos. Con el color seleccionado, podemos
afinar los matices con los controles deslizantes.
Tanto el brillo como la saturacin tienen un papel

deslizantes. Nunca fue tan

sencillo ni preciso el proceso
de mezclar colores en Flash.
Los creativos de la agencia Big
Pink me encargaron una animacin adecuada para nios
de entre 2 y 5 aos. Desde
el principio, fue obvio que,
dada la audiencia a la que se
destinaba la animacin, sta
debera mostrar una paleta de
colores suaves y atractivos al
mismo tiempo.

10

importante en todo proceso de diseo, y en nuestra

imagen de fondo, sirven para mantener los colores
apagados para que no tengamos que sobresaturar los personajes que aadiremos despus. Como
observamos, el color principal de la casa tiene un
nivel bastante bajo de saturacin, pero el suficiente
brillo para conservar la claridad adecuada.

Con el color rosa seleccionado, mezclar la

tonalidad ms oscura de rosa slo precisa de
un pequeo ajuste en el brillo. La gran casilla con
la muestra de color de la parte inferior del panel
Color se dividir para mostrar el color actual,
resultado de la mezcla, encima del color original.
De este modo, contamos con una referencia visual
del contraste entre ambos.

Trucos con Flash CS5

TRUCO

De nuevo, los colores de esta casa

se apagan fcilmente slo bajando
el nivel de saturacin mientras mantenemos el nivel de brillo relativamente
alto. El color verde del rbol est ligeramente ms saturado que el resto, pero
bastante atenuado en conjunto.

Es posible utilizar el panel

Color de Flash
para seleccionar cualquier
color en cualquier parte de
nuestra pantalla, fuera incluso
del propio Flash.
Para ello, basta
con pulsar sobre
la muestra de
color de relleno para activar
el selector de
color y, despus,
pulsar sobre la
zona del monitor
que contenga
el color que nos
interesa.

11

Estilos de diseo

Efectos de color avanzados

VECTOR ILLUSTRATION: CHRIS GEORGENES

os efectos de color avanzados nos permiten ajustar los canales rojo, verde y azul
por separado, as como el canal alfa, de cualquier instancia de un smbolo. Podemos usar
esta opcin de diversas formas para sugerir
el tono de un diseo, por ejemplo. Veremos
cmo ajustar los valores de color de un smbolo mediante los controles deslizantes RGB.
En la seccin Color Effect del panel Properties,
cambiamos el estilo a Advanced.

12

Seleccionamos, en primer lugar, el

smbolo que contiene nuestro dibujo. Luego, mediante los controles deslizantes, cambiamos el valor de rojo a
100% y a 0% el azul y el verde. De este
modo, se aplica un tono rojo a todo el
smbolo. Si repetimos esta operacin

elevando el valor de verde mientras

bajamos los de rojo y azul, obtenemos
un tono global de color verde. Anlogamente, si elevamos el valor de azul
mientras bajamos los de rojo y verde,
obtenemos un tono global de color azul.

Trucos con Flash CS5

Es obvio que slo con el rojo, el verde y el azul no

tenemos suficiente. Sin embargo, mezclndolos
adecuadamente podemos obtener una cantidad ilimitada
de tonalidades para nuestros diseos. En este caso, aparecen mezclados rojo y verde casi a partes iguales, mientras que el azul est ausente por completo.

Si no tenemos suficiente con los porcentajes de rojo,

verde y azul, podemos obtener ms colores mediante
el ajuste de los valores de la columna derecha, que se
suman a los valores porcentuales de la columna izquierda.
Si, por ejemplo, el valor de rojo es del 100% y situamos el
de la izquierda en 50%, y, luego, el de la columna en 100%,
obtenemos un valor de 150%, resultado de (100 0,5) + 100.

TRUCO
Los valores
avanzados de
color tambin se
pueden animar,
modificndolos
a lo largo del
tiempo mediante
interpolaciones
de movimiento.

13