1.6 Diseñar animaciones (Película)

a) Propiedades (animaciones de movimiento y de forma)

Para crear una animación se modifica el contenido de los fotogramas sucesivos. Se puede

hacer que un objeto se desplace, gire, cambie de tamaño de color y de forma.

b) Interpolación

Una interpolación es una animación creada mediante especificaciones de distintos

valores para una propiedad de un objeto en distintos fotogramas. Una Animación

Interpolada es aquella donde se diseñan los fotogramas clave de inicio y fin y todos los

fotogramas intermedios se crean solos.

Existen dos tipos de Interpolaciones:

1. Animación interpolada de movimiento, se indican mediante un punto negro al

principio del fotograma clave, los fotogramas interpolados intermedios tienen

una flecha negra con un fondo lila claro.

2. Animación interpolada de Forma, se indican con un punto negro al principio

del fotograma clave inicial, los fotogramas intermedios tienen una flecha negra

con un fondo verde claro.

1. Animación Interpolada de Movimiento, aquí se definen las propiedades como el

tamaño, la posición, el color en puntos que se señalan en la línea del tiempo y se

puede aplicar a objetos simples, símbolos, grupos de objetos o un bloque de texto,

después estas propiedades se pueden cambiar. Se utilizan fotogramas claves

54 Academia de Informática Aplicada Academia de Informática Aplicada 54

donde se especifican los cambios de animación de un fotograma y el programa

creara los fotogramas intermedios.

Práctica guiada para interpolación de Movimiento

1. Creamos un nuevo documento.

2. Buscamos un paisaje de playa

3. Insertamos un fotograma clave en el fotograma 50

4. Creamos una nueva capa

5. Insertamos a biblioteca una imagen de un velero

6. Nos posicionamos en el fotograma 1

7. Insertamos al escenario la imagen del velero y lo colocamos al extremo inferior

izquierdo del escenario.

55 Academia de Informática Aplicada Academia de Informática Aplicada 55

8. En el fotograma 50 de la capa 2 insertamos un fotograma clave.

9. Movemos el velero al extremo derecho del escenario.

10. Nos posicionamos en el fotograma 25 aproximadamente vamos al inspector de

propiedades y le asignamos la interpolación de movimiento.

Otra forma de asignar interpolación de movimiento es posicionamos en el fotograma 25

botón derecho del mouse crear interpolación de movimiento.

11. Probamos la película. Guarda tu diseño como velero_interpolacion

Revisó:

56 Academia de Informática Aplicada Academia de Informática Aplicada 56

Animación Interpolada de Forma, permite convertir una figura en otra de manera

gradual (morphing).

Práctica guiada para interpolación de Forma

1. Dibujamos un círculo con fondo sin línea en el extremo superior izquierdo en el

fotograma 1.

2. Insertamos un fotograma clave en el fotograma 50.

3. Dibujamos en el extremo inferior derecho un cuadrado con un fondo de diferente

color.

4. Posicionados en el fotograma 5º eliminamos el círculo.

Academia de Informática Aplicada 57 57 Academia de Informática Aplicada

5. Nos posicionamos en el fotograma 25 aproximadamente vamos al inspector de

propiedades y le asignamos la interpolación de forma.

6. Probamos nuestra película. Guarda tu animación como circuadrado_forma.

Revisó:

c) Insertar Objetos

SÍMBOLOS

Un símbolo puede ser un gráfico, un botón o un clip de película que se crea una vez y que

se puede reutilizar en el transcurso de la película o en otras películas.

Estos símbolos se almacenan automáticamente en la Biblioteca y estarán disponibles

para posteriormente ser utilizadas.

Hay tres tipos de símbolos:

Gráficos: Son imágenes o vectores estáticos que son incorporados a la línea de

tiempo principal. No funcionan los controles interactivos ni los sonidos en

este tipo de símbolo.

Botones: Permite la interactividad en las películas, donde se pueden agregar

una serie de instrucciones o acciones que el usuario podrá utilizar generando

un evento. Está constituido por cuatro fotogramas (reposo, sobre, presionado y zona

activa)

Academia de Informática Aplicada 58 58 Academia de Informática Aplicada

Clips de película: Pueden contener otros clips de película, botones o gráficos,

haciendo de esta manera objetos con mayor complejidad e interacción superior.

Los clips de película tienen una línea de tiempo independiente, el cual será de

gran ayuda para incluir en nuestras películas de línea de tiempo principal.

Para crear un símbolo vamos al menú insertar nuevo símbolo aparecerá la siguiente

ventana:

Práctica guiada para crear un símbolo de tipo película

1. Vamos al menú insertar

2. Nuevo símbolo

3. Le daremos el nombre de llama al símbolo y seleccionamos tipo clip de película

como se muestra:

4. Dibujamos un llama de una vela con la herramienta de circulo

5. Insertamos un fotograma clave en el fotograma 5

6. Sesgamos un poco la llama y la hacemos un poco más pequeña

7. Insertamos nuevamente un fotograma clave en el fotograma 10

8. Volvemos a sesgar la llama y la hacemos más grande

9. Regresamos a la escena 1

Academia de Informática Aplicada 59 59 Academia de Informática Aplicada

10. Cámbianos el nombre de la capa por llama

11. Insertamos una nueva capa la que se llamara pastel

12. Dibujaremos un pastel con unas velas como se muestra :

13. Insertamos en la escena las llamas necesarias para las velas

14. Probamos la película

15. Aquí visualizamos los efectos dados al símbolo de la llama. Guarda tu animación

como pastel_pelicula

Revisó:

Práctica guiada para crear un símbolo de tipo botón

1. Vamos al menú insertar

2. Nuevo símbolo

3. Le daremos el nombre de botón al símbolo y seleccionamos tipo botón como se

muestra:

Academia de Informática Aplicada 60 60 Academia de Informática Aplicada

4. En lugar de los fotogramas en la línea del tiempo aparecen las siguientes

opciones:

Reposo.- cuando muestro botón está en estado normal.

Sobre.- como se va a mostrar cuando el mouse pase sobre el botón.

Presionado.- como se va a mostrar cuando se presiona con el mouse el botón

Zona activa.- determina la zona en que el botón es sensible al mouse.

5. Dibujaremos un ovalo con relleno, sin línea en la zona de reposo.

6. En la zona de sobre insertamos un fotograma clave y cambiamos de color al botón.

7. Insertamos un fotograma clave en la zona de presionado y nuevamente lo cambiamos

de color.

8. Regresamos a la escena y probamos nuestro botón.

Visualizamos que el botón va a cambiar de color cuando pase el mouse por encima de él y

nuevamente cambiara de color cuando demos clic sobre el botón. Guarda tu animación como

simbolo_boton.

Revisó:

Academia de Informática Aplicada 61 61 Academia de Informática Aplicada

Combinar un símbolo de clip de película con un símbolo de botón.

1. Abrir la aplicación

2. Dibujar una bola de boliche en la escena

3. Convertir símbolo el objeto, eligiendo del menú

modificar, convertir a símbolo, tipo botón.

4. Damos doble clic al símbolo para editarlo.

5. Insertamos fotogramas clave en la zona de presionado y sobre, cambiando de color en

cada zona.

6. Regresamos a la zona de presionado y convertimos el símbolo de botón a símbolo de

clip de película, eligiendo del menú modificar, convertir a símbolo, tipo clip de película.

7. Damos doble clic al símbolo de clip de película para editarlo.

8. En la línea del tiempo aparecerán fotogramas.

9. Insertamos un fotograma clave en el fotograma clave en el fotograma 40

10. Insertamos una interpolación de movimiento.

11. En el inspector de propiedades aparece una opción de girar

12. Seleccionamos la opción de horario.

13. Regresamos a la escena y probamos la película.

Al posicionarnos en el objeto girara la pelota. Guarda tu animación como boton_pelicula.

Revisó:

Academia de Informática Aplicada 62 62 Academia de Informática Aplicada

Actividad

Realiza lo siguiente:

1. Dibuja un personaje

2. Conviértelo a símbolo de botón

3. Cuando pasemos el mouse sobre el personaje debe hacer algo, por ejemplo: levantar los

brazos, brincar, sonreír, etc.,

4. Al dar clic sobre el personaje debe decir una frase.

5. Guardar el documento con el nombre de personaje

LISTA DE COTEJO

Instrucciones: Marca con una “X” si cumplió o no los siguientes reactivos.

Actividad SI NO Observaciones

1. Creó un nuevo documento de Flash

2. Creó un símbolo de tipo botón de un

personaje

3. Cuando pasa el mouse por el personaje hace

algún movimiento.

4. Al dar clic en el personaje aparece alguna

frase.

5. Guardo el documento con el nombre de

personaje.

Total de aciertos: Alumno Coevaluador:

Nota: Toma como referencia el siguiente enlace para el adecuado

desarrollo de tus prácticas.

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

Academia de Informática Aplicada 63 63 Academia de Informática Aplicada