3ro HOJA GUÍA 1

CONOCIENDO ADOBE FLASH

1. DEFINICIÓN: Flash es un PROGRAMA DEL GRUPO ADOBE que nos permite REALIZAR 1. Barra de Título 6. Área de Trabajo
ANIMACIONES INTERACTIVAS y diseños vistosos para la web. 2. Fichas o Comandos 7. Paneles
3. Capas 8. Propiedades
2. EXTENSIÓN DE A. FLASH 4. Fotogramas
 .SWF 5. Caja de Herramientas
 .FLA
3. INTERFAZ: 4. LA LÍNEA DE TIEMPO:

4.1 Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando
rectángulos).

 La unidad de medida es Fotogramas por Segundo (fps).

 La Línea de Tiempo presenta fotogramas blancos y grises. Los grises se disponen cada 5
fotogramas como una ayuda para contabilizar mejor estos fotogramas a la hora de crear la
animación.
 Hay 2 tipos de fotogramas: CLAVES y COMUNES. Los fotogramas clave POSEEN UN
PUNTO.
4.2 Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma,
cuánto dura o cuándo aparecerá en la película.

5. LAS CAPAS: Una Capa se puede definir como una película independiente de un único nivel.

Contiene su propia Línea de Tiempo (con infinitos fotogramas).

 Su principal función es organizativa.
 Supongamos que creo un círculo en el primer fotograma de la Capa 1.
 Luego creo una animación de ese círculo, aumentando su tamaño hasta duplicarlo
definitivamente en el fotograma 10.
 Del fotograma 1 al fotograma 10 tengo la animación de mi círculo.

ERIKA SALINAS DE LA CRUZ

 3ro HOJA GUÍA 2
FOTOGRAMA POR FOTOGRAMA
ACTIVIDAD N° 2

--En Flash hay 2 tipos básicos de fotogramas: CLAVES y COMUNES. En la línea de tiempo, los
fotogramas clave POSEEN UN PUNTO  En la primera capa “FONDO”, diseña según tu creatividad un paisaje, importando imágenes
a la biblioteca.
Funcionamiento de los Fotogramas: En los fotogramas clave vamos a insertar “lo importante”. ¿Cómo  En la segunda capa “CAJITA”, diseña la caja donde estará las luces
es eso? Flash realiza la animación automáticamente. Imagina una pelota que cae del cielo. En Flash no  En la tercera capa “LUCES”, dibuja un círculo de color rojo, fuera de la cajita., selecciona y
necesitamos crear todos los fotogramas de la escena. Únicamente creamos los fotogramas clave: muevelo a su lugar.
cuando la pelota está arriba y cuando está abajo. Son sólo dos fotogramas. El resto de los fotogramas
los genera Flash.

ACTIVIDAD N° 1
Ahora
Ahora realizaremos el
realizaremos el cambio de Luces
Sistema de de un Semáforo.
Translación de la ¡Demuestra TU
Creatividad!
Tierra.
¡Demuestra TU
Creatividad!

 La primera Capa “FONDO”, en Propiedades Del Documento seleccionar color de Fondo

“Negro”.
 Con la herramienta LÁPIZ DE COLOR AMARILLO diseñar como pequeñas estrellas.
 En la Segunda Capa “SOL”, Importar la imagen del Sol.
 La Tercera capa “TRAYECTORIA” trazar un óvalo alrededor del sol, que no tenga relleno.
 La Cuarta capa “TIERRA” dibujar un óvalo que va a simular ser la tierra.
 En cada capa hacer clic secundario en el fotograma 90 ó 100 y elegir la opción Insertar
FOTOGRAMA CLAVE.
 Ahora si trabajaremos fotograma por fotograma en la Capa Tierra.
 En el segundo fotograma insertar fotograma clave y seleccionando con la herramienta
Selección mover un poco la Tierra siguiendo la trayectoria del óvalo trazado en la capa
trayectoria.
 Y en cada fotograma hasta el 90 ó 100 repetir la misma secuencia que el procedimiento
anterior.

ERIKA SALINAS DE LA CRUZ

 3ro HOJA GUÍA 3
INTERPOLACIÓN DE MOVIMIENTO

 Es la acción básica de las animaciones en Flash. Permite desplazar un objeto de un lugar a

otro del escenario, siendo necesarios únicamente dos fotogramas.
 Por supuesto, al realizar una interpolación el fotograma inicial y final deberán ser diferentes, en
caso contrario no se creará ningún tipo de animación.

OBSERVA Y REALIZA:
 En el fotograma 1 insertar un círculo
 En el fotograma clave 20 mover el círculo al final
 Hacer clic secundario en el último fotograma y elegir la opción CREAR INTERPOLACIÓN
DE MOVIMIENTO
 Pero si seleccionamos un FOTOGRAMA intermedio en su transición y bajamos el círculo, 2
esto hace que el movimiento ya no sea recto, y pueda ser en zig-zag.

ACTIVIDAD
AHORA ES TU TURNO DE DEMOSTRAR TU CREATIVIDAD

1. Realizar la animación de un carro que avanze de derecha a izquierda. Que otro carro avanze
de izquierda a derecha y un avión aparezca de derecha a izquierda.

2. Realizar la animación que una pelota de básquet sea lanzada y choque con el filo de la canasta
y rebote hacia otro lado.

3. Crear la animación de un lugar que represente a una ciudad que haya movimiento de carro que
pare cuando el semáforo esté en rojo y que el avión avanze.

1. Primera capa “FONDO”: Diseñar una pista similar al gráfico e importar los edificios.
2. Segunda Capa “SEMÁF”: Diseñar el semáforo (verde). 1
3. Tercera Capa: “CAR1”: Importar el carro 1
4. Cuarta Capa: “CAR2”: Importar el carro 2
5. En SEMAF Insertar fotograma clave en el (fotograma 20) cambiar a luz ámbar.
6. En FONDO Insertar Fotograma Clave (f. 20)
7. En CAR1 Insertar fotograma clave (f. 20) mover al carro (Interpolación de Movimiento)
8. En SEMAF (f.22) cambiar a luz roja hasta el (f. 30) Y en fotograma (35) cambiar a verde
9. En CAR1 trabajar fotograma por fotograma que gire el carro por lo menos 5 fotogramas
10. En CAR1 aplicar Interpolación de Movimiento hasta el final de la pista.
11. En SEMAF insertar Fotograma clave hasta el último fotograma clave de CAR1.
12. En CAR2 avanzar el carro con Interpolación de Movimiento hasta el cruce y trabajar fotograma por
fotograma el girar el carro y a partir de ese fotograma Interpolación de Movimiento hasta el último
fotograma trabajado en CAR1 y SEMAF.

ERIKA SALINAS DE LA CRUZ

 3ro HOJA GUÍA 4 2. Ahora realiza la animación de las siguientes formas en otra capa
INTERPOLACIÓN DE FORMA

 La Interpolación de Formas permite realizar animaciones en las que nuestro objeto

aumente o disminuya de manera progresiva su tamaño y a la vez cambie de forma y
color.

 Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su

forma de manera progresiva (o ambas cosas a la vez), Flash nos ofrece la técnica de la
Interpolación por Forma, que consiste simplemente en ir transformando el contorno de un
objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto.

 Colocaremos en el primer fotograma el objeto con su aspecto original, y en el último la 3. Realiza una Animación aplicando Interpolación de Movimiento y de Forma.
apariencia final que queremos que tenga.

 Para crear la interpolación, una vez que tengamos los fotogramas de inicio y fin de la
animación hacemos CLIC DERECHO en alguno de los FOTOGRAMAS INTERMEDIOS, y
seleccionamos la opción del menú CREAR INTERPOLACIÓN DE FORMA.

ACTIVIDAD

 En Capa 1: Realizar la animación de un círculo rojo y que se

transforme a un rectángulo verde.

 En la capa 2: Realizar la animación de un polígono azul que

cambie a estrella amarillo de 3 lados.

 En la capa 3: Realizar la animación de un estrella de 5 lados color

morado a polígono de 5 lados.

ERIKA SALINAS DE LA CRUZ

 3ro HOJA GUÍA 5  Seleccione el fotograma 1 de la capa OBJETO y ubica la
GUÍA DE MOVIMIENTO imagen al inicio del trayecto.
 En el fotograma 30 de esta misma capa, ubica la imagen al
 Permite dar interpolación de movimiento a un objeto o texto a través de un trayecto final del trayecto.
personalizado.
 Las capas de guía de movimiento permiten dibujar trazados a lo largo de los cuales se animan  Finalmente clic derecho en el fotograma 30 (de la capa
los objetos. objeto) y elige Crear Interpolación de movimiento, lo mismo
en el fotograma 29.
ACTIVIDAD

 La primera capa que tenga de nombre Objeto.

 Añadir “Guía de Movimiento” que es una capa especial.
Ahora es tu turno
crea una
Hacer clic sobre este Animación
ícono para insertar aplicando lo
guía de movimiento. aprendido hasta
el momento.

 En la capa OBJETO (fotograma 1) importa una imagen, inserta fotograma clave 30.
 Seleccione el fotograma 1 de la Capa Guía de Movimiento, utilizando la herramienta lápiz
trazar un trayecto, luego igual que el anterior inserte fotograma clave en el Fotograma 30.

ERIKA SALINAS DE LA CRUZ

 3ro HOJA GUÍA 6
TEXTOS EN MOVIMIENTO

ACTIVIDAD

ERIKA SALINAS DE LA CRUZ

 3ro HOJA GUÍA 7
SÍMBOLOS Y MÁSCARAS Es un efecto utilizado frecuentemente en páginas web. Dicho efecto consiste en ocultar objetos
que se encuentren en el escenario de Flash, y mostrarlos poco a poco, por algún objeto que tenga
una interpolación de movimiento o cualquier otro efecto que sea producto de tu imaginación.
Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos
proporciona Flash.
Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento
en que son creados, lo que permite que sean utilizados en varias ocasiones, ya sea en la misma
o en otra película.
CÓMO CREAR UN SÍMBOLO PASO A PASO: MÁSCARA EN IMAGEN
1. Seleccionamos el objeto que queramos convertir en un símbolo.
 En la capa 1 Importa una imagen
2. Menú Insertar →Insertar Nuevo Símbolo o directamente con las teclas Ctrl + F8 o F8.
 En la capa 2 Crea un Círculo
3. Aparecerá una ventana como en la imagen. Introducimos el nombre del símbolo que vamos a  Convierte el (círculo) en Símbolo de Tipo Gráfico
crear, y que nos permitirá identificarlo en la biblioteca.  Inserta Fotograma Clave (40) en las 2 capas
 En la Capa 2 en el fotograma 1 Posiciona el círculo sobre la imagen
 En el Fotograma 40 posiciona el círculo al final de la imagen para crear una animación en
1. Sólo nos queda seleccionar el tipo de símbolo al que queremos convertir nuestro objeto. la que el círculo se mueva sobre la foto
Podemos elegir entre Clip de Película, Botón y Gráfico. Lo más habitual es Clips de película  En el fotograma 1 en el panel Propiedades __ en Animar __ seleccionar la opción
para los objetos que queremos mostrar en el escenario y Botón si queremos que actúe como Movimiento.
tal.  Una vez que tengas la animación hecha, convierte la capa “CIRCULO” en MÁSCARA.
2. Bastará con pulsar Aceptar para tener nuestro símbolo creado.
PASO A PASO: MÁSCARA EN TEXTO

 En la capa 1 _ Fotograma 1 _ Seleccionar la Herramienta Texto

 En el panel propiedades _ Seleccionar la opción de Texto Estático, cambiar el tipo,
tamaño y color de Texto
 Escribir el texto
 Insertar la capa 2
 Seleccionar la herramienta Rectángulo y dibujar con dimensiones parecidas al texto
 Convertir el rectángulo en Símbolo __ de Tipo Gráfico
 Insertar fotograma clave (40) __ en las 2 capas
 En la capa 2 __ en el último fotograma Mover el rectángulo al final del Texto para crear
el efecto de movimiento.
 Seleccionar el fotograma 1 __ y en el panel Propiedades seleccionar en la casilla Animar
la opción Movimiento.
 Hacer clic secundario en la capa 2 y selecciona la opción Máscara.

ACTIVIDAD

ERIKA SALINAS DE LA CRUZ

 ACTIVIDAD

3ro HOJA GUÍA 8

EFECTOS SOBRE ANIMACIONES

ERIKA SALINAS DE LA CRUZ

3ro HOJA GUÍA 9
IMPORTANDO GIFS Y SONIDO

ERIKA SALINAS DE LA CRUZ