El documento aborda la animación en la línea de tiempo utilizando capas y fotogramas clave en Adobe Flash CS3, describiendo la creación, organización y visualización de capas, así como las técnicas de animación como la interpolación de movimiento y de formas. Se explican procesos como la selección, nombrado y ocultación de capas, así como el uso de fotogramas y fotogramas clave para facilitar la animación. También se discuten las capas de máscara y cómo se utilizan para crear efectos visuales en las animaciones.

1. Unidad 6 Animación en la línea de Tiempo Trabajo en la línea de tiempo

2. Capas - Definición de capa Puede imaginarse una capa como una serie de láminas transparentes de acetato apiladas una encima de otra. Cuando una capa no tiene ningún contenido, deja entrever las capas subyacentes. Utilice capas para organizar las imágenes de una película . Puede dibujar y modificar las ilustraciones de una capa sin que afecte a las demás.

3. Creación de capas y carpetas de capas Haga clic en el botón Agregar capa en la parte inferior de la línea de tiempo. • Elija Insertar > Capa . Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) en un nombre de capa de la línea de tiempo y elija Insertar capa en el menú contextual.

4. Creación de capas y carpetas de capas Para crear una carpeta de capas , realice una de las acciones siguientes: • Seleccione una capa o una carpeta en la línea de tiempo y, a continuación, elija Insertar > Carpeta de capas . • Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) en un nombre de capa de la línea de tiempo y elija Insertar carpeta en el menú contextual. La nueva carpeta aparece encima de la capa o carpeta seleccionada.

5. Creación de capas y carpetas de capas Haga clic en la columna del ojo situada a la derecha del nombre de la capa o carpeta en la línea de tiempo para ocultarla. Haga clic de nuevo para mostrarla. • Haga clic en el icono del ojo para ocultar todas las capas y carpetas. Haga clic de nuevo para mostrarlas.

6. Visualización de capas y carpetas de capas Arrastre el puntero por la columna del ojo para mostrar u ocultar varias capas o carpetas . • Haga clic con la tecla Alt (Windows) u Opción (Macintosh) presionada en la columna del ojo situada a la derecha del nombre de una capa o carpeta para ocultar todas las demás capas y carpetas. Haga clic de nuevo con la tecla Alt u Opción presionada para mostrar todas las capas y carpetas.

7. Visualización de capas y carpetas de capas Demostración Vis_cap_carp_capas.fla

8. Selección de capas Para activar una capa, debe seleccionarla . Los dibujos o cambios se efectúan en la capa activa. El lápiz indica que puede modificarse. Los tres objetos del área de trabajo se encuentran en diferentes capas. 1. Seleccione el computadora en el área de trabajo. Observe que la capa computador se activa. 2. Seleccione la capa auto en la ventana de línea de tiempo. Observe que queda seleccionado el auto en el área de trabajo.

9. Cambio del orden de las capas El contenido de las capas se muestra en la ventana de línea de tiempo 1. Arrastre el triángulo sobre el círculo en el área de trabajo. Observe que el triángulo se superpone al círculo y que no se producen conexiones ni segmentaciones, incluso aunque las imágenes no son grupos ni símbolos. 2. En la línea de tiempo, arrastre la capa Triángulo a una posición por debajo de la capa Círculo.

10. Selección y cambio de orden de capas Demostración Sel_cap_camborden.fla

11. Creación, asignación de nombre, bloqueo y ocultación de capas Práctica 1 Prac1_ capas.fla Hacer:

12. Utilización de fotogramas y fotogramas clave Un fotograma clave es un fotograma en el que se define un cambio en una animación , o bien se incluyen acciones de fotograma para modificar una película. Flash puede interpolar, o rellenar , los fotogramas ubicados entre fotogramas clave para generar animaciones sin cortes. Puesto que los fotogramas clave permiten producir animaciones sin tener que dibujar cada fotograma, facilitan la creación de películas. Fotograma clave

13. Trabajo con fotogramas en la línea de tiempo Fotograma clave En la línea de tiempo, se trabaja con fotogramas y fotogramas clave , colocándolos en el orden en que desea que aparezcan los objetos de los fotogramas. Puede realizar las siguientes modificaciones tanto en los fotogramas como en los fotogramas clave: • Insertar, seleccionar, eliminar y mover fotogramas y fotogramas clave . • Arrastrar fotogramas y fotogramas clave a una nueva posición en la misma capa o en otra capa. • Copiar y pegar fotogramas y fotogramas clave .

14. Trabajo con fotogramas en la línea de tiempo Fotograma clave • Convertir fotogramas clave en fotogramas. • Arrastrar un elemento desde el panel Biblioteca hasta el escenario y agregar el elemento al fotograma clave actual. La línea de tiempo permite ver los fotogramas interpolados de una animación.

15. Formas de ver al TimeLine (Línea de Tiempo)

16. Trabajo con fotogramas en la línea de tiempo Prac2_ fotog_timeline.fla Práctica 2 Hacer:

17. Creación de animación Para crear animación de un documento de Adobe Flash CS3 , se modifica el contenido de fotogramas sucesivos. Puede hacer que un objeto se desplace a lo largo del escenario , aumente o disminuya de tamaño, gire, cambie de color, aparezca o desaparezca progresivamente, o cambie de forma . Existen dos métodos ó tipos para crear una secuencia de animación en Flash: La animación interpolada y La animación fotograma por fotograma .

18. Animación Interpolada La animación interpolada es una técnica esencial en la creación de movimientos y cambios en una película , al mismo tiempo que reduce al mínimo el espacio del archivo . Aprenderá cómo preparar un objeto para que se mueva por el escenario, cambie de tamaño, se gire, cambie de color y cambie de forma. En la animación interpolada , se crean los fotogramas inicial y final, y Flash crea los fotogramas intermedios

19. Animación Interpolada Flash puede crear dos tipos de animaciones interpoladas: Interpolación de movimiento Interpolación de formas.

20. Animación Interpolada - Interpolación de Movimientos En la interpolación de movimiento , se definen propiedades tales como la posición , el tamaño y la rotación de una instancia , un grupo o un bloque de texto en un instante específico , y después estas propiedades se pueden cambiar en otro momento. Uso de fotogramas clave Un fotograma clave es donde se especifican los cambios de animación de un fotograma. interpolación de movimiento En la animación interpolada , debe crear fotogramas clave en puntos señalados de la línea de tiempo y dejar que Flash cree los fotogramas intermedios.

21. Animación Interpolada - Interpolación de Movimientos interpolación de movimiento Los fotogramas segundo, tercero y cuarto resultan de interpolar el primer y el último fotograma clave

22. Animación Interpolada - Interpolación de Movimientos Demostración Ani1.fla

23. Animación Interpolada - Interpolación de Movimientos Prac3_Ani1.fla Práctica 3 Hacer:

24. Animación Interpolada - Interpolación de Movimientos Demostración Ani2.fla

25. Animación Interpolada - Interpolación de Movimientos Prac4_Ani2.fla Hacer: Práctica 4

26. Animación Interpolada - Interpolación de Movimientos Demostración Ani3.fla

27. Animación Interpolada - Interpolación de Movimientos Prac5_Ani3.fla Hacer: Práctica 5

28. Representaciones de animaciones en la línea de tiempo Flash distingue la animación fotograma por fotograma de la interpolada en la línea de tiempo de la siguiente forma: • Las interpolaciones 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. Las interpolaciones de formas se indican con un punto negro en el fotograma clave inicial; los fotogramas intermedios tienen una flecha negra con un fondo verde claro.

29. Representaciones de animaciones en la línea de tiempo Una línea discontinua indica que la interpolación se ha interrumpido o está incompleta, por ejemplo, cuando falta el fotograma clave final. Un fotograma clave sencillo viene indicado por un punto negro. Los fotogramas en gris claro después de un fotograma clave sencillo tienen el mismo contenido sin ningún cambio y tienen una línea negra con un rectángulo vacío en el último fotograma del recorrido.

30. Representaciones de animaciones en la línea de tiempo Una a pequeña indica que al fotograma se le asignó una acción de fotograma con el panel Acciones. Una bandera roja indica que el fotograma contiene una etiqueta o un comentario. Un ancla dorada indica que el fotograma es un anclaje con nombre.

31. Giros en Interpolación Para girar el elemento seleccionado mientras se interpola, elija una opción del menú Girar. • Para impedir la rotación, seleccione Ninguna (configuración predeterminada). • Para girar el objeto una vez en la dirección que requiera el mínimo movimiento, seleccione Auto. • Para rotar el objeto de la forma indicada, e introducir un número para especificar el número de rotaciones, seleccione Hacia la derecha o Hacia la izquierda.

32. Giros en Interpolación Demostración Ani4_Giros interpolación

33. Giros en Interpolación Prac6_Ani4.fla Práctica 6 Hacer:

34. Animación Interpolada - Interpolación de Movimientos Hacer: Labs Lab61_Terminado.swf Lab62_Terminado.swf Lab63_Terminado.swf Lab64_Terminado.swf Lab65_Terminado.swf

35. Interpolación de movimiento a lo largo de un trazado Aunque es probable que ya se imagine que si define varios fotogramas clave puede hacer que un símbolo realice un recorrido más complejo, ahora aprenderá el método más sencillo que facilitan los trazados de movimiento. Las capas de guía de movimiento permiten dibujar trazados a lo largo de los cuales se animan instancias, grupos y bloques de texto interpolados.

36. Interpolación de movimiento a lo largo de un trazado Demostración Ani5_ guiamovimientos.fla

37. Interpolación de movimiento a lo largo de un trazado Práctica Pract7_Ani5guiamov.fla

38. Interpolación de formas La interpolación de forma se utiliza para cambiar la forma de una imagen en el tiempo. Aunque es muy parecida a la interpolación de movimiento, se diferencia de ésta en que para interpolar formas se utilizan imágenes no agrupadas. Flash no puede interpolar formas de grupos ni de símbolos.

39. Interpolación de formas Al interpolar formas se crea un efecto similar al de transformación y las formas parecen cambiar en el transcurso del tiempo. Flash también puede interpolar la ubicación, el tamaño y el color de las formas.

40. Interpolación de formas Elija una opción para Tipo de mezcla: Distributiva crea una animación con formas intermedias suaves y regulares. Angular crea una animación que mantiene las esquinas y líneas rectas en las formas intermedias. Sólo es apropiado para formas de mezcla con esquinas en punta y líneas rectas. Si las formas elegidas no tienen esquinas, Flash toma a la interpolación de forma Distributiva.

41. Interpolación de formas Opción de Borrado In(Acelerar el Final).- Para empezar la interpolación de formas gradualmente y acelerar la interpolación hacia el final de la animación, arrastre el deslizador hacia abajo o introduzca un valor negativo entre -1 y - 100. • Out(Acelerar el Inicio).- Para empezar la interpolación rápidamente y ralentizar la interpolación hacia el final de la animación, arrastre el deslizador hacia arriba o introduzca un valor entre 1 y 100.

42. Interpolación de formas Demostración Ani6Int-Interforma.fla

43. Interpolación de formas Práctica Prac8_ Ani6Int-Interforma.fla

44. Interpolación de formas - Pintura con una imagen de mapa de bits Demostración Ani7Int-Interforma.fla

45. Interpolación de formas - Pintura con una imagen de mapa de bits Práctica Prac9_ Ani7Int-Interforma.fla

46. Interpolación de formas - Pintura con una imagen de mapa de bits Demostración Ani8Int-Interforma.fla

47. Interpolación de formas - Pintura con una imagen de mapa de bits Práctica Prac10_ Ani8Int-Interforma.fla

48. Interpolación de formas - Pintura con una imagen de mapa de bits Demostración Ani9Int-Interforma.fla

49. Interpolación de formas - Pintura con una imagen de mapa de bits Práctica Prac11_ Ani9Int-Interforma.fla

50. Animación Interpolada - Interpolación de Forma Hacer: Laboratorios Labs(Interforma ). fla IntForm01N1.swf IntForm02NumerosCirculos.swf

51. Uso de consejos de forma Utilice consejos de forma para controlar los cambios más complejos o improbables. Los consejos de forma identifican puntos que deberían corresponder en las formas inicial y final. Los consejos de forma tienen letras (a - z) para identificar los puntos que se corresponden en las figuras inicial y final. Puede utilizar hasta 26. Su color es amarillo en el fotograma inicial y verde en el final. Si no están en una curva son rojos .

52. Uso de consejos de forma La misma interpolación de formas sin (arriba) o con (abajo) consejos de forma, respectivamente. Lo encontramos en: Modificar > Forma > Añadir consejo de forma .

53. Uso de consejos de forma Demostración Ani10Int-consejoforma.fla

54. Uso de consejos de forma Numero Práctica Pract12_Ani10Int-consejoforma.fla MFMX

55. Uso de capas de máscara Para obtener el efecto de foco y de transiciones , cree un agujero para ver el contenido de la capa situada debajo mediante una capa de máscara. Varias capas pueden agruparse bajo una misma capa de máscara para crear efectos sofisticados. Utilice cualquier tipo de animación, excepto trazados de movimiento, para mover una máscara . En las capas de máscara no pueden introducirse en botones.

56. Uso de capas de máscara Una capa enmascarada, la forma rellena que será transparente en la máscara y el efecto de máscara final

57. Uso de capas de máscara Una capa de máscara oculta todo aquello que está vinculado a dicha capa, excepto el lugar donde se sitúa el objeto con relleno. Un objeto de tipos o un o de forma de rellenos en la capa de máscara crea un agujero a través del cual se ve el contenido de las capas situadas debajo. Explicar en Pizarra y Hacer ejemplo.

58. Uso de capas de máscara Demostración Ani11_mascaras Ani12_mascaras

59. Uso de capas de máscara Práctica pract_mascara.fla