Flash - Fichas de Aprendizaje 2014

70
1 Ficha de Aprendizaje N° 1 Curso: Diseño Gráfico con Adobe Flash Módulo 1: Introducción al programa Adobe Flash Tema: Descubriendo el entorno de trabajo de Adobe Flash Duración: 2 horas pedagógicas Reconoce y utiliza la barra de herramientas y escenario del entorno de Adobe Flash. Aplicación 1.1: Entorno de Adobe FlashLuego de ingresar al programa Adobe Flash, observa las siguientes imágenes y reconoce cuál corresponde al programa Adobe Flash. Luego, responde: ¿A qué programas pertenecen las otras imágenes? Comenta las diferencias y similitudes que encuentras entre los 3 entornos. Logros de aprendizaje Conocimientos previos 2 3 1

description

Fichas de Aprendizaje 2014 para el Curso de Flash.

Transcript of Flash - Fichas de Aprendizaje 2014

Page 1: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 1

Curso: Diseño Gráfico con Adobe Flash

Módulo 1: Introducción al programa Adobe Flash

Tema: Descubriendo el entorno de trabajo de Adobe Flash

Duración: 2 horas pedagógicas

Reconoce y utiliza la barra de herramientas y escenario del entorno de Adobe Flash.

Aplicación 1.1: “Entorno de Adobe Flash”

Luego de ingresar al programa Adobe Flash, observa las siguientes imágenes y reconoce

cuál corresponde al programa Adobe Flash. Luego, responde: ¿A qué programas

pertenecen las otras imágenes? Comenta las diferencias y similitudes que encuentras

entre los 3 entornos.

Logros de aprendizaje

Conocimientos previos

2 3 1

Page 2: Flash - Fichas de Aprendizaje 2014

2

Si deseas dibujar, lo puedes hacer en una cartulina. Tu entorno de trabajo puede estar

conformado por la cartulina, el lápiz, los plumones, los colores y otras herramientas que te

permitan dibujar. Sin embargo, puedes encontrar entornos alternativos para dibujar y para crear

imágenes como, por ejemplo, el entorno del Adobe Flash. Veamos cómo funciona este

entorno.

Para empezar, debes conocer la forma de acceder a la herramienta.

Veamos dos rutas para ingresar al programa- Adobe Flash.

Ruta 1: Selecciona el botón Inicio, busca la opción Todos los

programas y elige el programa.

Ruta 2: Ubica en el escritorio el ícono de acceso directo del programa y haz doble clic

sobre él.

Una vez que hayas seguido cualquiera de los dos procedimientos, verás la siguiente ventana

con la que el programa te da la bienvenida.

Descubriendo el entorno

de trabajo

La barra de

herramientasEl escenario

Contenidos de aprendizaje

En esta ventana debes

seleccionar el archivo

con el que trabajarás:

Archivo de Flash.

Mapa de contenidos

Page 3: Flash - Fichas de Aprendizaje 2014

3

Adobe Flash cuenta con un conjunto de elementos que te permiten realizar dibujos y

animaciones. Cada una de las barras, paneles, menús, etcétera, cumple una función

específica.

La barra de herramientas

Es el espacio donde se encuentran todas las herramientas que se utilizan para realizar dibujos

y algunas características de animación. Es muy similar a la barra de herramientas de otros

programas de diseño de Adobe.

En la Barra de herramientas, existe un grupo que tiene un triángulo negro en la esquina

inferior derecha. Estas herramientas contienen una variedad de opciones; para visualizarlas

solo haz clic sobre el triángulo.

El escenario

Es el área donde se observan los dibujos y animaciones que se realizan; pueden modificarse el tamaño y el color. Para realizar esta acción, debes utilizar el panel Propiedades y dar los siguientes pasos: 1. El panel Propiedades.

2. La ventana que emergerá,

selecciona el botón Editar que se

encuentra en la sección

propiedades. Al activar esta opción,

aparecerá una ventana emergente.

1

2

Page 4: Flash - Fichas de Aprendizaje 2014

4

Aplicación 1.2: “Escenario”

Abre un nuevo archivo de Adobe Flash, y modifica las dimensiones del escenario de

700 x 400 px; luego, cambia el color de fondo a azul.

Aplicación 1.3: “Panel de propiedades”

Descarga el archivo manzana.fla. Selecciona la imagen del archivo que descargaste y

observa qué nuevas secciones se activan en el panel Propiedades.

Aplica lo aprendido

3. En esta ventana, puedes

modificar el tamaño en la

sección Dimensiones y el

color del escenario en la

sección Color de fondo.

3

GLOSARIO

Dimensión. Extensión de una cosa en

una dirección determinada.

Page 5: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 2

Curso: Diseño Gráfico con Adobe Flash

Módulo 1: Introducción al programa Adobe Flash

Tema: Los paneles de Adobe Flash

Duración: 2 horas pedagógicas

Reconoce y utiliza los diversos paneles del entorno de Adobe Flash.

Aplicación 1.4: “Pupiletras de paneles”

Descubre los nombres de los principales paneles de Adobe Flash en un pupiletras.

Los

pa

ne

les

Panel Propiedades

Panel Control

Panel Biblioteca

Panel Alinear

Panel Muestras

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

Page 6: Flash - Fichas de Aprendizaje 2014

2

Los paneles

Son ventanas que permiten realizar diferentes acciones

como organizar, configurar y conceder ciertas cualidades a

los objetos que se insertan en el escenario. El programa

Adobe Flash cuenta con una variedad de paneles.

Cada panel cuenta con un conjunto de herramientas u opciones que permiten mejorar tus

animaciones. Para optimizar el entorno de trabajo, puedes colocar los paneles de manera

flotante o en otra ubicación de acuerdo al trabajo que se realiza; para ello, solo debes

arrastrarlos con el cursor.

Los principales paneles de Adobe Flash son los siguientes:

· Panel Propiedades: Muestra las características del escenario y las de los objetos que se insertan en este.

Contenidos de aprendizaje

Si se cierra uno de

los paneles, o no los

visualizas, puedes

recuperarlos y

activarlos desde el

menú Ventana.

Page 7: Flash - Fichas de Aprendizaje 2014

3

Guarda el área de trabajo personalizada para continuar explorando los demás panales. Para

abrir una nueva área de trabajo, dirígete al menú Archivo y elige la opción Abrir.

· Panel Color: En este panel se ubican todos los colores que puedes aplicar al contorno y relleno de los dibujos realizados. También contiene diferentes tipos de efectos como el degradado y el alfa (nivel de transparencia).

Si deseas modificar las propiedades

del escenario, no debe haber ningún

objeto seleccionado. Para modificar las

propiedades de algún objeto, recuerda

que debe estar seleccionado.

¡Importante! El color también puede

visualizarse mediante

códigos. ¿Cuál será el

código del color amarillo?

¿Y del rojo?

GLOSARIO

Efecto alfa. Es la

transparencia de un objeto.

Page 8: Flash - Fichas de Aprendizaje 2014

4

· Panel Biblioteca: En este panel se encuentran todos los símbolos, imágenes y sonidos que se están trabajando en un mismo proyecto de animación. Los objetos que se guardan en este panel se pueden reutilizar y modificar a lo largo del proyecto.

Descarga el archivo manzana2.fla para explorar este panel.

Para trasladar las imágenes de la Biblioteca al escenario, debes seleccionar la imagen

deseada y arrastrarla al escenario. Para practicar esta acción, primero borra la imagen de la

manzana del escenario. Luego, ubícate en el panel Biblioteca y verás que la imagen original

sigue ahí. Selecciónala y arrástrala al escenario.

Usando este panel, también puedes duplicar imágenes y otorgarle a cada una de ellas

diferentes colores y tamaños. Observa los pasos que se deben seguir para realizar esta acción.

Cuando se selecciona una

imagen, símbolo o cualquier otro

objeto del panel Biblioteca, este

se muestra en miniatura en la

parte superior de la ventana.

Puedes

trasladar la

misma imagen

las veces que

desees.

Page 9: Flash - Fichas de Aprendizaje 2014

5

· Panel Alinear: Este panel se utiliza para ordenar los objetos que se trabajan en el escenario: a la derecha, a la izquierda y al centro. Además, permite hacer coincidir la imagen con el tamaño del escenario o distribuirla.

Por ejemplo, si tienes una imagen pequeña y deseas modificar su tamaño para utilizarla como

fondo de tu trabajo, debes seleccionar esta opción y realizar los siguientes pasos:

Recuerda que, para

alinear una imagen,

primero debes

seleccionarla.

Selecciona la

imagen y haz

clic derecho.

Elige la opción

Duplicar.

Haz clic en el

panel Biblioteca.

Así se mostrará la copia de

tu imagen, en la biblioteca.

Page 10: Flash - Fichas de Aprendizaje 2014

6

Para poder modificar una sola imagen del escenario con el panel Alinear, debes verificar que

la opción en escena esté activada.

Aplicación 1.5: “Cambiando de color”

Trabajando con el mismo archivo manzana2.fla, haz doble clic sobre la imagen y

selecciona alguna de las manzanas. Luego, cámbialos de color, uno a uno, utilizando el

panel Color.

Aplicación 1.6: “Haciendo cambios”

Activa el panel Biblioteca y observa qué elementos se encuentran en ella. Luego, copia

(Ctrl + C) y pega (Ctrl + V) una imagen de internet en el escenario; por ejemplo, un

abrigo. Finalmente, vuelve a observar la biblioteca. ¿Se han producido cambios?

Aplicación 1.7: “Las manzanas”

Utilizando el mismo archivo que se está trabajando, coloca o alinea las imágenes de las

manzanas como imagen de fondo.

Aplica lo aprendido

Page 11: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 3

Curso: Diseño Gráfico con Adobe Flash

Módulo 1: Introducción al programa Adobe Flash

Tema: Conociendo la línea de tiempo

Duración: 2 horas pedagógicas

Crea, renombra y utiliza los elementos de las capas en Adobe Flash.

Conoce la utilidad del fotograma en la animación en Adobe Flash.

Logros de aprendizaje

Conocimientos previos

¿Qué es una línea de tiempo? ¿Conoces algunos

ejemplos de líneas del tiempo? ¿Cuál es la utilidad

de esta?

Ingresa al siguiente link y observa:

http://commons.wikimedia.org/wiki/File:Muybridge_ra

ce_horse_animated.gif

¿Sabes cómo se llama ese tipo de película o video y

en qué formato se encuentra?

Page 12: Flash - Fichas de Aprendizaje 2014

2

Línea de tiempo

Área de fotograma

Área

de capas

Creación

Renombrar las capas

Elementos o Componentes

Mapa de contenidos

En nuestro entorno, la línea de tiempo

sirve para la visualización simple de los

fotogramas de nuestra película con el

orden determinado que le demos. Los

fotogramas se colocan en la línea de

tiempo en el orden en que se desea que

aparezcan los objetos en la animación

final.

GLOSARIO Fotograma. En Flash, es un

instante o un momento,

equivalente al cuadro o frame de

una película; cuantos más

fotogramas existan, más será la

duración de una animación.

En la parte superior de

la línea, se visualiza el

número de fotograma

en el que te encuentras

trabajando.

CABEZA LECTORA

FOTOGRAMAS CAPAS

Contenidos de aprendizaje

Page 13: Flash - Fichas de Aprendizaje 2014

3

La línea de tiempo está conformada por dos áreas: el área de fotogramas y el área de capas. La línea está conectada al escenario.

1. Área de Capas: Las capas, también conocidas como layers (en inglés), son como

láminas que se sobreponen unas con otras. Se muestra cada capa con su nombre y su

respectivo fotograma; se pueden crear carpetas para que contengan varias capas y ser

renombradas. Asimismo, las capas se pueden bloquear y desbloquear, es decir, mostrar

u ocultar su contenido.

¡Importante! Lo recomendable es realizar o insertar un objeto por cada capa, para que cada uno

de ellos tenga una animación por separado. Además, trabajar de esta manera

permitirá que todo lo que se realice dentro de una capa no afecte a las demás,

pues cada una es independiente con respecto a las otras.

En la siguiente imagen, ¿cuántos elementos ves en el escenario? y ¿cuántas capas

observas en la línea de tiempo? ¿Crees que es importante que cada objeto del

escenario se encuentre dentro de una capa? Convérsalo con tus compañeros.

Page 14: Flash - Fichas de Aprendizaje 2014

4

Crear una capa: Para crear una capa, puedes elegir alguna de las siguientes opciones:

Cambiar el nombre a las capas

Para cambiar el nombre de las capas, haz doble clic al

nombre predeterminado por el programa: Capa 1, Capa 2 y escribe el nombre que desees o que ayude a

reconocer el contenido de la capa.

Elementos de las capas

1. Área de Fotogramas: Un fotograma representa una imagen individual sin movimiento,

cuando una secuencia de fotogramas es visualizada de acuerdo a una determinada frecuencia

de imágenes por segundo se logra generar la sensación de movimiento en el espectador; cada

rectángulo representa un fotograma y van enumerados de 5 en 5 (así llevarás un orden). En la

línea de tiempo, se trabaja con estos fotogramas para organizar y controlar el contenido de las

imágenes.

1era. Opción

2da. Opción

Elige el botón Crear capa. Haz clic derecho sobre la

capa existente y selecciona

la opción Insertar capa.

Page 15: Flash - Fichas de Aprendizaje 2014

5

Aplicación 1.8: “Creando capas nuevas” En el archivo que estás trabajando, crea 3 capas nuevas. En cada una de ellas copia y pega una fruta diferente. Luego, nombra a las capas con el nombre de los objetos insertados.

Aplicación 1.9: “Opciones de las capas” Descarga el archivo animales.fla y realiza las modificaciones solicitadas.

Aplica lo aprendido

Page 16: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 4

Curso: Diseño Gráfico con Adobe Flash

Módulo 1: Introducción al programa Adobe Flash

Tema: Herramientas de dibujo de Adobe Flash

Duración: 2 horas pedagógicas

Utiliza las herramientas óvalo, selección, bote de tinta, transformación libre y bote de

pintura de Adobe Flash.

Logros de aprendizaje

Conocimientos previos

Observa estas herramientas y responde a las siguientes

preguntas ¿Qué herramientas se utilizan cuando se

quiere realizar un dibujo? ¿Cómo se utilizan o que

características tienen?

Aplicación 1.10: Herramientas de dibujo

Relaciona las siguientes herramientas de dibujo según la

indicación.

Page 17: Flash - Fichas de Aprendizaje 2014

2

Con la ayuda de las herramientas que encontrarás en la barra de la izquierda, podrás realizar

formas geométricas y quizás dibujar algo sencillo, recuerda que Adobe Flash no es un

programa para realizar ilustraciones; si se desea realizar dibujos más elaborados utilizar Adobe

Illustrator y luego importarlos a Adobe Flash para realizar la animación.

Cada herramienta tiene un acceso directo, el cual se activa al presionar la tecla que lo

representa. Por ejemplo:

UTILIZANDO LAS HERRAMIENTAS SÓLIDAS Se mostratrá una de las del grupo de 5:

Her

ram

ien

tas

de

Ad

ob

e Fl

ash

Óvalos

Selección

Bote de tinta

Transformación libre

Bote de pintura

Utilizando la herramienta Óvalo (O)

Esta herramienta permite realizar círculos de todos los tamaños. Se encuentra dentro

de un grupo de herramientas conocidas como herramientas sólidas (figuras

geométricas). Selecciónala haciendo clic en la esquina desplegable de la

herramienta Rectángulo.

Mapa de contenidos

Contenidos de aprendizaje

Page 18: Flash - Fichas de Aprendizaje 2014

3

Para dibujar el fondo del ojo de la imagen, utiliza la herramienta Óvalo. Selecciónala de

la barra de herramientas y dibuja en el escenario.

Las variantes de las opciones de la herramienta Selección son las siguientes:

Utilizando la herramienta Selección (V)

La herramienta Selección sirve para elegir, mover y modificar las imágenes o parte

de ellas. Además, tiene la función de editar los píxeles de una imagen bitmap.

Aparece cuando seleccionas

los puntos o vértices de las

ilustraciones. Con esta

opción, puedes modificar el

tamaño (reducir y estirar) y la

forma de los vértices.

Aparece cuando seleccionas

los bordes de las

ilustraciones, ya sean curvas

o líneas. Con esta

modificación de la

herramienta Selección,

puedes estirar, alargar y darle

forma curva a las líneas de

las imágenes.

Page 19: Flash - Fichas de Aprendizaje 2014

4

Utilizando la herramienta Bote de tinta (S)

Esta herramienta sirve para proporcionar color a los contornos o repararlos. Está

ubicada en la opción desplegable de la herramienta Bote de pintura.

Utilizando la herramienta Transformación libre (Q)

Esta herramienta sirve para disminuir y aumentar el tamaño de una imagen, sin la

ayuda del panel Propiedades. También, permite modificar la forma de las imágenes

y girarlas.

¡Importante!

Un dibujo en Adobe Flash está compuesto por un relleno y un trazo. Para seleccionar

ambos elementos a la vez, tienes que hacer doble clic en la figura elegida.

¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡II¡¡IIIIIIIIIIIIIIIII¡¡¡II

GLOSARIO Contorno. Conjunto de

líneas que limitan una

figura.

Page 20: Flash - Fichas de Aprendizaje 2014

5

Aplicación 1.11: “Dibujando una naranja”

Haciendo uso de las herramientas antes trabajadas, dibuja una naranja como la que se

muestra a continuación:

¿Encuentras alguna similitud entre las herramientas de Adobe Flash con alguna de la

vida cotidiana?

¿Qué otras formas se pueden generar con las herramientas trabajadas?

Utilizando la herramienta Bote de pintura (K)

La herramienta Bote de pintura permite aplicar relleno a los dibujos que estás

realizando y modificar los rellenos de las imágenes exportadas. Esta herramienta se

apoya en la herramienta Color de Relleno.

Aplica lo aprendido

Reflexiona

Investiga y responde: ¿cuál es el número de acciones que se

guardan por defecto en el panel Historia? ¿Cómo puedes

modificar tal límite?

Page 21: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 5

Curso: Diseño Gráfico con Adobe Flash

Módulo 2: Animación básica con Adobe Flash

Tema: Animación en la línea de tiempo I

Duración: 2 horas pedagógicas

Identifica los tipos de símbolos para una animación en la línea del tiempo.

Animación en la línea de

tiempo Símbolos

Clip de película

Botón

Gráfico

Fotograma

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

¿Qué películas que has

visto en el cine son de tipo

animada?

Page 22: Flash - Fichas de Aprendizaje 2014

2

Desarrollar la definición de fotograma

Una película o animación se conforma por fotogramas o imágenes que en conjunto dan la

ilusión de movimiento. Mientras más fotogramas tenga una animación, más fluido será su

movimiento.

Para un segundo de esta película se han usado 12 fotogramas; para 2 segundos, 24

fotogramas, y así sucesivamente.

Para un segundo de esta película se han usado 24 fotogramas; para 2 segundos, 48

fotogramas, y así sucesivamente.

En ambos ejemplos, la Línea de tiempo muestra un segundo de animación, lo que cambia es

la cantidad de fotogramas y, por tanto, la naturalidad del movimiento.

Contenidos de aprendizaje

Para el movimiento de

la esfera se han

utilizado 12

fotogramas por

segundo (FPS).

Para el movimiento de la

esfera se han utilizado 24

fotogramas por segundo

(FPS).

1seg

1seg

Page 23: Flash - Fichas de Aprendizaje 2014

3

Símbolos

En el programa Adobe Flash, para insertar una animación en un objeto (imágenes y textos), se

necesita convertir estos objetos en símbolos.

Los símbolos provienen de objetos que creas utilizando las herramientas que proporciona el

programa. Estos objetos, al ser transformados en símbolos, son incluidos en una biblioteca en

el momento que son creados.

Existen 3 tipos de símbolos:

· Clip de película

Este tipo de símbolo se crea para realizar animaciones independientes dentro de un mismo

símbolo, y permite que las animaciones dentro de este no se delimiten por la animación de la

línea principal.

· Botón

Se crea este tipo de símbolo cuando se quieren dar acciones u órdenes que respondan al clic

del mouse.

· Gráfico

Se crea este tipo de símbolo para imágenes estáticas que se animan solo en la línea de tiempo

principal.

Aplicación 2.1 : “Convertir en símbolos”

Convierte en símbolos las diferentes imágenes utilizando el archivo "convertir a

símbolos".

Aplicación 2.2 : “Haciendo un personaje”

Realiza un boceto a mano alzada de un personaje sencillo, el cual se moverá en una

línea de tiempo.

Aplica lo aprendido

Page 24: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 6

Curso: Diseño Gráfico con Adobe Flash

Módulo 2: Animación básica con Adobe Flash

Tema: Animación de fotograma a fotograma I

Duración: 2 horas pedagógicas

Utiliza la animación fotograma a fotograma.

Importa imágenes al escenario y biblioteca de Adobe Flash.

Tipos de animación

Animación fotograma a fotograma

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

¿Qué tipos de símbolos has visto en la

ficha anterior? ¿Qué diferencias hay

entre ellos? Explícale a un compañero,

con tus palabras qué es un fotograma.

Page 25: Flash - Fichas de Aprendizaje 2014

2

Tipos de animación Por ahora empezaremos con el tipo de animación de fotograma a fotograma, en las siguientes

fichas veremos animación mediante interpolación de forma y animación mediante interpolación

de movimiento.

1. Animación fotograma a fotograma

Es el tipo de animación que se realiza aplicando movimientos en los objetos del escenario para

cada fotograma agregado de la Línea de tiempo.

Vas a realizar la siguiente animación:

Contenidos de aprendizaje

Cada fotograma contiene un

movimiento distinto, lo que

permite la ilusión de

movimiento.

Page 26: Flash - Fichas de Aprendizaje 2014

3

Exporta la imagen “delfin.fla” en formato png, como lo indica la imagen a

continuación:

Guardar las imágenes en formato png te permite tener la imagen sin fondo blanco, es

decir, solo la figura. De esta manera, podrás trabajar mejor las animaciones.

A continuación, abre el archivo mar.fla y crea una nueva capa con el nombre “Delfín”.

Esta capa debe ubicarse debajo de la capa “Mar”.

Luego, selecciona el primer fotograma de la capa “Delfín” e importa al escenario la

imagen del delfín. Puedes hacerlo utilizando el menú Archivo y la opción Importar.

Observa y sigue los siguientes pasos:

1

2

3

Page 27: Flash - Fichas de Aprendizaje 2014

4

Si eliges Importar a escenario (Ctrl + R), la imagen se va a visualizar en el área de trabajo

donde estás. Si eliges Importar a biblioteca, la imagen se guarda en el panel Biblioteca para

ser utilizada posteriormente.

Observa que el delfín se inserta en el escenario.

Reduce el tamaño del delfín utilizando la herramienta Transformación libre. Luego,

ubícalo debajo del agua.

Ahora, trabaja la animación en la capa donde se

encuentra el delfín.

Selecciona el fotograma N° 5 de la capa

“Delfín” e inserta un fotograma clave. Esta

opción se encuentra en el menú contextual

(accede a él haciendo clic derecho sobre el

fotograma).

También inserta fotogramas clave en el N° 30 de las capas “Mar” y “Cielo” para que estas se

muestren a lo largo de la animación.

6

4

5

Page 28: Flash - Fichas de Aprendizaje 2014

5

Por último, en el fotograma N°5 de la capa “Delfín”, mueve la imagen del delfín de su

posición original hacia arriba y gírala un poco utilizando la herramienta Transformación

libre.

Aplicación 2.3: “Dibujando de fondos y paisajes”

Elabora un fondo o paisaje, el cual servirá al personaje que realizaste en la aplicación

anterior.

Aplicación 2.4: “Recordando lo aprendido”

Realiza el cuestionario en donde recordarás lo aprendido en la sesión.

7

GLOSARIO

Velocidad de un Fotograma en el cine. En el caso del cine, para poder como espectadores apreciar una película de este tipo de arte, los fotogramas deberán ser proyectados con una cadencia de 24 fotogramas por segundo y entonces así, con esta frecuencia, es que el ojo humano percibirá la tan ansiada ilusión del movimiento.

Aplica lo aprendido

Page 29: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 7

Curso: Diseño Gráfico con Adobe Flash

Módulo 2: Animación básica con Adobe Flash

Tema: Animación fotograma a fotograma II

Duración: 2 horas pedagógicas

Utiliza la animación fotograma a fotograma.

Utiliza variantes de la herramienta transformación libre.

Aplicación 2.5: “Ordenando fotograma a fotograma”

Realiza la aplicación en la plataforma y ordena los pasos para realizar una animación fotograma a fotograma.

Tipos de animación

Animación fotograma a fotograma

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

Page 30: Flash - Fichas de Aprendizaje 2014

2

Para completar la animación de la ficha 6, continuaremos con el fondo del mar, tenemos hacer

que simule un movimiento, para ello realiza los siguientes pasos:

Inserta un fotograma clave en el fotograma N° 15 de la capa “Mar”, luego selecciona la

imagen que se encuentra en esta, y con una de las variantes de la herramienta

Transformación libre alárgala un poco hacia la derecha.

Cuando aparezca el símbolo, alarga

levemente hacia la derecha la imagen.

Repite el mismo procedimiento anterior en el

fotograma N° 30, pero esta vez haz el

movimiento hacia la izquierda.

Si al realizar estos procedimientos hay superficies del escenario que sobresalen, puedes

recortarlas utilizando líneas, tal como aprendiste en la ficha anterior.

Una vez terminada tu animación, guarda tu archivo y expórtalo como SWF presionando Ctrl +

Enter.

Contenidos de aprendizaje

8

Page 31: Flash - Fichas de Aprendizaje 2014

3

Del mismo modo que la animación en el fotograma N° 5, realiza fotogramas en el N° 10,

15, 20 y 25 y 30, y modifica el movimiento del delfín como se muestra en las imágenes:

Aplicación 2.6: “Terminando mi primera animación”

Con el personaje y el fondo, elaborados en aplicaciones anteriores, realiza una animación sencilla.

Aplica lo aprendido

Page 32: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 8

Curso: Diseño Gráfico con Adobe Flash

Módulo 2: Animación básica con Adobe Flash

Tema: Animación mediante interpolación de forma I

Duración: 2 horas pedagógicas

Realiza animaciones a través de la interpolación de forma de una misma imagen.

Tip

os

de

an

ima

ció

n

Animación fotograma a

fotograma

Animación mediante

interpolación de forma

Interpolación de forma en

una misma imagen

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

¿Qué diferencias creen que puede

existir entre la animación ‘fotograma

a fotograma’ y la de ‘interpolación de

forma’? Luego, comenta en la clase.

Page 33: Flash - Fichas de Aprendizaje 2014

2

2. Animación mediante interpolación de forma

Son animaciones que permiten realizar transformaciones mediante las cuales los objetos

cambien de su forma original a otra diferente.

Interpolación de forma en una misma imagen

Para comprender mejor este tipo de animación, realiza una de ellas utilizando la imagen del

sapo (descargar de la plataforma el archivo ranita.fla). En este trabajo, modificarás su sonrisa.

Contenidos de aprendizaje

Page 34: Flash - Fichas de Aprendizaje 2014

3

Selecciona todas las capas en el fotograma N° 15, excepto la capa “Boca” para que esas

imágenes se visualicen en todos los fotogramas en donde se realizará la animación.

Luego, en los fotogramas seleccionados haz clic derecho y elige la opción Insertar

fotogramas.

Para seleccionar todos los fotogramas N° 15 de las diferentes capas, selecciona el

fotograma N° 15 de la capa “Cabeza”. Luego, utilizando la tecla Ctrl selecciona uno a uno

los otros fotogramas.

Ahora trabaja en la capa “Boca” y crea

en ella una interpolación de forma. Haz

clic derecho en el primer fotograma y

selecciona la opción Crear

interpolación de forma.

Cuando creas la interpolación, observa

que el fotograma cambia de color a un

verde pastel.

Luego, inserta un fotograma clave en el fotograma N° 7 y modifica la línea de la boca con

la herramienta Transformación libre, como se muestra en la imagen.

Para finalizar, modifica en el panel Propiedades (sin seleccionar ningún objeto) la

velocidad de los fotogramas a 2 FPS para que se visualice la transformación lentamente.

Si el FPS es menor, la velocidad de la animación será más lenta; y si es mayor, será más

rápida. Por defecto, siempre aparece con velocidad equivalente a 24 fotogramas por

segundo.

Clic derecho

Al crear el fotograma,

observa que aparece

una flecha desde el

fotograma N° 1 que

llega hasta el N° 7.

1

1

2

3

4

Page 35: Flash - Fichas de Aprendizaje 2014

4

Una vez terminada tu animación, guarda tu archivo y expórtalo como SWF presionando Ctrl +

Enter.

Aplicación 2.7: “Interpolando la ranita”

Realiza los mismos pasos y haz que en el fotograma N° 15, la boca del sapo vuelva a

su estado original.

Aplicación 2.8: “Interpolando al león”

Después de haber realizado la animación de la ranita, ahora haz lo mismo que este león

que te presentamos.

¿Cuáles han sido los elementos que te resultaron más difíciles de aprender hasta el

momento?

Aplica lo aprendido

Reflexiona

Investiga si hay más formas de interpolaciones.

Page 36: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 9

Curso: Diseño Gráfico con Adobe Flash

Módulo 3: Animación intermedia con Adobe Flash

Tema: Animación mediante interpolación de forma II

Duración: 2 horas pedagógicas

Realiza animaciones a través de la interpolación de forma con diferentes imágenes.

Animación mediante

interpolación de forma

Interpolación de forma con

diferentes imágenes

Interpolación de forma en una

misma imagen

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

¿Crees tú que la interpolación de forma

con diferentes imágenes tiene los mimos

pasos que la interpolación de forma de

una misma imagen? ¿En qué son

semejantes y en qué se diferencian?

Page 37: Flash - Fichas de Aprendizaje 2014

2

Interpolación de forma con diferentes imágenes

Ahora, realiza una transformación de forma con diferentes imágenes para que la primera

imagen se convierta en la segunda; y la segunda, en la tercera. Para realizar esta animación,

descarga el archivo mariposa.fla de la plataforma y sigue los pasos que se mencionan a

continuación.

Observa la línea de tiempo del archivo descargado; solo hay una capa y un

fotograma. Para realizar el ejercicio, debes insertar más fotogramas claves en los

N° 5, 15, 20, 30 y 35.

En los fotogramas N° 1 y N° 5, borra las imágenes del capullo y la mariposa para

que en la primera parte de la animación solo aparezca la imagen de la oruga. Para

realizar este procedimiento, selecciona las otras dos imágenes e inmediatamente

elimínalas (tecla Supr).

Contenidos de aprendizaje

1

2

Page 38: Flash - Fichas de Aprendizaje 2014

3

Luego, crea la primera interpolación de forma para que la oruga se convierta en

capullo. Para ello, selecciona el fotograma N.° 5, haz clic derecho y elige la opción

Crear una interpolación de forma.

Ahora cambia la velocidad de fotogramas (FPS) a 5; y con la combinación Ctrl +

Enter visualiza tu animación.

Aplicación 3.1: “Metamorfosis de oruga a mariposa”

En los fotogramas 15 y 20, elimina las imágenes de la oruga y la mariposa. Asimismo, en

los fotogramas 30 y 35 elimina las imágenes de la oruga y el capullo.

3

4

GLOSARIO

Interpolar. Poner o colocar una cosa entre otras.

Aplica lo aprendido

Page 39: Flash - Fichas de Aprendizaje 2014

4

De la misma forma que has creado una interpolación de forma en el fotograma 5, ahora

inserta interpolación de forma en el fotograma 20.

Aplicación 3.2: “Interpolación de forma paso a paso”

Realiza la aplicación en la plataforma sobre la animación mediante interpolación de

forma con diferentes imágenes.

Page 40: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 10

Curso: Diseño Gráfico con Adobe Flash

Módulo 3: Animación intermedia con Adobe Flash

Tema: Animación mediante interpolación de forma de textos

Duración: 2 horas pedagógicas

Realiza animaciones a través de la interpolación de forma de textos.

Animación mediante

interpolación de forma

Interpolación de formas de

textos

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

Observa la siguiente presentación:

http://www.youtube.com/watch?v=0LgkmLR9FRE

¿Qué te pareció la presentación de los textos?

Page 41: Flash - Fichas de Aprendizaje 2014

2

Animación mediante interpolación de textos

Para realizar una interpolación de forma en los textos, lo primero que debes hacer es escribir en el primer fotograma el texto deseado.

Por ejemplo: tu nombre.

A continuación, copia (Ctrl + C) el nombre escrito e inserta un fotograma clave en blanco en el

N.° 25.

En el nuevo fotograma creado, pega (Ctrl + V) tu nombre y ubícalo en la parte inferior del

escenario. Luego, cambia las letras de tu nombre por el de tu apellido.

Al finalizar estas acciones, retorna al fotograma N° 1, selecciona el texto y realiza el siguiente

procedimiento:

Contenidos de aprendizaje

Cuando insertas un

fotograma clave vacío, el

objeto insertado en el

primer fotograma no se

copiará en este nuevo.

Page 42: Flash - Fichas de Aprendizaje 2014

3

Observa que las letras de tu nombre se separan. Luego, selecciona nuevamente el texto y

vuelve a realizar el mismo procedimiento. Después de realizar las acciones mencionadas,

verás que el texto se muestra como si fuera una imagen.

Al terminar de separar tanto tu nombre y apellido, ubícate en el primer fotograma, haz clic

derecho en él y selecciona la opción Crea interpolación de forma.

Continuando con el ejercicio de la clase, ingresa al fotograma donde está tu apellido,

sepáralo y crea una interpolación de forma.

Recuerda que para trabajar una

interpolación de forma con textos,

debes separarlo dos veces. Una

manera rápida para realizar esta

acción es seleccionando el texto y

utilizando la combinación de teclas

Ctrl + B dos veces (trabajo con el

teclado).

Page 43: Flash - Fichas de Aprendizaje 2014

4

Aplicación 3.3: “Animando con textos”

Elije una frase de 3 o 4 palabras, sepáralas para convertir el texto a imagen y crea una

interpolación de forma con textos con ellas.

Aplicación 3.4. : “Interpolación de textos”

Realiza la aplicación en la plataforma sobre la animación o interpolación de textos.

Aplica lo aprendido

Page 44: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 11 Curso: Diseño Gráfico con Adobe Flash

Módulo 3: Animación intermedia con Adobe Flash

Tema: Animación mediante interpolación de movimiento

Duración: 2 horas pedagógicas

Realiza animaciones mediante interpolación de movimiento.

Conversa con tus compañeros sobre: ¿cómo crees que se realizó el

movimiento en la siguiente imagen?

Imagen tomada de: http://msdn.microsoft.com/es-es/library/cc295346.aspx

Logros de aprendizaje

Conocimientos previos

Page 45: Flash - Fichas de Aprendizaje 2014

2

3. Animación mediante interpolación de movimiento

Es la animación en la que Adobe Flash calcula los valores intermedios entre dos fotogramas,

de tal forma que el cambio sea gradual. Esta animación solo funciona si trabajas con símbolos.

Para ver la utilidad de este tipo de

animación, elabora un banner que

promueva el deporte.

Para empezar a trabajar esta

actividad, abre el archivo ciclista.fla.

y realiza los siguientes pasos:

Primero, configura las propiedades del documento a 800 x 250

píxeles.

El ciclista está formado por objetos agrupados. Para trabajar en

ellos, haz doble clic en cada objeto. Al hacerlo, observa que al

lado del nombre de la escena aparece el grupo en el que te

encuentras (Objeto de dibujo). Para salir del grupo, solo haz

clic en Escena 1.

Animación mediante interpolación de

movimiento

Símbolos Línea de movimiento

Contenidos de aprendizaje

Mapa de contenidos

Page 46: Flash - Fichas de Aprendizaje 2014

3

· Creando símbolos

Ahora crearás un símbolo de tipo clip de película para

animar cada parte de la imagen independientemente.

Para crear el símbolo, selecciona la imagen y utiliza la

tecla F8.

Luego colócale a esta animación el nombre “ciclista” y

escoge la opción Clip de película.

Otra manera de convertir una imagen en

símbolo es a través de la opción

Convertir en símbolo del menú

Modificar.

Cuando creas un símbolo, este se almacena directamente en el panel Biblioteca y lo que

queda en el escenario es una instancia.

Si haces doble clic sobre la instancia,

ingresarás al símbolo; y si haces doble

clic sobre la imagen del símbolo,

ingresarás al grupo de objetos.

Una instancia es la representación del símbolo en el escenario.

Para salir de ellos, haz clic en

Escena 1.

Símbolo Grupo Escena

Page 47: Flash - Fichas de Aprendizaje 2014

4

· Aplicando la interpolación de movimiento

Ahora que tienes el clip de película, cambia

el nombre de la capa a “Manejando”.

Luego, haz clic derecho en el fotograma de la

capa “Manejando” y crea una interpolación de movimiento. Los fotogramas marcan

automáticamente un segundo, y según tu documento llega hasta el fotograma N.° 24, ya que

son 24 fotogramas por segundo (24fps).

Después de las acciones mencionadas, comienza a realizar la animación. Para ello, coloca la

cabeza lectora en el último fotograma, selecciona la instancia (símbolo Ciclista) y arrástrala

hacia la derecha, de tal modo que se observe que el ciclista cruza el escenario. Observa la

imagen.

Luego, presiona Enter para visualizar el movimiento. Observa que este es de un segundo, y

como es un tiempo breve debes estirarlo (arrastrándolo) hasta el fotograma N° 50 de la línea

de animación que es de aproximadamente 2 segundos.

Línea de

movimiento

GLOSARIO

Instancia: Es la representación del símbolo en el escenario

Page 48: Flash - Fichas de Aprendizaje 2014

5

Finalmente, observa que la línea que marca el movimiento del ciclista tiene más puntos. Estos

representan los fotogramas y pueden manipularse.

Aplicación 3.5: “Creando interpolaciones de movimiento”

Descarga el archivo saposaltarin.fla y crea las interpolaciones de movimiento para cada elemento de la imagen, tal como se muestran en la primera figura.

Aplicación 3.6: “Crucigrama de interpolación de movimiento” Realiza el crucigrama en la plataforma sobre términos trabajados en la sesión.

Fotogramas Línea de

movimiento

Aplica lo aprendido

Page 49: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 12 Curso: Diseño Gráfico con Adobe Flash

Módulo 3: Animación intermedia con Adobe Flash

Tema: Animación utilizando editor de movimiento

Duración: 2 horas pedagógicas

Realiza animaciones mediante el editor de movimiento.

Animación mediante

interpolación de movimiento

Símbolos

Editor de movimiento

Línea de movimiento

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

¿Cómo crees que se puede editar un

movimiento? ¿qué aspectos de podrán

modificar? Comenta con tus

compañeros.

Page 50: Flash - Fichas de Aprendizaje 2014

2

Observa la imagen. Esta muestra que el grupo de

objetos está dentro del símbolo “Rueda” y este, a

su vez, está dentro del símbolo “Ciclista”. Este

último símbolo se encuentra en la escena.

Trabajando dentro del símbolo y con el editor de movimiento

El editor de movimiento sirve para darle propiedades de movimiento a los objetos (giros,

escala, aceleración, etcétera) que se encuentran en un fotograma que tiene una interpolación

de movimiento. Con este elemento, también puedes proporcionar efectos de color y filtros a las

imágenes.

Ahora, utilizando el Editor de movimiento haz girar las ruedas de la bicicleta sobre su propio

eje. Lo primero que debes hacer para realizar esta acción es ingresar al símbolo Ciclista.

Después, selecciona una rueda y conviértela en un nuevo símbolo al cual llamarás “Rueda”.

Contenidos de aprendizaje

Da doble clic sobre la

instancia para entrar al

símbolo.

Page 51: Flash - Fichas de Aprendizaje 2014

3

Ordena las capas: La capa en la que está la imagen del ciclista,

la llamarás “Ciclista”; después, crea otra capa con el nombre

“Rueda”, en la que animarás la rueda. Selecciona la rueda y

presiona Ctrl X para cortar la rueda de la capa “Ciclista”.

Selecciona el fotograma vacío de la capa “Rueda” y

presiona Shift + Ctrl + V para pegar la rueda en la

posición inicial.

Haz clic derecho sobre el fotograma de la capa

“Rueda” y crea una interpolación de movimiento.

Con la cabeza lectora ubicada en el último fotograma, dirígete al Editor de movimiento (está

al lado de la Línea de tiempo), y en la opción Rotación escribe 360; esto significa que la

rueda dará una vuelta completa de 360°.

Si no tienes abierta

la ventana del

Editor de

movimiento,

puedes activarla en

la opción Ventana

del menú principal.

Observa que gira la

rueda al mover la

cabeza lectora.

mp

GLOSARIO

Rotación. Movimiento giratorio de un cuerpo alrededor de su eje.

Page 52: Flash - Fichas de Aprendizaje 2014

4

Como el tiempo es demasiado para que gire una rueda, acorta la animación de la capa “Rueda”

del fotograma N° 24 al fotograma N° 15. Para igualar el tiempo de la rueda con la del ciclista,

inserta un fotograma en el número 15 de la capa “Ciclista”.

Para que ambas ruedas giren, utiliza el mismo símbolo “Rueda” para ambas. Tendrás que

eliminar la rueda derecha pues no está animada, y luego tendrás que colocar una instancia del

símbolo “Rueda” en su lugar.

Selecciona el fotograma N° 15 y presiona F5.

Crea una capa nueva “Rueda2”, y en la capa

“Ciclista” elimina la rueda de atrás (Ctrl + X).

Selecciona la instancia de la capa “Rueda”, cópiala (Ctrl + C) y pégala en la capa

“Rueda2” (Ctrl + Shift + V).

Ahora que tienes ambas ruedas animadas, presiona Ctrl + Enter para visualizar la

animación en SWF.

No te olvides de guardar tus

archivos, pues los vas a utilizar

más adelante.

¡Importante! La interpolación de movimiento no solo es lineal, pues puede tener distintas trayectorias que se pueden lograr modificando los puntos.

¡¡I¡I

Page 53: Flash - Fichas de Aprendizaje 2014

5

· Creando trayectorias

Los rombos que se muestran en la línea de tiempo de las capas que tienen una interpolación

de movimiento son fotogramas claves de posición. Puedes modificar las trayectorias de la línea

de animación insertando fotogramas claves de posición y modificando la dirección que debe

seguir el elemento. También puedes utilizar la herramienta Selección (flecha negra) para darle

forma curva o modificar los puntos que componen la línea de movimiento de la imagen.

Aplicación 3.7: “Haciendo trayectorias en una animación” Realiza una animación similar a la planteada, inserta el archivo “mariposas.fla” al de “saposaltarin.fla” y crea trayectorias en la línea de animación.

Aplicación 3.8: “Trayectoria de un auto” Realiza la animación aplicación siguiendo las indicaciones en la plataforma.

Aplica lo aprendido

Trayectoria

Fotogramas claves de posición

Page 54: Flash - Fichas de Aprendizaje 2014

6

¿Te resultó interesante aplicar lo que aprendiste? ¿Por qué?

Investiga qué otros editores de movimientos existen.

Reflexiona

Page 55: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 13 Curso: Diseño Gráfico con Adobe Flash

Módulo 4: Animación avanzada con Adobe Flash

Tema: Animación mediante poses de cinemática inversa y e interpolación clásica

Duración: 2 horas pedagógicas

Realiza animaciones haciendo uso las poses de cinemática inversa.

Utiliza la herramienta hueso.

Realiza animaciones haciendo uso de la interpolación clásica.

Animación mediante interpolación

de movimiento

Animación mediante poses de

cinemática inversa

Animación mediante interpolación

clásica

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

Ingresa al siguiente enlace:

http://www.youtube.com/watch?v=_v

EPOWhA3CQ y luego comenta lo

observado.

? ¿qué aspectos se podrán

Page 56: Flash - Fichas de Aprendizaje 2014

2

Animación mediante poses de cinemática inversa

Son animaciones mediante una estructura a modo de huesos que permiten un movimiento

natural.

Ingresa al símbolo “Ciclista” y anima al personaje con el

que estás trabajando; para ello, utiliza la herramienta

Hueso. Comienza creando una capa con el nombre

“Pierna”.

Selecciona la pierna y la cadera de la capa “Ciclista”, elimínalas con Ctrl + X y pégalas en la

capa “Pierna” con Ctrl + Shift + V.

Para una animación con cinemática inversa,

necesitas tener los objetos desagrupados ya que la

herramienta con la que trabajarás no funciona

cuando están agrupados. Para ello, selecciona los 2

objetos y presiona Ctrl + B.

Luego, selecciona la herramienta Hueso, haz clic en la cadera y arrastra el cursor del mouse

hasta la rodilla. Después, haz clic en la rodilla y arrastra el cursor del mouse hasta el pie.

Observa que todas las partes seleccionadas con la herramienta Hueso pasan

automáticamente a una nueva capa de animación con cinemática inversa denominada

“Esqueleto” tendrá la figura de una persona y sus fotogramas clave se llamarán “pose”. La

capa anterior quedará vacía.

Contenidos de aprendizaje

Page 57: Flash - Fichas de Aprendizaje 2014

3

Para comenzar con la animación, selecciona el fotograma N° 15 de la capa “Esqueleto”; haz

clic derecho y elige la opción Insertar pose o presiona F6.

Selecciona el fotograma N° 7 y mueve la figura “pierna” hacia arriba con la flecha de Selección

(V). Observa cómo se crea una pose para este nuevo movimiento.

Finalmente, con Ctrl + Enter verás la animación

completa.

Animación mediante interpolación clásica

Es la forma en la que se crean interpolaciones en las versiones anteriores de Adobe Flash

CS4. Es similar a la interpolación de movimiento en varios aspectos, pero se diferencian

porque tienen solo un tipo de orientación: vertical, horizontal o perpendicular. Por otro lado,

también pueden realizar distintas trayectorias, pero solo si se utiliza combinándola con la

opción Añadir guía de movimiento clásica.

Cuando se utilizan símbolos dentro

de otros símbolos, es necesario

exportar la animación como SWF.

De esta manera, la podrás ver

completamente.

Cinemática

Inversa

Pose

Page 58: Flash - Fichas de Aprendizaje 2014

4

Ya acabaste con la animación del ciclista. Ahora,

elabora un título para completar el banner.

Regresa a la Escena 1 y crea una nueva capa

llamada “Texto”.

El texto del banner pertenece a la familia “Eras Blod ITC”, tamaño 38. Considerando estas

características, escribe la siguiente frase:

El texto en Adobe Flash no necesita estar dentro de un símbolo para ser animado.

Crea fotogramas claves presionando F6 en el fotograma N° 50 y N° 20 de la capa “Texto”.

Luego, haz clic derecho en el primer grupo de fotogramas y crea una Interpolación clásica.

Tu línea de tiempo

se visualizará de

esta forma.

Page 59: Flash - Fichas de Aprendizaje 2014

5

Haz lo mismo en el segundo grupo de fotogramas.

Enseguida, ubícate en el primer fotograma y mueve el texto hacia arriba y hacia afuera del

escenario. Después, disminuye su tamaño con la ayuda de la herramienta Transformación

libre (Q) y presionando la tecla Shift para que no se desproporcione.

Para ver el movimiento del texto,

mueve la cabeza lectora o presiona

Enter; y para ver la animación

completa, presiona Ctrl + Enter.

Page 60: Flash - Fichas de Aprendizaje 2014

6

Aplicación 4.1: “Movimiento a la ranita bailarina”

Utilizar el archivo “ranitabailarina.fla” y dale movimiento utilizando la animación con cinemática inversa para que simule que está bailando.

Aplicación 4.2: “Animando a mi personaje”

Abre el archivo del personaje que dibujaste en la “Aplicación 2.2” y realiza las

acciones solicitadas en la plataforma.

Aplica lo aprendido

Page 61: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 14 Curso: Diseño Gráfico con Adobe Flash

Módulo 4: Animación avanzada con Adobe Flash

Tema: Animación con interpolación clásica y la opción añadir guía de movimiento clásica.

Duración: 2 horas pedagógicas

Realiza movimientos con diferentes trayectorias utilizando la animación Interpolación

clásica.

Realiza movimientos con la opción añadir guía de movimiento clásica.

Animación mediante

interpolación de movimiento

Animación mediante

interpolación clásica

Guía de movimiento

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

Conversa con tus compañeros sobre las

diferencias entre animación en la línea de

tiempo, de interpolación por forma y de

interpolación de movimiento y cuándo se

debería utilizar cada una de ellas.

Page 62: Flash - Fichas de Aprendizaje 2014

2

También puedes realizar movimientos con diferentes trayectorias utilizando la animación

Interpolación clásica y la opción añadir guía de movimiento clásica. Observa y sigue los

pasos utilizando el archivo avión.fla.

Contenidos de aprendizaje

Observa el archivo. Haz clic derecho en la capa “Avión” y elige

la opción Añadir guía de movimiento

clásica.

Dibuja con la herramienta Lápiz o

Pluma la forma de la trayectoria en la

capa “Guía” (lo que dibujes en esta

capa no se visualizará al momento de

exportar tu animación).

Ubica la instancia del

avión que se encuentra

en el primer fotograma

de la capa del mismo

nombre, al inicio de la

trayectoria. Cerciórate

de que el inicio de la

trayectoria esté en el

centro del avión.

Observa la imagen.

Ubica la instancia del

avión que se encuentra

en el fotograma N.° 35

de la capa respectiva, al

final de la trayectoria.

Cerciórate de que el

final de la trayectoria

esté en el centro del

avión.

Para finalizar, crea una interpolación

clásica en la capa “Avión”.

Page 63: Flash - Fichas de Aprendizaje 2014

3

Aplicación 4.3: “Animando a las arañas”

Realiza la aplicación en la plataforma en donde trabajarás la interpolación de movimiento y la interpolación clásica.

Aplicación 4.4: “Animando a un carro y una abeja”

Realiza la aplicación en la plataforma en donde trabajarás la interpolación de movimiento y animación fotograma a fotograma.

Aplica lo aprendido

Page 64: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 15

Curso: Diseño Gráfico con Adobe Flash

Módulo 4: Animación avanzada con Adobe Flash

Tema: Uniendo archivos en una misma escena en Adobe Flash.

Duración: 2 horas pedagógicas

Une dos archivos en una misma escena de Adobe Flash.

Uniendo archivos

Adobe Flash

Uniendo dos archivos en

una misma escena

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

¿Qué es una escena? ¿en qué

ámbitos de la vida cotidiana se

usa este término?

Page 65: Flash - Fichas de Aprendizaje 2014

2

Uniendo archivos en una misma escena

Para unir el documento del paisaje con el del ciclista, es

necesario que ambos documentos estén abiertos.

Luego, pasa los objetos del documento Paisaje a una sola

capa.

Comienza a trabajar con los elementos de la capa “Paisaje”. Para realizar esta acción,

selecciona su fotograma y córtalo (Ctrl + X), luego dirígete al fotograma de la capa “Fondo” y

presiona Ctrl + Shift + V. De esta misma forma, traslada todos los objetos de las capas

“Casas”, “Dibujo” y “Paisaje” a la capa “Fondo”.

Ya que la animación del archivo “ciclista.fla” tiene 50 fotogramas, el paisaje debe llegar al

mismo número de fotogramas. Primero, dirígete al fotograma N° 50 e inserta fotogramas.

Ahora dirígete al documento Ciclista. Selecciona ambas capas, luego haz clic derecho sobre

los fotogramas y cópialos.

Ahora regresa al archivo Paisaje y crea una nueva capa. Después selecciona su primer

fotograma vacío, haz clic derecho y en la opción desplegable elige la alternativa Pegar

fotogramas.

Contenidos de aprendizaje

Una vez que las

capas estén vacías,

elimínalas.

Page 66: Flash - Fichas de Aprendizaje 2014

3

Para ver la animación completa,

exporta tu archivo como SWF.

Guarda el archivo con el nombre

“banner.fla”

Aplicación 4.5: “Uniendo dos archivos en una misma escena”

Realiza las indicaciones de la aplicación en la plataforma con el archivo

“metamorfosis.fla”.

Aplica lo aprendido

No te olvides de

guardar todos

tus trabajos.

GLOSARIO

Archivo SWF. Son archivos

suficientemente pequeños para publicarlos por la web en forma de

animaciones.

Page 67: Flash - Fichas de Aprendizaje 2014

4

Aplicación 4.6: “Uniendo otros archivos en una misma escena”

Realiza las indicaciones de la aplicación en la plataforma para crear nuevas

animaciones.

Page 68: Flash - Fichas de Aprendizaje 2014

1

Ficha de Aprendizaje N° 16

Curso: Diseño Gráfico con Adobe Flash

Módulo 4: Animación avanzada con Adobe Flash

Tema: Uniendo archivos en distintas escenas de Adobe Flash.

Duración: 2 horas pedagógicas

Une dos archivos en distintas escenas de Adobe Flash.

Uniendo archivos

Adobe Flash

Uniendo dos archivos en

una misma escena

Uniendo dos archivos en

distintas escenas

Logros de aprendizaje

Conocimientos previos

Mapa de contenidos

Recuerda los pasos que seguiste en la ficha

anterior para unir dos archivos en una misma

escena de Adobe Flash, ¿serán los mismos

para trabajar en escenas diferentes?

Page 69: Flash - Fichas de Aprendizaje 2014

2

Uniendo archivos en distintas escenas

Si quieres unir diferentes animaciones en un mismo proyecto,

puedes usar la opción Crear escenas. Observa que en el

siguiente ejercicio se han unido en tres escenas las animaciones

que hasta el momento has realizado.

Abre la animación de la interpolación de forma que realizaste con la oruga, capullo y mariposa

(“metamorfosis.fla”); copia todos sus fotogramas. Luego, abre un nuevo archivo y en la

escena que aparece por defecto, “Escena 1”, selecciona el primer fotograma de la capa 1 y

pega los fotogramas.

Luego, con ayuda del menú Insertar crea una nueva escena. La nueva escena insertada se

denominará por defecto “Escena 2”. Aquí, copia los fotogramas del archivo

“saposaltarín.fla”.

Para terminar, crea una nueva escena, “Escena 3”, y copia los fotogramas del archivo del

banner animado que acabas de realizar. Cuando termines, presiona las teclas Ctrl + Enter y

notarás que las tres animaciones se encuentran en el mismo proyecto y que se reproducen una

después de la otra.

Escena 1 Escena 2 Escena 3

Contenidos de aprendizaje

Page 70: Flash - Fichas de Aprendizaje 2014

3

Aplicación 4.7: “Uniendo archivos en diferentes escenas”

Realiza la aplicación siguiendo las indicaciones en la plataforma. Para ello, necesitarás

tu carpeta con los archivos trabajados durante el curso.

PROYECTO INTEGRADOR

Han sido seleccionados para formar parte del equipo de diseño gráfico de “Clima de

Cambios”, la cual es una iniciativa de la Pontificia Universidad Católica del Perú para informar

y sensibilizar a la ciudadanía sobre los impactos del cambio climático en el país y en el mundo.

Como parte de su trabajo deberán crear una nueva animación para concientizar y brindar

recomendaciones a las personas sobre este tema.

Es importante que tengas en cuenta algunos datos importantes para la realizar esta campaña:

1. El trabajo será realizado en grupos de dos o tres compañeros. 2. Para elegir un tema específico y puntual a abordar puedes ingresar a la siguiente

dirección web: http://www.pucp.edu.pe/climadecambios/ para conocer más sobre el trabajo que viene realizando esta iniciativa.

3. Recuerda que la animación debe iniciarse teniendo un objetivo, es decir, qué quieres lograr en el público que la vea, por lo deberás crear un story board o, en su defecto, boceto de lo que va a contener dicha animación.

4. Para lograrlo, deberás aplicar todo lo aprendido a lo largo del curso (herramientas y los diversos tipos de animación=.

5. Al finalizar, entregarás a tu profesor/a los bocetos de donde fue tu punto de partida, los archivos de dibujo o animaciones parciales, el archivo final en formato “.fla” y el archivo de presentación “swf”.

¿Qué fue lo que más te gusto del trabajo realizado en Adobe Flash?

Aplica lo aprendido

Investiga que otras animaciones puedes realizar con este

programa.

Reflexiona