Este documento presenta varias guías para animación en Flash, incluyendo animación cuadro a cuadro, interpolación de movimiento usando símbolos, animación de forma, y uso de capas guía. Explica conceptos como fotogramas clave, línea de tiempo, y biblioteca de símbolos. También incluye ejemplos prácticos de cómo crear diferentes tipos de animaciones en Flash.

1. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11
Elaborado por: Ing. Haimer Gutierrez M. Octubre de 2015.
TEMA: FLASH, MOVIE MAKER Y PHOTOSHOP
COMPETENCIA: DISEÑA PRESENTACIONES WINDOWS MOVIE MAKER, FLASH Y
PHOTOSHOP INTEGRANDO TEXTOS, IMÁGENES SONIDO Y VIDEOS DE MANERA
EFICIENTE ACORDE A TEMAS PROPUESTOS.
GUIA NO 2.
EXPLICACION ANIMACIÓN CUADRO A CUADRO.
Para empezar vamos a ver lo que todos deseamos cuando iniciamos nuestra aventura en
Flash, “el movimiento de un objeto” (esto puede ser cualquier cosa que tengamos sobre
el escenario), un objeto, una imagen, texto, lo que sea.
Tenemos dos clases de movimiento las cuales llamaremos cuadro a cuadro / frame to
frame, e interpolación de movimiento / motion tween.
Empecemos por la animación cuadro a cuadro:
Este tipo de animación todos la conocemos, es mas o menos como se realizan las
caricaturas o dibujos animados, ya ven que para esto realizan un dibujo, y después
realizan el mismo dibujo pero un poco diferente, y así sucesivamente, después los hacen
pasar todos muy rápido, y esto nos da una sensación de movimiento, bueno pues esto
es lo que se hace en flash para hacer una animación cuadro a cuadro, solo que aquí no
tenemos que volver a dibujar la misma imagen varias veces, si no, que podemos trabajar
con la misma, solo que la iremos modificando poco a poco.
Veamos un ejemplo:
Abran un archivo nuevo en flash, ahora dibujemos un circulo, como se muestra en la
imagen, utilizando la herramienta de ovalo.

2. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11
Elaborado por: Ing. Haimer Gutierrez M. Octubre de 2015.
A continuación nos dirigimos a la línea de tiempo, e insertamos otro fotograma clave / key
frame aparte del que ya esta (ya saben, puede ser con F6, o clic derecho, insertar
fotograma clave), entonces tenemos dos fotogramas claves en la línea de tiempo, el
primero es donde tenemos el circulo como aparecerá inicialmente, ahora damos clic en el
segundo fotograma de modo que quede seleccionado, nos dirigimos al circulo, y lo
movemos un poco a la derecha, vamos a la línea de tiempo e insertamos otro fotograma
clave, y movemos otro poco el circulo a la derecha, así repetimos esta acción como unas
diez veces, hasta que nuestro circulo quede del otro lado del escenario.
Ahora si, tenemos nuestro primer movimiento cuadro a cuadro, a continuación lo que
tenemos que hacer es presionar y mantener presionada la tecla Control y presionar
enseguida Enter (sin soltar control hasta que se haya presionado enter) para ver tu
película en acción, la película va a realizar un ciclo, esto es que tu animación se va a estar
repitiendo y repitiendo sin fin, después de ver tu animación, puedes presionar control + W
para terminarla, o dar clic en la cruz superior de la derecha.
EXPLICACION INTERPOLACIÓN DE MOVIMIENTO
Para comenzar vamos a ver primero lo que es un símbolo / symbol, para poder trabajar con
interpolación de movimiento en flash tenemos que utilizar símbolos, los cuales podemos
crearlos convirtiendo objetos que tengamos en nuestro escenario (de objeto a símbolo), o
crearlos vacíos y posteriormente insertarles algo. Vamos a ver los que creamos convirtiendo
un objeto en símbolo.
Volvamos a dibujar la misma pelota (circulo) pero en una nueva película, al igual que en el
ejemplo anterior.

3. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11
Elaborado por: Ing. Haimer Gutierrez M. Octubre de 2015.
Nota: Cuando nosotros le ponemos Crear interpolación de movimiento / create motion
tween, automáticamente Flash nos convierte nuestro objeto (que en este caso es el
circulo) en un símbolo, pero esto no es conveniente manejarlo así, así es que mejor
nosotros crearemos nuestro propio símbolo para poder definirle un nombre y tipo de
símbolo que queremos que sea.
Ahora que ya tenemos nuestra pelota, utilizaremos la herramienta flecha / arrow tool, y
seleccionaremos la pelota dando clic en un lado de ella y arrastrándolo hasta cubrirla de
esta manera:
y al soltar el clic del Mouse se verá así:
Esto es porque el círculo lleva relleno y línea en el borde, y si solo le damos un clic puede
ser que solo seleccionemos uno de los dos.
Existen dos maneras de convertirla en símbolo, la primera es ir al menú en la parte de
arriba, en la sección de Insertar / Insert, escoges la opción de Convertir en símbolo /
convert to symbol, y la segunda forma es la mas fácil, solamente después de que
tenemos el objeto seleccionado tenemos que presionar F8 y listo, automáticamente
después de cualquier de las dos formas pasadas veremos esta ventana:

4. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11
Elaborado por: Ing. Haimer Gutierrez M. Octubre de 2015.
Aquí es donde le daremos el nombre a nuestro símbolo, en la parte donde dice Nombre /
“Name”, colocaremos el nombre que le deseamos dar a nuestro símbolo, que en este
caso será “pelota”, dejamos el “Tipo” como esta, en clip de película (de esto dependen
las propiedades que va a tener nuestro símbolo, pero eso lo veremos mas adelante),
“Registro” también lo dejamos como esta, ya que este caso no lo vamos a utilizar, el
Registro es como si le pusieras un clavo a tu símbolo, y al momento que quieres
modificarlo a escala (el tamaño), es hacia donde va a crecer, crecerá al lado contrario de
donde le pones el clavo. Muy bien, ahora después de ponerle el nombre demos clic en
OK, y nuestra pelota se verá así:
Si la pelota se ve de esta manera, ya tenemos un símbolo clip de película.
Nota: Al momento que se crea el símbolo o clip de película, pasa algo que te ayuda de
mucho, automáticamente este se agrega a tu biblioteca. ¿Y que es la biblioteca? la
Biblioteca es una parte de flash, en donde se van guardando todos los símbolos que
utilizamos en la película, de modo, que si necesitamos otra pelota, no tengamos que
volver a dibujarla, si no, solamente tienes que insertarla desde la biblioteca, talvez con la
pelota no parece tan maravilloso, pero que tal si tenemos un auto con el cual tardamos 3
horas dibujándolo, y ahora solo es cuestión de insertarlo de nuevo, pero esto no es todo,
además, se puede importar bibliotecas que se hicieron en otras películas, eso es un
auxilio muy grande, pero bueno, esto se entenderá mejor cuando se empiece a trabajarlo.
Y por ultimo, para ver la biblioteca, el acceso rápido es presionando (Control + L, o F11)
Muy bien, ahora que ya tenemos nuestro símbolo, vamos a ver la interpolación de
movimiento / motion tween:
En este momento tenemos nuestra línea de tiempo de esta manera:
A continuación vamos a dar clic derecho en el frame / fotograma numero 40 de nuestra
línea de tiempo, y en el menú contextual que sale, vamos a dar clic en la opción de
“insert frame / insertar fotograma”, y nuestra línea de tiempo lucirá así:
Dirigimos el puntero del mouse al primer frame / fotograma, y damos un clic derecho sobre
el, en el menú contextual que emerge seleccionaremos la opción de “create motion tween

5. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11
Elaborado por: Ing. Haimer Gutierrez M. Octubre de 2015.
/ crear interpolación de movimiento” y la línea del tiempo se rellenara con una
línea punteada así:
Ahora ya tenemos nuestra interpolación de movimiento, ya solo tenemos que indicar una
cosa, “el movimiento”, y esto se hace de la siguiente manera:
Demos un clic en el frame / fotograma numero 40, de modo que quede seleccionado
(esto lo sabemos porque queda sombreado, de color negro).
Ahora nos dirigimos al escenario / stage, y tomamos la bola con el puntero del ratón, la
arrastramos hasta el otro extremo del escenario / stage, que quede de esta forma:
Como pueden ver en la línea de tiempo se creó una flecha desde el frame / fotograma
numero uno, hasta el numero 40, esta flecha indica la interpolación de movimiento, pero
en si ¿que es lo que ocurre con esto?, pues solamente hacemos que flash trabaje por
nosotros, lo que pasa con la interpolación de movimiento es que nosotros solamente
indicamos el principio y el fin de nuestro símbolo, y FLASH CREA TODOS LOS FRAMES /
FOTOGRAMAS INTERMEDIOS, luego presionemos (Control + Enter) para reproducir la
película.
Por ultimo, colóquense en el fotograma 20 y arrastren la pelota un poco hacia abajo, verán
que se crea otro punto negro (key frame / fotograma clave) en la línea de tiempo, y ahora
son dos flechas, corran la película para ver que es lo que pasa. Sigan experimentando con
estos movimientos todo lo que quieran, y verán que solo depende de ustedes y sus ideas
para darles un buen uso.

6. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11
Elaborado por: Ing. Haimer Gutierrez M. Octubre de 2015.
EXPLICACION. ANIMACIÓN DE FORMA
Transformación de una figura en otra. Lo primero que vamos a hacer va ser crear una figura
en el primer fotograma. En este caso va a ser un círculo.
Lo siguiente que haremos va a ser pasar a algún fotograma aparte del otro y creamos
un fotograma clave. En este caso va a ser en el fotograma numero 15.

7. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11
Elaborado por: Ing. Haimer Gutierrez M. Octubre de 2015.
Ahora lo que haremos va a ser crear la siguiente imagen en el otro fotograma creado
(fotograma 15). Esta va a ser la figura a la que se va a transformar de la otra figura.
Finalmente vamos a ir a la línea de fotogramas 1 y 15 y seleccionaremos la opción de
Animar: Forma. Esto creara una pequeña animación de la primera figura a la segunda.
Con un efecto de transformación.
Nota: si al crear la animación de forma la línea de tiempo se rellenara con una línea
punteada es posible que al reproducir la película no ocurra la transformación. Para que
esto no suceda tenemos que convertir a cada símbolo en objeto editable, para ello
seleccionamos dicho símbolo y elegimos la opción del menú Modificar – separar y
realizamos esta acción las veces que sean necesarias tanto para símbolos o para textos.
EXPLICACION “RUTADE ANIMACIÓN – CAPA GUÍA”.
Lo que vamos a realizar es colocar varias capas para practicar mucho, acuérdense que
estos son movimientos básicos para luego poder trabajar tranquilamente en flash.

8. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11°
Elaborado por: Ing. HAIMER GUTIERREZ M. SEPTIEMBRE DE 2015
Vamos a un nuevo documento y colocamos una figura diseñada por cada estudiantes
en la capa uno, y obviamente, vamos a hacer doble click en la capa para cambiar de
nombre
A esa capa de la figura vamos a hacerle una simple interpolación de movimiento para
que la figura vaya de un lado a otro como en el ejercicio anterior (Ejercicio Nº2
“Interpolación de Movimiento”).
Fíjense que al lado del ícono donde tenemos para agregar capas, existe uno parecido
denominado guía de movimiento, esto significa que nos va a agregar una Capa Guía
de la Capa que tengamos seleccionada.
Entonces hacemos click en ese ícono y vamos a ver que automáticamente me dice,
Guía de Figura, y nos da una capa con la misma cantidad de fotogramas que el que
tiene la figura. En esa capa guía vamos a dibujar (con la herramienta lápiz), como
vemos en el gráfico, cualquier ruta, es decir, la figura va a hacer el recorrido que
dibujemos.
Vamos a notar que en forma automática la figura se coloca ya en la guía, así que
sólo nos queda colocar, con la herramienta flecha, la figura en el principio y en el fin
de la película, en el lugar correspondiente. Vean con detalle el gráfico:
Tengan en cuenta que, como hicimos en el ejercicio anterior (Ejercicio Nº2
“Interpolación de Movimiento”), también se pueden insertar fotogramas claves en
cualquier parte y colocarle efectos a la figura. Puede haber varias capas guiadas
pero no una guía de guía.
EJERCICIO 1 “RUTADE ANIMACIÓN – CAPA GUÍA”.
- Colocar un grafico en el escenario
- Dar doble clic en el grafico para seleccionarlo
- Convertir en símbolo (F8)
- Seleccionar el fotograma 36
- Insertar fotograma clave (F6)
- Crear interpolación de movimiento
- Agregar capa guía (en esta capa dibujaremos una línea que sirve como carril por el
cual se deslizara la animación)

9. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11°
Elaborado por: Ing. HAIMER GUTIERREZ M. SEPTIEMBRE DE 2015
- Seleccionar la herramienta lápiz (Barra de herramientas)
- Dibujar una línea indicando la ruta que debe seguir la animación
- Con la herramienta selección coloco el grafico al inicio de la línea
- Seleccione el último fotograma (capa 1)
- Colocar el grafico en el final de la línea
- Reproducir película.
EJERCICIO 2. COMBINACION DE ANIMACIONES.
1. EN UN NUEVO ARCHIVO DE FLASH, DISEÑE 4 CAPAS.
a. LA PRIMERA CAPA CONTIENE UN PAISAJE DE FONDO, DONDE LO
ATRAVIESA DE IZQUIERDA A DERECHA UNA AUTOPISTA O CALLE.
b. EN LA SEGUNDA CAPA TENEMOS UN AUTO – MOTOCICLETA O BICICLETA
QUE LO ATRAVIESA DE IZQUIERDA A DERECHA.
c. EN LA TERCERA CAPA TENEMOS UNA FORMA QUE ATRAVIESA EL PAISAJE
DE DERECHA A IZQUIERDA CAMBIANDO AL FINAL, PUEDE INICIAR COMO
POR EJEMPLO UNA ESTRELLA Y FINALIZAR COMO EL SOL.
d. EN LA CUARTA CAPA SE DIBUJA UNA PERSONA QUE SIGUE UNA GUIA DE
ANIMACION PARA DESPLAZARSE POR EL ESCENARIO, EL RECORRIDO
DEBE SER DE 5 SEGUNDOS(60 FOTOGRAMAS)
e. LA ANIMACION DEBE DURAR POR LO MENOS 10 SEGUNDOS REPITIENDO
LAS SECUENCIAS DESDE A HASTA D.
EJERCICIO 3. RETO.
CON LAS HERRAMIENTAS VISTAS DE ANIMACION EN FLASH SE PROPONE QUE
DESARROLLE UN LABERINTO CON DIFERENTES CAMINOS INTERNOS CON LA FORMA
QUE CADA ESTUDIANTE QUIERA CON UNA ENTRADA EN UN EXTREMO Y UNA SALIDA
EN OTRO EXTREMO DEMARCADA
LO RECORRE UNA FIGURA DE CUALQUIER TIPO, ENTRANDO POR LOS DIFERENTES
RECORRIDOS DEL LABERINTO HASTA ENCONTRAR LA SALIDA.