Cuadernillo Flash

Instituto Argentino de Computación
MACROMEDIA FLASH
¿Qué es FLASH?
Flash 8 es una potente herramienta desarrollada por Macromedia (Adobe) con el objeto de
realizar animaciones vistosas para la web, así como para crear GIFs animados.
Lo más importante para destacar de Flash es que es un programa vectorial. Esto quiere decir que
el resultado de los dibujos que con sus herramientas se realizan son vectores ó formas
(operaciones matemáticas de curvas y rectas), que al ampliarse no perderán calidad, ya que no
son imágenes de mapas de bits (sucesión de puntos ó píxeles).
Los vectores aunque se cambien de tamaño conservan su calidad, además el espacio en disco
para almacenar un vector es mucho menor que el que se necesita para almacenar un mapa de
bits.
Los gráficos vectores representan imágenes mediante líneas y curvas, que tienen propiedades de
color y posición. La posición, el tamaño, la forma y el color de las imágenes de vectores puede
variarse sin que por ello pierdan calidad. No dependen de la resolución ni de su tamaño en
pantalla.
Los elementos gráficos de mapa de bits representan imágenes mediante puntos de color,
denominados “píxeles”, que están organizados en una cuadrícula, de tal forma que todo ese
conjunto de puntos forma la imagen. Una imagen de mapa de bits ocupará más cuanto mas
grande sea.
Entorno de trabajo
Profesora Sandra Versaci 1

El entorno de trabajo del programa Flash está dividido en las siguientes secciones: la barra de
menú, las barras de herramientas (Principal, Estado y Controlador) el escenario de la película
de trabajo y los Paneles.
Esta versión de Macromedia Flash incorpora nuevos elementos de pantalla llamados Paneles
que controlan los diferentes aspectos del programa. Como veremos unos puntos más abajo éstos
los podremos cerrar, abrir, cambiarles el tamaño o moverlos por el área del documento para
adecuarlos a nuestros hábitos de trabajo. De esta forma, disponemos del panel de
Herramientas, Propiedades, Biblioteca, Línea de tiempo, Mezclador de colores y otros que
iremos viendo a medida que avancemos en el curso.
Menús y barras de herramientas
En la parte superior de la ventana se encuentra la Barra de menús con las opciones
Merecen especial atención los menúes;
 MODIFICAR, se pueden alterar, transformar ú organizar los componentes de la película.

Como por ejemplo las formas y curvas, los fotogramas, las escenas ó los mapas de bits.
También se pueden variar las cualidades de la película.
 El menú CONTROL sirve para poder moverte a través de la animación; como por ejemplo
los controladores de Avanzar, Rebobinar, Reproducir,…
 Desde el menú VENTANA se accede a las diferentes herramientas que incluye el programa y
a los Inspectores de transformación de objetos, fotogramas y escenas.
Desde el menú Ventana podremos acceder a las Barras de Herramientas que incluyen la barra
de Herramienta Principal, Estado y Controlador.
La Barra de herramientas principal del programa.
La barra de Herramientas Principal (menú Ventana/Barras de herramientas/Principal) contiene

iconos que nos permiten aplicar los comandos utilizados más a menudo, como por ejemplo
Guardar, Copiar, Pegar, etc.
Es importante la opción de Zoom desde la que podemos controlar qué

zona de trabajo queremos ver para trabajar. En la versión 8 ésta se
encuentra por encima a la derecha del panel Línea de tiempo.
La Barra de herramientas Controlador de ejecución de las películas.

Esta barra de herramientas se define por los botones de Play, Rebobinar, Hacia delante, Hacia
atrás, Stop, etc. con los que podremos trabajar con la vista preliminar de películas Flash (SWF).

El panel Propiedades
Uno de los paneles más importantes cuando se trabajan con gráficos en Flash es el
panel Propiedades. En él dispondremos de las opciones que acompañan a las
herramientas del panel Herramientas. A través de estas opciones estableceremos los
atributos específicos para los objetos
seleccionados o de aquellos que en este momento estemos realizando.
Así mismo, los atributos cambian dependiendo del objeto seleccionado o de la herramienta que
tengamos activada.
En el ejemplo, tenemos en la escena un rectángulo con un contorno y un relleno. Una vez lo

hemos seleccionado con la herramienta Flecha del panel Herramientas, el panel Propiedades nos
ofrece la información relativa al objeto así como la posibilidad de variar sus atributos.
Sencillamente deberemos entrar los valores adecuados en cada uno de los campos.
Capas y el panel Línea de tiempos

Las animaciones en Macromedia Flash se basan en la combinación de fotogramas y capas
dispuestos en una línea de tiempo a partir de la cual estableceremos la película. Por lo tanto
podría decirse que el panel Línea de tiempo es el más importante cuando trabajamos en Flash.
Este panel se encuentra por debajo de la barra de Herramientas. En él se agrupan la línea de

tiempos propiamente dicha, con todos los fotogramas de la animación y a su izquierda el listado
de Capas de las que consta la película, junto con una serie de opciones a manera de iconos.
Flash es un programa que trabaja por capas, que actúan como una pila de acetatos transparentes y
sirven para mantener la ilustración por separado, de forma que se puedan combinar distintos
elementos en una misma imagen visual sin que se corten o unan entre si. Cada capa es un
elemento independiente que se anima de forma aislada.
En la Línea de tiempo animamos las capas que forman la película, donde se coordina el tiempo
de la animación y se sincronizan las animaciones de las distintas capas. Aquí se muestran todos
los fotogramas de la película.

Por tanto, la línea de tiempo organiza y controla el contenido de

una película a través del tiempo en capas y fotogramas.
Se puede modificar el modo de ver tanto las capas, como los

fotogramas para crear una zona de trabajo cómoda según se vaya
realizando la película, pulsando sobre el icono del extremo superior
derecho de la misma línea de tiempo.
Mostrar y ocultar los paneles

Los diferentes paneles de Macromedia Flash podremos abrirlos desde el menú Ventana. Una vez
abiertos en nuestro espacio de trabajo, tenemos la posibilidad de minimizarlos y maximizarlos.
 Picamos sobre el icono de Maximizar y Minimizar en forma de triangulo blanco de un

panel para mostrar sólo la barra de título del mismo o visualizar los atributos u opciones.
Cuando la flecha se encuentra orientada hacia la derecha , el panel se encuentra
cerrado o minimizado. Cuando la flecha se encuentra orientada hacia abajo , entonces
el panel está abierto o maximizado.

Así mismo, también tenemos la posibilidad de acoplar los diferentes paneles abiertos a los
bordes de nuestra área de trabajo.
Escenario
El Escenario, situado en la parte central del programa, es el área de trabajo en forma rectangular
donde se produce la película.
Se puede trabajar tanto encima como entorno a él, teniendo en cuenta que la visualización del
resultado de lo que estamos haciendo y que publicaremos, se limita al interior de ese rectángulo
ó escenario.
En este escenario se componen los fotogramas individuales de la película.

Las Películas de Flash
Archivos .fla y .swf

En el proceso de trabajo con Flash se ven involucrados diferentes tipos de archivos, pero explicar
aquí todos ellos puede resultar un poco confuso. Nos centraremos principalmente en dos de ellos:
1. El primero es el archivo de película ("archivo fuente") con extensión *.fla.

Este archivo es el que necesitamos para trabajar, dibujar, animar, hacer modificaciones...
en la película. Es la extensión con la que se guarda el archivo cuando estamos trabajando.
Así, podemos abrirlo, editarlo y trabajar con él, y restaurar con él los demás tipos de
archivo. No es el archivo que se publica en Internet.
2. Por otro lado, está el archivo resultante ("archivo exportado"), es decir, el archivo que
nosotros publicamos en Internet ó suministramos a otro usuario para que pueda ver
nuestra película.
Este archivo tiene extensión *.swf y se caracteriza porque sólo permite la visualización
resultante de la película. No nos permitirá modificarla.
Además, tiene un tamaño muy reducido; motivo por el que Flash ha alcanzado tanta
popularidad en la creación de animaciones.
Es el archivo que genera la película optimizada preparada para ser reproducida, y puede
ser visto por cualquier persona que cuente con un explorador de Internet y el plug-in
Reproductor Flash (ó Flash Player). El público no puede editar este tipo de archivo, sólo
puede verlo.
Previsualización y prueba de películas
Una vez cargado un archivo de trabajo (*.fla),

se puede probar la película desde el propio
programa. Es decir, lo que haremos es generar
un archivo de reproducción (*.swf).
Para ello basta con hacer clic sobre la opción

Probar película (Ctrl + Enter) que aparece en
el menú Control de la Barra de Menús.
Siempre que utilicemos esta opción, se creará
de forma automática el archivo resultante *.swf
a partir del archivo de trabajo *.fla.

Significado del Escenario.
El gran rectángulo blanco que está en el centro del área de trabajo de Flash recibe el nombre de
Escenario. El texto, los gráficos, las fotografías y todos los demás elementos que ve el usuario se
encuentran en el escenario.
Con el Zoom podemos variar la visión del escenario en el que trabajamos,

alejándonos ó acercándonos al diseño que estemos realizando.
Dos opciones de Zoom muy importantes son la de mostrar fotograma

(Ctrl + 2), que nos muestra todo el recuadro del escenario, y mostrar todo
(Ctrl + 3), que nos muestra todo lo diseñado en nuestra pantalla, aunque
los elementos estén fuera del escenario. A estas opciones se puede acceder
desde la parte inferior del panel Línea de tiempo y desde el Menú Ver
comando Magnificación.
Debemos aclarar que el escenario es la zona donde diseñamos y que se va a mostrar en nuestra
película resultante. Es como el visor de una cámara de vídeo. Lo que está fuera del escenario no
se muestra en la película. En muchas ocasiones dibujaremos elementos fuera del escenario, en el
área de trabajo de la pantalla y que rodea al escenario, para que lo crucen en algún sentido.
¿Qué es un Fotograma?
Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una
animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la
Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan
igual. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos.
Tipos de Fotogramas:
Fotograma Clave (KeyFrame): Son fotogramas con un
contenido especifíco, se crean, por tanto, para insertar en ellos
un nuevo contenido no existente en la película. Se identifican
por tener un punto negro en el centro y cuando esté vacío se le
diferencia por una línea negra vertical.
Fotograma Normal (Normal Frame): Estos fotogramas

siempre siguen a los fotogramas clave, no representan
contenido nuevo y son de color gris.
El último fotograma de una secuencia de fotogramas

normales viene representado por un cuadrado blanco sobre
fondo gris.
Fotograma Contenedor: No son fotogramas propiamente dichos, sino que
representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno. Por
defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película.
En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del
12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.

Fotograma Vacío: Son fotogramas sin contenido, Su color es

blanco.
En la imagen, los fotogramas del 6 al 11 (incluidos) son
fotogramas vacíos. No debemos confundirlos con los
fotogramas contenedor, pues estos últimos vienen
delimitados por líneas verticales grises (no negras). Si se
inserta algo en estos fotogramas, pasan a ser Keyframes.
Es importante resaltar que Flash no ignora estos

fotogramas y simplemente mostrará una imagen en blanco.
(no dará por terminada la animación). De modo que si
queremos que un objeto aparezca en el fotograma 1 y
después otra vez en el fotograma 10. Los fotogramas del 2
al 9 deberán ser fotogramas vacíos ya que así el objeto
"desaparecerá" y volverá a aparecer.
Fotograma Etiquetado (Label Frame): Contiene en la parte

superior una "bandera" roja que indica que tienen un nombre
asociado. Dicho nombre se establece desde el Panel "Frame".
Si la duración del frame es la suficiente, se puede leer el
nombre (o etiqueta) que identifica al conjunto de fotogramas.
Fotograma con Acciones asociadas: Contienen en la parte

superior una "a" que indica que tienen una acción asociada.
Estos fotogramas son especialmente importantes, pues estas
acciones, en principio "ocultas" (para verlas hay que acceder al
Panel Acciones) pueden cambiar el comportamiento de la
película. En la imagen, la acción existente en el fotograma 1
afecta también al 2 y al 3 (por ser fotogramas normales). El
fotograma 4 no tiene acciones y sí las tiene el 5.
Fotogramas Animados: Pueden ser de 2 tipos:

Fotogramas de Animación de Movimiento: Vienen
caracterizados por el color morado y representa el movimiento
(con o sin efectos) de un objeto, que pasa de la posición del
Keyframe inicial al final. Para representar esta animación
aparece una flecha entre estos Keyframes.
La imagen de la izquierda se representa un ejemplo de animación.
Del frame 1 se pasa al 6, (Flash representará el movimiento entre
ambas posiciones en la película final) y del 6 al 11, otro movimiento.
Fotogramas de animación de Forma: Vienen caracterizados

por el color verde y representan un cambio en la forma de un
objeto, que pasa de la forma que tenía en el Keyframe inicial a la
del final. Para representar esta animación aparece una flecha
entre estos Keyframes.
Este ejemplo, similar al de arriba representa el cambio de
forma de una pelota. En el frame 1 tendría la forma original, en el
frame 5, forma de cuadrado (por ejemplo) y en el 11, otra forma
distinta.

Escenas
Una película de flash está formada por una secuencia de escenas. Como mínimo cada película
tiene una escena, pero podemos insertar el número de escenas que deseemos. El uso de varias
escenas en una película de flash facilita mucho la gestión de la película evitando que se genere
un elevado número de capas. Por lo tanto cada escena es una secuencia de fotogramas
organizada en capas.
Deberemos saber siempre en qué escena estamos trabajando en un momento dado. El nombre de
la escena actual aparece siempre listado debajo de la línea de tiempo, bajo el icono a manera de
claqueta de cine.
Por defecto, cuando creamos un nuevo documento (*.fla), la nueva película incorpora una sola
escena (llamad escena1), y nosotros podremos ir añadiéndole tantas como precisemos para la
realización de la película final.
Comenzando a trabajar
EJERCICIO 1:
 Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no saldrá
en la película) y que nos servirá como guía para poder dibujar objetos de forma exacta y
precisa.
1. Pulsa en el menú Archivo - Nuevo.

2. Selecciona la opción Cuadrícula del menú Ver.
3. Selecciona la opción Mostrar Cuadrícula para hacerlo visible.
4. Selecciona la opción Editar Cuadrícula para ajustar los parámetros de la cuadrícula a tu
gusto (tamaño, color de fondo...)
5. Selecciona la opción Ajustes → Ajustar a Cuadrícula del menú Ver para que los objetos
que crees se acomoden a las líneas de la cuadrícula, consiguiendo alinearlos de un modo
fácil.
Propiedades de la película
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos
realizando. Sus propiedades coinciden con las del documento. Para acceder a ellas, hagamos clic con el
botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre
Propiedades del documento:

Dimensiones: Determinan el tamaño de la película.

El tamaño mínimo es de 1 x 1 px (píxeles) y el
máximo de 2880 x 2880 px.
Color de Fondo: El color aquí seleccionado será el
color de fondo de toda la película.
Veloc. Fotogramas: O número de fotogramas por

segundo que aparecerán en la película.
Unidades de Regla: Unidad que se empleará para

medir las cantidades.
Puedes acceder al mismo cuadro desde el botón señalado, debajo de la línea de tiempo
EJERCICIO 2:
 Explora la barra de dibujo para crear una ilustración en un documento con las siguientes
propiedades (botón derecho sobre el escenario – Propiedades del documento)
1- tamaño de 600 x 200 px
2- color de fondo rojo
3- Velocidad de los Fotogramas de 14 fps
Las herramientas de dibujo

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles
son las más importantes y cómo se usan:
Recuerda que todas las barras y los paneles se muestran u ocultan desde el menú Ventana
Herramienta Selección (flecha): . Su uso principal es para seleccionar objetos. Permite seleccionar
los bordes de los objetos o los rellenos (con un sólo clic), y las dos zonas (con doble clic)
Herramienta Subseleccionador: Esta Herramienta complementa a la anterior, ya que permite

mover o ajustar los vértices que componen a cada objeto.
Herramienta Rectángulo: Además de rectángulos, permite crear estrellas y polígonos pulsando en

la flecha que ves en la esquina inferior derecha y seleccionando Polystar

Velocidad de 12 fps Transformación libre: Sirve para modificar el

los fotogramas tamaño de los objetos, girarlos o
Tamaño del 100 px de ancho inclinarlos.
escenario por 236 px de alto Transformación de relleno:
Permite modificar los degradados
Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha,

pues puede seleccionar cualquier cosa que delimitemos con ella, sin importar la forma, (la
Herramienta Flecha sólo puede seleccionar objetos completos o zonas rectangulares). En
contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que
hagamos la selección a mano).
Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imágenes: .
Esto, es la Herramienta Varita Mágica. Permite hacer selecciones según los colores de los
objetos. El tercer dibujo que aparece es este: permite hacer selecciones poligonales.
Herramienta Pluma: Crea polígonos haciendo clic en los lugares que queramos
definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear
curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a
ellas.
Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color del

contorno de los objetos o agregarlo si no lo tuviere.
Cada herramienta que selecciones mostrará diferentes opciones en la parte inferior de

la barra. Aquí vemos algunas de ellas, mientras que las demás las irás descubriendo
con el uso.
Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es
decir, para que en caso de ser posible, sus bordes se superponga, dando la sensación de
estar "unidos".
Suavizar: Convierte los trazos rectos en líneas menos rígidas.

Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en más
rectilíneos.
EJERCICIO 3:
Reproduce los siguientes dibujos, cada uno en un archivo diferente.
Velocidad de los fotogramas 10 fps

Tamaño del escenario 190 de ancho por 220 de alto

EJERCICIO 4: Movimiento
1. Crea un primer fotograma con un círculo en la parte superior

2. Crea otro igual en el número 20 y otro en el 40, ubicándote en el fotograma y pulsando F6.
3. Mueve el círculo del fotog 20 a la parte inferior de la hoja
4. Selecciona todos los fotogramas pulsando doble clic sobre la línea de tiempo.
5. Pulsa en el menú Insertar – Línea de tiempo – Crear interpolación de movimiento
6. Observa los resultados desde el menú Control – Reproducir.
7. Modifica las propiedades del documento: color de fondo y velocidad del fotog. Guarda 3
versiones diferentes.
 ¿Qué cambios observas en la línea de tiempo después de efectuada la
interpolación?................................................................................................................................
 ¿Cuántos fotogramas hay?.......................................................................................................
 ¿A qué se llama fotograma clave? ¿Qué tecla pulsas para crearlo?....................................
EJERCICIO 5
Abre el archivo LOGO CÚSPIDE que se

encuentra en la red.
1. Reprodúcelo en flash utilizando las herramientas: rectángulo, círculo, línea recta y texto
Duración de la película 20 fotogramas

Velocidad de los fotogramas 10 fps
ATENCIÓN:
 1º Dibuja el rect. azul. Con un círculo encima puedes lograr la forma redondeada de la
izquierda, cuando lo eliminas queda la forma en el rectángulo.
 Para el texto utiliza 2 cuadros: uno para cúspide y otro para .com
 Para el óvalo: dibuja uno encima de otro.
 Para agregar sombra al texto: En la solapa FILTROS del panel de propiedades, pulsa el signo
+ y elige SOMBRA modificando los parámetros que aparecen hasta encontrar el deseado.
 Cuando hayas terminado el fotograma 1, convierte en clave el 5 y 10 con el mismo
contenido. Prueba a borrar el texto pequeño en el fot. 5 y observa los resultados.
EJERCICIO 6: Degradados 1. Crea 4 cuadrados en el escenario.

2. Utiliza la herramienta Cubo de pintura para aplicar diferentes
degradados a cada uno.
3. Abre el panel Mezclador de colores desde el menú ventana,
prueba y anota las diferentes posibilidades de la opción Tipo.
Cubo de pintura
Muestras de color
Mezclador de colores

EJERCICIO 7: Cambiando el degradado
1. En el primer fotograma clave, crea un cuadrado que ocupe toda la pantalla y aplica relleno
degradado.
2. Crea otro fotograma clave en el nº 50 (F6) y cambia el relleno del cuadro.

Utiliza el panel de colores y el botón TRANSFORMACIÓN DE RELLENO de la barra de
herramientas para cambiar la posición y el tamaño de los degradados.
3. Repite el punto 2 en los fotogramas 100, 150 y 200.
4. Prueba la película pulsando Control + Enter.
Para que los cambios se realicen de manera progresiva

debes aplicar
INTERPOLACIÓN DE FORMA
Selecciona los fot en la línea de tiempo y, en el panel de
propiedades elige ANIMACIÓN – FORMA
EJERCICIO 7: Importar imágenes en la película
Para cargar imágenes en una película debemos ir a

ARCHIVO – IMPORTAR A – BIBLIOTECA.
De esta manera esas imágenes estarán disponibles para usarlas desde ese panel todas las
veces que las necesitemos.
1. Busca en Internet 3 imágenes sobre deportes

2. Guárdalas en tu disco y luego impórtalas a la biblioteca.
3. Debes lograr que una se mueva desde el fot. 1 al 20, la segunda titila desde el fot 21 al 30 y
la última gira entre el fot 31 y el 50.
4. Para girar debe tener interpolación de
movimiento (Seleccionas la línea de
tiempo, botón derecho, crear interpolación
de movimiento) y luego, en el panel de
propiedades pulsas en el botón GIRAR y
eliges el sentido del giro.
EJERCICIO 8: Trabajando con capas
Cada capa es un nivel en el que podemos dibujar, insertar sonidos, textos... con
INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten
la misma Línea de Tiempo y por tanto, sus distintos fotogramas se reproducirán
simultáneamente.
Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.
La vista standard de una capa es la que muestra la imagen.

Bloquear
Mostrar
Mostrar u contorno
Ocultar
Insertar Capa Eliminar
Capa Guía Carpeta de Capas
1. Nombra a la capa1 POLIGONOS

haciendo doble clic sobre el nombre que
ya tiene.
2. Convierte en fotograma clave los fotog.
10, 20, 30, 40 y 50.
3. Dibuja en cada uno de ellos un polígono
o estrella diferente.
4. Para ello pulsas la flecha que está en la
herramienta cuadrado y eliges en el panel
propiedades, el botón opciones. Allí indicas
si quieres polígono o estrella y de cuántos lados y puntas será.
5. Asegúrate de que tengan relleno de color y sin línea de contorno (balde y lápiz)
6. Selecciona cada tramo de la línea de tiempo con doble clic y aplícale ANIMACIÓN – FORMA
desde el panel de propiedades
7. Prueba la película con CONTROL y ENTER.
8. Agrega otra capa con el nombre TEXTO y bloquea la primera para no cometer errores.
9. En el fotog 1 escribe arriba en el centro, con letra Balhaus, tamaño 50:
TRANSFORMACION DE
10. Convierte en clave el fot 30, borra lo anterior y con la misma letra escribe POLIGONOS
11. Vamos a aplicar animación de forma a los textos, para ello:

Selecciona cada texto con la flecha negra y con el botón derecho del mouse, elige SEPARAR 2
veces a cada palabra. De esa forma se convierte en un dibujo
12. Aplica ahora la transformación como hiciste con los polígonos y prueba la película.
Ejercicio 9: Propiedades de color
1. En el mismo ejerc. ubícate en el fotog. 30 de la capa TEXTO. Si observas el panel de color,

verás que la propiedad alfa esta al 100% (objeto totalmente visible)
2. Ubícate en el fot. 50 de la misma capa y conviértelo en clave.
3. Cambia la propiedad alfa al 0%.
4. Aplica interpolación de forma entre estos fotogramas y prueba la película.
5. ¿Para qué sirve esa propiedad?
Símbolos
Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos
proporciona Flash. La ventaja de usarlos es que pueden
ser utilizados en varias ocasiones, ya sea en la misma o
en otra película, reduciendo el tamaño de la misma.
Se crean seleccionando un objeto y pulsando la tecla F8.
Elegiremos el tipo de símbolo a crear y pondremos un
nombre para reconocerlo en la biblioteca.
Los símbolos pueden ser:

 Gráficos: son símbolos que nos permiten representar objetos estáticos y animaciones
sencillas.
 Clip de Película: es una película en si misma, como cualquiera de las que podamos haber
creado hasta el momento, pero que está incluida dentro de otra película y, a su vez puede
contener también películas insertadas en él.
 Botón: son los que aportan la mayor parte de la interactividad de las películas Flash. Un
botón, en Flash, es igual que cualquier botón de cualquier entorno informático. Son
elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una
serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando
se les pasa el ratón por encima o cuando se les está pulsando, por ejemplo.
 Diferencia entre símbolo e instancia

 Como hemos comentado anteriormente, cuando creamos un símbolo, Flash lo almacena
en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una película, éste se
convierte en una instancia.
 Aunque parece que sean lo mismo, la importancia de esta distinción es que cuando
utilicemos un símbolo que hayamos creado previamente en una película, al modificarlo se
modificará la instancia, mientras que el objeto seguirá intacto, tal y como era en el
momento de su creación, de manera que podremos volverlo a utilizar en otro momento.
 Modificar una Instancia

 Hemos visto anteriormente que podemos modificar una instancia de un símbolo sin
modificar el símbolo original en cuestión. Sin embargo, al no tratarse de un gráfico
vectorial (veremos que significa esto más adelante), no podemos modificar las

instancias con las herramientas de dibujo de Flash, pero sí mediante el Panel de

Propiedades, que permite la manipulación "externa" de la instancia.
 Así, este panel, que como hemos visto resulta sumamente útil, no nos permite modificar
la estructura básica de la instancia, pero sí otras propiedades, esto es, podremos hacer
que la instancia tenga más brillo, pero no transformar una estrella en un círculo
Ejercicio 10:
1. Trabajaremos con el ejerc anterior, agregando una capa, a la que

llamarás MOVIMIENTO.
2. En el fot. 1 agrega la imagen de la camioneta que está en tu carpeta y
ubícala en el extremo izquierdo.
3. Convierte la imagen en símbolo gráfico pulsando F8.
4. En el fotog. 30 córrela a la derecha.
5. Selecciona la línea de tiempo y, con el botón derecho del mouse, elige CREAR INTERP. DE
MOVIMIENTO.
6. Observa en el panel de propiedades, en el botón Color, las opciones para modificar el
símbolo.
7. Anota debajo los resultados
Ejercicio 11: Alinear y distribuir objetos
Abre el archivo PRECARGA que se encuentra en la red y reprodúcelo siguiendo estos pasos:
1. Configura el tamaño del escenario 120 px de alto x 120 de ancho
2. Importa la imagen LUPA desde la misma carpeta.
La imagen ya está en la biblioteca. Si no la ves, vas al menú
VENTANA – BIBLIOTECA .
3. Tráela al escenario, en el fotograma 1, arrastrándola con el Mouse
4. Esta película dura 6 fotogramas, para extenderla ubícate en el fotog. 6 y pulsa F6 para
convertirlo en clave.
5. Esa capa ya está terminada. Colócale como nombre FONDO y bloquéala.
6. Agrega otra capa desde el menú INSERTAR – LINEA DE TIEMPO – CAPA

7. En el fot. 1 escribe el texto y extiéndelo hasta el fot. 6 como hiciste antes (punto 4)
8. Nombra la capa como texto y bloquéala.
9. Agrega otra capa y dibuja, en el fot. 1, un círculo verde degradado, cópialo y pégalo para
que te queden 5
Si usas el panel de alineación puedes lograr que te queden

parejos.
TODOS LOS PANELES ESTAN EN EL MENÚ VENTANA

10. Los 5 fotog. siguientes son iguales, así que ubícate en cada uno de ellos y conviértelos en
clave.
11. Ubícate en el fotog. 1 y dibuja un círculo como los anteriores pero más grande. Colócalo
tapando el primer círculo pequeño
12. Haz lo mismo en cada uno de los siguientes fotog., menos en el último.
Van a quedar tapados en cada fotog. un círculo diferente y ...LISTO!
EJERCICIO 12: Texto titilando
1. Prepara la película
Duración de la película 60 fotogramas Tamaño del escenario:

310 px de ancho por 40 px de alto
Velocidad de los fotogramas 10 fps Capas: Texto, fondo
2. Arma las capas e importa la imágenes HOMBRE PENSANDO y TECLADO a la biblioteca

3. En la capa fondo ubica las imágenes en los fotogramas 1, 20, 40 que serán claves.
En el 1 va HOMBRE PENSANDO, en el 20 va el dibujo que harás vos,
y en el 40 la imagen TECLADO
4. No olvides que la capa llega hasta el fot. 60
5. Si terminaste bloquéala y pasa a la capa TEXTO.
6. Presta atención al modelo y observa qué texto va en cada fotograma.
7. Te digo cuáles son los claves: 1, 20, 28, 30, 35, 40,46, 48, 50, 52,60.
 ¿Cómo logras el efecto para que titile el texto?.........................................................................
Ejercicio 13: Guía de movimiento
Hasta ahora el movimiento fue siempre rectilíneo. Veremos cómo lograr otras direcciones.
1. Crea en el fotog. 1 un círculo y conviértelo en símbolo gráfico pulsando F8
2. Convierte en clave el fot. 50 y tendrás nuevamente allí el mismo círculo
3. Selecciona toda la capa con un clic sobre su nombre CAPA1 y elige el botón AÑADIR GUIA
DE MOVIMIENTO. La línea de tiempo tiene que quedar como muestra la figura
4. En el fot 1 de la capa guía dibuja con el lápiz el recorrido que seguirá la pelota.
Recuerda que la capa sólo se usa para dibujar ese recorrido

5. Vuelve a la capa 1 y en el fot 1 ubica la pelota en el inicio de la línea que dibujaste (el centro
debe coincidir con el inicio de la línea)
6. En el fot 50 ubica la pelota en el final de la misma línea y agrega interpolación de

movimiento.
7. Prueba la película.
Ejercicio 14: Clip de película
Para reproducir este modelo debes crear un clip de

película
1. Dibuja en el escenario una franja de la bandera
2. Convierte este dibujo en símbolo clip de película.
3. Edita el símbolo con un doble clic y convierte en
esta nueva línea de tiempo, el fot 50 y el 100 en
clave.
4. En el fot 50 debes cambiar la posición de la franja: MODIFICAR – TRANSFORMAR –
VOLTEAR VERTICALMENTE.
5. Aplica animación de forma entre los fot clave y vuelve a la escena.
6. Ya tienes tu clip. Esta película se va a reproducir indefinidamente mientras funciona la
película principal.
7. Trae a la escena 2 veces tu símbolo y ya tienes la bandera lista. Sólo falta que agregues los
demás elementos en la escena principal

Velocidad de los 24 fps
fotogramas
Tamaño del escenario 470 de ancho
por 280 de alto
Capas Estadio,
bandera, texto,
marcas
Ejercicio 15: Botones

1. Abre el ejerc. anterior para agregarle botones que
detengan y ejecuten la película.
2. Crea una capa nueva con el nombre botones y en el
fotog 1 dibuja dos rectángulos de diferentes colores.
3. Convierte cada uno en símbolo botón pulsando F8
(ELIGE BOTÓN Y NÓMBRALOS PLAY Y STOP respectivamente)
4. Vamos a editar el botón STOP pulsando doble clic sobre él para llegar a la siguiente pantalla

Anota los diferentes estados posibles del botón:

…………………………………………………
…………………………………………………
…………………………………………………
…………………………………………………
.
 Estás ahora en la línea de tiempo propia del botón. Para cambiar su apariencia en cada
estado ubícate en el fotog 2(sobre) y conviértelo en clave. Cambia luego el color de relleno
del botón.
 Haz lo mismo en el fotog 3(presionado).
 Vuelve a la escena principal pulsando en ESCENA sobre la línea de tiempo. Si todo salió
bien, cuando pruebes la película con CONTROL y ENTER verás los cambios al pasar el
mouse sobre el botón o al presionarlo.
5. Realiza los mismos pasos para el botón PLAY.
6. Ahora vamos a indicar a FLASH las acciones a realizar.

7. Selecciona el primer botón y pulsa F9 para ir al panel de acciones. Observa que se vea
debajo el nombre del botón seleccionado, para asegurarte de que estás indicando la acción al
objeto correcto.
8. Pulsa ahora la varita mágica

que es el asistente y elige en
el panel izquierdo:
 FUNCIONES GLOBALES
 CONTROL DE LA LINEA
DE TIEMPO
 STOP o PLAY (según el
botón que estés trabajando)
Vuelve a la película con la
misma tecla y prueba el
resultado.
Ejercicio 16: Creación de una página web

Duración de la
90 fotogramas
película
Velocidad de los
24 fps
fotogramas
Tamaño del 700 de ancho por
escenario 415 de alto
Fondo, contenido,
Capas
BOTONES, acciones

1. Prepara la película desde propiedades del documento (tamaño del escenario y velocidad de
los fotog)
2. En la capa fondo ubica, en el fotog 1, la imagen FONDO que encontrarás en la carpeta
IMAGENES y extiéndela hasta el final de la película.(fotog 90). Bloquea la capa.
3. En la capa CONTENIDO :
 Escribe el título La liga de la Justicia en el fotog 1, ubica la foto del modelo y texto intro
(todo está en la carpeta TUTORIAL – IMÁGENES O INFO) El texto debes abrirlo desde
fuera de flash, copiarlo y pegarlo en flash.
 Convierte en clave los fotog 5, 10, 15, 20, 25, 30 y 35.
 Ubica en cada uno, texto, foto y descripción de cada superhéroe.
 Bloquea la capa.
4. En la capa BOTONES, fotog 1 dibuja los botones, escribe los nombres de cada superhéroe
dentro de ellos, convierte cada uno en símbolo, asignando a cada botón el nombre
correspondiente.
5. Edita cada botón con doble clic y realiza los cambios necesarios para que se vean de
diferentes colores en sus estados REPOSO, SOBRE y PRESIONADO.
6. Vuelve a la película para asignar las acciones a cada botón.
7. Selecciona el primero, pulsa F9 y, en el panel izquierdo elige
 FUNCIONES GLOBALES
 CONTROL DE LA LINEA DE TIEMPO
 GO TO
 En la parte superior, la opción IR A Y DETENER
 En fotograma indica el número de fotog adonde conduce ese botón.
Prueba la película y, si funcionó, realiza los mismos pasos para dar acciones a todos los
botones.
8. Bloquea la capa.
9. En la capa ACCIONES, ubicate en el fotog 1 y pulsá F9.
10. Para indicar a la película que se detenga al comenzar y permita utilizar los botones elige la
opción STOP que se aplicará al fotog 1 de la capa ACCIONES.
11. Sólo te falta dibujar un botón en cada uno de los fotog clave de la capa CONTENIDO para
volver al fotog
inicial.
12. Prueba la película
y… LISTO!

Ejercicio 17:
Reproduce las siguientes películas teniendo en cuenta los pasos que se indican a continuación
1. Aplicar propiedades al documento
2. Crear capas
3. Importar imágenes a la biblioteca
4. Observar el modelo fotog por fotog
Más oportunidades
Duración de la
70 fotogramas
película
Velocidad de los
24 fps
fotogramas
Tamaño del 470 de ancho por 280 de
escenario alto
Fondo, botón, burbuja 1,
Capas burb2, burb3m y sus guías
de movimiento
Banner dieta

Velocidad de los fot 10 fps
Capas Fondo, texto fijo, texto variable, fondo variable
Banner oep

fotogramas
Capas Fondo, texto, logo, camioneta
Ejercicio 6: Yahoobar

fotogramas
Capas Gráficos, botón, texto, puntero, logo

Cuadernillo Flash

Cargado por

Copyright:

Formatos disponibles

Cuadernillo Flash

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cuadernillo Flash

Cargado por

Copyright:

Formatos disponibles

Instituto Argentino de Computación

Profesora Sandra Versaci 1

Menús y barras de herramientas

En la parte superior de la ventana se encuentra la Barra de menús con las opciones

Merecen especial atención los menúes;

 MODIFICAR, se pueden alterar, transformar ú organizar los componentes de la película.

La Barra de herramientas principal del programa.

La barra de Herramientas Principal (menú Ventana/Barras de herramientas/Principal) contiene

Es importante la opción de Zoom desde la que podemos controlar qué

La Barra de herramientas Controlador de ejecución de las películas.

Profesora Sandra Versaci 2

En el ejemplo, tenemos en la escena un rectángulo con un contorno y un relleno. Una vez lo

Capas y el panel Línea de tiempos

Este panel se encuentra por debajo de la barra de Herramientas. En él se agrupan la línea de

Profesora Sandra Versaci 3

Por tanto, la línea de tiempo organiza y controla el contenido de

Se puede modificar el modo de ver tanto las capas, como los

Mostrar y ocultar los paneles

 Picamos sobre el icono de Maximizar y Minimizar en forma de triangulo blanco de un

En este escenario se componen los fotogramas individuales de la película.

Profesora Sandra Versaci 4

Las Películas de Flash

Archivos .fla y .swf

1. El primero es el archivo de película ("archivo fuente") con extensión *.fla.

Previsualización y prueba de películas

Una vez cargado un archivo de trabajo (*.fla),

Para ello basta con hacer clic sobre la opción

Profesora Sandra Versaci 5

Significado del Escenario.

Con el Zoom podemos variar la visión del escenario en el que trabajamos,

Dos opciones de Zoom muy importantes son la de mostrar fotograma

Fotograma Normal (Normal Frame): Estos fotogramas

El último fotograma de una secuencia de fotogramas

Profesora Sandra Versaci 6

Fotograma Vacío: Son fotogramas sin contenido, Su color es

Es importante resaltar que Flash no ignora estos

Fotograma Etiquetado (Label Frame): Contiene en la parte

Fotograma con Acciones asociadas: Contienen en la parte

Fotogramas Animados: Pueden ser de 2 tipos:

Fotogramas de animación de Forma: Vienen caracterizados

Profesora Sandra Versaci 7

1. Pulsa en el menú Archivo - Nuevo.

Profesora Sandra Versaci 8

Dimensiones: Determinan el tamaño de la película.

Veloc. Fotogramas: O número de fotogramas por

Unidades de Regla: Unidad que se empleará para

Las herramientas de dibujo

Herramienta Subseleccionador: Esta Herramienta complementa a la anterior, ya que permite

Herramienta Rectángulo: Además de rectángulos, permite crear estrellas y polígonos pulsando en

Profesora Sandra Versaci 9

Velocidad de 12 fps Transformación libre: Sirve para modificar el

Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha,

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color del

Cada herramienta que selecciones mostrará diferentes opciones en la parte inferior de

Suavizar: Convierte los trazos rectos en líneas menos rígidas.

Reproduce los siguientes dibujos, cada uno en un archivo diferente.

Velocidad de los fotogramas 10 fps

Profesora Sandra Versaci 10