Tipos de Animación

48,787 views

Published on

En esta unidad se enseña los diferentes tipos de animación que hay en flash; así como el uso de máscaras y guías de movimientos

5 Comments
16 Likes
Statistics
Notes
  • me dejarias poder descargarla porfavor es para poder tener el concepto basico debido a que mi pc es viejita es una pentium 4 con xp y es muy lenta y antigua para tener editor flash y esas cosas pero necesito presentar el trabajo y necesitaria que me ayudes con esta para poder presebntarla a nosotros nos pidieron uno ya echo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Me gustaria poder descargarlo...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • no puede haber una ayuda a medias... o lo haces o no lo haces....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • necesito esta ayuda, poderla descargar gracias...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • fkjdkjwd
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
48,787
On SlideShare
0
From Embeds
0
Number of Embeds
2,331
Actions
Shares
0
Downloads
0
Comments
5
Likes
16
Embeds 0
No embeds

No notes for slide

Tipos de Animación

  1. 1. Unidad 6 Animación en la línea de Tiempo Trabajo en la línea de tiempo
  2. 2. Capas - Definición de capa <ul><li>Puede imaginarse una capa como una serie de láminas transparentes de acetato apiladas una encima de otra. </li></ul><ul><li>Cuando una capa no tiene ningún contenido, deja entrever las capas subyacentes. </li></ul><ul><li>Utilice capas para organizar las imágenes de una película . </li></ul><ul><li>Puede dibujar y modificar las ilustraciones de una capa sin que afecte a las demás. </li></ul>
  3. 3. Creación de capas y carpetas de capas <ul><li>Haga clic en el botón Agregar capa en la parte inferior de la línea de tiempo. </li></ul><ul><li>• Elija Insertar > Capa . </li></ul><ul><li>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. </li></ul>
  4. 4. Creación de capas y carpetas de capas <ul><li>Para crear una carpeta de capas , realice una de las acciones siguientes: </li></ul><ul><li>• Seleccione una capa o una carpeta en la línea de tiempo y, a continuación, elija Insertar > Carpeta de capas . </li></ul><ul><li>• 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. </li></ul><ul><li>La nueva carpeta aparece encima de la capa o carpeta seleccionada. </li></ul>
  5. 5. Creación de capas y carpetas de capas <ul><li>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. </li></ul><ul><li>• Haga clic en el icono del ojo para ocultar todas las capas y carpetas. Haga clic de nuevo para mostrarlas. </li></ul>
  6. 6. Visualización de capas y carpetas de capas <ul><li>Arrastre el puntero por la columna del ojo para mostrar u ocultar varias capas o carpetas . </li></ul><ul><li>• 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 </li></ul><ul><li>carpetas. </li></ul><ul><li>Haga clic de nuevo con la tecla Alt u Opción presionada para mostrar todas las capas y carpetas. </li></ul>
  7. 7. Visualización de capas y carpetas de capas <ul><li>Demostración </li></ul>Vis_cap_carp_capas.fla
  8. 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. 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. 10. Selección y cambio de orden de capas <ul><li>Demostración </li></ul>Sel_cap_camborden.fla
  11. 11. Creación, asignación de nombre, bloqueo y ocultación de capas <ul><li>Práctica 1 </li></ul>Prac1_ capas.fla Hacer:
  12. 12. Utilización de fotogramas y fotogramas clave <ul><li>Un fotograma clave es un fotograma en el que se define un cambio en una animación , o bien se </li></ul><ul><li>incluyen acciones de fotograma para modificar una película. </li></ul><ul><li>Flash puede interpolar, o rellenar , los fotogramas ubicados entre fotogramas clave para generar animaciones sin cortes. </li></ul><ul><li>Puesto que los fotogramas clave permiten producir animaciones sin tener que dibujar cada fotograma, facilitan la creación de películas. </li></ul>Fotograma clave
  13. 13. Trabajo con fotogramas en la línea de tiempo Fotograma clave <ul><li>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. </li></ul>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. 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. 15. Formas de ver al TimeLine (Línea de Tiempo)
  16. 16. Trabajo con fotogramas en la línea de tiempo Prac2_ fotog_timeline.fla <ul><li>Práctica 2 </li></ul>Hacer:
  17. 17. Creación de animación <ul><li>Para crear animación de un documento de Adobe Flash CS3 , se modifica el contenido de fotogramas sucesivos. </li></ul><ul><li>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 . </li></ul><ul><li>Existen dos métodos ó tipos para crear una secuencia de animación en Flash: </li></ul><ul><ul><li>La animación interpolada y </li></ul></ul><ul><ul><li>La animación fotograma por fotograma . </li></ul></ul>
  18. 18. Animación Interpolada <ul><li>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 . </li></ul><ul><li>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. </li></ul><ul><li>En la animación interpolada , se crean los fotogramas inicial y </li></ul><ul><li>final, y Flash crea los fotogramas intermedios </li></ul>
  19. 19. Animación Interpolada <ul><li>Flash puede crear dos tipos de animaciones interpoladas: </li></ul><ul><ul><li>Interpolación de movimiento </li></ul></ul><ul><ul><li>Interpolación de formas. </li></ul></ul>
  20. 20. Animación Interpolada - Interpolación de Movimientos <ul><li>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. </li></ul><ul><li>Uso de fotogramas clave </li></ul><ul><li>Un fotograma clave es donde se especifican los cambios de animación de un fotograma. </li></ul>interpolación de movimiento <ul><li>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. </li></ul>
  21. 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. 22. Animación Interpolada - Interpolación de Movimientos <ul><li>Demostración </li></ul>Ani1.fla
  23. 23. Animación Interpolada - Interpolación de Movimientos Prac3_Ani1.fla <ul><li>Práctica 3 </li></ul>Hacer:
  24. 24. Animación Interpolada - Interpolación de Movimientos <ul><li>Demostración </li></ul>Ani2.fla
  25. 25. Animación Interpolada - Interpolación de Movimientos Prac4_Ani2.fla Hacer: <ul><li>Práctica 4 </li></ul>
  26. 26. Animación Interpolada - Interpolación de Movimientos <ul><li>Demostración </li></ul>Ani3.fla
  27. 27. Animación Interpolada - Interpolación de Movimientos Prac5_Ani3.fla Hacer: <ul><li>Práctica 5 </li></ul>
  28. 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. <ul><li>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. </li></ul>
  29. 29. Representaciones de animaciones en la línea de tiempo <ul><li>Una línea discontinua indica que la interpolación se ha interrumpido o está incompleta, por ejemplo, cuando falta el fotograma clave final. </li></ul><ul><li>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 </li></ul><ul><li>una línea negra con un rectángulo vacío en el último fotograma del recorrido. </li></ul>
  30. 30. Representaciones de animaciones en la línea de tiempo <ul><li>Una a pequeña indica que al fotograma se le asignó una acción de fotograma con el panel Acciones. </li></ul><ul><li>Una bandera roja indica que el fotograma contiene una etiqueta o un comentario. </li></ul><ul><li>Un ancla dorada indica que el fotograma es un anclaje con nombre. </li></ul>
  31. 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. 32. Giros en Interpolación <ul><li>Demostración </li></ul>Ani4_Giros interpolación
  33. 33. Giros en Interpolación Prac6_Ani4.fla <ul><li>Práctica 6 </li></ul>Hacer:
  34. 34. Animación Interpolada - Interpolación de Movimientos Hacer: <ul><li>Labs </li></ul>Lab61_Terminado.swf Lab62_Terminado.swf Lab63_Terminado.swf Lab64_Terminado.swf Lab65_Terminado.swf
  35. 35. Interpolación de movimiento a lo largo de un trazado <ul><li>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. </li></ul><ul><li>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. </li></ul>
  36. 36. Interpolación de movimiento a lo largo de un trazado <ul><li>Demostración </li></ul>Ani5_ guiamovimientos.fla
  37. 37. Interpolación de movimiento a lo largo de un trazado <ul><li>Práctica </li></ul>Pract7_Ani5guiamov.fla
  38. 38. Interpolación de formas <ul><li>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. </li></ul>
  39. 39. Interpolación de formas <ul><li>Al interpolar formas se crea un efecto similar al de transformación y las formas parecen cambiar en el transcurso del tiempo. </li></ul><ul><li>Flash también puede interpolar la ubicación, el tamaño y el color de las formas. </li></ul>
  40. 40. Interpolación de formas <ul><li>Elija una opción para Tipo de mezcla: </li></ul><ul><li>Distributiva crea una animación con formas intermedias suaves y regulares. </li></ul><ul><li>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. </li></ul>
  41. 41. Interpolación de formas <ul><li>Opción de Borrado </li></ul><ul><li>In(Acelerar el Final).- Para empezar la interpolación de formas gradualmente y acelerar la interpolación hacia el final </li></ul><ul><li>de la animación, arrastre el deslizador hacia abajo o introduzca un valor negativo entre -1 y - 100. </li></ul><ul><li>• Out(Acelerar el Inicio).- Para empezar la interpolación rápidamente y ralentizar la interpolación hacia el final de la </li></ul><ul><li>animación, arrastre el deslizador hacia arriba o introduzca un valor entre 1 y 100. </li></ul>
  42. 42. Interpolación de formas <ul><li>Demostración </li></ul>Ani6Int-Interforma.fla
  43. 43. Interpolación de formas <ul><li>Práctica </li></ul>Prac8_ Ani6Int-Interforma.fla
  44. 44. Interpolación de formas - Pintura con una imagen de mapa de bits <ul><li>Demostración </li></ul>Ani7Int-Interforma.fla
  45. 45. Interpolación de formas - Pintura con una imagen de mapa de bits <ul><li>Práctica </li></ul>Prac9_ Ani7Int-Interforma.fla
  46. 46. Interpolación de formas - Pintura con una imagen de mapa de bits <ul><li>Demostración </li></ul>Ani8Int-Interforma.fla
  47. 47. Interpolación de formas - Pintura con una imagen de mapa de bits <ul><li>Práctica </li></ul>Prac10_ Ani8Int-Interforma.fla
  48. 48. Interpolación de formas - Pintura con una imagen de mapa de bits <ul><li>Demostración </li></ul>Ani9Int-Interforma.fla
  49. 49. Interpolación de formas - Pintura con una imagen de mapa de bits <ul><li>Práctica </li></ul>Prac11_ Ani9Int-Interforma.fla
  50. 50. Animación Interpolada - Interpolación de Forma Hacer: <ul><li>Laboratorios </li></ul>Labs(Interforma ). fla IntForm01N1.swf IntForm02NumerosCirculos.swf
  51. 51. Uso de consejos de forma <ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>Su color es amarillo en el fotograma inicial y verde en el final. Si no están en una curva son rojos . </li></ul>
  52. 52. Uso de consejos de forma La misma interpolación de formas sin (arriba) o con (abajo) consejos de forma, respectivamente. <ul><li>Lo encontramos en: </li></ul><ul><li>Modificar > Forma > Añadir consejo de forma . </li></ul>
  53. 53. Uso de consejos de forma <ul><li>Demostración </li></ul>Ani10Int-consejoforma.fla
  54. 54. Uso de consejos de forma <ul><li>Numero </li></ul><ul><li>Práctica </li></ul>Pract12_Ani10Int-consejoforma.fla <ul><li>MFMX </li></ul>
  55. 55. Uso de capas de máscara <ul><li>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. </li></ul><ul><li>Varias capas pueden agruparse bajo una misma capa de máscara para crear efectos sofisticados. </li></ul><ul><li>Utilice cualquier tipo de animación, excepto trazados de movimiento, para mover una máscara . </li></ul><ul><li>En las capas de máscara no pueden introducirse en botones. </li></ul>
  56. 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. 57. Uso de capas de máscara <ul><li>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. </li></ul><ul><li>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. </li></ul>Explicar en Pizarra y Hacer ejemplo.
  58. 58. Uso de capas de máscara <ul><li>Demostración </li></ul>Ani11_mascaras Ani12_mascaras
  59. 59. Uso de capas de máscara <ul><li>Práctica </li></ul>pract_mascara.fla

×