Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con...

11
Ing.Eddy Ruiz 1 Tema 3 Animación por Computadora Objetivos Conocer los fundamentos de la animación. Conocer las técnicas para crear animaciones cuadro por cuadro. Conocer las técnicas para crear animaciones interpolativas mediante Adobe Flash. Sistema de conocimientos 1.Concepto de animación. a)Animación cuadro por cuadro. b)Animación iterpolativa. 2.Animación cuadro por cuadro c)Creación de los cuadros utilizando photoshop. d)Combinación de los cuadros utilizando Jasc Animation Shop y Gif Animator. 3.Animación interpolativa e)Concepto de interpolación f)Creación de animaciones mediante Adobe Flash. Ing.Eddy Ruiz 2 Tema 3 Animación por Computadora 1.Concepto de animación. Animación cuadro por cuadro. Animación interpolativa. 2.Animación cuadro por cuadro Creación de los cuadros utilizando photoshop. Combinación de los cuadros utilizando Jasc Animation Shop y Gif Animator.

Transcript of Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con...

Page 1: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

1

Tema 3 Animación por Computadora

● ObjetivosConocer los fundamentos de la animación.Conocer las técnicas para crear animaciones cuadro por

cuadro.Conocer las técnicas para crear animaciones interpolativas

mediante Adobe Flash.Sistema de conocimientos1.Concepto de animación.a)Animación cuadro por cuadro.b)Animación iterpolativa.2.Animación cuadro por cuadroc)Creación de los cuadros utilizando photoshop.d)Combinación de los cuadros utilizando Jasc Animation Shop

y Gif Animator.3.Animación interpolativae)Concepto de interpolaciónf)Creación de animaciones mediante Adobe Flash.

Ing.Eddy Ruiz

2

Tema 3 Animación por Computadora1.Concepto de animación.

● Animación cuadro por cuadro.

● Animación interpolativa.

2.Animación cuadro por cuadroCreación de los cuadros utilizando photoshop.Combinación de los cuadros utilizando Jasc Animation Shop y Gif Animator.

Page 2: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

3

Concepto de Animación

● La animación por computadora es el arte de crear imágenes en movimiento mediante el uso de computadoras.

Ing.Eddy Ruiz

4

Animación Cuadro por cuadro● “Stop motion”, “stop-action” o “frame-by-frame” o “cuadro a

cuadro” es una técnica de animación utilizada para hacer que objetos inanimados parezcan moverse. A los objetos se los mueve sutilmente mientras son filmados un cuadro a la vez. creando una ilusión de movimiento cuando el grupo de cuadros se muestra en una secuencia contínua.

Page 3: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

5

Animación Con interpolacion

● La interpolación de movimiento permite introducir cambios en las propiedades de instancias, grupos y tipos; Flash puede interpolar su posición, tamaño, rotación e inclinación. También puede interpolar el color de las instancias y los tipos para crear cambios graduales de color o hacer aparecer o desaparecer instancias de forma paulatina.

Ing.Eddy Ruiz

6

Animación Con interpolacion● Interpolación de cambio de forma: Animación de una transformación

de una silueta o forma sobre el escenario generada automáticamente por Flash a partir de un fotograma clave inicial y otro final.

● Interpolación de movimiento: Animación de traslación, giro o cambio de color de un objeto sobre el escenario generada automáticamente por Flash a partir de un fotograma clave inicial y otro final.

● Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de mas distintas.

Page 4: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

7

Animación cuadro por cuadro

● Creación de cuadros con Photoshop:

En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5) o Línea de tiempo (CS6) para crear cuadros de animación. Cada cuadro representa una configuración de capas.

Ing.Eddy Ruiz

8

Animación cuadro por cuadro

● Crear los cuadros con adobe photoshop

1.Abrir un archivo nuevo

2.Crear las capas con los cuadros

3.Colocarse en vista de movimiento

Page 5: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

9

Animación cuadro por cuadro

Ubicarce en esta Opcion

Ing.Eddy Ruiz

10

Animación cuadro por cuadro

Se presiona click en este botón con la capa selecciona que se quiere agregar a la animación,Nota:las demás capas tienen que estar invisibles o con sin el icono ojo

Page 6: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

11

Animación cuadro por cuadro● Creación de cuadros con Photoshop:

Cada capa es unCuadro

Se ejecuta cuadro por cuadro

Ing.Eddy Ruiz

12

Animación cuadro por cuadro

Les aparecerá esta ventana aquí las opciones para hacer su vídeoO los cuadro creados para su animación cuadro por cuadro

Page 7: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

13

Animación cuadro por cuadro● En el caso que usted ya tenga una secuencia

de fotografia o cuadros puede cargarlos con la opcion ciguiente en el manu de herramientas archivo-> Secuencia de comando->Cargar Archivos de pilas

Ing.Eddy Ruiz

14

Animaciones Iterpolativas

Page 8: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

15

Una interpolación de movimiento es una animación creada mediante la especificación de distintos valores para una propiedad de objeto en distintos fotogramas. Flash Pro calcula los valores de dicha propiedad entre los dos fotogramas. En inglés, la interpolación recibe el nombre de “tween” que, a su vez, viene de las palabras “in between” (intermedio).

Animación iterpolativa

Ing.Eddy Ruiz

16

Animación iterpolativaAntes de crear interpolaciones, resulta útil entender bien los siguientes conceptos de Flash Pro:

Dibujar en el escenario

Capas de línea de tiempo y orden de apilación de objetos en una sola capa y en varias capas

Mover y transformar objetos en el escenario y en el inspector de propiedades

Utilizar la línea de tiempo, incluida la duración del objeto, y seleccionar objetos en puntos temporales específicos. Consulte Fotogramas y fotogramas clave para aprender los conceptos básicos.

Símbolos y propiedades de símbolos. Algunos tipos de símbolos interpolables son los clips de película, los botones y los gráficos. El texto también es interpolable.

Símbolos anidados. Las instancias de símbolo se pueden anidar en otros símbolos.

Opcional: editar curvas de Bezier con las herramientas Selección y Subselección. Puede utilizar estas herramientas para editar trazados de movimiento interpolado.

Page 9: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

17

Animaciones iterpolativa

Lenguaje ActionScripActionScript es un lenguaje de script, esto es, no requiere la creación de un programa completo para que la aplicación alcance los objetivos. El lenguaje está basado en especificaciones de estándar de industria ECMA-262, un estándar para Javascript, de ahí que ActionScript se parezca tanto a Javascript.

Ing.Eddy Ruiz

18

Animaciones Iterpolativas

ActionScript se ejecuta mediante la máquina virtual ActionScript (AVM), que forma parte de Flash Player. El código ActionScript se suele compilar a un formato de código de bytes (un tipo de lenguaje que los ordenadores pueden escribir y comprender) mediante un compilador.

Page 10: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

19

Animaciones iterpolativas

● Componentes de flash:

También se pueden descargar componentes adicionales del sitio Web de la zona de intercambio de Adobe en http://www.adobe.com/go/flash_exchange_es. Para instalar componentes descargados de la zona de intercambio, es necesario descargar e instalar Adobe®

Ing.Eddy Ruiz

20

Animaciones iterpolativasInterpolaciones de movimiento. Si asignamos distintos valores en distintos fotogramas a una o varias propiedades de un objeto, como por ejemplo la posición, la escala, la transparencia, etc., Flash calculará los valores intermedios entre ambos fotogramas, de tal forma que el cambio sea gradual. Es el tipo de interpolación que crearemos en este tutorial.

Interpolaciones clásicas. Son la forma en la que se creaban interpolaciones en las versiones anteriores de Flash. Son similares en varios aspectos a las interpolaciones de movimiento, aunque son más difíciles de crear y manipular.

Poses de cinemática inversa. Son animaciones mediante huesos que trataremos en el siguiente tutorial.

Interpolaciones de forma. Son animaciones en las que pasamos de una forma a otra diferente. Al igual que en otro tipo de animaciones, Flash crea los pasos intermedios entre dos fotogramas, en este caso entre formas diferentes.

Fotograma a fotograma. Flash muestra simplemente cada fotograma en un momento en el tiempo, por lo que, como en el cine, se puede crear la sensación de animación al mostrar cada fotograma un contenido diferente. Es la forma más laboriosa de animar.

Page 11: Tema 3 Animación por Computadora Ruiz 7 Animación cuadro por cuadro Creación de cuadros con Photoshop: En Photoshop, puede utilizar los paneles Animación (Photoshop Extended CS5)

Ing.Eddy Ruiz

21

Animaciones iterpolativas