macromedia ®

Flash
Guía Curricular
©1997-1998 Macromedia, Inc. Todos los derechos reservados. Macromedia, el logo de Macromedia, Dreamweaver, Director, Fireworks, Flash,
Fontographer, FreeHand y Xtra son marcas comerciales o marcas comerciales registradas de Macromedia, Inc. Otros nombres de marca pueden
ser marcas comerciales o marcas comerciales registradas de sus respectivos dueños.

La imagen de Flash fue diseñada con Fireworks por Research Studios, de Londres. Tipografía diseñada con Fontographer por Font Bureau, Inc.
 TABLA DE CONTENIDOS

Introducción ....................................................................................................................iv

Lección 1: Empecemos a Trabajar con Flash

Configure un nuevo archivo de película de Flash. Dibuje los personajes
y el fondo para su animación. Emplee sus herramientas básicas de
dibujo como Pencil (Lápiz), Brush (Brocha), Paint Bucket (Cubeta de
Pintura) y Text (Texto). Aprenda a seleccionar, desplazar y agrupar
objetos ............................................................................................................1

Lección 2: Conceptos Básicos de Animación

Aprenda las técnicas y conceptos básicos para la animación en Flash.
Empiece organizando sus elementos mediante el uso de escenas,
capas y símbolos de Library (Biblioteca). Familiarícese con los conceptos
generales de animación como cuadros (frames), transiciones entre
cuadros clave (tweening) y papel cebolla (onion skinning). Aprenda a
usar la línea de tiempo de Flash para crear una animación cuadro por
cuadro, y después aplique transiciones entre cuadros clave
(tweening) y papel cebolla (onion skinning) ..................................................11

Lección 3: Conceptos Básicos de Interactividad

Añada acciones y botones para controlar su animación. Asigne
acciones a cuadros específicos en la línea de tiempo para producir un
ciclo de animación. Cree botones para que el usuario pueda detener e
iniciar la animación. Diseñe los botones de modo que respondan a las
acciones del usuario ......................................................................................21

Lección 4: Sonido
Añada sonidos a su animación y sincronícelos en la línea de tiempo.
Añada audio a los botones de modo que produzcan sonidos cuan-
do se haga clic en ellos ..................................................................................29

Lección 5: Técnicas Avanzadas de Dibujo

Aprenda más acerca del ambiente de dibujo de Flash y el rol que
juegan los símbolos. Cree un relleno de gradación de color
personalizado. Conozca las diferentes maneras de modificar imágenes
ya existentes. Controle la edición y las capas de los objetos mediante
la opción de agrupar. Comprenda la relación entre símbolos y su
animación, y la manera de realizar cambios globales a las imágenes
mediante la biblioteca ....................................................................................33

Lección 6: Integración de Todos los Elementos

Con la interactividad de su animación terminada, expórtela a un archivo
para la web. Emplee el programa Aftershock para crear
automáticamente una página de web que contenga su película de Flash ....41

PROGRAMA DE FLASH ii
iii
INTRODUCCIÓN

Flash es el formato estándar para gráficos de vectores y animación para la web. Con Flash, es muy
sencillo y rápido darle vida a nuestras páginas de web añadiéndoles gráficos y efectos de texto animados.
Flash nos permite, además, agregar una sofisticada interactividad a nuestro sitio sin necesidad de una
compleja programación.

Flash está diseñado para que nuestras animaciones de web bajen rápidamente de la red y para que
empiecen a reproducirse a medida que van bajando. Como Flash crea gráficos basados en vectores, los
archivos que genera bajan a una mayor velocidad que los formatos de imágen de mapa de bits, como
GIFs y JPEGs. Además, el formato de Flash cuenta con la tecnología de flujo continuo de datos, lo que
significa que las películas de web empiezan a reproducirse al tiempo que continúan bajando de la red. De
este modo, nuestros usuarios no tienen que esperar para empezar a interactuar con las películas de Flash.

El ambiente de autoría de Flash ofrece una serie completa de herramientas para crear animaciones listas-
para-la-web. Las herramientas de dibujo y texto nos permiten crear imágenes y texto desde cero. Y
además, Flash puede también importar imágenes desde otros programas gráficos como FreeHand e
Illustrator, así como mapas de bits creados en Photoshop. La Timeline (Línea de Tiempo) de Flash
resultará familiar para quienes han trabajado con Director de Macromedia, y nos permitirá aplicar
animaciones e interacciones complejas a nuestras películas, con el control de cuadro por cuadro. Una vez
terminada nuestra película en Flash, podemos exportarla al formato de archivo comprimido .swf y emplear
Aftershock para añadir la película a una página de web.

Este curso nos llevará paso por paso a través del proceso de producción de una animación interactiva en
Flash. Aprenderemos a configurar una "película" animada, a dibujar personajes, añadir texto, animar tanto
el texto como a los personajes, añadir botones interactivos para controlar la animación, y finalmente
exportar nuestra animación a un archivo listo-para-la-web. Dentro de esta lección encontraremos un
archivo llamado "final.fla", en el cual se encuentra la versión terminada de la película que crearemos a lo
largo de la lección.

El ejercicio en el que trabajaremos dará como resultado una película animada con botones interactivos.
Sin embargo, Flash nos permite ir más allá de simples animaciones estilo caricatura, o películas basadas
en la web. Sus características para responder a las acciones del usuario y para activar páginas de web
hacen de Flash una herramienta muy útil para crear elementos de la interfaz del usuario, tales como barras
de navegación y menús desplegables, que podemos añadir a nuestras páginas de web.

A medida que avancemos en esta lección, podremos acceder a la documentación en-línea de Flash para
contar con una mayor información. Además, podemos visitar el reconocido sitio de web de Macromedia
en www.macromedia.com, para obtener mayor información en su centro de desarrolladores de Flash.

PROGRAMA DE FLASH iv
LECCIÓN 1: EMPECEMOS A TRABAJAR CON FLASH

OBJETIVOS

En esta lección aprenderemos a:

• configurar un nuevo archivo de película de Flash
• emplear las herramientas de dibujo integradas a Flash para crear gráficos y texto
• trabajar con la barra de herramientas y el Stage (Escenario)

CONTEXTO

El primer paso para producir una animación de Flash lista para ser publicada en la web es crear los
personajes que usaremos en nuestra animación. En este capítulo emplearemos las herramientas de dibujo
ubicadas en la barra de herramientas de Flash para crear algunos personajes y texto simples. Será
realmente sorprendente comprobar que la creación de gráficos en Flash es un proceso muy simple,
incluso si nunca hemos empleado un programa de dibujo basado en computadora. Para aprovechar al
máximo las características que nos ofrece Flash, es importante que tengamos la confianza para
experimentar y jugar con sus diferentes herramientas y opciones.

La animación que crearemos en estas lecciones contará con una hormiga caminando por la pantalla, de
izquierda a derecha. Como fondo tendremos un día soleado. Y finalmente agregaremos algo de texto
explicativo, el cual también animaremos.

EJERCICIOS

CREACIÓN DE UNA NUEVA PELÍCULA DE FLASH

Las secuencias de animación en Flash se llaman "movies" (películas). Pero no necesitamos una cámara
de cine para crear una película de Flash; podemos crearla dibujando y animando personajes. En este
ejercicio configuraremos un nuevo archivo y aprenderemos a modificar las dimensiones generales de la
película.

Primero que nada, hay que abrir el programa de Flash. Al hacerlo, Flash abrirá automáticamente un nuevo
documento. En futuras ocasiones, cuando deseemos crear nuevas películas de Flash debemos
seleccionar File (Archivo) > New (Nuevo).

Análisis de las Propiedades de una Película

Antes de iniciar propiamente, sigamos estas instrucciones para examinar las diversas propiedades con
que cuenta una película:
1. Seleccionar Modify (Modificar) > Movie (Película).
Flash presenta la caja de diálogo Movie Properties (Propiedades de Película) (Figura 1-1).
2. Dejar la opción Frame Rate (Velocidad de Cuadros) en su valor por defecto de 12 fps.
"fps" significa cuadros por segundo y determina la fluidez con la que correrá la animación y por lo tanto la

PROGRAMA DE FLASH 1
 manera como lucirá. 12 fps podría dar buenos resultados para la web. (Sólo como referencia, las películas
de cine se reproducen a 24 fps, mientras que las películas Quicktime lo hacen frecuentemente a 12 fps.)
3. Dejar la opción Dimensions (Dimensiones) en su valor por defecto de 550 x 400 pixeles.
Éste es un buen tamaño para empezar. Más adelante se podrá alargar o reducir la película. El tamaño
más pequeño permitido es de 18 x 18 pixeles. El tamaño más grande es de 2880 x 2880 pixeles.
Después de crear una película hay que utilizar la opción Match (Igualar) > Contents (Contenidos) para
recortar el espacio no empleado.
Las dimensiones de la película determinarán el tamaño que ésta ocupará en el navegador de web.
4. Hacer clic en OK para continuar.
Es posible regresar y modificar las propiedades de la película en cualquier momento. Sin embargo, es
recomendable establecer la velocidad de cuadros por segundo desde el principio.

Figura 1-1
La caja de diálogo Movie Properties (Propiedades de Película)
determina la velocidad de cuadros por segundo y el tamaño de
nuestra película.

DIBUJO DE UN NUEVO PERSONAJE

Vamos a empezar nuestra nueva animación dibujando la hormiga con las

herramientas de dibujo que nos ofrece la Toolbar (Barra de Herramientas) de
Flash. Al estar trabajando, nos daremos cuenta que la mitad inferior de la barra
contiene modificadores sensibles al contexto (Figura 1-2). Éstos nos ofrecen
diferentes opciones dependiendo de la herramienta que hayamos
seleccionado en la parte superior de la barra de herramientas. En la parte
media de la barra de herramientas tenemos un menú desplegable próximo al
Figura 1-2
símbolo "%" que permite realizar un acercamiento o alejamiento en la película. La mitad superior de la
barra de herramientas
Vamos a dibujar nuestra hormiga en el gran espacio en blanco de la parte inferior contiene las herramientas
básicas, mientras que la
izquierda del documento. Esta área se llama Stage (Escenario) y nos servirá, más mitad inferior cuenta con
tarde, para reproducir nuestra película. Es importante saber que el tamaño del modificadores dependiendo
de la herramienta
Stage (Escenario) está determinado por las dimensiones en pixeles de la caja de seleccionada.
diálogo Movie Properties (Propiedades de Película) que vimos anteriormente.

2 PROGRAMA DE FLASH
 Figura 1-3
El gran espacio en blanco de la parte inferior izquierda del documento se
llama Stage (Escenario) y es donde crearemos las imágenes centrales de
nuestra animación.

Dibujo de un Personaje Empleando la Herramienta Pencil (Lápiz)

Para empezar, necesitamos:
1. Hacer clic en la herramienta Pencil (Lápiz) de la barra de herramientas. Al hacerlo, cambian las
opciones de modificación de la mitad inferior de la barra.
2. Hacer clic en el botón de modificación del primer cuadro y mantenerlo presionado para ver las
opciones de Pencil Mode (Modo de Lápiz). Es posible modificar el lápiz para dibujar formas como
óvalos, rectángulos y líneas. O bien, para dibujar de forma libre dejando que Flash se encargue de
suavizar o rectificar los trazos dependiendo del modo seleccionado.
3. En el menú desplegable Pencil Mode (Modo de Lápiz) seleccionar Oval (Oval).
4. Mover el cursor al área Stage (Escenario). Usar la herramienta Pencil (Lápiz) para dibujar tres óvalos
sobrepuestos que formarán el cuerpo de la hormiga.
A menos que seamos una especie de Rembrandt, nuestro dibujo quedará como en la Figura 1-4.

Figura 1-4
Con la herramienta Pencil (Lápiz) en modo Oval
(Oval) dibujamos el contorno del cuerpo de la
hormiga.

5. Ahora, para darle profundidad a la hormiga, es necesario borrar la porción donde se intersecta cada
una de las curvas (Figura 1-5), por lo que hay que seleccionar la herramienta Arrow (Flecha) de la
barra de herramientas. Hacer clic en la porción de curva que se desea borrar y hacer clic en la tecla
Backspace (Suprimir) o Delete (Borrar). Flash, automáticamente, elimina las líneas y curvas de las
intersecciones.
6. Los insectos, si recordamos nuestras clases de biología en la secundaria, tienen seis patas. Así que

PROGRAMA DE FLASH 3
 Figura 1-5
La hormiga una vez que utilizamos la herramienta
Arrow (Flecha) para borrar algunas de sus líneas.

hay que ponerle esas seis patas. Para ello hay que seleccionar de nuevo la herramienta Pencil (Lápiz).
Hacer clic en el botón de modo Pencil (Lápiz) y seleccionar Smooth (Suavizar) para dibujar líneas en
forma libre.
7. Dibujar seis patas a la hormiga.
8. Emplear la herramienta Pencil (Lápiz) en modo Smooth (Suavizar) para dibujar detalles adicionales
como las antenas y la boca.
9. Finalmente, cambiar al modo Oval (Oval) y usar el Pencil (Lápiz) para dibujar un ojo en la cabeza de la
hormiga.
10. El dibujo debe lucir como en la figura 1-6.

Figura 1-6
¡Ya está! Una hormiga, o algo parecido.

Guardar el Trabajo
En este punto debemos guardar el trabajo que hemos hecho, para ello tenemos que:
1. Seleccionar File (Archivo) > Save (Guardar).
2. Asignar el nombre "ant.fla" al archivo (".fla" es la extensión de archivo estándar para las películas de
Flash).
3. El menú desplegable Save File as Type (Guardar Archivo como Tipo) debe decir Flash Movie
(Película de Flash).
4. Con el navegador del disco, seleccionar una carpeta donde se desee guardar el nuevo archivo.
5. Hacer clic en el botón Save (Guardar).

Adición de Color con la Herramienta Paint Bucket (Cubeta de Pintura)

Ahora seguiremos este procedimiento para añadir algo de color a nuestra hormiga:
1. En la barra de herramientas, seleccionar la herramienta Paint Bucket (Cubeta de Pintura).
2. Observar cómo al seleccionar Paint Bucket (Cubeta de Pintura), se alteró el área de modificadores. El
primer modificador es ahora el menú desplegable Fill Color (Color de Relleno), que contiene los
colores estándar que lucirán bien en la mayoría de los sistemas computacionales. (Técnicamente

4 PROGRAMA DE FLASH
 hablando ésta es la paleta de colores compatibles con la web -web safe-.) De este menú desplegable,
hay que seleccionar un color gris claro.
3. Con la herramienta Paint Bucket (Cubeta de Pintura), hacer clic dentro de cada sección del cuerpo de
la hormiga para rellenarla de color. Dejar el ojo de color blanco.
4. Regresar al menú desplegable Fill Color (Color de Relleno) y seleccionar el color negro.
5. Con la herramienta Paint Bucket (Cubeta de Pintura), hacer clic dentro del ojo de la hormiga para
rellenarlo de color negro.
La hormiga debe lucir más o menos como en la Figura 1-7.

Figura 1-7
Empleamos la herramienta Paint Bucket (Cubeta de
Pintura) para darle algo de color a la hormiga.

ADICIÓN DE MÁS ELEMENTOS AL DIBUJO

Adición de un Fondo con las Herramientas Brush (Brocha) y Pencil (Lápiz)

El siguiente paso es añadir un fondo a nuestro dibujo. La escena será un día soleado y pondremos algo de
hierba para que la hormiga corra sobre ella. Podemos ver la Figura 1-8 como referencia para nuestro
trabajo. Para empezar debemos:
1. De la barra de herramientas, seleccionar la herramienta Brush (Brocha), que luce como una brocha de
pintura.
2. Del área de modificadores, usar el menú desplegable Fill Color (Color de Relleno) para seleccionar un
color amarillo brillante.
3. El modificador que se encuentra debajo del menú desplegable Fill Color (Color de Relleno) es el
menú desplegable Brush Size (Tamaño de Brocha). De ahí, seleccionar una brocha de tamaño medio
a grande para dibujar la parte central del Sol.
4. En la parte superior del Stage (Escenario), dibujar un medio círculo para el Sol.
5. Ahora, del menú desplegable Brush Size (Tamaño de Brocha) hay que seleccionar una brocha más
pequeña.
6. Dibujar algunos rayos para el Sol.

Y ahora hay que seguir estos pasos para añadir algo de hierba a nuestro dibujo:
1. De la barra de herramientas seleccionar la herramienta Pencil (Lápiz).
2. En el menú desplegable de modo Pencil (Lápiz) seleccionar Line (Línea).
3. En el menú desplegable de color seleccionar un verde brillante.
4. En el menú desplegable Line Thickness (Ancho de Línea) seleccionar 8.0 para una línea delgada.
5. En el menú desplegable Line Style (Estilo de Línea) seleccionar la quinta opción, que dará un
aspecto borroso a la línea.
6. En el Stage (Escenario), dibujar una línea debajo de la hormiga, más o menos a una pulgada de la

PROGRAMA DE FLASH 5
 base del Stage (Escenario). (En la Lección 3 colocaremos los botones de control en esta área vacía,
por lo que es buena idea dejar espacio libre desde este momento.)

Adición de Texto
Para terminar con nuestro dibujo, añadiremos algo de texto a la imagen, para lo cual debemos:
1. Seleccionar la herramienta Text (Texto), representada con la letra A en la barra de herramientas.
2. En el área de modificación establecer 24 puntos como el tamaño para la fuente tipográfica.
3. En el menú desplegable Text Color (Color de Texto) seleccionar un color azul medio.
4. En el Stage (Escenario), emplear la herramienta Text (Texto) y hacer clic a la derecha del Sol.
5. Introducir "Where’s the Picnic?".

Figura 1-8
Utilizamos las herramientas Brush (Brocha), Pencil (Lápiz)
y Text (Texto) para terminar nuestro dibujo.

SELECCIÓN CON LAS HERRAMIENTAS ARROW (FLECHA) Y LASSO (LAZO)

En ejercicios pasados utilizamos brevemente la herramienta Arrow (Flecha) para seleccionar segmentos
de línea. En esta sección aprenderemos a usar las herramientas Arrow (Flecha) y Lasso (Lazo) para
seleccionar y mover partes de nuestro dibujo.

Selección de Elementos Individuales con la Herramienta Arrow (Flecha)

Las herramientas de selección en Flash trabajan de manera un poco diferente a las de los programas de
dibujo basado en vectores estándar. Estos pasos nos ayudarán a familiarizarnos con la manera en que
trabaja la herramienta de flecha:
1. En la barra de herramientas, seleccionar la herramienta Arrow (Flecha).
2. Con la herramienta Arrow (Flecha), hacer clic en la pata trasera de la hormiga. La pata aparecerá
realzada para indicar que ha sido seleccionada (Figura 1-9).
3. Ahora hay que hacer clic en la pata delantera. La pata trasera permanecerá seleccionada.
4. Para eliminar la selección, hacer clic en una de las áreas vacías del Stage (Escenario). Ahora, hay que
hacer clic nuevamente en la pata delantera y observar que en este momento es el único elemento
seleccionado.

6 PROGRAMA DE FLASH
 Figura 1-9
La pata trasera aparece realzada, indicando que ha sido
seleccionada.

Selección de Múltiples Elementos con la Herramienta Arrow (Flecha)

Ahora vamos a seleccionar no uno sino varios elementos, para ello debemos asegurarnos que la pata
delantera aparece realzada y:
1. Hacer doble clic en la pata delantera y observar que toda la hormiga aparece realzada -con algunas
pequeñas excepciones-.
2. Ahora hay que posicionar el cursor sobre cualquiera de los segmentos realzados de la hormiga. Hacer
clic y arrastrar para mover las secciones realzadas. Hay que observar que algunas partes de la
hormiga quedaron en su posición original, por ejemplo el color de relleno, el ojo y cualquier otra línea
que no se encontraba en contacto con el segmento sobre el cual hicimos doble clic. El dibujo debe
lucir como la Figura 1-10.

Figura 1-10
¿Qué pasó? Desplazamos la hormiga sin seleccionar todas sus
partes.

3. Seleccionar Edit (Edición) > Undo (Deshacer) para mover las líneas de la hormiga a su posición
original.
4. Hacer clic en el color de relleno del cuerpo de la hormiga. Observar que se realza como el contorno.
5. Presionar la tecla Shift (Mayúsculas) y hacer clic en la pata trasera para eliminar su selección.
6. Para eliminar toda la selección, hacer clic con la herramienta Arrow (Flecha) en una de las áreas
vacías del Stage (Escenario).
7. Para seleccionar rápidamente toda la hormiga, se puede utilizar la herramienta Arrow (Flecha) para
trazar el área de selección alrededor de la hormiga. Para ello hay que posicionar la Arrow (Flecha) a la

PROGRAMA DE FLASH 7
 derecha y un poco arriba de la hormiga. Hacer clic y arrastrar la flecha hacia abajo y a la izquierda,
hasta que la caja de selección rodee completamente la hormiga. Comprobar que toda la hormiga se
encuentra seleccionada.
8. Hacer clic en cualquier parte de la hormiga, y arrastrarla un poco a la derecha. Si se le ha seleccionado
correctamente, la hormiga entera se moverá hacia su nueva posición. Si alguna de sus partes
permanece atrás, hay que seleccionar Edit (Edición) > Undo (Deshacer) y volver a intentarlo.

Selección de Elementos con la Herramienta Lasso (Lazo)

Con frecuencia necesitaremos seleccionar un grupo de objetos irregular que no cabe en el rectángulo de
selección de la herramienta Arrow (Flecha). En estos casos, la herramienta Lasso (Lazo) puede
ayudarnos, tan sólo hay que:
1. En la barra de herramientas, seleccionar la herramienta Lasso (Lazo) que se encuentra a la derecha
de la herramienta Magnifier (Magnificador).
2. Si la hormiga permanece todavía seleccionada, hacer clic en una de las áreas vacías del Stage
(Escenario) para eliminar la selección. Como otra alternativa, es posible seleccionar Edit (Edición) >
Deselect All (Eliminar Toda Selección).
3. Posicionar el Lasso (Lazo) cerca, pero fuera, de la hormiga. Hacer clic y arrastrar para dibujar una
selección irregular alrededor de la hormiga entera. Ahora la hormiga entera debe aparecer totalmente
seleccionada.

Agrupamiento
Es mucho más fácil hacer clic una sola vez para seleccionar la hormiga entera, sin tener que seguir los
pasos que acabamos de ver. Al agrupar todas las diferentes partes de la hormiga, podemos convertirla en
un objeto que puede ser fácilmente seleccionado y movido de lugar.
1. Para empezar, la hormiga debe continuar seleccionada. Si no lo está, hay que usar alguno de los
métodos ya vistos para seleccionar todas sus partes.
2. Seleccionar Modify (Modificar) > Group (Agrupar). La hormiga debe contar ahora con un rectángulo
de selección a su alrededor, el cual indica que el ítem está agrupado (Figura 1-11). Por ahora, hay que
dejar la hormiga como un objeto agrupado. (Cuando necesitemos separar un grupo en sus elementos
individuales, es necesario seleccionar Modify (Modificar) > Ungroup (Desagrupar) o Modify
(Modificar) > Break Apart (Separar). Para entender la diferencia entre estas dos opciones podemos
referirnos a los Help Topics (Tópicos de Ayuda) que Macromedia ha incluido en nuestro programa de
Flash.)

Figura 1-11
La selección rectangular realzada indica que las
diferentes partes de la hormiga fueron
agrupadas como un objeto.

8 PROGRAMA DE FLASH
Hemos terminado nuestro dibujo de la hormiga por ahora. En la siguiente lección animaremos los dibujos
que hemos hecho. En la Lección 5, aprenderemos técnicas de dibujo más avanzadas para Flash.

MÁS EJERCICIOS PARA AFINAR NUESTRAS HABILIDADES

• Creemos un nuevo documento de Flash y experimentemos con las herramientas de dibujo.
• Una por una, seleccionemos cada herramienta de la barra de herramientas.
Hagamos clic en cada uno de los modificadores y veamos qué hace.
• Invirtamos algo de tiempo en experimentar con las herramientas Arrow (Flecha) y Lasso
(Lazo) para seleccionar, eliminar la selección y mover partes de nuestro dibujo.

PROGRAMA DE FLASH 9
NOTAS:

10 PROGRAMA DE FLASH