GRADO DECIMO - ANIMACION

MÓDULO
ANIMACION

PRIMERA UNIDAD
INTRODUCCION A MACROMEDIA FLASH

AUTOR:
ING. MARIO ALEJANDRO LONDOÑO

VILLAVICENCIO 2013

REGISTRO DEL ESTUDIANTE

NOMBRE DEL ESTUDIANTE : ______________________

1
 GRADO DECIMO - ANIMACION

____________________________________________________

PROGRAMA: ________________________________________

JORNADA: __________________________________________

NOMBRE DEL DOCENTE : ____________________________

FECHA : DEL __________ AL ___________

CALIFICACION: _______________________________________

_____________________
FIRMA DEL DOCENTE

2
 GRADO DECIMO - ANIMACION

TABLA DE CONTENIDO
PAG

ESTANDARES DE COMPETENCIAS.......................................................................4
PRESENTACION.......................................................................................................5
COMPETENCIAS......................................................................................................6
PRIMERA UNIDAD INTRODUCCIONA AL DISEÑO ASISTIDO POR
COMPUTADOR.........................................................................................................7
1. TEMA 1: HERRAMIENTAS BASICAS DE MACROMEDIA FLASH....................8
1.1 VENTANA PRINCIPAL...............................................................................................8
1.2 BARRA DE HERRAMIENTAS....................................................................................9
1.3 COMANDOS BASICOS.............................................................................................9
1.4 INICIEMOS CON FLASH.........................................................................................10
1.5 EJERCICIOS...........................................................................................................10
Ejercicio 1: PROPIEDADES DEL AREA DE TRABAJO.............................................10
Ejercicio 2: Diseño de formas.....................................................................................11
Ejercicio 3: Color de formas (Contorno y Relleno) I....................................................12
Ejercicio 4: Color de formas (Contorno y Relleno) II...................................................12
Ejercicio 5: Modificar Propiedades de los objetos......................................................13
Ejercicio 6: Herramienta texto....................................................................................14
Ejercicio 7: Manejo de Capas.....................................................................................14

3
 GRADO DECIMO - ANIMACION

PRESENTACION

En el mundo actual lleno de tecnología y procesos que mejoren la imagen

corporativa es normal escuchar la palabra animación que en el mundo
informático es el arte de darle movimiento a los objetos que hacen parte de
una presentación logrando efectos que nos separan de la realidad y nos
llevan a es fantástico mundo llamado animación.

En el proceso de desarrollar animaciones encontramos la línea de 2D (ancho

y alto) donde los objetos los vemos planos moviéndose dentro de un
espacio, por otra parte encontramos el mundo de la animación 3D (alto,
ancho y profundo) en este campo llegamos a ver la realidad diseñada en un
PC a ella pertenecen los juegos de alta gama.

4
 GRADO DECIMO - ANIMACION

PRIMERA UNIDAD INTRODUCCIONA AL DISEÑO ASISTIDO POR

COMPUTADOR

Adobe Flash Professional es el nombre o marca comercial oficial que recibe uno
de los programas más famosos de la casa Adobe, junto con sus hermanos Adobe
Illustrator y Adobe Photoshop. Se trata de una aplicación de creación y
manipulación de gráficos vectoriales con posibilidades de manejo de código
mediante un lenguaje de scripting llamado ActionScript. Flash es un estudio de
animación que trabaja sobre "fotogramas" y está destinado a la producción y
entrega de contenido interactivo para diferentes audiencias alrededor del mundo
sin importar la plataforma. Es actualmente desarrollado y comercializado
por Adobe Systems Incorporated y forma parte de la familia Adobe Creative
Suite, su distribución viene en diferentes presentaciones, que van desde su forma
individual ó como parte de un paquete, siendo estos: Adobe Creative Suite Design
Premium, Adobe Creative Suite Web Premium y Web Standard, Adobe Creative
Suite Production Studio Premium y Adobe Creative Suite Master Collection. Se
usa sobre animaciones publicitarias, reproducción de vídeos (como YouTube) y
otros medios interactivos que se presentan en la mayoría de sitios web del
mundo, lo que le ha dado fama a éste programa, dándoles el nombre de
"animaciones Flash" a los contenidos creados con éste.

PRUEBA INICIAL

Contestemos el siguiente conjunto de preguntas

 ¿Qué es un objeto?
 ¿Qué es estático?
 ¿A qué hace referencia objeto animado?
 ¿Dibuja en cuatro cuadros el proceso de una bola que cae de cierta altura
y rebota?

5
 GRADO DECIMO - ANIMACION

1. TEMA 1: HERRAMIENTAS BASICAS DE MACROMEDIA FLASH

En el proceso de la animación existe un gran número de herramientas de
software que nos permiten trabajar nosotros abordaremos la aplicación
Macromedia Flash.

1.1 VENTANA PRINCIPAL

6

1.2 BARRA DE HERRAMIENTAS
1.3 COMANDOS BASICOS
Ctrl + B: Separa.
F7: Convierte en un fotograma clave en blanco.
F6: Convierte a fotograma clave.
F8: Convierte a Símbolo.
Ctrl + Alt + C: Copia fotograma.
Ctrl + Alt + X: Corta fotograma.
Ctrl + Alt + G: Edita cuadrícula.
Ctrl + Alt + Shift + G: Edita las guias.
Ctrl +E: Edita Símbolo.
Ctrl + V: Pega el contenido.
Ctrl + Alt + V: Pega fotogramas.
Ctrl + Shift + V: Pega en la ubicación
seleccionada.
Ctrl + Intro: Inicia la película.
F12: Previsualiza la publicación de la película.
Ctrl + Shift + F12: Opciones de publicación.
Shift + F5: Elimina fotogramas.
Ctrl +Shift + (/): Ajusta los objetos.
(,): Fotograma anterior.
(.): Fotograma siguietne.
Ctrl + Alt + T: Muestra/Oculta la línea de tiempo.
GRADO DECIMO - ANIMACION
Ctrl + Alt + B: Habilita los botones simple.
Ctrl + Alt + F: Habilita acción de los
fotogramas.
F5: Inserta un fotograma
Ctrl + (;): Muestra/Oculta las guías.
F4: Muestra/Oculta todos los paneles.
Ctrl + R: Importa el escenario.
Ctrl + L o F11: Muestra/Oculta la librería.
Ctrl + Alt + L: Bloquea grupo.
Ctrl + Alt + (;): Bloquea las guias.
Ctrl + Alt + M: Mute/Silencio
Ctrl + F8: Inserta nuevo símbolo.
Ctrl + Shift + o: Abre una lirería externa.
Ctrl +Shift + Z: Deshace la
tranformación.
Ctrl + Alt + R: Rebobina la película.
Ctrl + Alt + S: Escalar y rotar.
Ctrl + Alt + A: Selecciona todos los
fotogramas.
Ctrl +Shift + (‘): Ajusta la cuadrícula.
Ctrl +Shift + (;): Ajusta las guias.
Ctrl + Alt + Shft + L: Desbloquea todo
7
 GRADO DECIMO - ANIMACION

1.4 INICIEMOS CON FLASH

Vamos a iniciar con el trabajo en Flash para ello realizaremos una serie de
ejercicios que nos ayudaran a reconocer los procesos de Flash.

1.5 EJERCICIOS

Ejercicio 1: PROPIEDADES DEL AREA DE TRABAJO

El color del fondo es esencial para crear la ambientación de la animación teniendo

claro lo que se pretende hacer.

Para cambiar el color de Fondo se procede de la siguiente forma

1. Hay dos opciones:

 Estando en el área de trabajo damos clic derecho sobre ella y

seleccionamos la opción propiedades del documento.
 La segunda es presionar CTRL + J.

2. Aparecerá el siguiente cuadro de dialogo

Ejercicio 2: Diseño de formas

8
 GRADO DECIMO - ANIMACION

La animaciones están compuestas de una serie de objetos casi todos ellos

basados en el diseño de formas geométricas, en Flash podemos realizar un gran
conjunto de figuras como los son cuadrados, triángulos, óvalos, círculos, estrellas
y aplicando cambios a estas generar nuevas formas.

Para diseñar figuras es muy sencillo:

1. Damos clic en la herramienta

2. Al hacer clic se desplegarán las diferentes formas para que seleccionemos

la que necesitamos.

3. Cuando seleccionamos la forma vamos al área de trabajo y con clic

sostenido diseñamos nuestra forma.

Ejercicio 3: Color de formas (Contorno y Relleno) I

9
 GRADO DECIMO - ANIMACION

Una forma está compuesta de dos partes fundamentales el contorno (líneas

externas) y el relleno (color interno)
Contorno
Relleno

Para modificar estas propiedades realizamos los siguientes pasos:

Antes de diseñar la forma damos clic en el respectivo icono de relleno y contorno

para modificar las tonalidades:

Contorno

Relleno

Después de modificadas estas propiedades diseñamos la forma.

Ejercicio 4: Color de formas (Contorno y Relleno) II

Para lograr otro color de fondo podemos usar el mezclador de colores para lograr
tonos degradados u otros diseños.

Para ello podemos tener la forma diseñada o sin diseñarla, vamos a la parte
derecha de la ventana y dentro de los paneles seleccionamos Color

Aparecerá el siguiente cuadro en el cual seleccionaremos el color del Contorno,

relleno tipo de mezcla, etc.

Ejercicio 5: Modificar Propiedades de los objetos

10
 GRADO DECIMO - ANIMACION

Para modificar las propiedades de los objetos simplemente seleccionamos el

objeto al que deseamos realizar el cambio

Nota: Para seleccionar objetos se debe activar la herramienta transformación libre y

crear un recuadro alrededor del mismo para que seleccione en su totalidad de lo contrario
se separa el contorno del relleno.

Aparecerá en la parte inferior de la ventana las propiedades, dependiendo el

objeto que seleccionen estas propiedades cambiaran

1. Abrimos Flash CS3

2. Cambiamos el color del fondo del documento por negro.
3. Creo estrellas que tengan contorno amarillo y relleno blanco
4. Guardamos el archivo con el nombre estrellado.

Ejercicio 6: Herramienta texto

Para trabajar textos vamos a la herramienta seguido de esto vamos al

área de trabajo y damos clic.
11
 GRADO DECIMO - ANIMACION

Digitamos el texto y procedemos a seleccionarlo y darle la forma que deseamos

Para modificar las propiedades vamos a seleccionar el texto y en la ventana

inferior apareceran las propiedades

Ejercicio 7: Manejo de Capas

En una animación existen varios elementos que participan en ella y que debemos
darles independencia para poder modificarlos según sea el caso en cada instante
de la animación.

Que debemos saber acerca de las capas:

1. Para cambiar el nombre damos doble clic sobre el actual nombre,

escribimos el nuevo nombre y clic por fuera.

2. Propiedades de las capas

1 Capas 5 Herramientas de líneas de tiempo

2 Fotogramas 6 Ocultar, Bloquear, Colorear
3 Línea de tiempo 7 Nuevo. Guía y Carpeta
4 Velocidad de los fotogramas 8 Eliminar

12
 GRADO DECIMO - ANIMACION

1. COMBINACIÓN DE ELEMENTOS

1. Abrimos Flash CS3

2. Creamos 3 capas que se llamen Fondo, Texto, Formas

Fondo de cambia de color

3. Me ubico en la capa Fondo e inserto un cuadro que cubra toda el área de
trabajo.
4. Vamos al fotograma 5 y oprimimos la tecla F6 y veremos que apareceré un
cuadro gris con un punto negro esto significa que algo va a pasar en la
animación; seleccionamos el cuadro y le cambiamos de color, hacemos lo
mismo cada 5 fotogramas hasta el fotograma 25.
5. Oprimimos las teclas CTRL + Enter y veremos el resultado.
6. Bloquemos la capa Fondo para que no cambie nada.

Texto que va apareciendo

7. Vamos a la capa texto, en el fotograma uno escribimos la palabra ESTA
8. En el fotograma cinco presionamos F6 y escribimos ES
9. En el fotograma diez presionamos F6 y escribimos MI
10. En el fotograma quince presionamos F6 y escribimos PRIMERA
11. En el fotograma veinte presionamos F6 y escribimos ANIMACION
12. En el fotograma veinticinco presionamos F6 y escribimos FIN
13. Oprimimos CTRL + Enter y veamos cómo vamos.
14. Bloqueamos la capa Texto

Formas que aparecen

15. Vamos a la capa Formas iniciando en el fotograma uno insertamos una
forma.
16. De ahí en adelante cada cinco fotogramas insertamos una forma diferente,
recuerde que debe usar la tecla F6.

2. PELOTA REBOTANDO

Vamos imitar una esfera que cae desde cierta altura, toca la superficie, esta se
comprime y la esfera rebota.

Crear el piso

1. Abrimos Flash CS3

13
 GRADO DECIMO - ANIMACION

2. Creamos dos capas que se llames Esfera y Piso

3. Nos ubicamos en la capa piso y diseñamos la siguiente forma

4. Voy hasta el fotograma 50 y presión F6, con esto lo que hicimos es que la
figura estará de la misma forma hasta este fotograma.
5. Bloqueamos la capa Piso

Creación de la esfera
6. Vamos a la capa Esfera y creamos una esfera que quede por fuera del área
de trabajo en la parte superior.

7. Ahora vamos al fotograma

10 y llevamos la esfera
encima de la superficie
8. Con nuestra creatividad modifiquemos la superficie de tal forma que se
observe que la superficie se comprime.
9. En el fotograma 20 la esfera debe rebotar y la superficie volver a la
normalidad.
10. En el 30 la esfera vuelve nuevamente a tocar la superficie
11. En el 40 la esfera rebota.
12. En el 50 la esfera queda sobre la superficie,

3. Mirando un paisaje a través de una ventana

CREANDO UN FONDO ESTILO HABITACION

1. Abrimos Flash CS3
2. Creamos una capa que se llame Cuarto
3. Y con ayuda de la herramienta rectángulo creamos la siguiente figura

14
 GRADO DECIMO - ANIMACION

4. Ahora vamos a crear el espacio para la ventana, para ello dibujamos un

cuadro sin contorno en la pared del fondo, luego de dibujarlo lo movemos
fuera del área de trabajo y ya tendremos el hueco para la ventana.

5. Ahora extendemos la
capara hasta el fotograma 50 y la bloqueamos
6. CTRL + Enter para ver el resultado

CREANDO LA VENTANA

7. Creamos una nueva capa que se llame Ventana y dibujaremos en el hueco

creado con el cuadro la siguiente figura

8. Extendemos la capa hasta el fotograma 50 y la bloqueamos.

9. CTRL + Enter para ver el resultado

15
 GRADO DECIMO - ANIMACION

IMPORTANDO UNA IMAGEN

10. Ahora vamos a insertar un paisaje que servirá para el fondo, para ello
debemos tener una imagen de un paisaje ojala que sea en formato jpeg.
11. Creamos una capa que se llame Paisaje
12. Vamos al menú Archivo
13. Clic en la Opción importar
14. Clic en la opción Biblioteca
15. Se abre el cuadro de dialogo y buscamos la imagen de nuestro paisaje, la
seleccionamos dándole clic y clic en el botón Abrir.
16. Ahora adaptamos la imagen a un tamaño que se vea real dentro de la
animación dejándola fuera del área e trabajo.

17. Después de esto vamos al fotograma 50 creamos un fotograma clave y

movemos la imagen al otro lado.

16
 GRADO DECIMO - ANIMACION

18. Ahora vamos a la capa de ventana y vamos a dar clic derecho sobre la
línea de tiempo y seleccionamos crear interpolación de movimiento.

19. CTRL + Enter para ver el resultado

20. Vamos a organizar las capas para que quede en orden y la animación
quede en orden

Este es el orden actual

Este el orden que debemos tener

Listo CTRL + Enter

4. Utilicemos nuestra Creatividad

1. Diseñemos una animación que nos muestre el despegue de un Cohete.

2. Diseñemos una animación recree un movimiento sencillo de la realidad.

EJERCICIO FINAL

17
 GRADO DECIMO - ANIMACION

Vamos a diseñar un sencillo modelo de anochecer y amanecer utilizando las

herramientas vistas hasta ahora.

CREANDO EL EFECTO ANOCHECER Y AMANECER

1. Creamos una capa llamada amanecer.

2. En ella insertamos un rectángulo sin contorno que cubra toda el área de
trabajo que tenga una tonalidad negra.
3. Seleccionamos el rectángulo y oprimimos F8 este comando me permite
seleccionar que tipo de objeto será el rectángulo en este caso
seleccionamos clip de película.

4. Damos clic sobre el rectángulo y se activaran las propiedades, donde debo

seleccionar la opción color, luego la opción Alfa y en el cuadro del
porcentaje damos clic sostenido para bajar el porcentaje hasta 100%.
5. Ahora extendemos la capa hasta el fotograma 50.
6. Damos clic sobre el rectángulo y se activaran las propiedades, donde debo
seleccionar la opción color, luego la opción Alfa ye en el cuadro del
porcentaje damos clic sostenido para bajar el porcentaje hasta 0%.
7. Ahora extendemos la capa hasta el fotograma 100.
8. Damos clic sobre el rectángulo y se activaran las propiedades, donde debo
seleccionar la opción color, luego la opción Alfa ye en el cuadro del
porcentaje damos clic sostenido para bajar el porcentaje hasta 100%.
9. CTRL + Enter y observemos el resultado
10. Ocultamos la capa.

CREANDO LAS MONTAÑAS

11. Creamos una capa que se llame Montañas

12. Con ayuda de la herramienta lápiz crearemos las montañas (son a pulso)

18
 GRADO DECIMO - ANIMACION

13. Ahora con la herramienta de relleno las pintan, seleccionen un color que
sea lo más semejante al color de las montañas.
14. Extienden la capa hasta el fotograma 100.
15. Bloquean la capa
16. CTRL + Enter

CREANDO LAS ESTRELLAS

17. Creamos una capa que se llame estrellas.

18. Insertamos una serie de estrellas al gusto personal.
19. Vamos al fotograma 10 y borramos una (s) de esas estrellas.
20. De a ahí en adelante hacemos lo mismo cada diez fotogramas finalizando
en el fotograma 49.
21. Bloquean la capa
22. CTRL + Enter

CREANDO LA LUNA

23. Creamos una capa que se llame Luna

24. Con ayuda de la herramienta Pluma creen la luna
25. Píntela al gusto que ustedes deseen, de igual forma ubíquenla en el sitio
que usted desee.

26. Vamos al fotograma 49 insertamos un fotograma

clave y movemos la luna fuera del área de trabajo.
27. Vamos a la línea de tiempo y creamos una interpolación de movimiento.
28. Bloqueamos la capa.
29. CTRL + Enter

CREANDO LAS NUBES

30. Creamos una capa que se llame nubes

31. Vamos al fotograma 50 e insertamos un fotograma clave.
19
 GRADO DECIMO - ANIMACION

32. Creamos cuatro óvalos

33. Con ayuda de la herramienta borrador borran las

líneas internas

34. Seleccionan la nube y la agrupan CTRL + G

35. Seleccionan la nube la copian y la pegan 4 o 5 veces
36. Las organizan que queden bien distribuidas en el área de trabajo.
37. Mueven las nubes de tal forma que queden en su mayoría fuera del área
de trabajo.

38. Ahora vamos al fotograma 100 insertamos fotograma clave y movemos las
nubes al otro
lado de tal
forma que
queden por
fuera del área
de trabajo.

20
 GRADO DECIMO - ANIMACION

39. Vamos a la línea de tiempo de la capa y creamos una interpolación de

movimiento.
40. Bloqueamos la capa
41. CTRL + Enter

CREANDO EL SOL

42. Creamos una capa que se llame Sol

43. Vamos al fotograma 50 e insertamos un fotograma clave.
44. Creamos el sol con la ayuda de la herramienta Ovalo
45. Lo pintan de cualquier color obviamente que asemeje el color del Sol que
quede en el extremo inferior derecho del área de trabajo.

46. Vamos al fotograma 100 e insertamos un fotograma clave

47. Movemos el Sol en diagonal y lo dejamos en el extremo superior izquierdo.

21
 GRADO DECIMO - ANIMACION

48. Vamos a la línea de tiempo y creamos una interpolación de movimiento.

49. Bloqueamos la capa
50. CTRL + Enter

22