jhdjdnd

1. 1-1-2015 Cuadernillo de
prácticas
Flash
Manuelita Parra
COLEGIO DE BACHILLERES EMSAD X PICHIL

2. Contenido
Practica 1. Mi primera Animación..............................................................................3
Practica No.2 animación fotograma a fotograma ....................................................5
Practica No.3 Pecera...................................................................................................8
Practica No.4 El vuelo del águila.............................................................................12
Practica No.5 La rueda que gira...............................................................................14
Practica No. 6 Interpolación de cambio de color: el fantasma ............................16
Practica No. 7 Animación fotograma a fotograma con imágenes .......................18
Recursos Web................................................................................................................20

3. Practica 1. Mi primera Animación
Objetivo. Que el alumno cree fotogramas y la interpolación de movimiento.
Conocimientos: Fotograma clave, Interpolación de movimiento, creación de símbolos
para la biblioteca, creación de capas
Intrucciones:
 Crear un fotograma para una animación
 Con la barra de herramientas, seleccione la herramienta Rectángulo y elija un
tono azul para el relleno. Haga clic en el botón Dibujo de objeto, en la zona de
Opciones de la barra de herramientas.
 Utilizando el ratón, trace un rectángulo en la escena. Para ello debe mantener
presionado el botón del ratón mientras lo desplaza.
 Para animar el rectángulo con mayor facilidad lo convertiremos en un símbolo,
para ello seleccione la opción Convertir en símbolo tipo gráfico del menú
Modificar, en la barra de menús. En el cuadro de diálogo que aparece pulse el
botón Aceptar. Más adelante aclararemos el concepto de símbolos.
 Pulse en el menú Insertar de la barra de menús y seleccione la opción Línea de
tiempo>Capa. Así obtendremos una segunda capa en la línea de tiempo.
 Seleccione la herramienta Texto en la barra de herramientas y elija el color
blanco para el relleno.
 En el menú Texto de la barra de menús seleccione la opción Tamaño y escoja
24. También puede modificar la fuente en ese mismo menú.
 Haga clic en la escena y escriba el texto “Trabajando con Flash”.
 Cuando termine de escribir el texto, seleccione la herramienta Flecha (la flecha
negra) en la barra de herramientas.
 Crear una animación
 En la línea de tiempo seleccione las dos casillas de la posición 20 arrastrando el
ratón sobre ellas mientras mantiene pulsado el botón del ratón.
 En el menú insertar de la barra de menús seleccione la opción Línea de
tiempo>Fotograma clave.
 Haga clic en cualquier lugar de la escena para quitar la selección.
 Haga clic sobre el texto para seleccionarlo y a continuación arrástrelo hacia la
derecha.
 Seleccione la escena 1 de la segunda capa (la que contiene el texto) haciendo
clic sobre su nombre en la línea de tiempo.
 En el menú insertar de la barra de menús seleccione la opción Línea de
tiempo>Crear interpolación de movimiento.
 Para ver la animación pulse la tecla Intro.

4.  Guarde el archivo con el nombre: Practica1

5. Practica No.2 animación fotograma a fotograma
Objetivo: El alumno creará una animación con la técnica fotograma a fotograma.
Conocimientos: Fotograma, herramientas básicas de dibujo, papel cebolla.
Instrucciones:
1. Abrir flash documento de flash
2. Inserta una segunda capa y cambia los nombre de la siguiente forma: capa1:
Base y capa2:Dibujos
3. Seleccionamos la capa base y con la herramienta rectángulo la dibujamos
4. Ahora vamos a definir la duración de nuestra animación. Para esto
seleccionamos la capa base y manteniendo apretado el clic izquierdo
arrastramos el cursor hasta por ejemplo 50 (cualquier cosa después lo pueden
estirar más), suelta el cursor, hacer clic derecho en el final de lo que creamos y
ponen "Insertar fotograma".

6. 5. Ahora en la capa de dibujos hacen lo mismo pero al hacer clic derecho,
seleccionan "Convertir en fotogramas claves vacíos". Así debe quedar:
6. Selecciona el primer fotograma de la capa dibujos para empezar a dibujar ahí.
Clic en la herramienta pincel y en la opción "Papel cebolla" (esto sirve para que
mientras vayamos dibujando en los distintos fotogramas, tengamos una guía de
cómo dibujamos en el anterior y así quede más prolijo.
7. Ahora dibujen un tipo, recuerda estar en el primer fotograma de la capa dibujo
8. Ahora, pasamos al siguiente fotograma o al fotograma 2. Para esto hacemos clic
en el fotograma que le sigue al que ya trabajamos y dibujamos el siguiente

7. movimiento del tipito (van a ver que se marca en gris nuestro dibujo anterior para
que tengamos una idea de cómo seguir). En este caso voy a hacer que el tipito
levante los brazos así que se los dibujé un poco más levantados que antes. No
hace falta exactitud, después cuando reproduzcamos la animación casi ni se va
a notar. Este paso se repite hasta terminar los 50 fotogramas.
Al dibujar toda la secuencia de movimientos basta con guardar y correr nuestra mi
primera animación fotograma a fotograma.

8. Practica No.3 Pecera
Objetivo. Crear animaciones utilizando la técnica de interpolación de movimiento.
Duración. 50 minutos
Conocimientos previos
 Que es un fotograma
 Que es una capa
 Manejar la barra de herramientas de Flash
Que aprenderemos
 A trabajar con la biblioteca de símbolos
 Insertar objetos de la biblioteca
 Insertar capas y fotogramas claves
 Crear animaciones por interpolación de movimiento
 Desplazar fotogramas a través de la línea del tiempo de flash
Actividades
Da clic para acceder al archivo final
1. Para comenzar a trabajar con este archivo debes descargar, a tu carpeta de
trabajo o USB, el archivo “pecera.fla”. Este archivo servirá de base para
realizar todas las actividades de la práctica.
2. Abre el archivo utilizando el programa Flash.
3. Abre la biblioteca de símbolo (control + L)
En la biblioteca encontrarás las ilustraciones que utilizaremos para realizar el ejercicio.
4. Coloca el símbolo “pecera” en la capa 1,
5. Inserta una nueva capa. Para ello ve al menú insertar/capa.
6. Coloca en la nueva capa el símbolo “pez”. Para realizar esta operación arrastra el
símbolo a la capa.

9. 7. Ajusta el tamaño del símbolo en función de las porciones de la pecera. Busca en la
barra de herramientas la opción escalar, luego ajusta el tamaño del pececito. Sino está
disponible en la barra de herramientas ve al menú Ventana/barra de
herramientas/principal.
8. Una vez colocados los símbolos en la línea del tiempo necesitamos establecer el
tiempo de duración de nuestra animación. El tiempo lo mediremos en número de
fotogramas, en este caso nuestra animación durará 20 fotogramas. Para insertar el
número de fotogramas a cada capa debemos: colocarnos en el fotograma terminal, en
este caso 20, luego presionar la tecla “F6”. Al teclear “F6” insertamos un fotograma
clave. Los fotogramas claves se utilizan en Flash para indicar que ese fotograma tendrá
cualidades especiales o terminales. Por ejemplo: si en el fotograma 1 el pececito está
ubicado en el extremo derecho de la pantalla y queremos que se desplace al extremo
izquierdo, el fotograma 20 deberá ubicar a este objeto en esa posición. Observa las
ilustraciones que siguen. Una vez colocado el fotograma clave arrastra el pececito al
extremo izquierdo de la pecera, sigue el ejemplo de la ilustración.

10. 9. Una vez colocados los pececitos en sus posiciones de inicio (fotograma 1) y final
(fotograma 20) procederemos a utilizar una de las potentes de Flash “La interpolación
de movimiento”. La interpolación crea la secuencia de objetos entre la posición inicial y
final.
10. Para crear la interpolación de movimiento haz clic sobre la “capa 1” (seleccionando
todos los fotogramas 1-20) luego presiona el botón derecho del mouse y busca en el
menú la opción “Crear interpolación de movimiento”. Observarás como la línea de los
fotogramas se transforma en una línea de color morado con una flecha dentro. Presiona
la tecla “enter para ver los resultados”.
11. Hemos creado la animación del pececito de un lado al otro de la pecera, pero creo
que sería bueno hacer que el pez se devuelva a su posición de origen. Para crear esta
parte de la animación debemos modificar el símbolo del pez (voltearlo). Para rotar el pez
podemos utilizar distintas opciones, pero ahora utilizaremos una que implicará el
aprendizaje de otras funciones de Flash.
Entra en la ventana de la biblioteca de símbolos (Control+L)>selecciona el símbolo
“pez”>Presiona el botón derecho del ratón>en el menú desplegado selecciona
“Duplicar”, así crearas una copia del símbolo original. Observa la gráfica a continuación.
12. Ahora debemos editar el nuevo símbolo, reflejarlo horizontalmente. Para realizar
este paso debemos:
a. Hacer “doble Clic” sobre el símbolo duplicado.
b. Selecciona el pez
c. Ir al menú Modificar>Transformar> y seleccionar “Voltear horizontalmente”.
d. Al finalizar da clic en escena 1
13. Una vez duplicado el pececito y transformado podemos crear la animación inversa.
Para ello debemos seguir los siguientes pasos:
a. Insertar una capa nueva.
b. Arrastra el símbolo “Pez copia ” a la nueva capa. Ajusta su tamaño y
posición, así como se muestra en el siguiente ejemplo:
Fotograma1 Fotograma20

11. c. Debes crear un fotograma clave en la posición 21 de la nueva capa, después crea un
fotograma clave en la posición 40, quedando de la siguiente forma:
d. Posiciona tu cursor entre el fotograma 21 y 40 y crea la interpolación de movimiento.
e. Finalmente aumenta los fotogramas de la capa 1 a 40.
f. presiona la tecla Control + Enter para ver el resultado.
14. Guarda el archivo en carpeta de bloque 1 como practica3_pecera.fla.
Fotograma21 Fotograma40

12. Practica No.4 El vuelo del águila
Objetivo. Crear animaciones utilizando la técnica de interpolación de movimiento.
Duración. 50 minutos
Conocimientos previos
 Que es un fotograma
 Que es una capa
 Manejar la barra de herramientas de Flash
Que aprenderemos
 A trabajar con la biblioteca de símbolos
 Insertar objetos de la biblioteca
 Insertar capas y fotogramas claves
 Crear animaciones por interpolación de movimiento
 Desplazar fotogramas a través de la línea del tiempo de flash
Instrucciones
Da clic para acceder al archivo final
En la interpolación de movimiento, el diseñador define la posición, el tamaño y la
rotación de un objeto sobre el escenario en un fotograma clave inicial. Estas
propiedades las modifica en el fotograma final. Flash generará sobre el escenario la
secuencia de transición de un estado a otro.
Símbolo del águila sobre el escenario
En este ejemplo vamos a diseñar el vuelo de un águila.
1. Para comenzara trabajar con este archivo debes descargar,
a tu carpeta de trabajo o USB, el archivo “aguila.fla”. Este
archivo servirá de base para realizar todas las actividades
de la práctica.
2. Abre el archivo utilizando el programa Flash.
3. Cambia el nombre de la Capa 1 por “aguila” y en ella sitúa en la posición No.1 un
fotograma clave vacío.
4. Arrastra una instancia del símbolo gráfico Águila desde la biblioteca (control + L). Sitúa el
águila en la esquina inferior izquierda del escenario. Observa el fotograma clave ahora
muestra un punto negro indicando que ya contiene una imagen.
5. Crea un segundo fotograma clave (fotograma clave final) donde desees que concluya la
animación. Por ejemplo, haz clic sobre el fotograma nº 30 de esa capa. Una vez
seleccionado, elige la opción Insertar > Línea de tiempo > Fotograma Clave. Otra opción
es hacer directamente clic derecho sobre el fotograma nº 30 y seleccionar Insertar
fotograma clave en el menú contextual que se despliega. Flash automáticamente rellena
ese nuevo fotograma clave con el contenido del anterior.
6. Asegúrate que está seleccionado el fotograma nº 30. Ahora pincha y arrastra el águila para
moverlo hasta la esquina superior derecha del escenario.
7. También puedes reducir su tamaño. Utiliza la herramienta Transformación libre (Q) y su
opción Escalar. Arrastra el selector de la esquina superior derecha del águila.
8. Advierte que los cambios de posición y tamaño sólo afectan al fotograma clave nº 30. Al
hacer clic en la línea de tiempo sobre el fotograma clave nº 1, se observa la posición y
tamaño inicial del objeto.

13. 9. Clic sobre el fotograma clave nº1. Si el Inspector de Propiedades no está visible,
selecciona Ventana > Propiedades.
10. En la lista desplegable Animar del Inspector de propiedades selecciona Movimiento. Éste
es el tipo de interpolación que vamos a utilizar.
11. Activa la casilla Escalar para interpolar el cambio de tamaño del elemento seleccionado.
12. En la casilla Aceleración arrastra el deslizador o introduce un valor para ajustar la
velocidad del cambio entre fotogramas interpolados:
 Para empezar la interpolación de movimiento lentamente y acelerar hacia el final
de la animación, arrastra el deslizador hacia abajo o introduce un valor entre -1
y -100. Nota que aparece la etiqueta Dentro
 Para empezar la interpolación de movimiento rápidamente y ralentizar hacia el
final de la animación, arrastra el deslizador hacia arriba o introduce un valor
entre 1 y 100. Aparece la etiqueta Fuera. La velocidad de cambio
predeterminada entre los fotogramas interpolados es constante. La opción
Aceleración crea una apariencia más natural de aceleración o ralentización
ajustando gradualmente la velocidad de cambio.
13. Al concluir estas tareas en la capa actual los fotogramas clave están indicados por un
punto negro mientras que los fotogramas intermedios muestran una flecha negra sobre
fondo azul claro.
Representación de una animación de movimiento por interpolación en la línea de tiempo
Si se elimina el fotograma clave final esta flecha se transforma en una línea discontinua
No hay interpolación porque falta fotograma final
14. Para visualizar la animación resultante selecciona Control > Reproducir o bien Control >
Probar Película.
15. Guarda el archivo en tu carpeta del bloque 1 como “practica4_aguila”.
Nota: El objeto que se anima por interpolación debe encontrarse solo en una capa. Es
posible animar simultáneamente varios objetos sobre el escenario si se sitúa cada uno
en una capa distinta. Esta es la razón más importante que justifica el uso de capas
en Flash.

14. Practica No.5 La rueda que gira
Objetivo. Crear animaciones utilizando la técnica de interpolación de movimiento.
Duración. 50 minutos
Conocimientos previos
 Que es un fotograma
 Que es una capa
 Manejar la barra de herramientas de Flash
Que aprenderemos
 A trabajar con la biblioteca de símbolos
 Insertar objetos de la biblioteca
 Insertar capas y fotogramas claves
 Crear animaciones por interpolación de movimiento
 Desplazar fotogramas a través de la línea del tiempo de flash
Instrucciones
En este ejemplo diseñaremos una animación en la cual una rueda gira y aumenta de
tamaño.
Da clic para acceder al archivo final
1. Para comenzar a trabajar con este archivo debes descargar, a tu carpeta de
trabajo o USB, el archivo “rueda.fla”. Este archivo servirá de base para realizar
todas las actividades de la práctica.
2. Abre el archivo utilizando el programa Flash
3. Abre la biblioteca (Control + L). Arrastra una instancia de un símbolo
denominado “rueda” en fotograma 1 de Capa 1. Sitúalo en el centro del
escenario.
4. Crea un segundo fotograma clave donde desees que termine la animación. Clic
sobre el fotograma nº 30, por ejemplo, de esa capa. Una vez seleccionado elegir
la opción Insertar > Línea de tiempo > Fotograma clave o bien clic derecho para
seleccionar Insertar fotograma clave.
5. Asegúrate que está seleccionado el fotograma nº 30. Ahora utilizando el
panel Transformar vamos a realizar algunos cambios en esta rueda del fotograma
clave final. Selecciona Ventana > Transformar.
6. Activa la casilla Restringir para que el aumento de escala sea proporcional en altura
y anchura. Introduce el valor 200% en Escala y 180 grados en Girar. Para concluir
pulsa la tecla <enter> y cierra el panel Transformar.
Modificación de la escala y giro de la
instancia usandoel panel Transformar
7. Clic para volver a seleccionar el fotograma nº1 en la línea de tiempo.
Selecciona Insertar > Línea de tiempo > Crear interpolación de movimiento. Al
concluir estas tareas en la capa actual los fotogramas clave están indicados por un

15. punto negro mientras que los fotogramas intermedios muestran una flecha negra
sobre fondo azul claro.
8. Para visualizar la animación seleccionar Control > Reproducir o bien Control >
Probar Película
9. Si deseas modificar algún parámetro de la animación por interpolación, clic sobre el
fotograma clave inicial y realiza los cambios oportunos sobre el Inspector de
Propiedades.
10. Pulsa y arrastra el deslizador de la casilla Aceleración o introduce un valor para
ajustar la velocidad del giro entre fotogramas interpolados: Para empezar la
interpolación de movimiento lentamente y acelerar la interpolación hacia el final de la
animación, arrastra el deslizador hacia abajo o introduce un valor entre -1 y -100.
(dentro). Para empezar la interpolación de movimiento rápidamente y ralentizar la
interpolación hacia el final de la animación, arrastre el deslizador hacia arriba o
introduce un valor entre 1 y 100. (fuera)
La velocidad de cambio predeterminada entre los fotogramas interpolados es
constante. La opción Aceleración crea una apariencia más natural de aceleración o
ralentización ajustando gradualmente la velocidad de cambio.
Inspector de propiedades del fotograma inicial
11. Elige una opción de la lista desplegable Girar:
 Ninguno: Es la configuración predeterminada. Para no aplicar ninguna rotación.
 Auto (Automática): para girar el objeto una vez en la dirección que requiera el
movimiento menor.
 Horario u Antihorario (Sentido de las agujas del reloj o sentido contrario): para
girar el objeto como corresponda y luego introduce un número en la
casilla veces para especificar el número de rotaciones.
Por ejemplo 2 veces. Estas 2 opciones permiten alterar el sentido del giro.
12. Para visualizar la animación resultante selecciona Control > Reproducir o
bien Control > Probar Película. A continuación vamos a añadir un nuevo movimiento
13. Clic en fotograma nº50 e inserta un fotograma clave mediante Insertar > Línea de
tiempo > Fotograma Clave.
14. Nota que la rueda aparece seleccionada en este nuevo fotograma clave.
Selecciona Ventana >Transformar.
15. En el panel Transformar, activa la casilla Restringir para que la disminución de
escala sea proporcional en altura y anchura.
16. Restaura el valor 100 en Escala y deja el valor 180 introducido con anterioridad.
Para concluir pulsa la tecla <enter> y cierra el panel Transformar.
17. Clic en el fotograma clave situado en el fotograma nº 30 e introduce una interpolación
de movimiento mediante Insertar > Línea de tiempo > Crear interpolación de
movimiento.

16. 18. Da clic sobre el inspector de propiedades y elige la opción girar>Antihorario 2
veces
19. Para ver la animación completa selecciona Control > Reproducir o bien Control >
Probar película. Guarda el archivo en tu carpeta del bloque 1 como “practica5_rueda”.
Practica No. 6 Interpolación de cambio de color: el fantasma
Objetivo. Crear animaciones utilizando la técnica de interpolación de movimiento.
Duración. 25 minutos.
Conocimientos previos
 Que es un fotograma
 Que es una capa
 Manejar la barra de herramientas de Flash
Que aprenderemos
 A trabajar con la biblioteca de símbolos
 Insertar objetos de la biblioteca
 Insertar capas y fotogramas claves
 Crear animaciones por interpolación de movimiento
 Desplazar fotogramas a través de la línea del tiempo de flash
 Propiedad de color alpha
Instrucciones
En este ejemplo diseñaremos una animación en la cual una rueda gira y aumenta de
tamaño.
Da clic para acceder al archivo final
En este ejemplo, diseñaremos una animación en la cual un fantasma
desaparece o cambia de color.
1 Arrastra una instancia de un símbolo desde la Biblioteca el símbolo
gráfico Fantasma. Sitúalo en el centro del escenario.
2 Crea un segundo fotograma clave donde desees que termine la animación. Clic
sobre el fotograma nº 30, por ejemplo, de esa capa. Una vez seleccionado elegir la
opción Insertar > Línea de tiempo > Fotograma clave o bien clic derecho para
seleccionar Insertar fotograma clave. Advierte que este fotograma está
seleccionado. En el Inspector de Propiedades aparece la información relativa al
Fotograma seleccionado.
3 Haz clic sobre la instancia del fantasma en el fotograma nº30. El Inspector de
propiedades ahora muestra la información de la instancia seleccionada y no del
fotograma.

17. 4 En el menú desplegable Color selecciona la opción Alfa .Pincha y arrastra el deslizador hasta el 0%.
Nota que el fantasma se ha hecho invisible.
Otro efecto distinto puede ser con la opción Tinta, 50% y tinta de color rojo.
5 Clic para volver a seleccionar el fotograma inicial en la Línea de Tiempo.
Selecciona Insertar > Línea de tiempo > Crear interpolación de movimiento.
6 Para visualizar la animación seleccionar Control > Reproducir o bien Control > Probar Película.

18. Practica No. 7 Animación fotograma a fotograma con imágenes
Objetivo. Crear animaciones utilizando la técnica de fotograma a fotograma.
Duración. 50 minutos.
Conocimientos previos
 Que es un fotograma
 Que es una capa
 Manejar la barra de herramientas de Flash
Que aprenderemos
 A trabajar con la biblioteca de símbolos
 Insertar objetos de la biblioteca
 Insertar capas y fotogramas claves
 Desplazar fotogramas a través de la línea del tiempo de flash
Instrucciones
En la animación fotograma a fotograma se cambia el contenido del escenario en cada fotograma. Es
idóneo para las animaciones complejas en las que la imagen cambia en cada fotograma además de
moverse. Este tipo de animación genera archivos más grandes que por interpolación.
Da clic para acceder al archivo final
1. Arrastra una instancia del símbolo dance01 desde la biblioteca.
2. Con la instancia de dance01 seleccionada en el escenario, introduce 100 como valores en
las casillas X e Y del Inspector de propiedades. De esta forma este elemento se situará en
un mismo sitio del escenario.
Sitúa con precisión el objeto introduciendo las coordenadas X e Y
3. Clic en el siguiente fotograma hacia la derecha de la misma capa. Selecciona Insertar > Línea
de tiempo > Fotograma clave vacío o bien clic derecho sobre el fotograma para seleccionar
la opción Insertar fotograma clave vacío en el menú contextual. Repite los pasos 1 y 2 para
ir insertando en cada nuevo fotograma clave un nuevo símbolo de la carpeta Baile: dance02,
dance03, etc. hasta crear el movimiento completo. Nota. Esta animación contiene 29 fotogramas
4. Para visualizar la animación completa seleccionar Control > Reproducir o bien Control >
Probar Película.

19. Detalle de la línea del tiempo de una animación fotograma a fotograma

20. Recursos Web
http://www.ite.educacion.es/formacion/materiales/34/cd/curso/cap12/cap12.htm
http://aprendeenlinea.udea.edu.co/lms/moodle/mod/resource/view.php?inpopup
=true&id=42693