Curso Flash CHOY 2009 - Cap 1 Al 5

Animar tus dibujos con gestos y voz, crear una web, un banner o
un DVD interactivo son algunas de las posibilidades que te ofrece

Flash y que podrs aprender en este curso de cinco entregas.
Curso: Crea animaciones con Flash, 1 parte Software
Sumario
De a A a la Z 55
Principales herramientas 56
Disea una pelcula
con movimiento 57
Configura el proyecto 57
Disea el fondo de la escena 57
Distribuye los objetos
en el escenario 58
Crea un movimiento sencillo 59
Gua del curso
1 parte: Principios bsicos de Flash CS4 N 285
2 parte: Creacin de grficos, dibujos y texto N 286
3 parte: Animacin de objetos en la lnea de tiempo N 287
4 parte: Creacin de mens y botones de navegacin avanzada N 288
5 parte: Integracin con otras aplicaciones y publicacin del proyecto N 289
54 N 285
Un mundo animado
dad de conocer a fondo el
funcionamiento y manejo
de sus principales herra-
mientas. Te ofrecemos un
curso en cinco entregas
en el que te explicamos,
de forma clara y sencilla,
las claves que te ayudarn
a que puedas crear todo ti-
po de pelculas animadas.
Incluso, cuando termines
de leer este artculo, que
es una toma de contacto
con el programa, podrs
obtener tus primeros re-
sultados con xito.
An as, no te pierdas
las siguientes entregas,
porque tienes mucho que
descubrir, especialmente a
la hora de utilizar correc-
tamente las herramientas
de dibujo y las tcnicas
de animacin que ofre-
ce el programa. Adems,
aprenders a crear mens
interactivos con los que
podrs crear la navegacin
para una pgina web en
flash a un CD o DVD que
contenga tus pelculas o
series preferidas.
Conceptos
Fotograma
La animacin en flash se
consigue a travs de una
sucesin de fotogramas
que contienen un momento
determinado del objeto en
una posicin y caractersti-
cas diferentes.
La pelcula tiene, por de-
fecto, una velocidad de 24
fotogramas por segundo,
de modo que cuanto mayor
sea este valor, tambin lo
ser la velocidad de la mis-
ma y menor su duracin.
Smbolo
Son los elementos que se
almacenan en la biblioteca
y se utilizan para construir
la pelcula. Existen tres
categoras, cada una con
distintos comportamientos.
Por un lado los grficos,
que son imgenes o vec-
tores estticos a los que
no se les puede asignar
ningn comportamiento.
Los botones permiten la in-
teractividad en la pelcula,
es decir, aadir acciones
para que se produzca un
determinado comporta-
miento. Por ltimo, los clips
de pelcula (movie clip) que
permiten una animacin
superior, ya que cuentan
con una lnea de tiempo
independiente y pueden
contener grficos, botones
y otros clips de pelcula.
Instancia
Cuando un smbolo de
coloca en el escenario se
denomina instancia, de
modo que puede haber va-
rias con el mismo smbolo.
Cada una de ellas tiene un
nombre para identificarla.
Al modificar un smbolo de
la biblioteca cambian, de
forma automtica, el resto
de instancias.
Clip de pelcula
Son smbolos que con-
tienen su propia lnea
de tiempo, de modo que
permiten agregar o quitar
fotogramas para aumentar
o disminuir su velocidad,
independientemente de
la pelcula. Generalmente
contienen una animacin
(interpolacin) de movi-
miento o de forma.
incluir cualquier fichero
multimedia, son algunos
de sus puntos fuertes. Pe-
ro sin duda, el reducido
tamao que ocupan sus
archivos (ayudado tam-
bin por el desarrollo de
la banda ancha), as como
las posibilidades que ofre-
ce su lenguaje de progra-
macin ActionScript, han
sido otros de los dos fac-
tores determinantes para
su consolidacin.
Pirdele el
miedo a Flash
Si alguna vez has sen-
tido curiosidad por usar
este programa, pero al
abrirlo todas tus ilusiones
se han desvanecido por
su complejidad aparente,
ahora tienes la oportuni-
E
l tiempo ha acabado
por dar la razn a esta
aplicacin, que permite
realizar todo tipo de ani-
maciones para publicarlas
en Internet o incluirlas en
un CD o DVD. Su facili-
dad para hacer todo tipo
de contenidos interactivos
(en la nueva versin CS4
mej orada con la herra-
mienta de cinemtica in-
versa), la sencillez a la ho-
ra de disear ilustraciones,
incluso si tu mejor habili-
dad no es precisamente el
dibujo, y la posibilidad de
Men
principal
La barra de herramientas su-
perior contiene los diferentes
accesos de la mayora de las
funciones principales del pro-
grama, que te permitirn con-
figurar el proyecto, aadir y
disponer los archivos, e insertar
texto. Es interesante que tengas
en cuenta el men ya
que desde aqu podrs mostrar
las ventanas de trabajo que te
ayudarn a usar el programa
con ms agilidad .
Vista
de la interfaz
La versin Flash CS4 permite
seleccionar distintas inferfaces
de trabajo, que ordenan los
paneles de herramientas en la
pantalla segn el tipo de tarea:
diseo y dibujo, animacin, pro-
gramacin, etc.
Bsqueda
Puedes resolver tus du-
das en la Comunidad de Adobe
en Internet si introduces un tr-
mino de consulta en este campo.
Panel de
propiedades
Cada vez que seleccionas un
smbolo se habilitan en el panel
de propiedades las diferentes
opciones que puedes modificar.
As, puedes cambiar el tipo de
instancia (clip de pelcula, bo-
tn o grfico) de forma rpida,
o hacer otros ajustes como el
tamao o el color.
Si necesitas disponer de un
rea de trabajo mayor, puedes
pulsar el botn , situa-
do en el margen superior, que
te permitir ocultar el panel.
Biblioteca
Cada uno de los ele-
mentos que vas a utilizar en el
proyecto se guarda en la biblio-
teca, de modo que puedes orde-
narlos en carpetas, nombrarlos,
localizar uno de ellos desde el
campo de bsqueda, etc. En el
rea superior dispones de una
vista previa que, en el caso de
un clip de pelcula, vdeo o au-
dio, se pueden reproducir. Para
aadir un smbolo a la escena
slo debes seleccionarlo aqu y
arrastrarlo al lugar que quieras.
Herramientas
de seleccin
Desde aqu puedes seleccionar
los distintos objetos para mover-
los sobre el escenario, aadirles
un comportamiento o accin,
transformarlos o rotarlos.
Herramientas
de dibujo
Flash es un programa de dibujo
vectorial, por lo que cuenta con
todas las opciones necesarias
para crear tus propios grficos e
ilustraciones a partir de cero.
El trabajo con curvas bezier
permite modelar los objetos de
forma fcil y sencilla .
Escena
En este rea se sitan
todos los elementos del proyecto
distribuidos en diferentes capas
(segn las necesidades del mis-
mo) y en diferentes fotogramas,
para controlar el momento de su
aparicin. Para aplicar cualquier
animacin, los elementos deben
ser convertidos previamente en
smbolos.
Lnea
de tiempo
Es la herramienta ms impor-
tante del programa, ya que des-
de aqu se controlan los movi-
mientos tanto de los elementos
de la escenta como los clips de
pelcula, adems del tiempo de
ejecucin de los mismos.
Capas
El trabajo con capas
en Adobe Flash permite situar
unos elementos sobre otros,
como si se tratara de papel
cebolla, y asignarles diferentes
comportamientos en la lnea de
tiempo. Al igual que con otras
herramientas de diseo grfico,
se pueden ocultar, bloquear, or-
ganizar en carpetas, nombrar y
aadir tantas como quieras, as
como eliminarlas.
Fotogramas
La sensacin de mo-
vimiento se consigue a travs
de una sucesin de fotogramas
en un intervalo determinado de
tiempo. Los objetos se pueden
animar fotograma a fotograma,
aadiendo un pequeo cambio
en cada uno, si bien, el modo
de hacerlo en Flash es a travs
de las interpolaciones (de forma
o movimiento). La versin CS4
ha aadido el cinegtico, que
permite modelar esqueletos y
animarlos de forma rpida .
Documentos
en uso
Puedes tener varios documen-
tos abiertos y compartir los
elementos de la biblioteca. Pa-
ra seleccionar uno u otro slo
necesitas hacer click sobre la
pestaa que contiene el nom-
bre del archivo que quieres
utilizar. De igual modo, puedes
cerrarlos con un click sobre el
icono con forma de cruz .
Editor
de escenas
Segn la complejidad del pro-
yecto y el peso de los archivos
se pueden aadir varias esce-
nas, y pasar de una a otra con
rapidez y sin dificultad. Desde
este men desplegable puedes
seleccionar la que necesites
editar en ese momento.
Editor
de smbolos
Este botn muestra una lista
desplegable que te ofrece un
acceso rpido a cada uno de
los smbolos que tienes guarda-
dos en la biblioteca, para edi-
tarlos en el escenario. Tambin
puedes conseguir lo mismo si
haces doble click sobre el sm-
bolo correspondiente dentro de
la ventana biblioteca.
Zoom
Con ayuda de este pa-
nel desplegable puedes ampliar
o disminuir el zoom del rea de
trabajo. A la hora de dibujar o
alinear los diferentes objetos es
importante ampliarlo al mximo
para visualizarlos con el mxi-
mo detalle. Tambin puedes ha-
cer esta misma opera-
cin desde el botn .
55 N 285
De la A a la Z
B
B
A
C
D
D
E
E
F
G
A
I
O
C
H
H
I
K
K
L
M
N
J
M
O
G
N
L
F
J
A
unque conseguir ani-
mar una pelcula com-
pleja requiere tiempo
y experiencia, el primer
contacto con el programa
te permitir realizar ani-
maciones sencillas con
buenos resultados.
rea de trabajo
El escenario y la lnea
de tiempo son los dos
elementos claves a la ho-
ra de trabajar con Flash.
El primero contiene todo
el proyecto, y podra equi-
valer al escenario de un
teatro, ya que la mayora
de los elementos que apa-
recen aqu interpretan
un papel, puesto que es-
tn dotados de animacin
propia. Cada elemento
que aades a la escena
se denomina instancia, y
pueden contener distintos
tipos de archivos: imge-
nes, audio, vdeo o texto.
La lnea de tiempo es
otro punto fundamental,
ya que es aqu donde se
controla el movimiento
de cada objeto, as como
su duracin. En el rea
izquierda estn las capas
que permiten disponer los
objetos de forma indepen-
diente para superponer
unos a otros y, adems,
asignarles otro comporta-
miento y duracin.
En el rea central se en-
cuentran los fotogramas,
que son momentos con-
cretos de la animacin
que, al cambiar durante
un intervalo de tiempo,
generan la sensacin de
movimiento. Cuanto ma-
yor sea el nmero de fo-
togramas, ms lento ser
ste, y viceversa.
Los paneles de herra-
mientas laterales te permi-
ten modificar los parme-
tros de las instancias de
forma rpida. As, desde
el de propiedades se mo-
difica el tamao y posi-
cin del objeto, el tipo de
instancia o el color. Pue-
des acceder a ellos desde
el men .
La barra de herramien-
tas vertical contiene el ac-
ceso a otras funciones b-
sicas como la seleccin y
transformacin de objetos,
as como las herramientas
de dibujo y pintura. Man-
tenla siempre visible, por-
que tendrs que recurrir
constantemente a ella.

Elementos
de animacin
Ya sabes que puedes
aadir cualquier tipo de
archivo multimedia a tu
proyecto de Flash. Sin
embargo, antes de poder
trabajar con ellos debes
convertirlos en smbolos,
que se dividen a su vez
en tres categoras. Los
ms elementales son los
grficos, que se
representan por
el icono .
Son elementos estticos
que no tienen animacin
propia, pero pueden ser
animados. Los botones sir-
ven para interactuar con
el usuario y navegar en-
tre las distintas partes de
la pelcula, as como para
crear navegaciones com-
plejas a travs de mens.
Se represent an
con el icono .
Por ltimo, los
clips de pelcula
constituyen el n-
cleo principal de esta apli-
cacin, ya que es en ellos
donde se realizan las ani-
maciones. Cada uno cuen-
ta con una lnea de tiem-
po propia que te permite
crear animaciones de mo-
vimiento, de forma o rotar
objetos, entre otras.
Los smbolos se guardan
en la biblioteca y puedes
moverlos al escenario en
el punto que quieras. All
se denominan instancias,
y puedes aadir tantas co-
mo quieras, si bien es im-
portante que tengas nom-
bres diferentes si quieres
hacer llamadas para asig-
nar comportamientos o
acciones a cada una. Esto
te ofrece la posibilidad de
no tener que crear el mis-
mo smbolo ms de una
vez, con la ventaja de que
cuando hagas un cambio
en ste, se modificarn to-
das las instancias.
Para animar los distintos
elemento dispones de dos
opciones principales que,
en Flash, se denominan
interpolaciones. Consisten
en definir un fotograma
clave dentro de la lnea de
tiempo en el que el obje-
to muestra unas caracte-
rsticas, y otro fotograma
clave ms alejado (segn
la duracin) con unas ca-
ractersticas diferentes. La
transicin de uno a otro
crear un cambio que po-
dr ser de tamao y po-
sicin (interpolacin de
movimiento) o de forma
(interpolacin de forma)
si bien para esto ltimo es
necesario que los objetos
sean vectoriales.
Flash CS4 incorpora,
adems, nuevas funciones
como la animacin en 3D
de texto y objetos
y la herramienta
con este icono
que mueve los objetos
y smbolos a travs de
cinemtica inversa, una
tcnica de animacin que
permite crear un esquele-
to o huesos en los obje-
tos y animarlos de forma
rpida.
El modo de interactuar
con el usuario se consigue
a travs de los botones,
que se componen de cua-
tro momentos que pue-
des o no definir si quie-
res que cambie: reposo,
sobre, presionado y rea
sensible. Adems, puedes
darles toda la compleji-
dad que necesites, ya que
puedes aadir diferentes
capas e incluir en cada
momento distintos ele-
mentos: clips se sonido,
clips de pelcula, etc.
Otra ventaja de Flash
es que, aunque no ten-
gas conocimientos de Ac-
tionScript (el lenguaje de
programacin que utiliza)
puedes controlar las dis-
tintas instancias a travs
de rdenes sencillas que
se controlan desde el pa-
nel de acciones.
56 N 285
Principales herramientas en Flash
La biblioteca contiene los ele-
mentos que vas a usar en la
pelcula. Puedes ver una vista
previa en la ventana de visuali-
zacin situada arriba.
Desde el panel de acciones se controla el comportamiento
de los botones, fotogramas o clips de pelcula.
Las interpolaciones de movimiento se representan en color
violeta, mientras que las de forma lo hacen en verde.
CS4 crea esqueletos
con movimiento
Para mantener organizada la pelcula es recomendable asig-
nar un nombre a cada capa y agruparlas en carpetas.
57 N 285
Tanto si vas a incluir al archivo de flash
en una pgina web como si lo vas a utili-
zar para la creacin de un CD o un DVD,
la preparacin previa del documento es un
requisito fundamental. Especialmente, es muy
importante que definas desde el principio el
tamao, ya que el de todos los objetos que
aadas estar en funcin de l y si lo cambias
desupes, muchos de ellos se deformarn.
1
Al acceder al programa aparece una ven-
tana para que elijas el tipo de documento
que quieres crear, segn la versin del cdigo
ActionScript que utilices. De momento esto
no tiene que preocuparte, as que puedes
elegir el primero, ya
que para este ejem-
plo es irrelevante y,
en todo caso, podrs
acceder a las otras
versiones desde el
proyecto .
2
Una vez que se abre la ventana princi-
pal debes saber que dispones de varios
modos de visualizacin del escenario, de
los paneles de herramientas y de la lnea de
tiempo, en funcin del tipo de trabajo en el
que te vayas a centrar: diseo, animacin
de objetos, programacin, etc. En la barra
de men superior est predefinido el modo
, si bien, si pulsas sobre la
flecha situada al lado, puedes seleccionar en-
tre varias opciones, como por ejemplo .
3
Hecho esto, vers la ventana principal
con este aspecto .
Como ves, la lnea de tiempo, desde donde
controlars los distintos objetos que animes
se sita en el margen superior, la barra prin-
cipal de herramientas en el izquierdo y los
paneles de propiedades en el derecho. El rea
blanca se denomina escenario, y es el lugar
donde vas a colocar los diferentes elementos
de tu animacin.
4
Pincha en , pulsa en
y asigna el nombre que quieres darle al
proyecto .
En el apartado de
abajo puedes se-
leccionar si quieres
que sea compatible
con la versin ante-
rior a sta o no .
Luego pulsa sobre el botn .
5
El siguiente paso tam-
bin es importante, ya
que debes definir el rea
de trabajo. Aqu tienes que
tener en cuenta la finalidad
de tu proyecto: si lo vas a
publicar para acceder desde Internet, visua-
lizarlo en un CD o DVD o si, simplemente,
se trata de un banner animado. En cualquie-
ra de los casos, pulsa en el men
y en para acceder a la ventana
. Aqu se establecen
las dimensiones del mismo .
Tambin el color, con un
click en el botn
y luego desde el selector
que se muestra .
No obstante, nuestro
consejo es que, a no ser
que lo tengas muy claro
lo mantengas en blanco, ya
que ms tarde lo podrs mo-
dificar. Por ltimo, en el apar-
tado , conviene
que selecciones
ya que es la mejor manera de
trabajar con las aplicaciones de diseo grfi-
co. Pulsa de nuevo sobre .
6
Una ltima recomendacin antes de po-
nerte manos a la obra. Es muy posible
que en ms de una ocasin durante el tra-
bajo, necesites alinear con precisin algunos
elementos, por lo que dirgete al men
y pulsa en , para que se muestren junto
a la escena. Asimismo, puedes mostrar una
y, lo que es ms importante, ha-
bilitar la funcin , ya que te
permitir crear guas que te servirn de ba-
se para colocar los diferentes elementos con
mayor precisin.
El rea de trabajo en Flash se denomina
escenario por su similitud con la escena de
una pelcula, en la que intervienen distintos
actores. En Flash stos pueden ser smbolos
(representaciones grficas), clips de movi-
miento (animaciones) y botones. El modo en
el que los distribuyas en diferentes capas y en
la lnea de tiempo juega un papel esencial a
la hora de conseguir una buena animacin.
1
El primer paso consiste en aadir a la
biblioteca todos los elementos que vas a
utilizar en el proyecto. Pueden ser imgenes,
vdeos o sonidos, si bien
puedes tambin incluir-
los ms tarde. Dirgete al
men , selecciona
y luego .
En la ventana de exploracin
que aparece a continuacin,
selecciona los diferentes ar-
chivos
y pulsa en . Tambin puedes crearlos
en la misma pelcula tal y como te contare-
mos en la entrega del prximo nmero.
2
En el caso de que el
panel de la bibliote-
ca no est visible, desde
el men marca
, y aparecer
sobre el rea donde estn
el resto de paneles de he-
rramientas .
3
Como ves se han aa-
dido los archivos que
has indicado y, cuando
seleccionas uno de ellos
con un click , puedes ver su con-
tenido (o reproducirlo en el
caso de vdeo o de audio) en
la ventana de vista previa .
4
Tambin puedes comprobar que se han
creado distintos elementos de forma au-
tomtica, que en Flash se deno-
minan smbolos .
Debes trabajar con estos elemen-
tos, y no con las imgenes que
tendrs que eliminar si quieres que la com-
pilacin o el proyecto final no ocupe mucho.
Para ello tendrs que convertirlas en archivos
de mapa de bits, si bien, te mostraremos tam-
bin cmo hacerlo en el prximo nmero.
5
El siguiente paso consiste en definir el
fondo de la escena. En ella debes colocar
solamente los elementos que sean fijos, es
decir, que permanezcan inalterables a lo largo
de toda la pelcula, de modo que slo tendrs
que crearla una nica vez, y ocupar tantos
Configura el proyecto
Disea el fondo
de la escena
1
2
Disea una pelcula con movimiento
Crear una animacin sencilla en Adobe Flash es ms fcil de lo que parece. Para que lo puedas comprobar
hemos seleccionado este ejemplo a partir de unas imgenes vectoriales gratuitas que hemos descargado de
Internet (www.freevectordownload), donde puedes encontrar multitud de recursos a los que dar movimiento.
XXXXXXXXXXXXXXX Software
58
N 285
Una vez que has definido el fondo del pro-
yecto, es el momento de aadir cada una de
las instancias que compondrn la animacin.
Para ello es fundamental el trabajo con capas,
ya que podrs superponer unos elementos
sobre otros y asignar distintos tipos de com-
portamientos y animaciones.
1
Antes de nada, debes crear una capa don-
de vas a aadir los nuevos elementos.
Puedes aadir tantas como necesites, si bien,
para conseguir un trabajo ordenado es acon-
sejable que en cada una aadas objetos de la
misma categora
o que tengan un
comportamiento
si mi l ar. Pi ncha
sobre el icono
para aadir la nueva capa
que se colocar encima de
la anterior .
Luego haz doble click sobre ella para asig-
narle un nombre .
2
Despus, dirgete a la y selec-
ciona con un click uno de los elementos
que quieres aadir y arrstralo al
rea del escenario donde deseas colocarlo .
Repite este pro-
ceso con el res-
to de figuras .
3
Ahor a es
el momen-
to de cambiar
su t amao y
orientacin para conseguir un efecto
de profundidad. Selecciona para ello
la herramienta
haz click sobre uno de los gr-
ficos y aparecern unos selec-
tores sobre su contorno .
Sita luego el cursor en uno
de los extremos hasta que el
puntero se convierta en una
doble flecha .
Ampla o reduce la seleccin
segn quieras hacer ms gran-
de o pequeo el objeto, respectivamente.
4
Luego vuelve a colocar
el puntero sobre una de
las esquinas de la seleccin,
hasta que cambie a la forma
del mismo .
De este modo podrs
girar o rotar la imagen.
Por ltimo, se-
lecciona la he-
rramienta
y sita el cursor sobre el obje-
to hasta que se modifique a un
puntero de cuatro flechas .
Haz click entonces y podrs
arrastrarlo ha-
cia el lugar de
la escena que
prefieras. Poco
a poco conse-
guirs recrear la
fauna de un en-
torno marino .
5
Hay que aadir ms elementos (algas, en
ese caso) por lo que necesitas aadir una
nueva capa. Sitate sobre la que creaste
en el paso 1 , pulsa
y asgnale un nombre .
No te olvides tampoco
de bloquear la capa
anterior .
Selecciona los
objetos y ll-
valos de nuevo al escenario, como te hemos
mostrado en los pasos anteriores, hasta con-
seguir el resultado que ms te agrade .
fotogramas como tenga la pelcula en conjun-
to o la escena de la misma en la que quieras
mantener ese fondo. El ejemplo que hemos
utilizado es un fondo marino que hay que
pintar, pero puedes utilizar cualquier imagen,
fotografa o grfico que prefieras. Haz doble
click sobre el nombre de la nica capa que
aparece en el
panel de la lnea
de tiempo
y asgnale un nombre como .
Es importante que sigas es-
te paso en el resto de ca-
pas, ya que en un proyecto complejo ser la
mejor manera de localizar cada elemento.
6
Despus pulsa sobre la herramien-
ta de color
y elige un tono de azul en el cua-
dro de muestras que aparece .
Luego selecciona la herramienta
de forma
y dirgete al panel situado
en el margen derecho. En el apartado
pulsa en
y en la ventana que aparece, pin-
cha sobre el icono .
Con esto evitars que se cree una lnea
de contorno que, aunque en algunas ocasio-
nes te puede resultar til, en este caso no.
Luego traza un rectngu-
lo sobre toda el rea de
trabajo
de modo que comproba-
rs que el escenario se
muestra en color azul.
7
Ahora es el momento de pintar la arena
del fondo y simular el oleaje. En Flash
se trabaja con imgenes vectoriales, lo cual
simplifica la tarea de dibujar desde composi-
ciones simples (como esta) a otras ms
complejas. Para comenzar con esta ta-
rea pulsa sobre la herramienta
y elige un tono arena, como . Lue-
go selecciona este botn
y traza una lnea ondulada en la parte
inferior de la escena .
No i mpor t a que no
sea todo lo perfecta
que desees en este momento: el programa
se encargar de suavizar los contornos y t
tambin podrs hacerlo con facilidad ms
adelante.
8
Con esta lnea has separado el cuadrado
azul inicial en dos bloques que se pue-
den editar y modificar de modo independien-
te. Por eso mismo, pintar ahora la arena es
tan fcil como seleccionar de nuevo
la herramienta
y pinchar sobre el bloque
azul situado bajo la lnea
ondulada, para rellenarlo
de este color .
9
Para perfeccionar los contornos de este
dibujo (as como el de todos los que ha-
gas), ampla el escenario con ayuda
de la herramienta
y luego escoge el botn de seleccin
con un click sobre .
Sita el cursor del ratn sobre el rea
que quieres modificar
hasta que el puntero
cambie a esta forma .
Despus haz click y
mueve la figura hasta que adopte la ondula-
cin que deseas .
No es difcil, pero si no ests acostumbrado a
trabajar con herramientas de dibujo tendrs
que practicar varias veces.
10
Ya has conseguido simular la arena
del mar. Ahora quedan las olas, pe-
ro el proceso ya lo
conoces. Selecciona
di sti ntos ti pos de
azul y repite los pa-
sos anteriores hasta
conseguir un resulta-
do parecido a este:
11
Por ltimo, como en esta capa no hars
ningn cambio ni vas a aadir otros
elementos fijos, como pudiera ser en otro ca-
so marcas comerciales, texto o imgenes, es
aconsejable que la bloquees para impedirlo.
Seleccinala y
pulsa sobre el
icono .
De este modo quedar bloqueada y se mos-
trar un icono de candado al lado de ella .
Si necesitaras des-
bl oquearl a ms
tarde, basta con hacer click sobre el mismo.
Distribuye los objetos
en el escenario
3
59 N 285
Hasta este momento, el uso de Flash no es
muy diferente al de una aplicacin de dibujo.
No obstante, la caracterstica ms interesante
son las posibilidades de animar los objetos
y crear todo tipo de movimientos que se te
puedan ocurrir. En esta parte del prctico te
mostraremos cmo crear una animacin muy
sencilla que permitir simular el movimiento
de los peces en el agua.
1
Como vas a trabajar con los elementos
de una nica capa, el primer paso que
te recomendamos es que bloquees el resto
para evitar que los
objetos situados en
las otras se modifi-
quen .
Luego, con la he-
rramienta de seleccin
elige el elemento que vas a animar en
este momento .
2
Dirgete al pa-
nel , ya
que tendrs que con-
vertirlo en un clip de
movimiento puesto
que slo este tipo de objetos se pueden ani-
mar. En el campo
haz click sobre la fe-
cha situada al lado y,
en el cuadro de di-
logo que se muestra,
selecciona .
3
A continuacin haz doble click sobre el
clip de pelcula. De esta forma acceders
a su propia lnea de tiempo, donde podrs
ajustar su movimiento de forma independien-
te al resto de instancias. Comprobars que,
aunque sigues viendo la escena, se muestra
ms aclarada .
4
La parte fundamental en este proceso es
la lnea de tiempo. Cada uno de los rec-
tngulos en los que se encuentra dividida es
un fotograma y, por defecto, est ajustada
a una velocidad de 24 fotogramas por se-
gundo para producir el movimiento. Por esta
razn, cuantos ms fotogramas abarque un
movimiento, ste ser ms lento y vicever-
sa. Con el tiempo podrs controlarlo casi sin
preocuparte, pero casi siempre, tendrs que
comprobar si el movimiento se ajusta a la
finalidad que pretendes. En este caso, vas a
crear un movimiento de 30 fotogramas. Para
ello, pincha con el ratn sobre el cuadro si-
tuado debajo de l .
5
Luego, haz click con el botn derecho
del ratn y selecciona .
De este modo el intervalo entre el primer y
ltimo fotograma se rellenar de color gris .
Los fotogramas 1 y 30 se denominan foto-
gramas clave y se distinguen entre los dems
porque tienen un punto negro
situado en el centro .
Para desplazarte entre ellos
puedes usar la barra de des-
plazamiento de color rojo
o bien, hacer click con el ratn sobre
el fotograma correspondiente dentro
de la lnea de tiempo.
6
Sitate so-
bre el foto-
grama 30 y des-
plaza el objeto
a un punto dife-
rente, por ejem-
plo, fuera de la
escena .
Luego sitate en
el fotograma 29
haz click en l con el botn
derecho del ratn y selecciona
. La lnea de
tiempo se habr coloreado en morado y apa-
recer una lnea continua en su interior, para
indicar que el movimiento se ha realizado
correctamente .
Pulsa para comprobar el resultado, o
para ver la pelcula completa.
6
Es posible que te encuentres ante un pro-
blema frecuente en el trabajo con capas:
al situar un objeto en una capa
superior se ha tapado otro situa-
do en otra inferior y que necesitas
mostrarlo. Aqu ha ocurrido con el
alga que tapa al cangrejo .
La solucin en este caso pasa por
aadir una nueva capa sobre la que est si-
tuado el elemento que tapa al que quieres
mostrar, y colocar en ella este ltimo, o a
la inversa, aadir la capa por debajo de la
que se encuentra el elemento oculto y pegar
aqu el objeto que lo tapa. En ambos casos el
proceso es similar.
7
Sitate, por ej emplo, sobre la capa
, aade una nueva capa
desde el botn
y asgnale un nombre . Des-
pus selecciona la herramienta
haz click sobre el elemento que vas a mover
a la nueva capa con el botn
derecho del ratn
y elije la entrada den-
tro del cuadro de dilogo que
se muestra en este momento.
8
A continuacin, selecciona la capa nueva
donde vas a insertar el objeto
haz click con
el botn de-
recho del ratn sobre el rea del escenario
donde quieras colocarlo y marca la entrada
. Es posible que ten-
gas que mover un poco el
objeto hasta colocarlo en el
punto exacto que prefieras
tal y como te mostramos
en el paso 4. De este mo-
do conseguirs el resultado
que perseguas
y habrs logrado colocar todos los elementos
de tu animacin .
Crea un movimiento
sencillo
4
...y en el prximo nmero
Esto es slo un pequeo avance de lo que puedes con-
seguir animando objetos en Flash. Pero antes de que
llegue este momento, es fundamental que conozcas a
fondo las herramientas de dibujo. Aunque no seas preci-
samente un manitas en la materia, puedes conseguir
excelentes resultados basndote en sencillos objetos,
utilizando tus imgenes como base o, incluso, conver-
tirlas en dibujos como si se tratara de un cmic listo
para ser animado. No te pierdas la prxima entrega, en
la que te explicaremos todo esto y muchos trucos ms.
Es posible que dentro de una misma capa dos elemen-
tos se superpongan y necesites que uno no quede ocul-
to por el otro. Puedes organizar la disposicin y el orden
en el que aparecen las distintas
instancias seleccionando una
de ellas con el botn derecho
del ratn, seleccionar y
elegir su posicin .
Consejo
Las posibilidades de Flash para crear dibujos, grficos o ilustraciones son ilimitadas.
Da igual si no tienes aptitudes artsticas, ya que las herramientas que te ofrece este
programa te ayudan a pintar todo tipo de situaciones de un modo muy sencillo y fcil.
Sumario
Dibuja lneas y trazos simples 39
Crea formas sencillas
con relleno 40
Crea tu primera ilustracin 40
Dibuja a partir de una imagen
o fotografa 41
Inserta y edita texto 42
Gua del curso
38 N 286
Atrvete a dibujar!
archivo, a la vez que el
dibujo y la representacin
de grficos se realiza de
un modo muy sencillo.
El camino fcil
Con Flash puedes dibu-
jar de muchas maneras: a
mano alzada (con la herra-
mienta de lpiz o pincel),
mediante curvas bzier
(herramienta de pluma), a
partir de formas sencillas
como polgonos o lneas,
o transformando una ima-
gen en mapa de bits en
vectorial. El primero de
los mtodos no te resul-
tar complicado si tienes
buena destreza en el dibu-
jo, ya que si lo haces bien
sobre el papel, slo nece-
sitars adaptarte al ratn
y a la pantalla del orde-
nador para conseguir bue-
nos resultados. El segundo
caso tampoco te resultar
complicado si has utiliza-
do antes otros programas
de ilustracin.
En esta entrega del cur-
so te mostramos los dos
ltimos mtodos, con los
que conseguirs dibujar
an cuando nunca hayas
manifestado ninguna apti-
tud para el dibujo.
toda esta informacin de
color se traduce en un
aumento del tamao del
archivo. Flash utiliza vec-
tores que se crean a partir
de una serie de posiciones
en un eje de coordenadas.
Con esto se consigue re-
ducir la informacin del
en mapa de bits basadas
en pxeles. Estas ltimas
estn formadas a partir
de una retcula con millo-
nes de puntos diferentes
de color que, en conjunto,
dan como resultado una
imagen llena de detalle
y precisin. Sin embargo, A
unque seguro que no
puedes contener ms
las ganas de animar
objetos en tu proyecto con
Flash, es conveniente que
antes de empezar tengas
claros algunos conceptos
sobre los distintos elemen-
tos que darn forma a tu
futuro proyecto, as como
el tratamiento que requiere
el trabajo con cada uno.
Vectores vs.
mapa de bits
En Flash debes tener en
cuenta su naturaleza vecto-
rial. Esto significa que los
grficos e imgenes que
vas a crear y editar son
vectores, y no imgenes
Adobe Flash CS4 permite realizar movimientos en 3D sobre
cualquier clip de pelcula de un modo rpido y fcil.
Cada elemento grfico en Flash se forma a
partir de un contorno, un relleno o la com-
binacin de ambos. Es importante que sepas
cmo trabajar con ellos y en qu casos nece-
sitas uno u otro.
1
Antes de comenzar a dibujar con Flash,
puedes cambiar el aspecto de la interfaz,
de modo que te resulte ms cmodo acce-
der a las herramientas especficas para esta
tarea. Dirgete al men supe-
rior y pulsa sobre la entra-
da . En el cuadro
de dilogo que se muestra a
continuacin, selecciona .
De este modo, la barra de
herramientas de dibujo y los paneles de pro-
piedades de cada una de ellas, se colocarn
en el margen izquierdo de la pantalla .
2
El elemento ms sencillo de dibujo es la
lnea. Para pintar una pulsa sobre el
botn correspondiente .
A continuacin, pincha en un rea de la es-
cena y, sin soltar el ratn, arrastra el cursor
en cualquier direccin hasta que la lnea
alcance el ancho que
necesitas .
3
Es posible que el resultado no sea an el
que buscas, pero no te preocupes, porque
puedes modificar sus propiedades. Para ello
es necesario que selecciones el objeto pre-
viamente. Hazlo con un click sobre el
siguiente botn:
situado en la barra de herramientas, y despus
selecciona con otro la
lnea, que cobrar este
aspecto .
Luego, di r get e al
apartado
y pulsa sobre la man-
cha de color situada al
lado del icono del lpiz de trazado. Se abrir
un panel con distintas gamas de color
que puedes elegir con un click sobre
uno de los recuadros. En este caso .
4
Otro de los valores que puedes cambiar
es el grosor del trazo. En este caso, des-
pus de haber seleccionado la lnea como en
el paso anterior, dirgete al apartado
y desliza la barra hacia la derecha si quieres
aumentar el grosor. Tambin puedes hacer-
lo si indicas el valor que deseas darle en el
campo situado justo al lado.
Tras hacerlo vers al instante
el resultado .
5
Tambin puedes elegir distintos estilos de
trazos para crear, por ejemplo, una lnea
discontinua de puntos o rayas, de trazo fino,
sombreada, etc. Simplemente debes volver a
seleccionar la que tienes sobre el escenario y
luego pulsar en el men .
En el cuadro desplegable que aparece enton-
ces, selecciona uno de los estilos
y vers el resulta-
do al momento .
6
Cuentas con tres posibilidades ms a la
hora de modificar el trazado original.
Puedes modificar la curvatura de la lnea del
mismo modo que si es tratara de una goma
flexible, lo que te permitir crear cualquier
forma que te propongas. Sita el puntero del
ratn cerca de la lnea
hasta que ste cambie
a la forma .
Entonces haz cl i ck
y mueve la lnea hacia
arriba o hacia abajo, y
tambin hacia la izquierda o derecha
hasta que alcance la
curvatura y altura que
deseas que tenga .
7
Tambin puedes modificar la longitud del
trazo. Slo tienes que situar el puntero
del ratn en uno de sus extremos hasta que
cambie a la forma
siguiente:
luego haz click y,
si n sol t ar el r at n,
arrstralo hasta que
alcance el tamao que
deseas .
Si necesitas hacer un ajuste preciso de la me-
dida, escrbelo en el campo .
8
Por ltimo, puedes desplazar y colocar el
objeto que has creado en la parte de la
escena que prefieras. Lo conseguirs si sitas
el puntero sobre la lnea hasta que cambie a
la forma .
Luego haz click y muvela al lugar que prefie-
ras. Al igual que en el punto 7, puedes hacer
un ajuste preciso indicando la posicin exacta
en los campos .
39
Herramientas de dibujo
N 286
Dibuja lneas y trazos
1
El dibujo a mano alzada con Flash es muy flexible, y te permite realizar las composiciones con facilidad. Pero
si el dibujo no es tu fuerte, te mostramos cmo obtener ilustraciones y formas a partir de contornos simples
como lneas, crculos y rectngulos. Puedes usar tus fotos y convertirlas en dibujos. Te mostramos cmo.
Es importante que mantengas siempre visible la he-
rramienta Regla en el escenario, ya que te permitir
calcular la posicin exacta de cada objeto en l, as
como su tamao. Esto te resultar muy necesario a la
hora de animar los distintos elementos, como podrs
comprobar en la prxima entrega. Dirgete al men
y luego a para mostrar las barras de regla
vertical y horizontal. Los objetos se alinean en un eje
de coordenadas donde el valor y, marca la posicin
vertical y, el valor x, la horizontal.
Consejo
Ahora que ya sabes utilizar las lneas b-
sicas, llega el momento de crear tu primera
ilustracin. En este ejemplo vas a dibujar una
mariquita utilizando formas simples, como
lneas y crculos. Comprobars que no tiene
ninguna complicacin.
1
Comienza primero con un crculo.
Pulsa sobre el botn
y, en el cuadro de dilogo que aparece, es-
coge la entrada .
Luego haz click sobre
para acceder a la ventana donde puedes
seleccionar el color .
Establece un grosor, por ejemplo de .
A continuacin cambia el color del
relleno por el blanco. Esto lo conse-
guirs con un click sobre
y despus selecciona .
2
Ahora dirgete al escenario y
pinta ya el crculo .
Para crear la forma del cuerpo
alargada debes modificar la cur-
vatura, del mismo modo que te hemos mos-
trado con las lneas. Pulsa luego sobre
el botn de seleccin
haz click en el extremo inferior
del crculo y desliza el cursor ha-
cia abajo .
3
Para separar la cabeza del
cuerpo del insecto, vas a
utilizar la herramienta
cuyo funcionamiento es similar al que
te hemos mostrado para crear lneas, si bien
tiene algunas peculiaridades. As, el lpiz te
permite dibujar a mano alzada, pero puedes
indicar el tipo de acabado que dar de forma
automtica a tu trazo (suavizado o con vrti-
ces marcados). Esto te evitar la preocupacin
de dibujar con precisin con el ratn.
Pincha sobre el botn
y en el cuadro de dilogo que aparece,
selecciona la herramienta
para suavizar el trazo. A
continuacin, dibuja sobre
el crculo una lnea curva-
da similar a esta .
4
Comprobars que se suaviza de forma
automtica. Adems de separar el objeto
visualmente con una lnea, el relleno tambin
se ha dividido en dos, de forma que puedes
editar cada una de las partes independiente-
mente. Pulsa en el rea
superior para comprobar
que es as, y seleccinala
para comenzar a dibujar
lo que ser la cabeza .
5
Ahora debes colo-
rearla, por lo que
dirgete al panel de pro-
piedades de color situado en el margen infe-
rior derecho de la pantalla .
Pulsa sobre el icono
y en el cuadro de dilogo
que aparece justo despus, selec-
ciona la entrada .
De este modo obtendrs un color
de relleno degradado de forma li-
neal. De momento, est de-
finido en escala de grises,
del negro al blanco .
Pulsa sobre el selector
Otros elementos que puedes obtener fcil-
mente con Flash son las formas simples que
viene predefinidas por el programa: rectn-
gulo, cuadrado, crculo, valo y pentgono.
Si tus artes en el dibujo no son muy amplias,
te recomendamos que, antes de recurrir a he-
rramientas ms complicadas, intentes utilizar
uno de estos elementos para dar forma a tu
figura ya que la mayora de los objetos pue-
den crearse a partir de una de ellas.
1
Pincha sobre la herramienta
para comenzar el proceso. Se abrir
un cuadro de dilogo desplegable con las di-
versas opciones de que dispones .
En este ejemplo, elije la primera de ellas. Lue-
go dirgete al men situado abajo.
Observa que ahorase ha activado, adems de
la herramienta de co-
lor de trazo, tambin
la de relleno .
2
En este tipo de objetos es importante
que distingas entre el trazo y el relleno.
El primero de ellos es el contorno, y dibu-
ja una lnea alrededor del objeto. Esta lnea
tiene las mismas propiedades que te hemos
mostrado en el apartado anterior, de modo
que te ayudar en muchos casos poder mo-
dificar su color, estilo o grosor, si bien es po-
sible que, segn el tipo de objeto que vas a
dibujar, no sea necesario crear este contorno.
En este ltimo caso, pulsa en
y en el cuadro de muestras de color
que aparece, selecciona con un click la
siguiente opcin:
3
La paleta de color se utiliza del mismo
modo ya sea para seleccionar el color de
un trazo, del relleno o de un elemento de tex-
to. Puedes elegir una de las tonalidades que
aparecen por defecto, pero si buscas un
matiz diferente, es preferible que pulses
sobre el icono .
De este modo se mostrar un panel ms avan-
zado desde el que podrs elegir el color. Para
ello, haz click en un rea del mismo .
Adems, si vas a utilizar este tono en ms mo-
mentos del proyecto, es preferible que definas
una lista de colores personalizados para agili-
zar el trabajo. Pulsa en
y se aadir al campo .
4
Contina con el rectngulo que habas co-
menzado a dibujar. Has seleccionado un
trazo de color azul y el relleno ser de color
rojo, tal y como lo puedes
comprobar en .
El siguiente paso que puedes dar, en el caso
de que lo consideres necesario, consiste en
indicar un mayor o menor grosor del trazo.
Puedes hacerlo desde .
Una vez que hayas definido estas
caractersticas, ya puedes dibujar
el rectngulo con ayuda del ra-
tn en el escenario
con las dimensiones que creas
conveniente, y obtendrs un re-
sultado similar a este .
5
Al igual que en el ejemplo anterior, pue-
des modificar su forma si seleccionas
uno de los bordes (o varios) y
lo arrastras a la posicin que
deseas
hasta conseguir un resul-
tado que cumpla con tus
expectativas .
40 N 286
Crea formas simples
con relleno
Crea tu primera
ilustracin
2
3
y, en el panel de muestra de colores que
aparece, selecciona un tono amarillo,
como por ejemplo .
De forma automtica habrs con-
seguido colorear la cabeza .
A continuacin, selec-
ciona el otro rea del
relleno para dibujar
el cuerpo .
Pincha sobre la herramienta
pero selecciona ahora un color sli-
do en tono rojo .
Obtendrs un resultado
como este .
6
Tambin aqu tendrs que
separar el cuerpo en dos
mitades para dibujar las alas.
Puedes utilizar la herramienta
de modo que seleccinala y traza una
lnea que recorra el
relleno de punta a
punta .
Con ayuda del
ratn, crvala
un poco para
conseguir una
sensacin de
volumen .
7
Por ltimo, debes dibujar los topos en las
alas y, si quieres, los rasgos de la cara,
as como las antenas y las patas. En el
primer caso pulsa sobre el botn
despus en la herramienta
y, en el men que aparece a conti-
nuacin, marca la casilla
para desactivar la opcin de trazo. Lue-
go pulsa sobre
y selecciona el color blanco entre
las muestras disponibles. Despus
dibuja un crculo sobre una de las
alas del dibujo
y repite este paso varias veces mo-
dificando el tamao de los crcu-
los hasta conseguir un resultado
parecido a este:
8
Ahora selecciona el co-
lor negro para el relleno
del crculo y di-
buja uno pequeo
sobre la cabeza a
modo de ojo .
Como tienes que pintar al lado otro
igual, seleccinalo primero con la he-
rramienta correspondiente
y luego con un click sobre el punto re-
cin creado .
Despus pulsa a la vez las teclas
y para duplicar el objeto de forma
instantnea .
Obtendrs una copia, si bien
no estar ubicada en su lu-
gar exacto. Para ello sita el
puntero del ratn en un rea
cercana al mismo hasta que el
cursor cambie de forma
y muvelo despus hasta el lu-
gar que sea necesario .
9
Puedes pintar la boca tra-
zando una lnea pequea con la
herramienta
y curvndola ligeramente como te hemos
mostrado en pasos anteriores. Con esta mis-
ma herramienta puedes, finalmente, dibujar
las antenas
que puedes curvar
tambin
as como las
diferentes pa-
tas
hasta que ob-
tengas un re-
sultado similar
al que te mos-
tramos en este
ejemplo .
Adems de pintar a mano alzada puedes
convertir una imagen en mapa de bits ( Jpg,
Gif, Bmp) basada en pxeles, en una vecto-
rial que puedes editar fcilmente con Adobe
Flash (aparte de reducir el tamao del archi-
vo), q tambin, te servir si quieres convertir
tus fotos en ilustraciones y darles un aspecto
de cmic. Hazlo de este modo.
1
Lo primero que tienes que hacer es im-
portar al proyecto la imagen que vas a
utilizar. Para ello, dirgete al men ,
selecciona y despus haz click so-
bre la entrada denominada .
A continuacin, aparece una ventana de ex-
ploracin desde
donde debes
seleccionar la
imagen que vas
a utilizar .
Tras ello com-
probars que
la imagen se ha
guardado en la
bi bl i ot eca de
archivos .
Seleccinala con el ratn y arrstrala hasta el
escenario para editarla .
2
Antes de comenzar el proceso, debes se-
leccionar el objeto con un click en
y, luego, seleccionar la imagen pinchan-
do sobre ella. A continuacin, pulsa sobre
el men y en la entrada
, elije la opcin . De este mo-
do vers un nuevo cuadro de dilogo, donde
debes indicar una serie de parmetros para
la creacin de los vec-
tores. En el primero de
los apartados
especifica un valor de 1 a 100, segn quieras
que se conserve una mayor o menor cantidad
de pxeles de color. Despus debes indicar
el valor de nmero de pxeles que deben
considerarse para asignar un valor. Cuanto
mayor sea este dato, ms se parecer a la
41 N 286
Dibuja a partir
de una imagen
4
Una vez que has convertido en vectorial una imagen
en mapa de bits, es muy recomendable que agrupes
todas las partes para que puedas manejar el conjunto
como un bloque. Para ello, selecciona la imagen obte-
nida desde el men y luego en .
Despus, dirgete al men y pincha en
para convertirla en un nico bloque o elemen-
to. Adems, te recomendamos que la conviertas en
smbolo y, a partir de ahora, trabajes nicamente con
esta imagen y no con el Jpg original, que aumenta el
volumen del archivo y que debes eliminar para evitar-
lo. Haz click con el botn derecho del ratn sobre la
imagen, selecciona la entrada
y asigna
un nombre .
En la biblioteca, selecciona el
archivo original, pulsa el botn derecho del ratn y es-
coge la funcin .
Consejo
Con Flash puedes utilizar tres tipos de texto:
esttico, que se puede editar del mismo modo
que un procesador de texto; dinmico, que
se puede actualizar de forma automtica; y
campos de introduccin de texto para aadir
formularios. En este curso vas a emplear el
primero de ellos, ya que para los otros son
necesarios ciertos conocimientos de progra-
macin algo ms avanzados.
1
Pulsa sobre el botn
y mueve el cursor del ratn hacia
la escena. Observars que el puntero
cambia por la forma .
Si lo prefieres, puedes definir antes el ancho
que tendr en campo de texto. Para ello, una
vez que has pulsado sobre el rea donde vas a
escribir, sita el cursor en el margen derecho
hasta que cambie su forma con una
doble flecha, haz click y desplzalo
hacia la derecha
hasta que consigas el ancho deseado .
No te preocupes por la altura, porque el progra-
ma hace los saltos de lnea de forma automtica.
2
Haz click en el rea donde quieres
insertar el prrafo
y comienza a escribir del mismo como
que con un procesador de texto .
Para cambiar la posicin del texto dentro de
la escena, seleccinalo con la herramien-
ta correspondiente
de modo que quedar rodeado por un marco
de color azul .
Sita el cursor sobre este mismo
campo hasta que tome la forma .
Por ltimo haz click y, sin soltar el ratn, des-
plaza el texto a la nueva ubicacin.
3
Es el momento de aplicar los atributos
del texto. Para ello debes dirigirte al
panel de herramientas situado en el mar-
42 N 286
imagen original, si bien, el nmero de vec-
tores aumentar y te resultar ms difcil
editar la imagen. En este caso es suficiente
con un valor medio .
3
En los siguientes apartados puedes elegir
cmo se van a tratar las
curvas y los vrtices de las
distintas reas de la imagen.
En este caso, como no es ne-
cesario que queden definidas
estas partes, en
selecciona la entrada
y luego, en
indica .
A continuacin pulsa en
y, tras unos ins-
tantes, vers el resultado
en la pantalla .
4
Pero an no
has termina-
do, porque aun-
que has obtenido
una imagen vec-
torial, cada una
de las partes de la
imagen presenta
algunas irregula-
ridades que debes
corregir de forma
manual. Durante
este proceso, te
aconsejamos que
te armes de paciencia, porque los mejores re-
sultados los conseguirs a fuerza de probar
y de hacer un trabajo minucioso. Ante todo,
debes aplicar el zoom de la imagen para verla
con la mayor precisin posible.
Selecciona la herramienta
y haz varios clicks sobre la escena hasta
ampliar la vista de la
imagen lo mximo po-
sible. Entonces vers
los diversos defectos e
irregularidades en los
trazos de la imagen .
Como se trata de vec-
tores, puedes modificar
cada una de las partes
con ayuda del cursor del
ratn, del mismo modo
que te hemos enseado a
hacerlo en los apartados
anteriores .
5
Es posi bl e que se
hayan formado ms
colores de relleno de los
que pretendas .
En este caso, puedes uni-
ficar el color de un objeto
de un modo muy simple.
En primer lugar, seleccio-
na el rea que contenga el re-
lleno que vas a cambiar con
un click sobre ella .
Luego, pulsa sobre
la herramienta
y, a continuacin,
pincha sobre un rea de la
imagen que sea del color por
el que lo quieres sustituir .
Tmate tu tiempo y, con mu-
cha paciencia retoca y modifi-
ca poco a poco la imagen hasta que consigas
un resultado adecuado .
6
Este mismo proceso te
puede servir, en el caso
de rostros y caras a las que
quieras darles un aspecto de
cmic. En estos casos, el pro-
ceso es similar al anterior: im-
porta el archivo a la biblioteca,
arrstralo a la escena
y sigue los pasos del apartado 2. En este ejem-
plo, sin embargo debes indicar los valores
ya que ser preferible que la imagen vectorial
se parezca a la original.
7
Obtendrs un resultado similar a este, si
bien, an con algunas imperfecciones .
Vuelve a utilizar la herramienta
para matizar algunas zonas como el con-
torno de la boca o de
los ojos .
Si es necesario, utiliza
la siguiente he-
rramienta:
para perfeccionar al-
gunos rasgos, como el
perfil de la nariz .
Inserta y edita texto
5
gen izquierdo de la interfaz
del programa. En primer lugar,
asegrate de que en el cam-
po se encuentre
marcada dicha opcin. Despus
dirgete al apartado y
pulsa sobre el panel desplegable
. De es-
ta forma podrs elegir el tipo de
fuente que prefieres .
4
A continuacin, pincha sobre
el campo
si quieres aadir cursiva, negri-
ta o ambas caractersticas al tex-
to. En el apartado
puedes modi f i car el cuerpo
o tamao del mismo con un
click en el campo .
Y en , el espacio
entre las letras. Para cambiar
el color del texto
pulsa sobre la he-
rramienta
y selecciona una de las opciones
del panel que aparece
o bien haz click sobre
para elegir otra tonalidad
ms especfica.
5
Despus, desde el apartado
es posible alisar los bordes de
las letras, y puedes seleccionar
distintas posibilidades segn la
finalidad del texto .
Ten presente la herramienta .
Si la activas, el texto podr
ser seleccionado y copiado des-
de el archivo final, por lo que es
importante que conozcas este as-
pecto si, por ejemplo, vas a pu-
blicar tu documento en Internet y
no quieres facilitar esta tarea.
6
Las opciones de formato de
prrafo se encuentran en el
panel . Selecciona una
de las cuatro posibilidades
para establecer la alineacin
del texto a la izquierda, centra-
da, derecha o justificada. Desde
puedes
definir la sangra del prrafo y,
e n ,
los mrgenes. Por ltimo, en el
campo tienes la posi-
bilidad de establecer un vnculo
o link al texto. Simplemente, es-
cribe la direccin o ruta en
y, si quieres aadir una direccin
de correo electrnico utiliza la ex-
presin mailto: pruebas@compu-
terhoy.es. Por ltimo, en el apar-
tado , selecciona
si quieres que el nuevo sitio se
abra en una pgina distinta del
navegador, y si quieres que
lo haga en la misma ventana.
43
Software
N 286
...y en el prximo
nmero
Si has llegado hasta esta parte del curso,
no te pierdas la prxima entrega, porque
en ella te contamos todos los pasos nece-
sarios para que puedas animar cualquier
tipo de objeto con Flash. Asimismo, te ex-
plicamos con todo detalle cmo funciona
la lnea de tiempo, para que puedas orga-
nizar y controlar con total exactitud cual-
quier movimiento que necesites crear.
Cada vez que utilizas una fuente en Flash
el programa almacena toda la serie de
caracteres y los compila junto con el do-
cumento final. Esto permite que, desde
cualquier equipo donde se reproduzca
el archivo, se pueda visualizar dicha ti-
pografa, con independencia de si se en-
cuentra instalada o no. Sin embargo, esto
hace que aumente el tamao del archivo,
algo que puede ser un impedimento en
determinadas ocasiones. Para evitarlo,
una vez que termines de editar el texto y
est totalmente listo para su publicacin,
puedes convertir el texto en vectores, de
modo que el programa lo trate como un
grfico. Para ello selecciona el texto y
pulsa y dos veces consecutivas.
Enseguida vers el resultado:
Consejo
En la edicin impresa, este era

un espacio de publicidad
L
a animacin por or-
denador ha revol u-
cionado las tcnicas
tradicionales, en las que
haba que generar una
gran cantidad de dibujos
en distintas fases de mo-
Sumario
Crea una animacin
de movimiento clsica 47
Movimientos dentro del
clip de pelcula 48
Animacin con guas
de movimiento 48
Esqueleto de movimiento 49
Uso de mscaras animadas 50
Mscaras animadas complejas 51
46 N 287
Gua del curso
vimiento para crear esta
sensacin. No obstante, la
base del funcionamiento
de programas como Flash
se centra en sus principios
fundamentales ya que, al
igual que entonces, es ne-
cesario crear diferentes
estados de movimiento de
un objeto y dibujar entre
ellos la secuencia de tran-
sicin entre uno y otro.
Sin embargo, existe una
diferencia ms que nota-
ble en cada caso ya que,
antiguamente, adems de
dibuj ar los fotogramas
clave, era necesario dibu-
jar fotograma a fotograma
todos los momentos que
marcaban el paso de un
estado a otro. La diferen-
cia ahora es ms que nota-
ble, ya que slo tienes que
preocuparte de definir los
dos (o ms) estados de
movimiento y Flash se en-
carga de intercalar el resto
de forma automtica. Este
hecho permite, no slo re-
ducir el tiempo de trabajo,
sino que cualquier usuario
puede aventurarse en este
campo sin tener conoci-
mientos especficos de di-
bujo o de animacin.
Distintos tipos
de movimiento
Flash permite crear dos
tipos de animaciones a los
que llama interpolacin de
movimiento e interpola-
cin de forma. En ambas
el funcionamiento es el
mismo, ya que se crean
dos fotogramas claves, y
el programa interpola el
resto de la secuencia entre
ambos. La diferencia entre
una y otra funcin reside
en el tipo de objeto y en
el modo en el que se ani-
ma. As, la de movimiento
funciona con smbolos,
mientras que la de forma
con grficos editables.
Con ambas puedes cam-
biar el tamao, el color y
la posicin, si bien con la
segunda el objeto puede
cambiar de forma.
Junto a estos movimien-
tos, dispones de funciones
ms avanzadas como las
guas de movimiento y las
mscaras animadas, que
te permiten conseguir una
mayor precisin y control
de los movimientos.
Por ltimo, es necesario
destacar una funcin que
ha incorporado la lti-
ma versin de Flash CS4,
denominada cinemtica
inversa. Gracias a ella es
posible crear fcilmente
formas articuladas, que
equivalen a los huesos
de un esqueleto, y animar
las distintas partes que lo
componen.
Llega el momento de hacer que cobren vida los objetos de tu
proyecto. Animar una pelcula en Flash es una tarea sencilla
que te permite crear toda clase de movimientos imaginables.
Con guas conseguirs
recorridos exactos
3, 2, 1...
accin!
Es recomendable que organices en capas distintas cada ele-
mento que vas a animar, para tener un mayor control de ellos.
Genera el movimiento
con fotogramas clave
47
N 287
Para mover un objeto en Flash no es nece-
sario animar fotograma a fotograma, sino que
basta con definir puntos o fotogramas clave,
en los que se produce un cambio en el objeto
(posicin, tamao, orientacin, etc.) y generar
una transicin entre ellos que crea el movi-
miento. En este ejemplo hemos usado grficos
gratuitos del sitio www.vector4free.com
1
Lo primero que debes hacer para comen-
zar a animar tu proyecto es situar los
distintos elementos en la lnea de tiempo.
Los objetos que no vas a animar, en prin-
cipio, puedes situarlos en la primera capa,
y el resto en otras diferentes. Sitate en la
escena principal con un click en
y haz doble click sobre el nombre de la ca-
pa para cambiar
el nombre de la misma . Aqu, por
ejemplo, puedes situar elementos que anima-
rs algo ms tarde.
2
Aade otra para colocar la imagen de
fondo o los elementos fijos que se man-
tendrn constan-
tes a lo largo de
la pelcula y que
no vas a animar .
Llmala, por ejemplo .
Es importante que la imagen o tapiz de fondo
se site por debajo del resto de elementos
del proyecto para permitir su visualizacin.
Para cambiar el orden de
las capas slo tienes que
seleccionarla
y arrastrarla hacia
la posicin que
desees .
3
Una vez que has situado los elementos
en las distintas capas en el escenario
, selecciona el objeto que quieres
animar con un click sobre el botn y lue-
go otro sobre el elemento en
cuestin .
Para darle movimiento ne-
cesitas antes convertirlo en
smbolo que, adems, debe
ser un clip de pelcula. Di-
rgete al men
situado en el men de he-
rramientas del margen izquierdo, luego asigna
un nombre a la nueva instancia en y des-
pus selecciona la opcin .
4
Ahora que ya has convertido el objeto
en un clip de pelcula, es el momento
Controla los movimentos
Crea una animacin
de movimiento clsica
1
Cualquier elemento grfico en Flash puede ser animado. Si conoces bien los recursos de que dispones podrs
controlar hasta el movimiento ms imperceptible, pero con el que conseguirs un gran realismo, desde el
parpadeo de un ojo hasta el desplazamiento de los objetos a lo largo de la escena. Aprende cmo.
de conseguir que se mueva. Haz doble click
sobre l y acceders as a su propia lnea
de tiempo. Como
puedes ver, es
igual a la de la
escena principal,
si bien, los ele-
mentos de sta
estn inactivos y
en un color ms
aclarado .
5
Sita el cursor sobre el primer fotograma
con un click sobre l
luego colcate en
otro punto donde
vayas a insertar el
fotograma clave, en
este caso el 15, y pulsa . Comprobars que
queda sombreado el espacio entre uno y otro
en color gris, y el fotograma 15
queda resaltado con un punto
negro, lo que indica que se trata
de un fotograma clave .
6
Es en este ltimo donde debes cambiar
la posicin del objeto, de modo que se
produzca un cambio entre un momento y el
otro. Para controlar la velocidad, recuerda
que cuanto ms tiempo dure ms lento se-
r el movimiento, y a la inversa. Dirgete a
la lnea de tiempo y sitate en el fotograma
clave 15, luego pulsa en y
aproxima el cursor del ratn
sobre el objeto hasta que el
puntero del ratn cambie de
forma .
Haz click y muvelo al lugar
del escenario donde quieras
trasladarlo. Te
vendr muy
bien la imagen
de fondo pues
te servir de
gua, en este
caso, para des-
lizar la ardilla
por el rbol .
7
A continuacin, dirgete de nuevo a la
lnea de tiempo y haz click sobre el fo-
tograma anterior al fotograma clave con el
botn derecho del ratn. En el cuadro de
dilogo que aparece entonces, selecciona
. De este modo has
creado una interpolacin de movimiento que,
como ves, se representa en la lnea de tiem-
po en color violeta, y con
una flecha que marca la
transicin entre el frame
de inicio y el final .
8
An puedes conseguir que el objeto cam-
bie ms: rotarlo, modificar su tamao o
color. En este mismo fotograma clave puedes
rotar e inclinar el objeto para dar la
sensacin de que realmente se desliza
por el rbol. Sitate as sobre el foto-
grama clave haciendo click sobre la
lnea de tiempo
luego selecciona la herramienta
y vers cmo el objeto queda
enmarcado por una serie de
selectores .
Coloca el puntero del ratn
sobre una de las esquinas
hasta que cambie a
la forma
haz click y muvelo hasta
que encuentres la inclinacin
ms acertada .
9
Ya has completado una
primera parte de la ani-
macin, pero puedes seguir haciendo ms
tramos hasta completar el movimiento
de este animal en cuestin. Como has
hecho antes, sitate en otro punto de
la lnea de tiempo
y pulsa luego la tecla para crear all otro
fotograma clave .
Luego, seleccinalo con un
click y mueve y rota el obje-
to hasta otro punto diferen-
te en la escena, del mismo
modo que has hecho en el
paso anterior .
Despus sitate en el punto
anterior al nuevo fotograma clave
haz click con el botn derecho del ra-
tn y selecciona .
Repite este mismo pro-
ceso en la lnea de tiem-
po las veces que consi-
deres necesarias hasta
que la ardilla alcance su
objetivo .
10
Cuando termines, la lnea de tiempo po-
dr tener un aspecto similar a este:
Para comprobar el resultado, pulsa la tecla
y vers la animacin sobre la misma escena.
Si la velocidad del movimiento no te acaba de
convencer, ahora puedes acelerarla o
ralentizarla. En el primer caso seleccio-
na cada uno de los fotogramas clave
del intervalo que quieras cambiar
48
N 287
Cada smbolo en Flash (clip de movimiento,
grfico o botn) puede contener tantos clips
de movimiento como sean necesarios para
conseguir animar los distintos elementos de
tu pelcula. En este ejemplo te mostramos
cmo simular el parpadeo de un ojo en un
animal, lo que te puede ayudar a la hora de
hacer animaciones ms complejas, como ros-
tros de personas, ya que el procedimiento es
muy parecido.
1
No siempre te resultar necesario animar
los objetos sobre el escenario principal
para ver el fondo de
la ilustracin. En este
caso, como se trata de
mover una parte den-
tro del objeto, puedes
hacerlo fuera de su
contexto. Haz ahora
doble click sobre el
nombre del mismo
dentro de la bibliote-
ca de archivos .
De este modo acceders a la lnea de tiempo
del objeto .
Para trabajar de un modo ms cmodo, au-
menta el zoom del dibujo con ayuda de la
herramienta o del selector .
2
Para poder animar un objeto dentro de
otro es necesario que lo conviertas antes
en un smbolo independiente, que debe ser
un clip de pelcula. Selecciona la
parte que quieres animar con un
click con el botn derecho del ra-
tn, en este caso, el ojo
Movimientos dentro
del clip de pelcula
2
Otro mtodo a la hora de animar los objetos
son las guas. Esta funcin tiene como ventaja
que puedes crear recorridos, sobre los que
se movern los distintos elementos, tan com-
plejos como quieras ya que previamente los
tendrs que disear. Te explicamos cmo.
1
Cuando vayas a aadir un nuevo objeto,
con una animacin independiente al resto
de elementos de la pelcula, es recomenda-
ble que lo hagas en una nueva capa. Dirge-
te a la escena principal con un click sobre
y pulsa en
para crearla .
Pulsa dos veces sobre
ella para asignarle un nombre . Es im-
portante que lo hagas, ya que a medida que
la pelcula se haga ms compleja, tener orde-
nada la lnea de tiempo y cada uno de los ele-
mentos ser el mejor modo de reconocerlos y
gestionarlos. Tambin es muy recomendable
que bloquees las capas que no vas a utilizar,
para impedir cualquier cambio por error en
alguno de sus elementos. Hazlo con un click
sobre el punto blanco bajo el icono de can-
dado situado en cada
una de ellas .
2
Sita el elemento
que vas a animar
en la nueva capa, en
el lugar donde deseas
que se inicie el movi-
miento .
A continuacin, tie-
nes que convertir el
smbolo en un clip
de pelcula del mis-
mo modo que en los
ejemplos anteriores.
Pincha sobre l para
seleccionarlo
y dirgete al aparta-
do . Presiona lue-
go en el panel desplegable
y selecciona
la primera funcin .
Animacin con guas
de movimiento
3
y deslzalo hacia la izquierda
para aumentar la velocidad, o hacia
la derecha para reducirla. Obten-
drs un resultado diferente con movimientos
mucho ms rpidos y breves en este caso
tendr esta representacin:
11
Pero an no has terminado. Seguro que
ya te has dado cuenta de que, una vez
que la lnea de tiempo llega al ltimo fotogra-
ma, vuelve de nuevo al primero, generando
as un bucle infinito. Como no quieres que
esto ocurra en este caso, debes aadir una
instruccin en el ltimo fotograma para dete-
ner el movimiento. Haz click sobre l con el
botn derecho del ratn y selecciona la op-
cin . De este modo vers la ventana
de comandos del programa .
12
Selecciona la versin del cdigo que
vas a utilizar, en
este ejemplo, y en la lista de acciones que
aparecen en
e l ma r ge n
i z q u i e r d o ,
escoge la ac-
cin
con un do-
ble click del
ratn. Comprobars que
la instruccin se aade
tambin en el campo de
cdigo situado en la ven-
tana principal .
Pulsa en para cerrar la ventana.
Ahora sobre el fotograma clave, se
habr aadido una a para indicar-
te que contiene una accin .
e indica el nombre y tipo de smbolo en la
ventana de propiedades situada en el margen
izquierdo del programa .
3
Ahora que ya has con-
vertido el objeto en
smbolo, haz doble click
sobre l
para, de este modo, acce-
der a su lnea de tiempo
propia .
Luego, dirgete al punto donde quieras crear
el fotograma clave, seleccinalo y pulsa .
En este caso el intervalo ser
breve para conseguir que el par-
padeo sea rpido .
4
Sitate sobre el ltimo fotogra-
ma clave, selecciona el objeto,
en este caso el ojo
y pulsa en para eliminarlo, ya
que la posicin del ojo cerrado vas a di-
bujarla a mano alzada. Luego, selecciona
la herramienta y dirgete al apartado
. Elige el color ne-
gro en
y un grosor de trazo de .
Luego vuelve a la escena
y pinta una lnea pareci-
da a esta:
5
Por l ti mo, com-
prueba el resultado
pulsando la tecla . En
este caso no necesitas
detener el movimiento
en el ltimo fotograma como en el apartado
anterior, ya que el parpadeo debe ser continuo.
Por lo tanto, te interesa generar un bucle.
49 N 287
3
Haz doble click sobre el objeto para ac-
ceder a su lnea de tiempo .
Sitate sobre la capa, presiona el botn derecho
del ratn y elije .
Aparecer as la capa donde vas a incluir la
gua .
Despus debes
indicar el tiem-
po que durar el movimiento. En este
caso, selecciona los fotogramas de las
dos capas
y pulsa para crear aqu el fotograma
clave en la capa que contiene el objeto .
4
Luego pulsa sobre el fotograma 1 de la
capa de gua
escoge l a her r a-
mienta y dibuja
un recorrido en la
escena que quieres que
siga el objeto que vas a
animar .
En este ejemplo, la mari-
posa deber realizar el si-
guiente recorrido .
No te preocupes porque la gua ensucie el
escenario, ya que cuando reproduzcas la pe-
lcula no se mostrar.
5
Es importante que la duracin de ambas
capas sea la misma, para conseguir que
el movimiento se realice de forma co-
rrecta. Al crear la gua es posible que
no sea as, por lo que debes seleccio-
nar el fotograma 39
y arrastrarlo hacia el 40 para igualar la
duracin de las dos capas .
6
Es el momento de vincular la gua
de movimiento al objeto. Te recomenda-
mos que amples el zoom de la imagen
con ayuda de la herramienta .
Luego haz click sobre el primero de los fo-
togramas claves de la capa que contiene el
objeto
pulsa en y mu-
velo hasta ajustar correctamente el extremo
de la gua de movimiento con el indicador de
posicin que aparece sobre l .
A continuacin, debes seleccionar el
ltimo fotograma clave
y situar la mariposa junto al extremo
final del reco-
rrido .
7
Para crear
el movi -
miento sobre
la gua sitate
en el fotograma
pincha sobre el botn dere-
cho del ratn y marca luego
. Pul sa l a
tecla y comprueba que el
objeto se desliza correctamente
por la gua .
8
Es posible que necesites detener
el movimiento para evitar que se
repita indefinidamente. Ya sabes cmo
hacerlo: marca el ltimo fotograma cla-
ve de la lnea de tiempo
y presiona el botn
derecho del ratn.
Despus selecciona
la entrada
para abrir la ventana
de comandos y haz
doble click en
para detener en este
punto la animacin y
evitar que vuelva al pri-
mer fotograma y lo repi-
ta de forma indefinida.
Flash CS4 ha aadido la funcin de ani-
macin cinegtica, que permite crear un es-
queleto en los objetos y mover las distintas
partes del mismo. Para ello debes definir las
piezas que se movern y crear un esqueleto a
partir del cual se generar el movimiento.
1
Primero, haz doble click sobre el smbolo
que vas a animar
con la herramienta
en la biblioteca de
archivos
para acceder a su l-
nea de tiempo en el
escenario .
Esqueleto
de movimiento
4
Utiliza el botn para aumentar el modo de
vista del objeto en la pantalla y trabajar con
mayor precisin.
2
Pa r a pode r
crear un es-
queleto es necesa-
rio que cada una
de las partes del
mismo sean sm-
bolos independien-
tes y, en este caso,
deben ser clips de
pelcula .
De este modo, tendrs que
convertirlos en el caso de
que no lo hayas hecho an.
Selecciona para ello el pri-
mero de los grupos
presiona el botn derecho
del ratn y elige la entrada
. Luego,
en la ventana que aparece,
indica un nombre para este
elemento y des-
pus marca la opcin
en el panel desplegable. Repite
este mismo paso por cada uno de los elemen-
tos del objeto que vayas a animar.
3
El siguiente paso consiste en colocar
cada una de las partes en capas di-
ferentes. Con ayuda de la herramienta
podrs aadir tantas como necesites, en
este caso harn falta dos ms .
Selecciona una de las partes y pulsa a
la vez las teclas y para cortarla
de dicha capa. Luego, sitate en el primer
fotograma de una de las que acabas de crear
y pulsa y . Repite este paso con otro de
los elementos.
4
A continuacin, pulsa la herramienta
pincha en el elemento que ser el
eje central del movimiento, en este caso el
cuerpo de la mariposa, y alarga uno de los
50
N 287
Una de las utilidades de la funcin de inter-
polacin de forma son las mscaras animadas.
En Flash las mscaras se utilizan para ocultar
y mostrar un objeto de modo que ste slo
queda visible cuando se encuentra cubierto
por la mscara. Si, adems, la mscara est
animada, puedes conseguir que el objeto se
muestre de forma progresiva.
1
En primer lugar, aade una nueva capa en
la escena principal donde insertars los
nuevos elementos .
Debes asigar-
le un nombre
.
Luego arras-
tra el objeto,
en este caso
una flor de la
biblioteca, al
rea del escenario principal donde quieres
que aparezca .
2
Selecciona el objeto con el botn y
luego haz click sobre l
para seleccionarlo. A
continuacin, en la ven-
tana , debes
indicar un nombre, as
como el tipo de com-
portamiento que tendr
el nuevo smbolo .
Acto seguido, pulsa dos
veces sobre el elemento
para acceder a su lnea
de tiempo.
3
Debes asignar una duracin a este movi-
miento, si bien como sabes, ms adelante
podrs cambiarla. Para ello sitate en un
fotograma dentro de la lnea de tiempo
como, por ejemplo
y pulsa la tecla . Enseguida vers la dura-
cin seleccionada .
4
Aade una nueva capa sobre la anterior,
ya que es aqu donde vas a insertar la
mscara. Pincha en y se crear al momen-
to. Luego seleccinala , pincha con
el botn derecho del ratn y marca la entrada
denominada . De este modo la capa
asumir el comportamiento de mscara, como
podrs verlo indicado
en el panel correspon-
diente .
Uso de mscaras
animadas
5
5
Es el momento de dibujar la mscara.
Selecciona la herramienta para dibu-
jar un rectngulo. Pulsa luego sobre y,
en el panel de muestras que aparece, escoge
el botn para quitar el contorno del mis-
mo, ya que ste te permitir editar la figura
ms tarde sin dificultad. Luego pulsa en
y elige un color llamativo para que puedas
distinguir bien la mscara como, por ejemplo
. No te preocupes, porque despus no apa-
recer en el proyecto final.
6
A continuacin, sitate en el primer fo-
tograma de la capa superior que conten-
dr la mscara y dibuja
un rectngulo fuera del objeto que abarque
todo el ancho .
Para controlar el tiempo que du-
rar esta animacin selecciona
un punto dentro de la lnea de
tiempo y crea un fotograma cla-
ve, con ayuda de la tecla , en
ambas capas .
7
Luego sitate, con un click, en este lti-
mo fotograma de la capa que contiene la
mscara, ya que debes cubrir con la mscara
la figura completamente para que se muestre
visible. Selecciona la herramienta de modo
que vers unos selectores bordeando el rec-
tngulo .
Coloca el pun-
t ero del rat n
sobre el margen
superior hasta que cambie de forma por una
doble flecha. Haz click y arrstralo hacia arri-
ba para aumentar su tamao .
vrtices hacia una de
las alas para vincular-
las .
Comprobars que se
crea una nueva capa a
la vez que se vacan las
que acabas de unir .
Luego repite el mismo
proceso para unir el cuer-
po al otro ala .
5
Debes eliminar las tres capas anteriores,
ya que se habrn
quedado vacas .
Para ello, pulsa sobre
cada una de ellas con el botn derecho del
ratn y selecciona .
6
Ahora puedes centrarte en la nueva capa.
Puedes cambiarla de nombre si haces do-
ble click sobre ella ,
pero lo importante aqu es que definas el
movimiento de cada uno de los elementos, en
este caso, las alas. En primer lugar tienes que
definir la duracin de cada
uno de los aleteos. Pincha
en un frame de la lnea de
tiempo
y pulsa la tecla para aa-
dir un fotograma clave .
El intervalo seleccionado
quedar resaltado en color verde.
7
A continuacin, aade varios fotogramas
claves ms, segn consideres necesarios
para generar el movimiento de tu objeto. En
este ejemplo el resultado ha sido .
Despus debes cambiar la posicin de
las alas en cada uno de los fotogramas
clave que has creado. Selecciona el pri-
mero de ellos
e inclina cada una de
las alas:
y luego la otra .
Despus elige otro fotograma clave
y repite el mismo proceso, pero inclinn-
dolas en senti-
do opuesto .
Para compro-
bar el resulta-
do, dirgete al
men
y pulsa sobre
.
51 N 287
En el ejemplo anterior has aprendido a
utilizar mscaras animadas a partir de una
interpolacin de forma sencilla, un proceso
que podras hacer de forma similar con una
interpolacin de movimiento. Sin embargo,
la ventaja de las interpolaciones de forma
es que puedes modelar la mscara siguien-
do el contorno de la figura que pretendes
tapar, de modo que puedes conseguir que
cada una de las partes de sta aparezca de
forma progresiva.
1
Como en el ejemplo anterior coloca el ob-
jeto en la escena principal donde quieres
que se muestre .
En el panel de define su nom-
bre y el tipo de instancia que debe ser .
Luego haz doble click sobre el objeto pa-
ra acceder a su lnea de tiempo y despus
amplia el zoom para que puedas verlo con
mucho ms detalle .
Mscaras animadas
complejas
6
De este modo cubrir totalmente la figura
consiguiendo que se muestre visible .
8
Es el momento de crear la inter-
polacin de forma, cuyo proceso
es muy parecido a la de movimiento.
Sitate sobre el punto anterior al fo-
tograma clave
haz click con el botn derecho del ratn y
selecciona la entrada .
Como vers, aparece representada en la lnea
de tiempo en color verde .
2
Sitate en un punto en la lnea
de tiempo para determinar la du-
racin de la animacin
y pulsa luego la tecla para crear
un fotograma clave .
Luego aade una nueva
capa desde el botn ,
despus haz click sobre
ella con el botn dere-
cho del ratn y seleccio-
na la entrada .
3
A continuacin mar-
ca la herramienta
de dibujo y comien-
za a pintar la mscara
fuera del objeto en el
fotograma 1
para ocultarlo en un
primer momento. Lue-
go elige un fra-
me en la lnea
de tiempo y pul-
sa para crear
otro fotograma clave .
4
Sita el cursor del ratn sobre la mscara
hasta que cambie la forma del puntero y
puedas editarla poco a poco .
Cubre un rea del tallo y luego de-
fine otro fotograma clave .
Seleccinalo y contina trazando el
dibujo hasta cubrir otro rea. Lue-
go repite la misma operacin las
veces que sean nacesarias hasta cubrir, poco
a poco, todas las partes de la flor .
Repite de nuevo el proceso hasta que consi-
...y en el prximo nmero
Necesitas utilizar Flash para crear una pgina web con
diferentes secciones y un men de opciones? En el prxi-
mo nmero te damos las claves para conseguir una total
interactividad con los distintos elementos de la pelcula,
para que puedas controlar con botones todo tipo de com-
portamientos, como la navegacin en una pgina o la
reproduccin de elementos en movimiento.
Pulsa y para probar el resultado y ver
que todo es correcto.
9
Por ltimo, no te olvides de detener la
animacin en el ltimo fotograma, ya
que si no se generar un bucle y el
movimiento se repetir una y otra vez.
Sitate sobre el ltimo fotograma cla-
ve en la lnea de tiempo de una de
las dos capas
pulsa el botn derecho del ratn y seleccio-
na la entrada dentro del cuadro de
dilogo que aparece. En la ventana de coman-
dos, haz doble click en para aadir
este comportamiento.
gas cubrir la flor por completo, como puedes
ver en la imagen a continuacin .
No escatimes en tiempo, ya que cuanto ms
preciso y detallado sea cada movimiento, me-
jor ser el resultado que obtendrs
Para comprobar el resulta-
do, pulsa para reproducir
la pelcula completa, y vers
cmo la flor se dibuja poco
a poco.
5
Por ltimo, no te olvi-
des de aadir un com-
portamiento en el ltimo
fotograma para detener la
animacin. Sitate sobre s-
te, abre la ventana de accio-
nes y pulsa dos veces sobre
el comando .
A
unque aventurarte en
un proyecto como la
creacin de una pgi-
na web en Flash te pue-
de parecer, a priori, algo
demasiado complejo, una
vez que tengas claro el
Sumario
Define los elementos 39
Crea la estructura de
las pginas 40
Control de texto con botones 41
Transiciones de imgenes 41
Crea los botones del men
de navegacin 43
Programacin del men
de navegacin 44
38 N 288
Gua del curso
mtodo que debes seguir
para conseguirlo te dars
cuenta de que no es ms
que una simple rutina,
donde el trabajo se sim-
plifica bastante ms que
en una pgina realizada
en lenguaje Html. Esto es
porque para la creacin
de los distintos elementos
que se repiten en la estruc-
tura de una pgina: boto-
nes de men, ttulos, sec-
ciones con texto y fotos,
etc., basta con duplicarlos
y aadir los elementos di-
ferenciadores, lo que agi-
liza y simplifica el trabajo.
Por otro lado, el problema
de la navegacin, es decir,
la creacin de botones con
los que puedas controlar
tu proyecto y acceder a
los diferentes apartados,
se resuelve de un modo
bastante sencillo, especial-
mente con la ltima ver-
sin del programa Adobe
Flash CS4. No tengas mie-
do antes de ponerte ma-
nos a la obra, ya que pue-
des crear una pgina web
navegable sin tener ni un
solo conocimiento sobre el
lenguaje de programacin
ActionScript que utiliza
este programa. Eviden-
temente, si los tienes, el
control que podrs ejer-
cer (en todos los aspectos)
sobre tu pelcula ser infi-
nitamente mayor, ya que
podrs aadir campos de
texto dimmicos y perso-
nalizar an ms tu web,
pero, repetimos, no es im-
prescindible.
Construye tu
propia web
Si has seguido las entre-
gas anteriores del curso,
seguro que tienes claro
cmo crear y animar cual-
quier elemento en Flash,
as como el comporta-
miento que siguen los
tres tipos de smbolos en
Flash: grficos, clips de
pelcula y botones.
Con ello no te resultar
difcil embarcarte en un
proyecto ms complejo,
en el que vas a poner a
prueba todos estos co-
nocimientos y combinar-
los del modo que ms se
ajuste a tu pgina web.
En este artculo te mos-
tramos, paso a paso, el
proceso que debes seguir
para di sear una web
desde cero, crear cada
uno de los apartados que
la componen y programar
un men de navegacin a
travs de botones.
En la ltima entrega del
curso te mostraremos c-
mo optimizarlo para pu-
blicarlo en Internet.
Ests preparado para disear una pgina web en Flash? Las

posibilidades que te ofrece este programa para aadir grficos
y animaciones son mucho mayores que las de una web en Html.
La programacin
necesaria es fcil
Mundo interactivo
Dentro de las bibliotecas comunes de Adobe Flash CS4 encon-
trars una amplia galera con botones y mens predefinidos.
Flash CS4 agiliza los
mens de navegacin
39
Software
N 288
En cualquier proyecto de Flash, la primera
tarea consiste en configurar el tamao de la
pelcula y disear el fondo sobre el que colo-
cars el resto de los elementos. Aunque ya te
hemos mostrado algunos ejemplos en anterio-
res entregas del curso, te ofrecemos algunos
consejos para el diseo de una pgina web.
1
Para crear el archivo dirgete al men
, pulsa en , selecciona la
entrada en la ventana
que aparece y pulsa . Se abrir el nue-
vo documento con una pestaa en la parte
superior de la escena que indica su nombre
. Es recomendable que le asignes
uno nuevo y lo guardes: pincha en ,
, indica el nombre que quieras
darle y pulsa en .
2
Tambin es muy importante el tamao
del archivo, tanto si vas a crear un sitio
web completo en Flash como si se trata de un
pequeo banner que aadirs en una pgina
de tu sitio. El tamao debe ser exacto, ya que
en caso contrario, los elementos aparecern
deformados. Pulsa en el men y en
. En la ventana que aparece des-
pus indica el ancho y alto que le vas a dar

y luego pincha en .
3
Despus dirgete a la escena principal
y haz doble click sobre la primera capa
para cambiarle el nombre, en este
caso, se llamar .
El fondo del proyec-
to lo puedes construir de muy diversas for-
mas, como un grfico, una foto o un fondo de
color. En este caso, vas a crear un fondo basa-
do en formas sencillas que ser la nica parte,
adems, que no estar animada en la pelcula.
Pulsa en y en el panel
suprime el trazo del rectngulo
seleccionando la opcin
y pulsa sobre la herramienta
y selecciona un color de relleno,
como para el fondo de tu sitio web.
4
Si quieres que los bordes de un rectngu-
lo sean redondeados dirgete al apartado
e indica
un valor, por ejemplo, de
para sealar el grado de curvatura. De forma
automtica, se aplicar al resto de vrtices de
la figura .
Luego comienza a
dibujar el rectn-
Preparacin y diseo del sitio
Define los elementos
principales
1
Antes de comenzar a disear tu sitio web, te recomendamos que pienses la estructura de navegacin que
tendr en funcin de los apartados que pretendes aadir. No est de ms que, incluso, pintes un pequeo
boceto que te pueda servir como gua. Cuando lo tengas claro ser el momento de ponerte manos a la obra.
gulo sobre el escenario con
ayuda del ratn .
Hazlo tan grande como con-
sideres necesario hasta que
abarque toda el rea de su
superficie al completo .
5
Para separar el encabeza-
do superior del rea donde
insertars los mens y los con-
tenidos de cada pgina, en este
ejemplo vas a utilizar una simple lnea.
Pincha en la herramienta
selecciona como color
despus aade un grosor de
trazo de
y, para asegu-
rarte de que los extremos sean rectos, dirge-
te al panel
y selecciona . Lue-
go dirgete a la escena
principal y comienza a tra-
zar una lnea recta .
Obtendrs un resultado pare-
cido a este .
Pulsa luego sobre
selecciona las dos reas
azules y la lnea y pulsa a la
vez las teclas y . De es-
te modo, agrupars estas tres
partes y podrs moverlas como si se tratara
de un nico bloque.
6
Tambin puedes aadir los distintos
elementos, como fotografas y grficos,
que vas a utilizar en tu proyecto, si bien
podrs hacerlo en
cualquier momen-
to ms tarde. Ve al
men , pin-
cha en y en
.
Despus te aparece-
r una ventana de
exploracin desde
donde debes selec-
cionar los diferentes
ficheros. Una vez
que termines, com-
probars cmo stos
se han aadido a la
biblioteca .
7
El diseo del encabezado puedes ha-
cerlo segn prefieras, en este caso,
un sencillo collage de fotos, con un ttulo
y un grfico decorativo. A cada foto le he-
mos aadido un marco de color blanco pa-
ra resaltarlas, por lo que las hemos con-
vertido primero en grficos. Para crear un
smbolo desde cero pulsa en el men ,
y, en l a
ventana que aparece,
asgnale un nombre
as como su comportamiento, en este caso
y pulsa . De forma
automtica, acceders a su lnea de tiempo
.
8
Arrastra la imagen que quieras utilizar
de la biblioteca al escenario. Pulsa en
para aadir una nueva capa, donde vas a in-
sertar el borde de color blanco. Una vez que
se cree selecciona el fotograma 1 de la
misma y pulsa en la herramienta .
Selecciona el color del trazo
y elimina el de relleno marcan-
do para ello la casilla
Luego traza un rectngulo sobre
el contorno
de la imagen
para enmar-
carla .
Cuando ter-
mines, vuelve
a la escena
principal con
un click en
,
sel ecci ona el s m-
bolo que acabas de
crear en la biblioteca
y arrs-
tralo al lugar donde
quieres que se muestre
sobre el escenario .
9
A continuacin, debes hacer lo mismo
con cada una de las fotos con las que
pretendas componer el collage. Puedes re-
petir este mismo proceso, o bien usar la va
rpida en Flash, que consiste simplemente en
duplicar los objetos. Para ello, haz click con
el botn derecho del ratn sobre el smbolo
situado en la biblioteca y se-
lecciona . En la ventana que aparece,
asgnale otro nombre
y se crear un
elemento idnti-
co al primero.
10
Despus haz doble click sobre l
de tiempo. Luego se-
lecciona con un click
la imagen situada so-
bre la escena
y dirgete al panel
s i t uado
en el margen izquier-
do. Pulsa en el botn
y aparecer
Curso: Crea animaciones con Flash, 4 parte
40 N 288
una ventana en la que debes seleccionar la
imagen que vas a utilizar en este caso .

Pincha en y
comprobars que la
imagen anterior ha
sido sustituida .
En est e caso, es
posi bl e que t en-
gas que rehacer el
marco de nuevo de
ocurrir que el tamao de las imgenes no co-
incida.
11
Repite esta operacin con el resto de fo-
tografas y arrstralas despus a la esce-
na principal. Puedes girarlas y colocarlas unas
sobre ot r as
como te he-
mos mostrado
en las entre-
gas anteriores
del curso has-
ta conseguir
el efecto que
deseas .
12
Para completar el encabezado en este
ejemplo hemos utilizado un elemento
grfico (encontrars muchos recursos gratui-
tos de este tipo en Internet). Simplemente,
arrstralo hasta la escena
colcalo bajo las fotografas del paso anterior
con un click sobre el botn derecho del ratn
y luego selecciona las opciones y
. Puedes hacerlo ms transparen-
te para que quede ms atenuado desde el panel
. Pulsa sobre el desplegable
, selecciona y reduce el
nivel de opa-
cidad
hasta que alcance el resultado que te guste .
Puedes aadir tantos elementos como consi-
deres necesarios, si bien, no debe faltar un
titular, como el nombre que quieres dar a la
pgina o, incluso, un logotipo. Para el
primer caso, utiliza la tecla
y escribe el texto en el lugar necesario para
obtener el resultado que esperas .
Antes de poder interactuar con los objetos
es necesario que aadas los contenidos que
ofrecers en tu sitio web. Ten presente que en
Flash no vas a utilizar pginas independientes
por cada seccin, como ocurre con el lenguaje
Html, sino que todos los apartados se encon-
trarn dentro de un mismo fichero, cada uno
en el interior de un clip de pelcula cuya apa-
ricin controlars por medio de botones.
1
Crea una capa independiente para aa-
dir en ella el cuerpo central de la pgina,
esto es, donde aparecern los distintos con-
tenidos y el men de navegacin. Pulsa en
e indica el nombre de la nueva capa, por
ejemplo .
Puedes diferenciar
esta rea con un co-
lor independiente,
en este ejemplo, se-
r un rectngulo en
color blanco
si bien esta parte de-
pende de tus gustos y
de las necesidades de
tu sitio web.
2
Luego puedes insertar un ttulo para dife-
renciar cada seccin. Pincha en
y escribe el texto sobre el rea donde
calcules que ir .
Si quieres darle un
toque de diseo, seleccio-
na un par de palabras que
quieras destacar como, por ejemplo
y en el panel asgnale un color
diferente al del resto del texto
desde el botn .
Conseguirs un resultado parecido a este:
. Luego muvelo a la ubi-
Crea la estructura
de las pginas
2
cacin exacta donde
quieres que aparez-
ca en la escena .
3
Bajo el ttulo
tambin pue-
des aadir imge-
nes y texto. En el
primer caso slo
debes arrast rar
las fotos de la bi-
blioteca al escena-
rio y, si prefieres,
aadir un marco o
contorno como te
hemos mostrado
en el apartado anterior .
4
Insertar el texto tampoco te resultar
complicado. Puedes escribirlo a mano o
bien copiarlo y pegarlo desde otro documento
previo. Selecciona la herramienta
pincha sobre el rea de la escena donde
quieras que comience el texto y, sin soltar
el ratn arrastra el puntero hacia la derecha
hasta que el campo de texto abarque el ancho
que quieres que tenga el prrafo .
Finalmente, copia o escribe el texto en el in-
terior del campo .
No te preocupes por definir la altura del mis-
mo, ya que sta se ajusta de forma automtica
en funcin de la extensin del texto que in-
troduzcas, como podrs comprobar .
5
Ahora vas a convertir el contenido de la
nueva seccin en un clip de pelcula, ya
que va a contar con distintos elementos ani-
mados y, adems, ser necesario para contro-
larlas desde el men de navegacin principal.
Para ello, selecciona el cuerpo central del sitio
donde has aadido el texto y las imgenes.
Comprobars la utilidad de haberlo hecho en
una nica capa, ya que ser suficiente con
que pulses sobre el primer fotograma de la
capa que nombraste
como .
Luego presiona con el botn derecho del ratn
sobre el escenario y pulsa en .
En la ventana que aparece indica un nom-
bre para este
nuevo smbolo

y seala tam-
bin el com-
por t ami ent o
.
Luego haz do-
ble click sobre
l para acce-
der a su lnea
de tiempo .
De este modo
podrs animar
cada uno de
sus elementos.
41
Software
N 288
Como el tamao de tu pelcula est definido
desde el comienzo, al aadir una extensin de
texto larga, ste se desbordar de la escena
sin darte la oportunidad de usar el scroll del
navegador como ocurre en una pgina en Ht-
ml. Por ello, es muy importante que aprendas
a controlarlo desde el principio mediante bo-
tones de avance y retroceso o con la creacin
de barras de scroll.
1
Como vas a animar cada uno de los ele-
mentos de forma independiente, te reco-
mendamos que los sites en capas diferentes.
Pulsa en el botn las veces necesarias has-
ta obtener la cantidad que necesitas .
Ta mbi n e s
muy importan-
te que asignes
un nombre a
cada una, para
distinguir con
claridad ms tarde dnde se encuentra cada
objeto. Luego, corta y pega cada uno de los
elementos exis-
tentes en la ca-
pa inicial en la
que les corres-
ponda .
2
Ahora queda la parte ms importante, con
la que conseguirs mostrar slo una par-
te del texto en la pgina y desplazarte hacia
arriba o hacia abajo con la ayuda de botones.
Ya sabes que, cada vez que quieras animar un
elemento debes convertirlo antes en un clip
de pelcula. Lo mismo debes hacer con el tex-
to. Seleccinalo con un click en el fotograma
1 de la capa correspondiente .
Luego pincha con
el botn derecho
sobre la pantalla, pulsa en
e indica un nom-
bre y el comporta-
miento que tendr
en la ventana .
3
Recuerdas las mscaras que te enseamos
a usar en la entrega anterior del curso?
Ahora debes rescatar aquellos conocimientos,
ya que as podrs
controlar la apari-
cin del texto pro-
gresivamente. Como
la longitud de texto
es muy grande, se
desborda incluso del
propio proyecto .
Interactividad y navegacin web
Control de texto
con botones
1
An te queda la parte ms importante de tu web: dotarla de interactividad. Para controlar la accin de cada
uno de los elementos es necesario crear botones en los que definirs cmo debe comportarse cada objeto. As
podrs desplazarte en la lnea de tiempo o navegar entre cada una de las secciones, entre otras posibilidades.
Para evitarlo, debes crear una mscara para
que se muestre slo una pequea parte visible
en la escena principal.
4
Pincha en para aadir una nueva capa,
luego seleccinala con el botn derecho
del ratn y pulsa selecciona la en-
trada para asignarle esta propiedad.
Asegrate de que la nueva capa no se
encuentre bloqueada
y luego selecciona la herramienta de
dibujo para es-
pecificar despus
el rea donde quie-
res que el texto se
muestre visible .
5
Ya has definido
el primer punto
en el que aparece-
r el comienzo del
texto. Te quedan
por definir dos ms,
uno intermedio y
otro que muestre la
ltima parte. Para ello, basta con que crees
dos fotogramas clave en los que coloques el
texto en lugares diferentes bajo la ms-
cara. Sitate sobre el frame 20 dentro de
la capa que contiene el texto
y pulsa la tecla para crear un foto-
grama clave.

6
Ahora, selecciona el texto con un click de
ratn y, sin soltarlo, muvelo hasta una
posicin ms o menos intermedia .
Luego sitate en el ltimo fotograma de esta
misma capa y vuelve a pulsar . Del
mismo modo que antes, arrastra el tex-
to hasta que el final del mismo quede
cubierto bajo la mscara. Dirgete al
ltimo fotograma
y pulsa para crear otro fotograma clave.
Luego sitate sobre l y desliza el texto hacia
arriba hasta que la ltima frase quede comple-
tamente cubierta por la mscara .
7
Por ltimo debes crear las interpolaciones
de forma en el texto, de modo que se
desplace hacia abajo cuando pulses
sobre el botn de avanzar, que crears
despus. De momento, sitate en la
posicin anterior a cada uno de los
fotogramas clave
selecciona . Aparecer re-
presentado as en la lnea de tiempo .
8
Existe un pe-
queo pr o-
blema que tienes
que sal var an.
Tal y como est
ahora indicado, la
animacin comen-
zara en el punto
1 y continuara sin
detenerse hasta el
fotograma 40, des-
de donde volvera
de nuevo al prime-
ro para repetir el
proceso indefini-
damente. Pero no
Transiciones de imgenes
Es muy posible que tengas que animar imgenes. En este
caso, puedes hacer transiciones entre unas y otras jugan-
do con el canal Alpha, que hace la imagen ms o menos
transparente, y la lnea de tiempo, donde definirs el mo-
mento en el que aparer y se desvanecer cada una.
1
Sitate en el clip de pelcula donde vas a crear la tran-
sicin y se encuentra la imagen. Segn sea la duracin
que quieras darle, sitate sobre el fotograma correspon-
diente y pulsa para crear
Luego haz click sobre el fotograma
y en el panel pincha sobre
y selecciona la entrada .
Asgnale un valor como , de
modo que la imagen quede ms transparente.
Luego colcate sobre el fotograma:
haz click con el botn derecho del ratn y selec-
ciona despus la opcin .
2
A continuacin, aade nuevas capas donde colo-
cars el resto de las imgenes y crears el mismo
efecto. Para que funcione la transicin debes situar el
comienzo de cada una un poquito antes de que termine
de mostrarse la anterior .
42 N 288
es esto lo que quieres ya que en este
caso vas a controlar la animacin por
medio de botones, para lo que ser
necesario que la pelcula se encuen-
tre detenida en un primer momento.
Por tanto, sitate ahora con un click
en el primer fotograma ,
selecciona la entrada . En la venta-
na que se abre, indica la
versin del cdigo y haz
doble click en la funcin
hasta que lo veas
indicado en el campo de
la derecha .
Repite este mismo paso
en los otros dos fotogramas clave y lo vers
as indicado en la lnea de tiempo .
9
Es el momento de crear los botones de
navegacin. Te recomendamos que lo ha-
gas en una capa independiente fuera de la
mscara. Sitate
sobre sta
y pulsa sobre
de modo que
se aadir una
nueva sobre ella .
A continuacin, selecciona el fotogra-
ma donde terminan las otras dos capas
de la animacin
y pulsa la tecla para que su duracin sea
exactamente igual.
10
Para el diseo de los botones puedes
utilizar iconos que hayas creado a ma-
no alzada, descargado de Internet, etc. En este
ejemplo, te enseamos a crear uno de avance
y otro de retroceso de forma muy simple, con
una tipografa especial basada en smbo-
los. Selecciona la herramienta
y teclea el nmero
en una parte de la escena, ms o me-
nos donde quieras situar el botn.
11
A continuacin, debes seleccio-
narlo con el ratn
pulsar sobre el panel desplegable
situado en la
barra de herramientas de propiedades y ses-
coger la fuente denominada . De
este modo obtendrs una forma que te puede
servir para representar el botn de des-
plazamiento hacia abajo .
12
Para crear el de desplazamiento hacia
arriba, simplemente puedes duplicarlo
y girarlo 180. Selecciona el botn que acabas
de crear, pulsa a la vez las teclas y se aadir
otro smbolo idntico al que has
creado en la escena .
Luego haz click sobre l con el
botn derecho del ratn y elige la
entrada . Sita el
cursor en uno de los vrtices de la
figura que se habr formado hasta
que cambie por la forma
haz click y gralo hasta que alcan-
ce la posicin que deseas .
Por ltimo, selecciona los dos smbolos y
pulsa las teclas y a la vez dos veces
consecutivas para transformarlos en grficos
vectoriales en lugar de texto. Esta accin es
muy importante para reducir el tamao.
13
El siguiente paso consiste en convertir
cada smbolo en un botn. Haz click
con el botn derecho del ratn en el
primero de ellos
y selecciona la opcin . Lue-
go asgnale un nombre en la ventana que apa-
rece , pulsa en
y marca
la opcin denominada .
14
Comprobars que se ha aadido a la
biblioteca de archivos con un nuevo
icono . Haz doble click sobre l para
acceder a su lnea de tiempo, que vers que es
diferente cuando se trata de un botn .
Sol ament e
tiene cuatro
fotogramas
que se corresponden a los estados del botn:
cuando est inactivo, cuando sitas el cursor
sobre l, cuando lo presionas y, por ltimo, el
rea sensible, es decir un rea que sealars
para que al desplazar el cursor sobre ella se
active el botn.
15
Ahora se trata de cambiar el diseo
del botn en cada uno de estos esta-
dos. Sitate sobre el primero de ellos y pulsa
la tecla para crear un fotograma clave.
Aqu no debes cambiarlo, ya que es el modo
en el que deseas que se muestre cuando es-
t parado. Haz lo mismo con
el segundo estado .
Sitate sobre el tercero y pul-
sa si quieres que el botn se muestre del
mismo modo cuando coloques el cur-
sor encima o hagas click sobre l. Por
ltimo, pincha en
y aade otro fotograma
clave. El resultado que ob-
tendrs ser este: .
16
Ya slo te queda definir los es-
tados del botn. Pulsa en
y marca sobre el escenario el smbolo
que lo representa .
Luego selecciona la herramienta
y elige un color diferente que des-
taque sobre el anterior .
A continuacin dirgete al ltimo de los
fotogramas de esta linea de tiempo
y selecciona de nuevo el botn en la
escena correspondiente .
Si dejases esta rea como zona sen-
sible, al tratarse de un botn bastan-
te pequeo, tendras que tener una mayor
precisin al deslizar el ratn sobre l para
activarlo. Por ello es mejor que dibujes un
rea sensible mayor. Hazlo fcilmente con la
herramienta y dibujando un
rectngulo que cubra completa-
mente su superficie .
17
Repite el mismo proceso con el otro
botn situado en el escenario. Luego,
aade una nueva capa a la que pue-
des llamar y donde debes colocar
ambos (simplemente, copia y pgalos). Aade
despus el mismo nmero de fotogramas clave
en la misma posicin que has creado en la
capa que contiene el texto .
18
El ltimo paso que debes dar consiste
en asignar un comportamiento a
cada botn que, en este caso, consiste
en indicar el punto donde debe dirigirse.
Sitate sobre el fotograma .
En esta ubicacin slo debe aparecer
el botn de avance
ya que el texto se encuentra en su posicin ini-
cial y nicamente puedes deslizarlo hacia abajo.
Haz click sobre l para seleccionarlo y luego ve
al men y pulsa sobre .
19
Es posible que aparezca entonces un
mensaje como este
que te indique que debes cambiar de versin
de cdigo ActionScript. Acepta y, en la venta-
na que aparece, pulsa en la pestaa , se-
lecciona en el cuadro desplegable la versin
y pulsa en .
20
Ya luego en
la ventana
presiona sobre el
icono , luego en
y des-
pus en para
reproducir la pelcula a partir de un punto.
Te gustara que el texto se desplazara a lo largo de una
barra de scroll en lugar de con estos botones? El modo
de programarlo es el mismo que te hemos mostrado en
el ejemplo, pero debes crear una nueva capa que con-
tenga la barra de scroll .
Para su diseo
es suficiente con
dibujar un rea
rectangular y co-
locar los botones
de avance y re-
troceso, respec-
tivamente, abajo
y arriba .
Consejo
por lo que debes repetir el proceso e indicar en
ste que la pelcula vaya al fotograma
de modo que vuelva al comienzo del tex-
to y se detenga en ese punto.
22
Para finalizar, dirgete al ltimo de
los fotogramas clave con
un click sobre l .
Aqu slo tendrs que activar el bo-
tn de volver hacia atrs
por lo que selecciona y eli-
mina el de avance del texto. Repite aqu tam-
bin el paso 21, pero indica que se
dirija al fotograma .
43
Software
N 288
En el cuadro de dilogo que aparece seala
dicho fotograma, en este caso
para iniciar desde aqu la reproduccin que
se detendr cuando llegue al fotograma clave
20, que tiene una accin de stop.
21
A continuacin sitate con
un click en el fotograma
y repite el mismo proceso que en el
paso anterior, pero indicando aqu
que la pelcula se debe reproducir a
partir del fotograma .
En este punto s que tiene que apare-
cer el botn de retroceso
En el ejemplo anterior te hemos mostrado
cmo crear un botn y asignarle un comporta-
miento. Del mismo modo te explicamos ahora
el mtodo para aadir el men de navegacin
de tu pelcula. La diferencia radica aqu en la
accin que se llevar a cabo cuando presiones
sobre cada botn, ya que mostrarn un con-
tenido u otro. Los comportamientos de botn
no acaban aqu. Entre otros, puedes aadir un
enlace o descarga de un archivo.
1
En primer lugar debes situarte sobre el es-
cenario principal, ya que es aqu donde vas
a crear el men de navegacin principal de tu
sitio web. Crea una nueva capa con ayuda del
botn y llmala, por ejemplo .
Despus utiliza la herramienta de dibujo de
formas y traza un rea
redondeada de color
blanco .
Asgnale el tamao que creas conveniente,
pero no te olvides de que ser uno de los
botones. Luego escribe
el enunciado del men
con ayuda de la herra-
mienta de texto .
2
A continuacin, debes convertir este ob-
jeto que acabas de crear en botn. Para
ello selecciona a la vez
el rea blanca junto con
el texto
haz click con el botn derecho del ratn y elige
. En la ventana que se mues-
tra despus, asg-
nale un nombre y
el comportamiento
de botn .
Pulsa en .
3
Despus de hacerlo comprobars que es-
tos dos elementos
se encuentran agrupa-
dos en el escenario .
Haz doble click sobre l para acceder a su
lnea de tiempo, ya que tienes que configurar
los diferentes estados .
Crea los botones del
men de navegacin
2
Sitate en el segundo frame y pulsa la tecla
para aadir aqu un fotograma clave, ya
quieres que el aspecto del botn cambie
cuando el ratn se site sobre l .
Luego colcate sobre
y pulsa la tecla , puesto que cuando
presiones el botn, el estado ser el
mismo que cuando te sitas sobre l.
Por ltimo, crea otro fotograma en
ya que aqu indicars el rea que ac-
tivar el botn cuando deslices el cursor del
ratn sobre ella.
4
A continuacin debes disear
los estados del botn. En pri-
mer lugar pincha en
para definirlo cuando sites el cursor encima o
hagas click en l. Escoge primero el rectngulo
de color blanco, luego pincha en la
herramienta de relleno
y elige un color que le
haga destacar sobre el
fondo, por ejemplo .
Luego, selecciona el fotograma
y traza un rea rectangular sobre la
superficie del botn para que ste se
active cuando deslices el
cursor por ella .
5
La mejor manera de conseguir que todos
los elementos del men sean iguales, y
que el texto se encuentre alineado en la mis-
ma posicin, consiste en duplicarlos. Para ello
vuelve a la escena principal con un click so-
bre . Despus
selecciona el botn que
acabas de crear
y pulsa a la vez las teclas y , de modo
que se duplicar al instante .
Seleccinalo y arrstralo
hacia la posicin que de-
seas. En este caso, para
crear un men horizontal, hacia la derecha.
Comprobars que aparecen unas guas vertica-
les y horizontales que te servirn de referen-
cia para mantenerlo
alineado respecto al
primero .
Repite esta misma operacin
tantas veces como elementos
de men sean necesarios en tu proyecto y
obtendrs el siguiente resultado: .
6
Selecciona el botn en la biblioteca de
archivos , haz click con el bo-
tn derecho del ratn y
pulsa en . Asig-
na al nuevo botn, co-
mo por ejemplo
y pulsa en . Repite esta
misma operacin por cada uno
de los botones de los que se
componga el men de navega-
cin que vayas a crear .
7
Vuelve a la escena principal donde tienes
duplicado el mismo smbolo cinco veces.
Ahora se trata de sustituir cada uno de estos
botones por los nuevos que has creado des-
de la biblioteca de
archivos. Selecciona
con un click el segundo de ellos
dirgete luego al panel situado
en el men izquierdo y pulsa en el botn
.
8
Justo despus, ve-
rs una ventana
desde donde puedes
seleccionar el smbolo
por el que quieres sus-
tituir al botn. Seleccio-
na el que has llamado
y pulsa . Aunque de momento el texto
del men es igual, ya no se trata del mismo
smbolo, por lo que puedes modificarlo sin al-
terar el resto. Haz doble
click sobre l
de tiempo y modifica el ttulo en el primer
fotograma, cuando el bo-
tn se encuentra en esta-
do de reposo .
Luego haz click en el fotograma
y cambia aqu tambin el ttulo .
9
Repite este mismo
proceso en los tres
botones restantes hasta
que obtengas un men con todos los aparta-
dos que necesitas para tu web .
Pulsa la tecla para comprobar el resultado, y
cuando deslices el ratn
sobre cada uno de ellos
cambiar su aspecto .
44 N 288
Ya has llegado a la ltima parte del proyec-
to. En ella tienes que conseguir que cada vez
que pulses sobre uno de los botones del men
de navegacin, aparezca en la pantalla un con-
tenido diferente. Para ello tendrs que definir
distintos clips de pelcula y programarlos de
modo que se muestren u oculten cuando pre-
siones uno u otro botn del men.
1
En este proceso el primer paso que debes
dar consiste en crear una pelcula con los
elementos que necesites por cada uno de los
botones del men. Si quieres que se man-
tenga la misma estructura en todas ellas lo
tendrs muy fcil, ya que slo tendrs que
duplicar la pelcula que creaste al comienzo
de este art-
culo y sus-
tituir unos
el ement os
por ot ros.
Sel ecci ona
con el bo-
t n der e-
cho el clip
de pelcula
que incluye
e l c ont e -
nido de la
primera de
las catego-
ras en la biblioteca de archivos
y pulsa en la entrada .
2
A continua-
cin asgnale
un nombre .
Recuerda que si
tienen una nu-
meracin correlativa te ser
ms fcil localizarlos y tra-
bajar con ellos ms tarde.
Pulsa en y repite
este mismo proceso tantas
veces como categoras hayas
definido en el men de na-
vegacin principal .
3
Tras hacerlo, debes editarlos uno a uno y
aadir los nuevos elementos que quieres
que aparezcan en ellos. Haz doble click sobre
el smbolo situado en la biblioteca
para acceder a su lnea de tiempo. Para perso-
nalizar cada una de estas pelculas tienes que
cambiar tres elementos: el ttulo, la fotografa
y el texto. En el primer caso, selecciona el
primer foto-
grama de la
capa deno-
minada .
Selecciona el
ttulo ante-
rior y escri-
be el texto,
par a es t e
caso .
Programacin del
men de navegacin
3
4
En el caso de la fotografa, pulsa en el
primer fotograma de la capa denomina-
da donde se encuentra.
Luego dirgete al panel y presio-
na el botn .
En la ventana que aparece justo a continua-
cin, elige el grfico que contiene la nueva
imagen .
Recuerda que
para que esto
sea posible has
tenido que im-
portar antes la
fotografa a la
biblioteca y convertirla en un grfico. Obten-
drs un resultado con la misma estructura que
el anterior pero distinto contenido .
5
Por ltimo, sitate en la capa
para cam-
biar el texto.
Aqu el proceso ser algo distinto, porque el
texto que quieres cambiar se encuentra dentro
de un clip de pelcula. Cuando esto ocurre
tienes que duplicar en la biblioteca este ele-
mento las veces que sean necesarias, editar el
texto en cada uno de ellos y luego sustituirlo
en la pelcula principal.
6
Haz click sobre el nombre del clip de la
pelcula con el botn derecho del ratn el
la biblioteca de archivos y pulsa en
. Despus
asgnale un nom-
bre, como
y pulsa en .
Repite esta opera-
cin todas las veces que sean
necesarias para modificar cada
uno de los clips de pelcula.
Obtendrs un resultado como
este en la biblioteca: .
7
A continuacin, posicina-
te otra vez
sobre la capa
y, en el panel de propiedades, pulsa sobre
para acceder
de este modo a la ventana .
Como has hecho ya en ejem-
plos anteriores, selecciona el
clip de pelcula que vas a uti-
lizar, en este caso
y pincha en . Como
recordars, este elemento estaba formado por
un texto con una mscara que controlabas por
medio de unos botones para avanzar o retro-
ceder sobre el texto .

Solamente tendrs que reemplazar el texto
antiguo por el nuevo.
8
Es importante que las barras de regla ho-
rizontal y vertical se muestren visibles pa-
ra alinear los elementos con mayor precisin.
Pulsa para ello en el men y luego en
, para de es-
te modo mostrarlas en
la ventana de Flash.
Sita el cursor sobre
la regla vertical hasta
que el puntero cambie
por la forma .
Haz click entonces y sita la
gua de color verde que apa-
rece sobre el marco izquierdo
del texto .
Tambin crea otra y llvala al
extremo derecho para delimi-
tar el ancho de la caja.
Haz lo mismo con la
regla horizontal
y sitala sobre el mar-
co superior .
Con estas dos guas ya
puedes borrar el texto
antiguo.
9
A continuacin, pincha sobre el primer
fotograma de esta capa y arrastra la se-
leccin hasta el ltimo de ellos .
Luego haz click con el botn derecho del ra-
tn y selecciona y los fotogra-
mas quedarn vacos en la lnea de tiempo .
Ahora, simplemente, crea un fotograma clave
en la primera po-
sicin
y con ayuda de la
tecla escribe o copia el nuevo texto. Luego,
seleccinalo y colcalo en la posicin exacta
de l a escena
con ayuda de
las guas que
has aadi do
en l os pasos
anteriores .
Esta tarea te
resultar ms
fcil si ocultas la capa
que contiene la msca-
ra con un click en .
10
Sitate en el fotograma
y pulsa la tecla para crear
un fotograma clave
y desliza el texto hacia arriba
hasta que alcance una posicin
intermedia. Luego haz otro fo-
Cuando termines de indicar el fotograma de
cada clip de pelcula que debe aparecer en la
escena principal obtendrs el resultado .
18
Despus repite este mismo proceso
con el resto de los botones, pero mo-
dificando la seleccin del fotograma segn
la instancia cuyo contenido quieres que se
muestre visible al presionar cada botn. Por
ejemplo, en el segundo de ellos tendrs que
indicar que en
se muestre el foto-
grama y el resto se oculte.
19
Por ltimo, es posible que necesites
aadir un enlace para acceder a un si-
tio de Internet o para descargar un archivo.
Para el primer caso, debes seleccionar primero
el botn y desde la ventana
pulsar en y escoger las entradas y
. A continuacin aade la direc-
cin web completa .
Tambin puedes indicar si quieres que se
abra en esa misma pgina del navegador se-
leccionando la entrada ,
o bien que lo haga en otra diferente si eliges
.
20
Para aadir un enlace de descarga de-
bes subir primero el fichero al servi-
dor donde vayas a alojar el archivo, o incluirlo
dentro de un directorio si el proyecto lo vas
a guardar dentro de un CD o DVD. Debes
seguir el mismo proceso que en el paso 19
pero indicando ahora la ruta exacta donde
se encuentra ubicado junto con el nombre
.
como, por ejemplo . Es muy importan-
te que lo hagas, ya que de otro modo no con-
seguirs este resultado.
14
Luego selecciona el clip de pelcula
en la biblioteca y
arrstralo al escenario hasta que quede
situado justo encima del anterior
Puedes utilizar las flechas de direccin , ,
y hasta ubicarlo en la posi-
cin exacta. Asgnale tambin
un nombre de instancia .
Repite este proceso con cada
una de las pelculas principales.
15
Dirgete finalmente a la capa donde se
encuentran los botones del men de
navegacin, sobre la escena principal .

Selecciona el primero de
los botones
dirgete al men
y pulsa en para abrir la venta-
na de comportamientos .
16
Aqu es donde vas a indicar qu fo-
tograma de cada una de las pelculas
sobre el escenario se mostrar cuando pul-
ses el botn y cules se ocultarn. Pincha en
el botn , selecciona y luego
. En la ventana que
aparece, selecciona el nombre de instancia de
la primera pelcula cuyo
contenido se correspon-
de con la categora del
primer botn
e indica que quieres que se muestre de esta
pelcula el segundo fotograma .
Pulsa en y, a conti-
nuacin, pincha sobre el me-
n y selecciona la
entrada
para definir el comporta-
miento del ratn.
17
Pincha de nuevo so-
bre , ya que aho-
ra tienes que indicar que se
muestre el fotograma 1 (vaco) del resto de las
instancias. Seleccinalas en la ventana
que aparece, e indica el valor .
Modifica el comportamiento del ratn
como en el paso 16 y obtendrs un resultado
como este:
45
Software
N 288
tograma clave al final, pero deslizando el texto
completamente arriba. Repite este proceso por
cada una de las pelculas de texto que existen
en tu proyecto.
11
Vuelve a la pelcula principal
con un click sobre .
Despus selecciona el segundo foto-
grama de cada una de las capas que la
componen y pulsa para crear aqu
A continuacin, se-
lecciona el fotogra-
ma 1 de cada una
de las capas
y pul sa para
eliminar el contenido. De este mo-
do, el primer fotograma estar va-
co, mientras que la informacin se
mostrar ahora en el segundo .
12
A continuacin, sitate sobre
el primer fotograma de una de
las capas, haz click con el botn dere-
cho del ratn y selecciona pa-
ra abrir esta ventana. Luego haz doble
click sobre y repite esta misma
operacin en el fotograma 2 .
Al hacerlo, la pelcula estar detenida
en la primera posicin sin ningn tipo de ele-
mentos, y en la segunda donde se encuentra
el contenido. Enseguida descubrirs por qu
es necesario este requisito.
13
Vuelve a la escena principal con un
click sobre . Comprobars
que ya no se encuentra el texto con la imagen,
sino que el contenido ha sido sustituido por
un crculo vaco en color blanco .
Seleccinalo con un click
y asgnale un nombre a la instan-
cia en el panel ...y en el prximo nmero
Ya te acercas al final del curso de Flash. La ltima entrega
est centrada en la publicacin del proyecto, una parte
esencial para optimizar el tamao de tu sitio web. Ade-
ms, te explicamos cmo aadir y controlar la reproduc-
cin de archivos de vdeo y audio. No te lo pierdas!
Si has seguido todos estos pasos encontrars ahora que
la pgina principal se encuentra vaca. Cmo solucio-
narlo? Si has comprendido bien los comportamientos
que te hemos mostrado, vers que es muy simple. Crea
un clip de pelcula diferente en el que muestres la pgi-
na principal, si bien ahora los elementos se encontrarn
dentro del fotograma 1 (para estar visibles por defecto)
y el segundo estar vaco. Del mismo modo, en cada
uno de los botones del men de navegacin tienes que
indicar que se oculte, esto es, se posicione en el foto-
grama nmero 2 cada vez que presiones sobre ellos.
Consejo
ms fcil de lo que ima-
ginabas. Adems, desde la
versin anterior de Ado-
be Flash puedes incrus-
tar, junto a la pelcula, un
control de reproduccin
con las opciones que de-
sees de un modo ms que
fcil, ya que nicamente
debes seleccionarlo de
una lista. El nico requi-
sito que debes tener en
cuenta es el formato de
los vdeos, que debe ser
compatible con Flash, es-
to es, Flv o F4v, si bien,
no tienes que preocupar-
te porque el programa in-
cluye una aplicacin para
convertirlos.
Preparado
para publicar?
La configuracin de la
publicacin es la ltima
parte del proyecto, si bien,
no por ello es imprescin-
dible. Todo lo contrario,
es muy importante que
selecciones el formato en
el que se va a exportar
(generalmente Swf ), as
como que ajustes el grado
de compresin de las im-
genes, el vdeo o el archi-
vo de sonido.
Si en tu proyecto es de-
cisivo el tamao final del
mismo, dispones de una
funcin que genera un in-
forme donde te muestra el
peso de cada uno de los
elementos incluidos, para
que valores y reajustes el
tamao en aquellos que
consideres necesario.
L
as posibilidades mul-
t i medi a hacen que
aadir un archivo de
vdeo o de msica se con-
viertan en una necesidad
casi imperiosa en tu pro-
yecto. Si sigues los pasos
que te proponemos en
este artculo comprobars
que aadirlos es mucho
54 N 289
Gua del curso
Sumario
Uso del vdeo en Adobe CS4 55
Gestin y control del sonido 57
Optimizacin del proyecto 60
Cunto ocupa cada

elemento? 61
Si has llegado a esta ltima parte del curso, enhorabuena! Seguro que ya eres casi un
experto en Flash. Sin embargo, an puedes mejorar tus presentaciones si incluyes un
archivo de vdeo o una pieza musical. Aqu tienes las claves para concluir tu proyecto.
La ltima pieza
Incluido en el programa, Adobe Media Encoder permite conver-
tir los ficheros de vdeo en formatos compatibles con Flash.
Para poder trabajar con vdeo en Flash
necesitars antes convertir el archivo en un
formato compatible con el programa, esto es
en Flv o en F4v. Esto no representar ningn
problema, ya que puedes hacerlo desde una
aplicacin denominada Adobe Media Encoder
que se encuentra instalada junto con el pro-
grama y cuyo manejo es muy sencillo, tal y
como puedes comprobar a continuacin.
1
Como cualquier otro elemento en Flash,
tendrs que importarlo a la biblioteca de
archivos antes de poder comenzar a trabajar
con el fragmento de vdeo. Para ello, dirgete
al men , luego pulsa en
y despus selecciona . De este
modo te aparecer un asistente desde donde
debes seleccionar el origen del mismo .
2
Como lo ms habitual ser que guardes
ese fichero en algn directorio dentro de
tu equipo, pulsa sobre , y en la
ventana de exploracin que aparece localiza
y seleccinalo con un click .
Luego presiona sobre .
3
A no ser que el formato de dicho archi-
vo sea uno de los dos especficos del
programa: Flv o F4v, aparecer una ventana
de aviso en la pantalla que te indicar que
debes cambiarlo de modo que sea compati-
ble con Flash .
Acepta el mensaje y, en la ventana de antes,
pincha en el botn pa-
ra acceder a la aplicacin incluida en Flash
Adobe Media Encoder que te permitir codifi-
car el vdeo en el formato que necesitas.
4
Aparecer entonces la ventana principal
de esta aplicacin .
Si pinchas sobre el icono
aparecer un men des-
plegable con
las distintas
configuracio-
nes de codi-
ficacin del
vdeo .
En este caso,
debes selec-
cionar . A pesar
de los ajustes predefinidos que incluye el
programa, si quisieras hacer un ajuste perso-
nalizado puedes hacerlo marcando la opcin
que encontrars al fi-
nal de dicho men desplegable. En este caso
aparecera la ventana
desde donde podras indicar los nuevos va-
lores. No obstante, a no ser que tengas un
dominio bastante alto en este campo, es pre-
ferible que optes por una de las configura-
ciones predeterminadas.
5
Una vez que has decidido el formato de
salida del vdeo, pulsa sobre el botn
para comenzar de este modo el
proceso de conversin. Podrs seguirlo desde
esta misma ventana .
Durar ms o menos tiempo segn el tamao
del vdeo y la configuracin de salida que
hayas escogido. Cuando termine,
vers un indicador en la parte su-
perior de la pantalla .
Pulsa en cuando termines este proceso
para volver de nuevo al proyecto de Flash.
6
Ahora s, vuelve a pulsar de nuevo en
, selecciona el vdeo que acabas
de convertir en la ventana de exploracin, en
este caso , y pulsa en . Tie-
nes diferentes opciones para incluir el vdeo
en el proyecto. En esta ocasin, selecciona
pulsa en el botn .
7
Es el momento de escoger los botones de
control de la reproduccin en la ventana
que aparece a continuacin .
Si habas pensado que tenas que programar
estas instrucciones de forma manual, puedes
respirar con alivio, ya que la nica compli-
cacin aqu consiste en elegir, con ayuda del
panel desplegable
el formato que
qui eres para
este men. Por
ejemplo, si se-
leccionas
obt endrs el
siguiente:
8
Por ltimo, tambin puedes elegir el co-
lor de la barra del control de reproduc-
cin. Para ello,
pulsa sobre
y haz click so-
bre el color que
prefieras .
En este ejemplo
obtendrs un resultado como este:
Pulsa una vez
ms sobre el
botn y luego en para com-
pletar la importacin del vdeo.
9
Por defecto, el vdeo se aadir al fo-
tograma 1 de la escena principal, pero
Inserta un vdeo
en tu proyecto
1
Uso del vdeo en Adobe CS4
Una de las ventajas a la hora de aadir un archivo de vdeo en Flash es la posibilidad de controlarlo a travs
de un men de reproduccin, cuyas opciones puedes seleccionar fcilmente con la ayuda de un listado. Esto
te permite reproducir cualquier pelcula sin tener que programarlo de forma manual en ActionScript.
55 N 289
seguramente no sea esta la ubicacin donde
lo quieras colocar y, adems, debes convertir-
lo primero en un clip de pelcula. Por tanto,
seleccinalo con un click
y pulsa la tecla para borrarlo de aqu.
10
Luego, dirgete al men y se-
lecciona la entrada . En
la ventana que aparece justo despus, asigna
un nombre al nuevo smbolo y elige como
comportamiento .
Pulsa en y acceders de forma auto-
mtica a la lnea de
tiempo de ste .
11
Localiza en la biblioteca de archivos
el vdeo recin
importado
y arrstralo luego al
escenario .
Despus, sitate en la escena principal con
un click sobre y sitalo sobre el fo-
tograma que deseas que aparezca en la lnea
de tiempo escogiendo el clip de pelcula en
la biblioteca de archi-
vos y arras-
trndolo al escenario.
Por ltimo, haz click
sobre el vdeo y, en el panel situado a la
izquierda de
l a pantal l a
principal del
programa
asigna un nombre a la instancia, por ejemplo
. Para comprobar el resultado pulsa la
tecla y se abrir una ventana del navega-
dor desde donde podrs visualizar y controlar
la reproduccin del vdeo, tal y como puedes
ver en la siguiente imagen:
En entregas anteriores has comprobado la
utilidad de las mscaras. En esta ocasin te
enseamos a aplicarlas al vdeo para conse-
guir resultados y formas muy originales.
1
El ejemplo que hemos utilizado contie-
ne simplemente texto y un marco, que
hemos obtenido gratuitamente de http://
vector4free.com/vectors/id/165, en el que vas a
insertar el vdeo con ayuda de la mscara .
En primer lugar, debes importar el vdeo
tal y como has hecho en el apartado ante-
rior, si bien ahora vas a utilizar un mtodo
compatible para la versin ActionScript 2.0.
Dirgete al men , y selec-
ciona . En la ventana que
aparece a continuacin elige ahora la opcin
y
pulsa en para seleccionar el ar-
chivo de vdeo previamente convertido en
uno de los formatos compatibles .
2
Haz click en ,
en la nueva ventana marca la opcin del
desplegable
y despus desacti-
va la casilla
ya que ahor a
vas a agregar de
forma manual el
vdeo desde la biblioteca. Pulsa en
y en y de este mo-
do vers en la biblioteca el
archivo que acabas de im-
portar .
3
Antes de poder aadir el vdeo a la es-
cena principal es preferible que lo con-
viertas en un clip de pelcula. Para ello pulsa
en el men y selecciona la entrada
. En la ventana que aparece lue-
go asgnale un nombre
y el tipo de comporta-
miento, como .
Presiona en y
arrastra el vdeo de la biblioteca
a la lnea de tiempo del nuevo smbolo.
4
Acepta el
mens aj e
que te apare-
ce luego en la
pantalla
de modo que la l-
nea de tiempo se
extienda en fun-
cin de la duracin
del vdeo .
Por ltimo, para
evitar que se repita
en un bucle indefi-
nido debes insertar
un fotograma clave
al final e indicar
que se detenga en
este punto. Sitate entonces en la
ltima posicin de la lnea de tiem-
po con un click sobre el fotograma
correspondiente
y pulsa la tecla . Volver a aparecer la mis-
ma ventana que antes, pero ahora tienes que
seleccionar
ya que t u
intencin es
que se de-
tenga, y del
otro modo
vol ver a a
repetirse desde el principio.
5
Haz click con el botn derecho
del ratn sobre el fotograma clave
que acabas de crear
y selecciona . En la ventana que apa-
rece elige la versin de ActionScript
y l uego haz
doble click so-
bre la funcin para
aadirla a este fotograma .
Cierra por ltimo la ventana
de acciones con un click so-
bre el botn .
6
Vuelve de nuevo a la escena principal
con un click sobre y aade
una nueva capa a la que debes asignar un
nombre. Luego sitate sobre el primer foto-
grama
y arrastra el
clip de pelcula que contiene el vdeo a la es-
cena principal. Es posible que sus dimensio-
nes sean demasiado grandes y se salgan del
marco en el que quie-
res ajustarlo. En este
caso puedes
seleccionarlo
con ayuda de
la herramienta
ajustando el tamao
del vdeo todo lo que
sea posible al marco
de la ventana .
Aade una mscara
al fichero de vdeo
2
56 N 289
En Flash puedes aadir el sonido a la esce-
na principal y, con ello, a todo el documento,
o bien hacerlo nicamente en clips de pelcu-
la o botones, de modo que ste se active ni-
camente junto con el smbolo determinado.
En este ejemplo, te mostramos cmo hacerlo
en un botn, de modo que slo se reproduzca
cuando pulses sobre l.
1
Lo primero que vas a hacer en este pro-
ceso es crear los botones desde donde
podrs activar y desactivar el sonido gene-
ral de la pelcula. Para ello, dirgete al me-
n y pulsa en . En la
ventana que aparece indica un nombre para
el botn y asgnale el
comportamiento co-
rrespondiente .
Pulsa en .
2
De forma automtica acceders a su l-
nea de
tiempo .
Si tate en
el pr i mer
fotograma y aade el icono que in-
dicar que el audio se est repro-
duciendo .
Para este ejemplo hemos utilizado unos ico-
nos obtenidos de forma gratuita desde http://
vector4free.com/vectors/id/129. Luego, puedes
aadir una gua vertical y otra horizontal para
determinar la ubicacin exacta del mismo.
3
Acto seguido crea otro fotogra-
ma clave en la posicin .
Al hacerlo, tambin se habr aadi-
do el icono de la primera posicin,
aunque en este punto vas a utilizar
otro diferente. Por ello seleccinalo
con un click sobre
y pulsa la tecla para eliminar-
lo. Luego pega el nuevo objeto en
este mismo lugar
y ajstalo a las guas que has
creado antes para ubicarlo en la
misma posicin en la que estaba
el primer elemento .
Por ltimo, aa-
de otro fotogra-
ma en
y dibuja un rec-
tngulo para definir el rea
sensible del ratn .
4
A pesar de que la lnea de
tiempo del botn slo tiene cuatro fo-
togramas, eso no impide que puedas aadir
ms capas y superponer otros elementos co-
mo grficos, clips de pelcula en los diferen-
tes estados de botn y, lo que te mostramos
en este caso, aadir un pequeo sonido cada
vez que pulses sobre l. Comienza
aadiendo una nueva capa desde .
Despus, crea un fotograma clave
sobre l a
posicin
ya que es
aqu don-
de vas a insertar el clip de audio.
5
Dirgete ahora al men y selec-
ciona para
acceder a las distintas bibliotecas
de elementos que incluye Flash
CS4 por defecto. En este caso pin-
cha sobre la entrada
para abrir la galera de sonidos .
Utiliza el scroll para localizar uno denomina-
do . En
la ventana de vista previa situada en el mar-
gen superior de esta ventana puedes ver el
grfico de la onda de audio y, si pulsas sobre
el icono
tambin lo es-
cuchars. Para
terminar, crea
un fotograma clave sobre la zona sensible y
obtendrs la siguiente
representacin en la
lnea de tiempo .
6
Una vez que has creado este botn para
detener el sonido, debes crear otro para
activarlo. La va ms rpida consiste, tal y
como te mostramos en la entrega anterior del
curso, en duplicarlo. Sitate en la biblioteca
de archivos y haz click con el botn derecho
del ratn sobre el smbolo y, en
el cuadro de dilogo que aparece, seleccio-
na . Asigna
un nombre para el
nuevo botn, por
ejemplo
y pulsa en .
7
Realmente el botn es el mismo, lo ni-
co que cambia es que ahora los iconos
de activacin y
desactivacin del
audio estarn co-
locados a la in-
versa. Si los ico-
nos que utilizas
los has converti-
do en smbolos
grficos con an-
terioridad, pue-
des saltarte este
Reproduce un sonido
al pulsar un botn
1
Gestin y control del sonido
Aunque incluir audio en tu proyecto de Flash es tambin una tarea que podrs realizar sin demasiado esfuerzo,
es muy probable que necesites controlarlo para conseguir que se reproduzca o se detenga en un punto
concreto. Te mostramos algunos de los casos ms frecuentes como el uso y control en, y a travs de botones.
7
Como ser difcil que encaje con exacti-
tud, ms en aquellos casos que quieras
ajustarlo en formas irregulares, la solucin
pasa por aadir una mscara de capa en la
que delimites, a travs de una forma que
crees, el rea visible. Aade una nueva
capa con ayuda del botn
sobre la que contiene el vdeo. Lue-
go, oculta y bloquea a sta para que slo
se muestre
el mar co
donde quieres incrustarlo .
8
Selecciona la herramienta
sitate con un click
en el primer fotograma
de la capa que conten-
dr la mscara
y traza despus un rec-
tngulo que comprenda el
rea del marco .
Con la herramienta
puedes del i mi t ar
an ms los mrge-
nes de la figura para que
la coincidencia sea lo ms
exacta posible .
9
Luego, haz click con
el botn derecho del
rat n sobre est a capa
y en el cuadro de
dilogo que aparece, se-
lecciona . Pincha
en el icono
para hacer visible
de nuevo el contenido de la capa que con-
tiene el vdeo y comprobars que ahora s
que se ajusta perfectamente al marco de la
escena principal .
Por ltimo,
slo tienes
que pulsar
la tecla para comprobar que el resultado
es el que pretendas .
57 N 289
paso. En ca-
so contrario,
sitate sobre
el fotograma
y selecciona luego el icono
con el botn derecho del ratn.
Luego pulsa en y asgnale
un nombre y un compor-
tamiento como grfico en
la ventana que aparece a
continuacin .
Repite el proceso con el otro icono. Luego
dirgete al panel y pulsa en .
En el icono si-
tuado sobre el
primer fotograma debes seleccionar .
Haz lo contrario para el
icono situado en la se-
gunda posicin.
8
A continuacin vuelve a la esce-
na principal con un click sobre
y pulsa en el botn
para aadir otra capa
en la que vas a del co-
lor al botn de forma
independiente .
Selecciona en la bi-
bl i ot eca de archi -
vos el primero que
creaste y
arrstralo a la posi-
cin que deseas que
aparezca .
Si las proporciones
no son las adecuadas,
aydate con la herramienta
y ajusta el tamao del botn hasta
conseguirlo .
Tambin puedes ubicarlo de forma
ms precisa con la herramienta de
seleccin .
Por ltimo pulsa a la vez las
teclas y para compro-
bar el resultado y ver que todo
funciona correctamente.
Por mucho que te guste un tema o una me-
loda debes tener en cuenta que no tiene por
qu ser del gusto de todos los usuarios que
vayan a acceder a tu pgina web o proyecto.
Para no condenarles a escuchar la misma
cancin una y otra vez, puedes darles la op-
cin de desactivar el sonido. Para ello vas
a crear un botn de tal modo que al pulsar
sobre l, se detenga. Hazlo de este modo.
1
Lo primero que debes hacer, como ha-
brs adivinado, ser importar el archivo
de audio a tu proyecto. Hazlo como si se
tratara de un elemento ms. Desde el me-
n , selecciona y despus
. En la ventana de explo-
racin que aparece busca la ubicacin dentro
del equipo del fichero que quieres utilizar,
seleccinalo
y pul sa en .
Durante unos segundos vers una barra de
progreso
y finalmen-
te se agre-
gar a l a
bi bl i ot eca de
archivos .
2
Es bastan-
t e r eco-
mendable que
insertes el fi-
chero de audio
en una capa
independiente
del resto. Aa-
de una nueva y
sitate luego sobre el primer fotograma .
Despus dir-
gete al aparta-
do
y pulsa sobre
para seleccio-
nar el archivo
de audio. Aparecer un panel desplegable
con los distintos elementos de sonido que
se encuentran agregados a la biblioteca del
proyecto. En este caso, selecciona el que vas
a utilizar, que se denomina .
3
Una vez que has elegido el archivo se
habilitan una serie de opciones que te
permiten editar el fichero. Aunque en este
caso se va a mantener el original, dispones de
efectos que te pueden resultar interesantes.
As, al hacer click sobre el panel
puedes aplicar
una serie de
efectos
que te permitirn
desde anular uno
de los canales es-
treo hasta des-
vanecer el nivel
de audio a partir
de un punto. Si
presionas sobre el icono
se mostrar una ventana de edicin
desde donde puedes proceder a editar la en-
voltura de la onda
o marcar un punto de inicio o de fin distinto
al del fichero original.
4
Una vez que has aadido el audio a la
pelcula, debes definir el comportamien-
to en el botn, de modo que cuando hagas
click sobre l se detenga el sonido.
Para ello haz click sobre ste
y desde el men seleccio-
na .
5
Es posible que tengas que cambiar la ver-
sin de ActionScript del proyecto si ves
esta ventana .
Acptala, y en la ventana que se muestra, haz
click sobre la pestaa y luego seleccio-
na la versin del cdigo .
Pulsa en
para salir de esta
ventana y volver
a la de comporta-
mientos. Haz lue-
go click sobre
marca la entrada y luego selecciona
. De este modo se aadir
una accin .
6
Ya has conseguido detener el sonido al
hacer click sobre el botn. Pero, cmo
puedes conseguir que aparezca el otro botn
para volver a activarlo? El mtodo que te pro-
ponemos consiste en duplicar todos los ele-
mentos de la escena principal en un segundo
fotograma y sustituir el botn. De modo que
al pulsar sobre el que se encuentra situado en
primer lugar, se acceder al segundo fotogra-
ma, y vicever-
sa. En primer
lugar, escoge
el fotograma 2
Controla el audio
con botones
2
Una vez que has aadido el audio a la capa donde se
reproducir, puedes aumentar su altura, de modo que
obtengas una representacin del grfico de la onda ms
grande, que te ayude a sincronizar mejor el sonido con
los elementos de la pelcula ya que, por ejemplo, puedes
saber dnde empieza o comienza a desvanecerse, o en
qu punto se producen las frecuencias ms elevadas.
Haz click con el botn derecho del ratn sobre la capa
que contiene el audio
pulsa en y, en la ventana que aparece,
pincha a continua-
cin en el apartado
y selecciona en el desplegable un porcentaje de zoom
para mostrar la capa ampliada .
Consejo
58 N 289
Cada vez que guardas el proyecto o pulsas
las teclas y para comprobar el resultado
se generan, por defecto, dos archivos. Uno
con extensin .swf, que es el formato que
utiliza Flash para generar sus ficheros, y otro
en Html que lo aloja. A pesar de ello, puedes
ajustas algunas de estas opciones para redu-
cir el tamao de algunos elementos del pro-
yecto, publicar slo en formato Swf si lo vas
a incluir en una web diferente que ya tengas
creada con anterioridad o publicarlo tambin
como un Gif, si necesitas obtener una imagen
(esttica o, incluso, animada).
1
Para acceder al men de configuracin de
la publicacin del proyecto dirgete al me-
n y pulsa en .
Aparecer una nueva ventana con diversas
pestaas. La primera de ellas que aparece se-
leccionada es la siguiente:
y en ella puedes escoger el formato de archi-
vo en que se publicar el proyecto.
2
Es imprescindible que se
encuentren activadas las
casillas
ya que de este modo se gene-
rar un fichero en Html que
contendr el proyecto de Flash que se guar-
dar, a su vez ,en formato Swf. Si seleccio-
nas la casilla se crear un
archivo ejecutable, que se podr visualizar
desde cualquier equipo sin necesidad de uti-
lizar ningn navegador y sin tener instalado
Adobe Flash Player.
3
Estas opciones que marcas habilitan tam-
bin su pestaa correspondiente desde
donde puedes selec-
cionar varias opciones.
As, si presionas sobre
acceders a un
nuevo panel donde, en-
tre otras posibilidades,
puedes elegir con qu
versin de Adobe Flash
Player ser compatible
el proyecto. Para ello
pulsa en el panel
y selecciona la versin
que deseas en la lista
que aparece .
Publicacin
del proyecto
1
Optimizacin del proyecto
Ya te acercas a la ltima parte del proyecto, que consiste en seleccionar el formato de salida y optimizar el
tamao final del mismo. Se trata de un proceso sencillo que no suele quitarte mucho tiempo pero que, sin
embargo, cobrar mucha importancia segn el grado de necesidad de reducir el tamao del archivo final.
de las capas
(no lo hagas en la
que contiene el fi-
chero de msica)
y pul sa para
aadir un fotogra-
ma clave .
7
Con esto ha-
brs obtenido
dos fot ogramas
clave con los mis-
mos el ementos,
donde el nico que tendrs que cambiar se-
r el botn de audio. Sitate para ello sobre
el fotograma 2 de la capa que contiene los
botones .
En el panel
de propiedades situado a la izquierda pulsa
luego sobre el botn .
Luego, en la ven-
tana que aparece,
selecciona el botn
de sustitucin, en
este caso ser .
Pulsa en .
8
No te olvides de detener la pelcula en
cada uno de estos fotogramas, ya que
de otro modo ir de uno a otro sin detener-
se y generando un bucle. Sitate sobre cada
uno de ellos, pincha con el botn derecho
del ratn y selecciona . Luego, en la
ventana que aparece haz doble click sobre la
funcin . Una vez que aadas las dos
acciones lo vers indicado en cada uno de los
fotogramas
clave de la
lnea de tiempo .
9
Una vez que ya tienes los dos fotogramas
preparados llega el momento de asignar
los diferentes comportamientos a cada uno
de los botones. Para empezar, sitate sobre
el pr i mer
fotograma
de modo que quede seleccionado el
botn que aparecer por defecto .
Luego abre la ventana de comporta-
mientos y pincha en el botn
luego en y finalmente
en . En la
ventana que aparece a continuacin debes
indicar que se dirija al fotograma
y pulsa en . De este modo lo que ha-
brs conseguido es que al hacer click sobre
el botn no slo se detenga el sonido, sino
que la pelcula avance hasta el fotograma 2,
donde se encuentra el botn con el smbolo
del audio desactivado .
10
Presiona ahora el fotograma 2 de la
capa
de modo que se
seleccione el otro botn .
Dirgete de nuevo a la ventana de
comportamientos. Como este botn
lo creaste a partir de una copia del primero
es posible que tenga asignada la accin de
detener los sonidos, que tendrs que elimi-
nar. Seleccinalo con un click
y pulsa en
para suprimirlo.
11
Luego pulsa sobre el botn
en la entrada y
en . En la ventana que
aparece ahora indica que se dirija al fotogra-
ma , de modo que al pulsar sobre el botn
la pelcula retroceda al punto anterior. Por
ltimo, pincha en para terminar.
60 N 289
61
Software
4
Puedes elegir la versin de
ActionScript que utilizar
tu proyecto desde .
Segn las necesidades de ste,
ser conveniente que
utilices la ms reciente
(si vas a usar nuevas
funciones) o, si por el
contrario te decidas
por las anteriores. Tam-
bin dispones de otras opciones
como la calidad y la compre-
sin de imgenes y sonidos. Si
seleccionas la casilla
se publicarn en el archivo to-
das las capas existentes, aun
cuando estn ocultas.
5
Por ltimo, una vez que
has ajustado todos los pa-
rmetros, pulsa en el botn
y, tras unos instantes
durante los que vers una ba-
rra de progreso
obtendrs los archivos finales.
En principio con los ficheros
que tienen
l a exten-
sin
ser suficiente para publicar
el proyecto en Internet una
vez que los alojes ambos en
el servidor. O tambin puedes
incrustar nicamente el archivo
Swf dentro de una pgina rea-
lizada en Html.
N 289
Cunto ocupa cada elemento?

La generalizacin y el aumento de la
banda ancha ha salvado una de las
mayores dificultades a las que se en-
frentaba Flash hace algunos aos: el
tamao final del archivo, que ralenti-
zaba la carga del mismo en Internet
y haca obligatorio el uso de pginas
de inicio de precarga. Aunque este
problema ya no es tan acusado como
entonces, es posible que an tengas
que tener en cuenta el tamao final
del archivo antes de publicarlo en
Internet. Flash publica un informe en
el que puedes consultar el peso de
cada uno de los elementos incluidos
en tu pelcula, de modo que te puedas
hacer una idea de cules son los que
puedes reducir de tamao. Sigue es-
tos pasos para conseguirlo:
1
Para obtener estos datos debes
indicarlo en la ventana de con-
figuracin de la publicacin. Dirge-
te al men y selecciona la
entrada .
Una vez que te encuentres sobre
la ventana ,
pincha sobre la pestaa ,
selecciona a continuacn la opcin
y pulsa so-
bre el botn .
2
A continuacin, al lado de la l-
nea de tiempo de tu proyecto,
se abrir una nueva pestaa en la
que puedes comprobar el tamao que
ocupan cada uno de los elementos
que estn incluidos en l .
Si accedes al directorio donde guar-
das el proyecto podrs comprobar
que tambin se habr generado un
archivo de texto con estos datos
.
Con los resultados que aparecen en
el informe puedes optar por pres-
cindir de algunas fuentes de texto y
convertirlas en grficos, convertir en
vectorial imgenes en mapas de bits
(Jpg, Gif, etc.) y eliminar las imge-
nes originales de la biblioteca de ar-
chivos, comprimir o anular un canal
de audio, etc.
En la edicin impresa, este era
un espacio de publicidad

Curso Flash CHOY 2009 - Cap 1 Al 5

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso Flash CHOY 2009 - Cap 1 Al 5

Caricato da

Copyright:

Formati disponibili

Animar tus dibujos con gestos y voz, crear una web, un banner o

un DVD interactivo son algunas de las posibilidades que te ofrece

En la edicin impresa, este era

Ests preparado para disear una pgina web en Flash? Las

Cunto ocupa cada

Cunto ocupa cada elemento?

Potrebbero piacerti anche