Guia 2 flash_11_3

1. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11 TERCER PERIODO
Elaborado por: Ing. Haimer Gutierrez M. .
TEMA: TEMA: FLASH
COMPETENCIA: Utiliza de manera creativa el programa Flash en el diseño de animaciones y
material multimedia
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 más o menos como se realizan las
caricaturas o dibujos animados,ya ven que para estorealizan 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.
EJEMPLO ANIMACION CUADRO A CUADRO
Veamos un ejemplo:
Abrir 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 TERCER PERIODO
Elaborado por: Ing. Haimer Gutierrez M. .
A continuación nos dirigimos a la línea de tiempo, e insertamos otro fotograma clave / key
frame aparte del que ya está (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 círculo, y lo
movemos un poco a la derecha, vamos a la línea de tiempo e insertamos otro fotograma
clave (F6), 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 TERCER PERIODO
Elaborado por: Ing. Haimer Gutierrez M. .
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ónde Insertar / Insert, escoges la opción de Convertir en símbolo / convert
to symbol, y la segunda forma es la más 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 TERCER PERIODO
Elaborado por: Ing. Haimer Gutierrez M. .
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 más adelante), “Registro”
también lo dejamos comoesta, 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 dónde 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 qué 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. Y por último, 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 número 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
él, en el menú contextual que emerge seleccionaremos la opción de “create motion tween

5. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11 TERCER PERIODO
Elaborado por: Ing. Haimer Gutierrez M. .
/ 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
número uno, hasta el número 40, esta flecha indica la interpolación de movimiento, pero en
si ¿qué 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 último, 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 qué 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.
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 número 15.
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.

7. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11°
Elaborado por: Ing. HAIMER GUTIERREZ M.
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 “RUTA DE ANIMACIÓN – CAPA GUÍA”.
Lo que vamos a realizar es colocar varias capas para practicar mucho, estos son
movimientos básicos para luego poder trabajar tranquilamente en flash. Vamos a un
nuevo documento y colocamos una figura diseñada por cada estudiante 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:

8. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11°
Elaborado por: Ing. HAIMER GUTIERREZ M.
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”.
- Cada estudiante diseña un gráfico y lo coloca en el escenario (capa 1) y en el
fotograma 1
- 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)
- 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 LA INFORMACION PROPORCIONADA EN LA GUIA SE PROPONE QUE HAGA LA
ANIMACION DE UNA ANIMACION QUE REPRESENTE A UN DEPORTE. POR EJEMPLO UN
PARTIDO DE TENIS ANIMANDO UNA JUGADA, O UN PARTIDO DE BASQUET O FUTBOL.
SE DEBE PINTAR UNA CANCHA EN UNA CAPA, POR LO MENOS DOS JUGADORES EN
OTRA CAPA, Y EL ELEMENTO DE JUEGO EN OTRA CAPA.