1

sh CS3
Trucos con Flash CS3

Estilos de diseño
las técnicas descritas en este libro asumen que usted
tiene un conocimiento considerable sobre cómo trabajar
con Flash. En capítulos posteriores, discutiremos
maneras de trabajar que incluyen símbolos, líneas
temporales y varias técnicas de animación. Este primer
capítulo servirá como cursillo de perfeccionamiento
de los fundamentos del diseño de animación e irá
introduciendo algunas interesantes técnicas de dibujo.

Después, entraremos con más detalle en cómo trabajar

con los símbolos, interpolación de trazo y forma, y
líneas de tiempo.

ATAJOS
MAC WIN AMBOS

01.indd 3 10/08/2007 17:15:29

 1 Dibujar con formas básicas
Estilos
Estilos dede diseños
diseño

S I USTED JUGÓ CON los bloques de

construcción de Lego de niño, encon-
trará familiar este estilo de dibujo (o por lo
1 Aquí está mi bosquejo original
a lápiz que he escaneado
y guardado como archivo JPG.
Prefiero comenzar a lápiz sobre
2 Después de importar la
imagen escaneada, inserte
un fotograma clave en blanco
en el fotograma 2 y active la
menos intuitivo). papel porque tengo preferencia herramienta Papel de Cebolla. Esto
Se utilizarán varias formas básicas y simplemente por la sensación que permite calcar la imagen en un
después las conectará una con otra. Esta ofrece este medio y los resultados nuevo fotograma usando la imagen
son siempre un poco más, digamos, original como referencia.
técnica requiere la subdivisión de cada
artísticos.
parte del cuerpo del personaje en bloques
de construcción básicos usando las her-
ramientas de Rectángulo y de Óvalo. Es un
modo rápido y eficaz de simplificar el per-
sonaje en secciones manejables mientras
que se alcanza un estilo muy profesional en
el dibujo animado.
Aquí, utilizaremos formas para recortar
dentro de otras formas. Esta es una técnica
muy útil para recortar los agujeros en
objetos así como para corregir los bordes de
formas. Por supuesto estas técnicas también
se pueden aplicar a los elementos del fondo.
La clave aquí está en usar formas simples
6 Para crear el contorno negro,
seleccione la forma, cópiela
Cc Lc y péguela en su lugar
7 La forma original está todavía
presente por debajo de la
nueva forma. El truco es colocar
para construir imágenes más complejas usando CSv LSv. la nueva forma excéntrica de la
IMAGE CREDIT HERE

adecuadas para la animación en el estilo de Mientras está seleccionado, elija original para conseguir un perfil
Flash, que veremos en capítulos posteriores. otro color del panel del mezclador y con un peso diferente.
redúzcalo cerca del 80%

01.indd 4 10/08/2007 17:15:30


as
3 Usar las herramientas Óvalo
o y Rectángulo r permite
crear rápidamente las formas
básicas de nuestro personaje. La
herramienta de selección es genial
para empujar y tirar de estas
formas básicas hasta las formas de
referencia en nuestro bosquejo.
8 El paracaídas utiliza una
técnica levemente diferente a
la que llamo “recorte”. Comencemos
con la herramienta Oval para la
forma básica del paracaídas.
01.indd 5
Trucos con Flash CS3
4 Active la opción Imán (icono
del imán), y arrastre las
esquinas hasta que coincidan las
5 Después, haga clic y arrastre
los lados de sus formas para
curvarlas. Es un proceso divertido
unas con las otras. Este proceso es pues su personaje comienza
TRUCO
parecido al de los bloques de Lego realmente a tomar forma. Al terminar
cada sección
con los que usted jugó cuando era
individual de
pequeño. su persona-
je, córtela y
péguela en
nuevas capas
y bloquéelas.
Esto evita-
rá que sean
modificadas
inadvertida-
mente. Mejor
todavía, con-
viértalas en
símbolos mien-
tras lo hace.
9 Se puede recortar sobre esta
forma usando diversas formas
coloreadas como este óvalo azul,
10 Una vez que su dibujo
tiene la forma deseada,
se puede utilizar la herramienta de
colocándolo sobre el área que se Bote de tinta s para agregarle
quiere eliminar, deseleccionándolo, rápidamente un contorno.
después seleccionándolo y ATAJOS
pulsando la tecla Borrar D. MAC WIN AMBOS
10/08/2007 17:15:31
 1 La herramienta Pincel
Estilos
Estilos dede diseño
diseño

L 1 Lo primero que deberá hacer cuando use la herramienta de Pincel

A HERRAMIENTA de PINCEL es b será ajustar el nivel de precisión. Esta opción aparece en un
probablemente la más versátil menú desplegable en el panel de propiedades cuando se selecciona la
herramienta de Pincel. La cantidad correcta de smoothing a utilizar
de todas las herramientas de dibujo,
depende de la preferencia personal. Cuanto más alto es el porcentaje,
especialmente cuando está combinada más pulida será la línea (y viceversa). Para este personaje, elegiremos una
con una tableta sensible a la cantidad baja de alisamiento para mantener una calidad orgánica de la
presión. El dibujo con la he- línea de trabajo.
rramienta de Pincel consiste
esencialmente en dibujar con formas. Es la
herramienta que resulta más natural debido
a la sensibilidad de presión y las propieda-
des del ángulo.
Wacom tiene una serie de famosas
tabletas que funcionan estupendamente
con Flash. Estas tabletas pueden trabajar
conjuntamente con su ratón, o sustituirlo
totalmente. Muchos diseñadores digitales
utilizan una tableta con cualquier tipo de
programa de edición de gráficos incluyendo
Adobe Photoshop y Adobe Illustrator.
Cuándo utilizar la herramienta de Pincel
es realmente una cuestión de estilo y de
3 Para mantener el estilo informal del dibujo, usted puede agregar
un color que salga un poco de los márgenes. Hay varias maneras
de conseguirlo, como pintando en una nueva capa debajo de la línea de
preferencia. Para este personaje, quería contorno o seleccionando la opción “Pintar detrás” y pintándolo en la
algo más impreciso, como hecho a mano, misma capa.
así que el pincel era la opción perfecta.

01.indd 6 10/08/2007 17:15:32

 How
Trucos
to Cheat
con Flash
in Flash
CS3

2 Siempre diseñe sus personajes con el propósito

previsto en mente: la animación. La forma sigue
separados, así se podrán mover independientemente.
Active el modo Dibujo del Objeto (subselección de la
la función y el estilo de la animación puede dictar a herramienta del pincel). El modo Dibujo del Objeto TRUCO
menudo cómo se diseña un personaje. Si usted es un permite dibujar formas como objetos separados. Estos
Experimente
perfeccionista como yo, le gustará que el pelo sea lo objetos se pueden dibujar uno sobre otro sin que se con diversas
más parecido posible a unos tirabuzones. Para hacer combinen entre ellos. Puede seleccionar cada dibujo ampliaciones
esto, evite diseñar el pelo como un objeto plano del objeto con la herramienta de Selección v y del escenario
al dibujar.
grande. En lugar de eso, dibuje secciones individuales después convertir cada uno en símbolo.
Yo prefiero
de los tirabuzones para guardarlos como objetos dibujar en una
escala más
grande y con
la pantalla
magnificada
cerca del
400%.
El resultado es
típicamente
una calidad de
línea más fina.

4 El resultado final representa el estilo impreciso

que queríamos. La calidad de la línea resulta
natural y refleja las imperfecciones propias de la mano
estilo se presta bien a un personaje
infantil pues la integridad de la
línea es similar a la que dibujaría
humana. No estamos intentando alcanzar un estilo realmente un niño.
pulido del diseño aquí, sino una línea más imprecisa ATAJOS
propia de la calidad de las ilustraciones a mano. Este MAC WIN AMBOS

01.indd 7 10/08/2007 17:15:32

 1 Mezclar colores
Estilos
Estilos dede diseño
diseño

E L COLOR ES PODEROSO. Puede ser

utilizado de múltiples maneras para
sugerir el tono de su diseño gráfico o el
humor de una escena animada entera.
Echemos una ojeada a cómo ajustar valores
del color usando los controles deslizantes
1 Usted puede convertir sus
colores a escala de grises
escogiendo los colores con la
herramienta Cuentagotas y
después deslizando el control de la
saturación hasta el 0%. Esto bajará
la saturación pero mantendrá su
tonalidad y brillo.
2 Cambie la tonalidad de
sus colores ajustando la
cantidad de tonalidad con el
deslizador. Puede también escribir
el valor directamente en el campo
del porcentaje si lo prefiere. Si
tiene varios colores a ajustar,
seleccione el valor numérico y
cópielo a su portapapeles. Para
ajustar los colores adicionales
todo lo que usted necesita hacer
es seleccionarlos y copiarlos en el
valor del color.

de HSB del mezclador del color. Usando

el menú desplegable, cambie el modo del
vector illustration: chris georgenes

color de RGB a HSB.

Ahora los controles deslizantes al lado
de cada muestra se pueden utilizar para
ajustar sus colores a partir de su tonalidad,
saturación y brillo.
8

01.indd 8 10/08/2007 17:15:34

 Trucos con Flash CS3

TRUCO
Recuerde cam-
biar su mez-
clador de color
de HSB al RGB
y comprobar
que la gama
de cada color
está entre 16
y 235. Si no
está planean-
do la exporta-

3 4 5
Aquí hay otro ejemplo donde Se puede experimentar Ajuste el valor de saturación ción al vídeo,
la tonalidad para cada color ajustando dos o más valores para crear un contraste no necesitará
preocuparse
se ha ajustado fácilmente usando para crear contrastes únicos fuerte entre los colores. La por la gama de
el valor del color de la tonalidad. de color. Cuanto más baja es la saturación determina la intensidad sus valores de
Esta técnica puede ser muy saturación, menor será el contraste de una tonalidad específica. color.
eficaz para proporcionar un tono entre los colores. Puede conseguir Hay también
programas
uniforme al diseño de su página este hermoso tono pastel ajustando
de edición de
Web o armonizar un esquema de estos valores. vídeo como
color ya existente. Adobe After
Effects y
Adobe Pre-
miere que
requieren los
colores PAL a
los archivos de
video expor-
tados. Pero es
posible que se
quiera conser-
var el control
creando sus
propias paletas
de color en
Flash en vez
de permitir
que sean con-
vertidas en la
fase de post-
producción.

ATAJOS
MAC WIN AMBOS

01.indd 9 10/08/2007 17:15:35

 1 Trabajar con degradados
Estilos
Estilos dede diseño
diseño

1 Se utiliza un degradado radial simple para llenar la mayor parte de

las formas que componen el mono. El truco está en proporcionar
la ilusión de un objeto 3D a un entorno 2D. Se utilizan cuatro colores
para este degradado. El color crítico para esta ilusión es el cuarto color
(extremo derecho). Representa una fuente de luz que viene de detrás de
la esfera, sugiriendo que la esfera es realmente redonda.

L OS DEGRADADOS PUEDEN SER MUY

eficaces cuando usted quiere alejarse
de los tonos mates de los rellenos de color
sólido. Pueden ser utilizados para agregar
una sensación de profundidad y de di-
mensionalidad a sus personajes, fondos y
gráficos en general.
Los degradados pueden también traba-
jar contra usted debido a su facilidad de
4 Para que la oreja parezca cóncava, mezcle otro degradado radial
que vaya de lo más oscuro en el centro a un valor más claro en
el borde externo. Rellene la forma con este degradado y colóquela
empleo, dando por resultado imágenes descentrada para mostrar sólo la mitad del degradado. Puesto que los
genéricas y a menudo deslustradas. En bue- colores más oscuros se verán más alejados y los más claros parecerán
más cercanos, esta forma antes plana ahora parece cóncava.
nas manos, tanto los degradados lineales
como los radiales pueden contribuir a un
diseño muy eficaz y a veces más realista.

7 Para crear los clásicos ojos de dibujos animados tipo “ping-pong”,

use de la misma manera un degradado radial mezclando los colores
blancos y grises. La teoría del color nos enseña que para mostrar la luz,
se debe mostrar oscuridad. Aplique esta técnica a los ojos colocándolos
IMAGE CREDIT HERE

delante de una forma más oscura. Esto ayudará a agregar un cierto

contraste, haciendo resaltar los globos oculares, y a su vez añade
profundidad.

10

01.indd 10 10/08/2007 17:15:36


2 Corrija el degradado para que se ajuste a la forma
usando la herramienta Transformar Degradado
f. Rote, escale o incline el degradado de manera que
sea levemente más grande que la forma. Seleccione el
punto de control de centro, arrastre todo el degradado
y colóquelo un poco descentrado de la forma.
5 El pelo es una forma rellenada de otro
degradado radial. La mayor parte de ésta estará
oculta detrás de otros gráficos, así que usted sólo
necesita preocuparse del aspecto del borde externo
cuando el personaje está montado completamente.
8 La nariz es una combinación de esferas rellenas con
degradados radiales y lineales. Para crear sus ventanas,
use uno lineal y corríjalo hasta que el color más oscuro esté
sobre el más claro. Solas, las esferas son simples formas;
colocadas junto a la esfera radial, se convierten en agujeros.
01.indd 11
Trucos con Flash CS3
3 Pulse y arrastre la herramienta del punto focal
para colocar la iluminación entre el centro de la
forma y su borde. Haciendo esto usted está sugirien-
do que la fuente de luz está en más de un ángulo.
Fíjese en que el cuarto color de nuestro degradado se
aprecia a lo largo del borde inferior y derecho. Esto
implica que la esfera se ve envuelta de luz por detrás.
6 Las manos no son realmente manos en absoluto.
Para simularlas se utilizan algunas esferas
estratégicamente colocadas con el mismo degradado
radial que la cara y el cuerpo.
9 Los buenos diseños consisten en técnica.
Cuando cada elemento se constituye del mismo
estilo gráfico, el resultado total será normalmente
constante y fluido. No se desvíe de su plan, elija una ATAJOS
técnica y manténgase en ella. MAC WIN AMBOS
11
10/08/2007 17:15:37
 1 Añadir textura
Estilos
Estilos dede diseño
diseño

1 La primera tarea es diseñar las texturas. Las cámaras digitales son un

dispositivo muy práctico para este fin. Dése un paseo por su barrio y
encontrará rápidamente una fuente ilimitada de interesantes texturas que
puede utilizar para sus diseños. Utilice Photoshop para ajustar el color,

L
agregar los filtros y recopilar sus imágenes. Recuerde mantener la imagen
lo bastante pequeña para la publicación en la Web.
OS MAPAS DE BITS PUEDEN SER un
eficaz modo de agregar textura a
sus diseños. Puesto que cualquier imagen
podría ser una textura potencial, las posi-
bilidades son ilimitadas. Para el personaje
de la rana, quise un aspecto un poco más
sofisticado sin que perdiera el toque de
dibujo animado. En vez de usar campos de
color sólido y un cierto sombreado, el uso
de texturas importadas en mapas de bits
agregó esa sensación extra de profundidad
y de riqueza.
ed the frog: copyright leapfrog innovations

4 Puede utilizar la herramienta de Cubo

para rellenar sus formas con los diversos
mapas de bits que usted importó, que separó
y que escogió con el Cuentagotas.

12

01.indd 12 10/08/2007 17:15:38

 Trucos con Flash CS3

TRUCO
Probablemente
deseará tam-
bién ajustar las
propiedades

2 Seleccione el mapa de bits importado y

sepárelo Cb Lb. Haga clic en él con
la herramienta Cuentagotas. Ahora se agregará al
3 Usando la herramienta de Pincel,
dibuje sus formas usando el
mapa de bits como el color de relleno.
del mapa de
bits importado
(para ello haga
mezclador del color como muestra. doble clic en el
icono de mapa
de bits en la
biblioteca del
documento
y seleccione
“alisar”. ) Esto
aplicará anti
aliasing a su
imagen y hará
que parez-
ca más lisa.
Opcionalmen-
te, se puede
fijar la calidad
de su película
a “MEJOR”
agregando una
línea de código
en el foto-
grama 1 de la
línea de tiempo
principal. Sus
mapas de bits
se verán mejor
pero exigirán
más de su pro-
cesador duran-
te la reproduc-
ción. El usuario
debe estar al
corriente.

5 El mapa de bits necesitará

probablemente ser escalado,
girado o colocado de nuevo.
Seleccione la herramienta de
Transformación Libre f, y corrija
su relleno con ella.
6 El último paso es convertir todas las piezas en símbolos y
agregar una pequeña cantidad del tinte oscuro a las instancias
de detrás del personaje. Esto ayuda a separar mapas de bits similares
los unos de los otros y agrega un toque de profundidad. ATAJOS
MAC WIN AMBOS

13

01.indd 13 10/08/2007 17:15:39

 1 Añadir textura (cont.)
Estilos
Estilos dede diseño
diseño

1 Lo primero es crear su textura en Adobe Photoshop, la importa a

Flash, la separa y la selecciona con la herramienta Cuentagotas
i. Cree la forma para el cuerpo de Grotto con el pincel de pintura y la
muestra del mapa de bits como relleno. Seleccione la forma del cuerpo y

L
conviértala en un símbolo gráfico.
OS MAPAS DE BITS NO TIENEN QUE
parecer siempre planos. Les presento
a “Grotto” un personaje hecho casi
enteramente con mapas de bits y algunos
degradados de Flash cuidadosamente
puestos para proporcionar la sensación de
forma, volumen y, sobre todo, textura. Aquí
veremos cómo dar a texturas de mapas de
bits planas un poco más de profundidad
usando ciertos degradados y alfa básicos.
“Grotto” copyright mudbubble animation

4 A veces el diablo está en los detalles, lo que es evidente aquí

al añadir algunas sutiles iluminaciones al labio. En una nueva
capa use la herramienta de Pincel para pintar algunas formas y
después rellénelas con un degradado lineal que contenga del 30% al
0 % en blanco. Utilice la herramienta Transformación de Relleno f
para corregir el degradado cuanto sea necesario.

14

01.indd 14 10/08/2007 17:15:40


2 Edite el símbolo añadiendo otra capa sobre la de la
forma. Copie Cc Lc y pegue CSv
LSv la forma del cuerpo en esta nueva capa.
Rellénela con un degradado radial con dos colores;
negro con un 30% alpha y negro con un 0% alpha.
5 La ventana de la nariz es otro ejemplo de añadir
en otra capa varios degradados sobre la forma
original que contiene el relleno del mapa de bits. Aquí
utilicé uno lineal para la forma interna de la ventana
de la nariz y uno radial para proporcionar un cierto
sombreado para un efecto más realista.
01.indd 15
Trucos con Flash CS3
3 El símbolo de la boca/labio fue hecho de la misma
manera añadiendo una capa con degradado radial
sobre la forma del mapa de bits. Use la herramienta de
Transformación de Relleno para colocar el degradado
para que forme una sombra a lo largo de la mitad
inferior de la forma.
6 Cuando se combinan todos estos detalles sutiles,
se puede conseguir una imagen muy sofisticada.
Las simples formas de Grotto son ahora de lo más
convincentes superponiendo tan solo algunas capas
con degradados sobre las texturas. ATAJOS
MAC WIN AMBOS
15
10/08/2007 17:15:42
 1 La herramienta Pluma
Estilos
Estilos dede diseño
diseño

1 Empiece con un bosquejo o dibuje directamente en Flash. Cree un

fotograma clave en blanco en el fotograma 2 y active la propiedad
Papel Cebolla. Usando el bosquejo como referencia, trace el pelo usando
la herramienta de Pluma, clicando y arrastrando cada punto a medida que

H
se mueve. Esto creará automáticamente curvas con puntos Bezier que le
ASTA AHORA EN ESTE CAPÍTULO permiten manipular cada trazo cada vez que se crea un punto.
hemos visto diversos estilos de
dibujo. Desde lo más básico, como encajar
una simple forma con otra más grande,
formas más complejas, a usar mapas de bits
como texturas de relleno. La mayor parte
del tiempo el proceso de diseño exige una
combinación de herramientas y de técnicas
para conseguir hacer el trabajo. Para el
diseño de este personaje pasé de un simple
bosquejo a lápiz a un dibujo vectorial
completamente renderizado usando la her-
ramienta de Pluma y las formas básicas. La
herramienta de Pluma, conjuntamente con
Vector illustration: chris georgenes

la herramienta de Selección, ofrece flexi-

bilidad infinita cuando se trata de trazos y
de formas de manipulación.
5 Un degradado lineal es perfecto para el sombreado de los ojos. Elija
el color que quiera para el color inicial, y para el segundo color en
el degradado puede utilizar el mismo color usado para el tono de piel.
Después mezcle el sombreado de ojos en el resto de la cara para un
efecto suave y sutil. Puede experimentar con varios colores para producir
diversos estilos de sombreado.

16

01.indd 16 10/08/2007 17:15:43

 How
Trucos
to Cheat
con Flash
in Flash
CS3

TRUCO
Vaya a Editar
>Preferencias
> Dibujar y
cerciórese de
que la opción
“Mostrar Pre-
vio Pluma” está

2 3 4
marcada. Esto
Usando la herramienta de Dibuje la forma de la cara con Con sólo un color de relleno
le permitirá ver
Subselección a, modifique las herramientas Rectángulo seleccionado en la muestra un previo de
los contornos del pelo clicando en r u Óvalo o. Use la herramienta de la caja de herramientas, dibuje cómo serán sus
un punto de anclaje y ajustando de Selección para refinar la forma formas irregulares para representar líneas mientras
sus manijas de Bezier. empujando y tirando de sus bordes. un sombrero camuflado. dibuja con la
herramienta de
Pluma. Man-
tenga pulsada
la tecla de
mayúsculas
para encajar
las líneas a los
ángulos de 90
y 45 grados al
dibujar.

6 Una vez el personaje está completo, desbloquee

todas las capas y selecciónelo todo Ca
La. Copie la imagen entera a su Portapapeles
usando Cc Lc y cree una nueva capa.
Póngala debajo del resto de capas. Pegue en el sitio
CSv LSv en la nueva capa. Convierta
cualquier línea en relleno y rellene la forma entera de
negro. Modificar > Forma > Expandir relleno ampliará
el borde externo de la forma. Utilice la herramienta
Bote de tinta s con un color diferente para el trazo y
clique en la forma para agregar un toque agradable de ATAJOS
color. Actíve la visibilidad de todas sus capas. MAC WIN AMBOS

17

01.indd 17 10/08/2007 17:15:45

 1 Trazar un mapa de bits
Estilos
Estilos dede diseño
diseño

1 Empiece con una imagen de buena calidad con suficiente contraste

de color. Ábrala en Adobe Photoshop y guárdela como un archivo de
PSD. Ahora necesitará un buen rato para ajustar el contraste, saturación,
colores o cualquier otra cosa que usted quiera corregir.

L AS IMÁGENES FOTOGRÁFICAS se pue-

den utilizar para agregar una nota de
realismo a cualquier proyecto Flash. Pueden
ser importadas y utilizadas en su estado
original, o pueden simplificarse para una
mirada única, estilizada. El acercamiento
obvio a la vectorización de fotografºías
es importar la imagen en Flash y utilizar
las herramientas de dibujo para trazarlo a
mano. Pero eso puede ser una pérdida de
3 Importe el GIF optimizado a Flash Cr Lr. Cerciórese de que
esté seleccionado y vaya a Modificar > Mapa de Bits > Trazar mapa
de bits. En el panel de diálogo de Trazar mapa de bits, puede configurar
tiempo dependiendo de la complejidad de los ajustes individuales que dictarán en última instancia el nivel de
la imagen. complejidad que su imagen tendrá cuando esté convertida a vectores.
El truco aquí es hacer un promedio de la El ajuste apropiado variará dependiendo de su imagen y preferencia
cantidad de colores que la imagen contiene, personal.

y Adobe Photoshop hace de esto una tarea

“puck”, official LA flash mascot

muy fácil. ¡Combine esto con el ingenio del

Trazo de Mapa de Bits en Flash, y no tendrá
que seleccionar ni una sola herramienta de
dibujo!

18

01.indd 18 10/08/2007 17:15:46

 Trucos con Flash CS3

TRUCO
Al optimizar
curvas use la
propiedad de
optimizar de
Flash, ampliar
el escenario
a 100% o
menos. La
optimización

2 Guárdela para Web usando CSOs LSAs y seleccione el

formato de archivo GIF. Seleccione la escala de grises del menú desplegable y
limite el número de colores a dos o tres dependiendo de la imagen y de la cantidad de
total puede
variar
dependiendo
colores que quiera mantener. Pulse Guardar y renombre su nueva imagen GIF. de la
ampliación del
escenario. La
optimización
tiende a tener
un mayor
efecto con
objetos más
pequeños y
menos con los
más grandes.
Deberá
experimentar
para descubrir

4 Una vez completado el trazo, su imagen estará toda la proporción

vectorizada y completamente escalable. La imagen preferida
entre la
resultante de este perro ahora es de sólo 12k pero
optimización
podemos hacerlo incluso más pequeño usando el plug-in y la calidad de
del Flash Optimizar. Seleccione toda la imagen y vaya a la imagen.
Modificar > Forma > Optimizar. Utilice el deslizador para
ajustar la cantidad de Alisamiento y seleccione “Usar
múltiples pasadas”.

5 El resultado final es una imagen muy pequeña

para la web, de solo seis kilobytes. Es también
fácil cambiar su esquema de color usando la
herramienta Cubo de pintura k y el mezclador del ATAJOS
color. MAC WIN AMBOS

19

01.indd 19 10/08/2007 17:15:48

 1 Sombreado 1: Truco lineal
Estilos
Estilos dede diseño
diseño

1 Empiece con una forma básica

que contenga un relleno y un
contorno. Esta técnica trabajará del
2 Seleccione la herramienta
Línea n y cerciórese de
que la herramienta Imán también

H
mismo modo que con las formas esté seleccionada en la caja de
AY SIEMPRE VARIAS MANERAS de que no tienen ningún contorno. herramientas.

alcanzar un mismo resultado en

Flash. Con tantas herramientas diferentes a
nuestra disposición, encuentro constante-
mente maneras diferentes de usarlas para
conseguir varios efectos.
Este sombreado se llama comúnmente
“Sombreado de animación”. Este estilo de
sombreado es típico del estilo de los cómics
o de clásicos de Disney. He descubierto
cuatro maneras diferentes de crear el som-
“mudbubble boy” character - copyright mudbubble animation

breado entre las que usted puede escoger.

6 Una manera alternativa para mezclar colores en Flash es clicar el

botón de la rueda de color en la esquina derecha superior. Esto
abrirá el mezclador de la gama de colores de color que es originario en su
sistema operativo. Mezcle su nuevo color y clique ”OK”

20

01.indd 20 10/08/2007 17:15:49

 How
Trucos
to Cheat
con Flash
in Flash
CS3

TRUCO
Este estilo de
sombreado
puede ser
difícil de
dominar. Debe
imaginarse
que sus
formas en dos
dimensiones
tienen una

3 Dibuje una línea diagonal

dentro del relleno de su
forma. Utilice la herramienta s
4 Use la herramienta de
Selección para curvar la línea
de modo que su arco refleje la
5 Con el color de relleno
seleccionado, mezcle un color
levemente más oscuro usando el
tercera
dimensión y
son afectadas
por la luz y
de Selección para arrastrar cada forma del óvalo. mezclador del panel del color.
la sombra.
punto final de la línea y que se Elija una
acoplen así al borde del relleno. fuente de luz
y manténgala
constante
a través de
su diseño al
agregar el
sombreado.

7 Use la herramienta k de Cubo para rellenar la

forma que usted creó con la herramienta de la
Línea.
8 Seleccione la línea y suprímala. ¿Fácil, no?
Si todavía no es perfecta, puede continuar
utilizando la herramienta de Selección para corregir el
borde del nuevo relleno que usted creó. ATAJOS
MAC WIN AMBOS

21

01.indd 21 10/08/2007 17:15:50

 1 Sombreado 2: Modelación
Estilos
Estilos dede diseño
diseño

1 Usando la herramienta de
Rectángulo r, dibuje una
caja dentro de su forma que
contenga un color más oscuro que
el del relleno (sin contorno).
2 Use la herramienta Selección
s para tirar de las esquinas
hasta que se acoplen a los bordes
de la forma (cerciórese de que la
opción Imán está activada).

O TRA VARIACIÓN en el sombreado

en Flash. Esta técnica incluye la
herramienta de Rectángulo y permite un
sombreado más complejo. Esto puede ser
preferible si sus formas requieren sombras
más complejas.

5 Llevemos esta técnica un

paso más allá agregando más
sombreado para un efecto más
6 Use la herramientaSelección
para tirar de las esquinas
hasta que se acoplen a los bordes
realista. Repita el procedimiento de la forma sombreada.
anterior usando un color más
oscuro dentro del área sombreada.

22

01.indd 22 10/08/2007 17:15:51

 How
Trucos
to Cheat
con Flash
in Flash
CS3

TRUCO
Si quiere
descubrir una
manera inte-
resante y fácil
de crear varias
tonalidades
basadas en
su color ori-
ginal, vsite la
web Kuler de
Adobe (kuler.
adobe.com).

3 4
Rellene el área del hueco Use la herramienta Selección para doblar el borde del color más En ella se
pueden mez-
creada después de acoplar las oscuro del relleno de modo que su arco refleje la forma del óvalo.
clar matices
esquinas al borde de la forma. Utilizando la herramienta de Rectángulo, usted tiene una esquina de color muy
adicional para jugar. Esto puede ser útil para crear un sombreado más fácilmente y
complejo, por ejemplo para la forma del oído. después guar-
darlos y des-
cargarlos como
ASE (archivo
Adobe Swatch
Exchange).
Abra los archi-
vos transfe-
ridos de ASE
en Illustrator,
guarde su
nuevo panel
de muestra
como archivo
AI e impórte-
los a Flash. Un
modo más fácil
sería copiar a
mano el valor
HEX de la
página Kuler y

7 8 9
copiarlo en el
Rellene el área del hueco Use la herramienta Selección Se puede repetir este
panel de Flash
creada después de acoplar las para doblar el borde del color procedimiento tantas veces del mezclador
esquinas con el borde de la forma. más oscuro del relleno de modo como se quiera. Cuantas más del color.
que su arco refleje el contorno de escalas de color se añadan, más
la forma. realista será la imagen. ATAJOS
MAC WIN AMBOS

23

01.indd 23 10/08/2007 17:15:52

 1 Sombreado 3: Pintar selección
Estilos
Estilos dede diseño
diseño

1 Empiece con una forma.

2 Seleccione la herramienta
Pincel b y, del menú de
selección del modo de pincel, elija

T
Pintar Selección. Esto restringirá
cualquier pintura sólo a los rellenos
ODOS SOMOS DIFERENTES y tende- seleccionados.
mos a encontrar maneras diferentes
de usar las mismas herramientas. Nos acos-
tumbramos a ciertas técnicas porque llegan
a ser familiares en nuestro ritmo de trabajo
y estamos más cómodos con nuestros
propios hábitos individuales. Aquí está otra
técnica más para crear el sombreado que le
puede gustar más que las versiones previas.
Se presta bien al diseñador que tiene prefe-
rencia por dibujos de estilo más manual.
hula girl - copyright mudbubble animation

6 A continuación, rellene
simplemente el espacio
creado por el nuevo relleno que
7 ¡Voilà! Ahora usted tiene un
convincente sombreado de la
pierna.
acaba de pintar.

24

01.indd 24 10/08/2007 17:15:55

 How
Trucos
to Cheat
con Flash
in Flash
CS3

cción

TRUCO
La coherencia
es importante
cuando se
trata de la
fuente de
luz. Ayuda
limitarse
a una sola
fuente de luz

3 4
Use la herramienta de
Selección para seleccionar el
color del relleno que agregará al
color de la sombra. Ahora utilice
la herramienta de Pincel y ajuste el
alisamiento deseado para la forma
que usted pintará. Después, pinte
dentro del relleno seleccionado.
5
No se preocupe si es un A veces el área puede ser si es posible
y crear su
poco descuidado. Una vez demasiado grande para sombreado
que usted deje el pincel, el relleno pintarla enteramente a mano. En basándose en
pintado permanecerá solamente en esta situación, dibuje simplemente el ángulo en
el interior del área seleccionada. el contorno del borde para el área el que viene la
fuente de luz.
sombreada.

8 El sombreado de la cara se
puede dibujar de la misma
manera. Recuerde la dirección de
9 Rellene el espacio creado por
el nuevo relleno y estará listo. 10 Este tipo de sombreado
agrega una dimensión
adicional a sus diseños, dándoles
donde proviene la fuente de luz y profundidad y realismo. ATAJOS
pinte un relleno creciente. MAC WIN AMBOS

25

01.indd 25 10/08/2007 17:15:57

 1 Sombreado 4: Contornos
Estilos
Estilos dede diseño
diseño

E 1 Empiece con la herramienta Bote de tinta i y un color de trazo

STA VARIACIÓN funciona bien tanto que no exista en ninguna parte de su diseño. Fije el grosor del trazo
con formas simples como con formas alrededor de 3 o 4 puntos. Clique dondequiera dentro del relleno para
muy complejas. Si usted tiene un estilo contornearlo con un trazo en el color que usted eligió. No se preocupe
relajado y parecido al dibujo a mano, ésta de cómo se ve porque usted suprimirá esta línea enteramente una vez
termine.
puede ser la técnica para usted. Se usará el
Bote de tinta para crear una línea alrededor
de su relleno. Después, usted puede colocar
esta línea de nuevo descentrada y llenar el
espacio creado con un matiz de color más
oscuro.
badger character: mudbubble

4 Para la indumentaria de
este personaje, aplique un
contorno en trazo también al peto.
5 El trazo está seleccionado
y se coloca de nuevo en la
misma fuente de luz que en el
ejemplo anterior.

26

01.indd 26 10/08/2007 17:15:59

 Trucos con Flash CS3

truco
Configure un
grosor del
trazo bastante
elevado
para poder
trabajar mejor.
Un valor
más grande
permitirá

2 Seleccione la línea haciendo doble clic con

la herramienta de Selección. Después, utilice
la flecha para apartarla lejos de la forma original
3 Elimine el trazo entero pulsando la tecla D.
Si se ha deseleccionado su trazo, haga doble
clic en él con la herramienta de Selección. Un doble
que se
seleccione más
fácilmente.
en la dirección de su fuente de luz. Llene este área clic seleccionará el trazo entero mientras que un solo Eligiendo un
color brillante
creada entre el trazo y el borde original de su forma clic en él seleccionará un segmento si éste contiene
que contraste
sombreada. puntos múltiples. con su diseño
original
lo hará
visualmente
más fácil para
usted.

6 Se mezcla y rellena una

sombra más oscura para crear
la ilusión de la forma y realismo.
7 Con el trazo todavía
seleccionado, suprímalo. En
algunos casos, la forma resultante
8 Utilice la herramienta de
Selección para refinar un
poco más su sombreado según sus
creada puede necesitar ciertos necesidades y estilo. ATAJOS
retoques. MAC WIN AMBOS

27

01.indd 27 10/08/2007 17:16:01

 1 Realismo con degradados
Estilos
Estilos dede diseño
diseño

F LASH ES MUCHO MÁS que una

herramienta para diseñar personajes
de dibujos animados. Su arsenal completo
de herramientas de dibujo vectorial es útil
para muchos estilos de ilustración. Aquí
vamos a crear paso a paso una ilustración
realista de una flor. Las flores siempre son
1 Lo primero es contornear la
forma básica del pétalo de
la flor con un color del trazo que
2 La herramienta de Pluma p
es perfecta para esta tarea,
simplemente porque es rápido
un dibujo atractivo y al mismo tiempo contraste con la imagen original. y fácil reseguir manualmente el
desafiante debido a las sutiles variaciones Sea tan preciso como quiera, pero contorno del pétalo clicando y
de color que a menudo contienen. recomiendo usar la imagen original arrastrando a lo largo del contorno
Las herramientas principales que se usarán como guía, simplificando donde de la imagen.
sea necesario.
para este ejemplo son la Pluma y los Degra-
dados. La primera se ha mejorado enor-
memente en Flash CS3 y si usted ya está
familiarizado con la herramienta Pluma de
Illustrator, notará algunas semejanzas. Flash
ha adoptado la funcionalidad de esa herra-
mienta de Illustrator incluyendo abreviacio-
nes de teclado idénticas -sin mencionar los
también idénticos cursores de la Pluma.
Un truco muy interesante de la Pluma es
mantener pulsada la barra espaciadora para
volver a dirigir el punto actual mientras se
dibuja. Otra característica en CS3 es que 6 El degradado inicial
proporcionará la tonalidad
total y la gama tonal del pétalo
7 Rellene su forma con su
degradado radial y use la
herramienta Transformación de
se ha eliminado el auto relleno cuando
de la flor. Flash permite aplicar Relleno f para corregir su tamaño,
Photo: chris georgenes

una forma está terminada por motivos de hasta 15 transiciones del color a un posición y rotación. Puede suprimir
coherencia. Degradado. el trazo, pues ya no se necesita más.
Creo que cuanto más experimente con la
nueva herramienta Pluma, más le gustará.
28

01.indd 28 10/08/2007 17:16:03

 Trucos con Flash CS3

3 Para cerrar la trayectoria,

coloque la herramienta
de Pluma sobre el primer punto
de anclaje. Un pequeño círculo
aparece al lado del indicador de la
herramienta de Pluma cuando está
colocado correctamente. Teclee o
arrastre para cerrar la trayectoria.
4 Use la herramienta de
Subselección a para
refinar su trayectoria si lo desea.
5 Ahora necesitamos mezclar
algunos degradados radiales.
El Seleccionador de color de Flash
Para ajustar la forma de la curva puede coger colores en cualquier
de cualquier lado de un punto punto de su pantalla si usted clica
de anclaje, arrastre el punto de en cualquiera de las muestras de
TRUCO
anclaje, o arrastre el nodo de color encontradas en el panel del
la tangente. También se puede mezclador, en las propiedades de Para mantener
la curva en
mover un punto de anclaje color o en la caja de herramientas
múltiplos de
arrastrándolo con la herramienta y arrastra al área que contiene su 45º, Mayúscu-
de Subselección. color deseado. las-arrastrar.
Para arrastrar
los nodos de la
tangente indi-
vidualmente,
Alt-arrastrar
(Windows) u
Opción-arras-
trar (Macin-
tosh).

8 Copie Cc Lc y Pegue en
Sitio CSv LSv
esta forma en una nueva capa (se
pondrán varios degradados en capas
superpuestas para crear un efecto
realista). Los degradados siguientes
contienen cantidades variadas de alfa
para crear transiciones sutiles de color.
9 Rellene la forma duplicada
con su nuevo degradado y use
la herramienta Transformar Relleno
para simular sutiles ondulaciones
dentro de la forma. Repita el
proceso de copiar y de pegar en
el lugar esta forma en las nuevas
capas para cada nuevo degradado.
10 Puede manipular cada
nuevo degradado usando
la herramienta Transformación libre
para crear sombras suaves y puntos
de luz. En casi todos los casos,
usted utilizará sólo degradados
parciales para crear transiciones ATAJOS
sutiles entre luz y sombra. MAC WIN AMBOS

29

01.indd 29 10/08/2007 17:16:05

 1 Realismo con degradados (con
Estilos
Estilos dede diseño
diseño

11 Es siempre convincente colocar las sombras

suaves donde el borde de la forma contiene una
imperfección. La combinación de colores del degradado
12 Éste es el resultado final al usar varias
variaciones de degradados radiales
superpuestos, produciendo variaciones hermosas y
y de contornos irregulares parece una imperfección muy convincentes del color.
real.

15 Para conseguir el efecto de profundidad en el

centro del estigma, arrastre la pequeña flecha
blanca en el centro del degradado radial para mover el
punto focal hacia el borde.
16 Así es como se ve la imagen de la flor una
vez ilustrados todos los pétalos y el estigma.
Pero usted no tiene por qué parar aquí. Divirtámonos
un poco con los filtros del Flash. Convierta la flor
entera en símbolo del clip de la película.

30

01.indd 30 10/08/2007 17:16:06

 Trucos con Flash CS3

(cont.)

truco
Fije su
altura del
movimiento
bastante
grande para
trabajar más
fácilmente.

13 14
Repita el mismo procedimiento para cada El centro de la flor, técnicamente llamada Un valor
más grande
pétalo de la imagen de la flor. Para limitar estigma, fue creado con un relleno en forma
permitirá
las capas de la línea de tiempo, convierta cada capa de anillo que contenía un degradado radial. que usted lo
en un grupo o en un dibujo del objeto y convierta seleccione
cada pétalo en símbolo. más
fácilmente.
Elija un color
brillante que
sea alto en
contraste
con su diseño
original
para que sea
más fácil
para usted
visualmente.

17 Del panel de filtros, añada una sombra

inferior. Configure el nivel de desenfoque, el
alfa y la distancia como desee. También puede agregar
un filtro de desenfoque para suavizar la imagen total
de la flor.
18 Duplique la instancia del Clip de película
de la flor. Escálelos y rótelos para crear un
arreglo floral atractivo. Es sorprendente imaginarse
que este tipo de ilustración se puede hacer ATAJOS
enteramente en Flash, ¿verdad? MAC WIN AMBOS

31

01.indd 31 10/08/2007 17:16:07

 1
I N T E R M E D I O

La nueva interfaz de Flash

FLASH ESTÁ CRECIENDO. Comenzó hace mucho tiempo como una simple herramienta
para la animación de webs y, a todos los efectos, se ha convertido en su propia plataforma
de desarrollo. Especialmente, la interfaz de Flash ha progresado drásticamente desde su
encarnación más temprana. En una inspección inicial usted ya notará que se ha puesto en
armonía con el juego de herramientas de Adobe. Los iconos ahora se comparten a través de
programas y se ha puesto en práctica la integración.

Una de las nuevas características más obvias del UI es cómo se pueden acoplar, agrupar y
reducir los paneles al mínimo. Si elige acoplarlos a la barra lateral, entonces se pueden redu-
cir al mínimo hasta que se conviertan en iconos. Al hacer clic en un icono se abrirá el panel
o el grupo respectivo de paneles. Hay también una preferencia para activar el conectado/
desconectado del auto-despliegue de los iconos cuando usted trabaja en otra parte en el
espacio de trabajo.

32

01.indd 32 10/08/2007 17:16:09

 Trucos con Flash CS3
O

La caja de herramientas ahora se puede modificar para requisitos particulares como alinear
todas las herramientas en una sola columna en vez de en dos columnas. Como siempre, us-
ted puede personalizar el espacio de trabajo y guardar sus disposiciones. Debajo está mi dis-
posición típica, que maximiza el área del escenario para el trabajo del diseño. Prefiero tener
tanto espacio como sea posible para el dibujo y la animación. De hecho, prefiero configurar
la resolución de mi visualización tan alta como sea posible, lo que significa que trabajo con
un ordenador portátil de 17” con una resolución a 1920 x 1200. Esto permite que trabaje en
un formato más grande con el escenario de Flash magnificado cerca del 400%. Lo hago así
para tener más control al dibujar con las herramientas de Pincel y Línea.

Se pueden grabar tantos diseños como se quiera, lo que resulta muy útil si su plan de tra-
bajo implica varias tareas. Como ya verá en los capítulos siguientes, usted aprenderá mucho
más sobre la nueva interfaz y las características de dibujo y de integración que Adobe CS3
ofrece.

33

01.indd 33 10/08/2007 17:16:11

 2
Transformación y distorsión
Trucos con Flash

n El más básico
de los objetos, el
cubo, se puede
crear usando tan
solo la herramienta
Transformación
Libre. Con solo
girarlo y torcerlo
un poco, usted
puede dar
fácilmente
cierta vida y
personalidad a
una animación
antes aburrida.
Las mismas
técnicas
se pueden
aplicar a casi
cualquier objeto
-incluyendo
personajes.

34

02.indd 34 10/08/2007 17:18:26