Manual de laboratorio Animación Digital (Diseño Gráfico)

Animaciรณn Digital

CONTENIDO Introducción .......................................................................................................... 4 Guía 1 Introducción al área de trabajo ....................................................................................................5 Guía 2 Capas, sólidos y textos .................................................................................................................. 12 Guía 3 Conceptos básicos de animación, transformación de objetos ....................................... 23 Guía 4 Ejercicio de Aplicación .................................................................................................................. 30 Guía 5 Previsualización y render ............................................................................................................. 31 Guía 6 Personajes articulados (Duik) ..................................................................................................... 36 Guía 7 Animaciones continuas (nesting) ............................................................................................. 54 Guía 8 Sincronía de labios ......................................................................................................................... 57 Guía 9 Ejercicio de aplicación................................................................................................................... 67 Guía 10 Fondos cíclicos ................................................................................................................................. 68 Guía 11 Máscaras............................................................................................................................................. 72 Guía 12 Capas 3D ............................................................................................................................................ 79 Guía 13 Cámaras .............................................................................................................................................. 83 Guía 14 Luces y sombras .............................................................................................................................. 88 Guía 15 Ejercicio de Aplicación .................................................................................................................... 92

4

Introducción Este manual ha sido elaborado para orientar al estudiante de Animación Digital en el desarrollo de sus prácticas de laboratorios.

Está diseñado para que haga uso de él antes, durante y después de la práctica, de tal forma que le ofrece un método facilitador en su proceso de enseñanza/aprendizaje durante esta asignatura.

El desarrollo de esta asignatura tiene 15 sesiones, que incluyen una práctica semanal y el desarrollo de proyectos que permiten aplicar los conocimientos, conceptos y técnicas fundamentales adquiridos en cada uno de los contenidos de las guías.

Todas las guías de laboratorio están estructuradas de la siguiente forma:

• • • • • • • •

No. de guía Tema a desarrollar Competencia Indicador de logro por unidad Materiales Introducción teórica Procedimiento Bibliografía

5

GUÍA 1

Introducción al área de trabajo Contenidos Área de trabajo de After Effects Paneles que la componen El panel de proyecto Importar material Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales Guía No.1 previamente leída.

Animación digital Hoy nos introduciremos al fascinante mundo de la animación digital, un mundo totalmente nuevo, en el cual aprenderemos a darle vida a nuestras creaciones; A partir de hoy conoceremos diversas técnicas de animación y para ello nos ayudaremos de un recurso digital de la familia de Adobe, el programa de animación y video llamado After Effects.

After Effects es un programa de animación y video utilizado en su gran mayoría para crear gráficos en movimiento con efectos visuales para cine y televisión. Nos permite crear, animar, alterar composiciones en 2D y 3D.

6

Área de trabajo

El área de trabajo o interfaz de After Effects consta de la Ventana de composición, el Menú, el panel Proyecto, el panel de Herramientas, el panel Línea de tiempo y varios paneles que pueden ser organizados por el usuario. La Ventana de composición muestra el Escenario (Monitor) que cumple dos funciones: es el espacio para crear y editar los elementos gráficos que componen la película y el lugar donde se visualiza la animación completa o el fotograma que está seleccionado. Otro componente importante de la interfaz es la Línea de tiempo.

Este panel, propio de los programas de animación y video, representa el desarrollo de la película en el tiempo. Es una barra numerada horizontal que muestra los Fotogramas (Frames) que componen la animación. A la izquierda del panel “Línea de tiempo” están ubicadas las Capas (Layers) que sirven para organizar los elementos de la Película, los paneles flotantes completan la interfaz son varios, cada uno con su prestación propia.

Cuando iniciamos, todo el trabajo está dentro de un proyecto de After Effects (extensión de archivo editable: .aep). En el panel Proyecto vamos a agregar todos los archivos que utilizaremos en nuestra composición, cada archivo hace referencia a una dirección dentro de tu computadora, lo cual significa que si eliminas ese archivo, no podrá ser visible dentro del programa. Audio, video, imágenes, trabajo en vectores, archivos PDF y otros formatos pueden ser película. Toda película viene con una serie de parámetros que traen adjuntos al archivo y sirven al programa para determinar su canal alfa (transparencia) y otra información que dice cómo usarse.

7

Composición La composición (comp. en corto). Es aquí donde especificamos el orden de nuestra película.

Cada ítem en una composición se refiere a una capa.

Una capa es usualmente un ítem de película que ha sido añadido a la composición actual.

Existen otras clases de capas de películas que son sólidos, textos y formas; Objetos Null que ayuda a mantener las capas en grupo; Cámaras 3D y luces; y capas especiales para ajustar efectos.

Todos los archivos puedes usarlos cuantas veces los necesites en la misma composición, además de poder utilizarlos en otras composiciones dentro del mismo proyecto. Las composiciones se agruparán en el panel Proyecto donde se encuentran los demás archivos que estas utilizando. Al dar doble clic sobre una composición abrirá la misma en dos lugares, primero en el panel Composición y luego en la Línea de tiempo, si abres más de una composición se guardarán como ventanas en la Línea de tiempo.

El panel de Línea de tiempo es donde se colocan todos los elementos, secuenciarlos en el tiempo, controlar o hacer la animación.

1.

2.

3.

4.

5.

6.

7.

8.

9.

Muestra el nombre de la composición. Área de trabajo o escenario.

Muestra el porcentaje de zoom del área de trabajo.

Activa líneas de referencia para la pantalla.

Muestra el tiempo actual que se está reproduciendo.

Cambia la calidad de la previsualización.

Reajusta el área del escenario arrastrando el cursor.

Muestra la cámara activa.

Proporciona opciones de vista del proyecto (útil al trabajar con capas 3D).

8

Una de las ventajas de After Effects y sus composiciones, es que a pesar de cualquier ajuste que puedas realizar sobre ellas o sobre una capa, puedes regresar al elemento original sin perder ningún tipo de información; esto a la vez te da la facilidad de experimentar dentro del programa. Una composición puede contener tu trabajo final, que tienes que exportar o renderizar en el disco. El archivo de resultado usualmente una película o una imagen, puede ser usada como parte de un DVD, una página Web o como una película para usarla en otro proyecto. Un proyecto AE puede contener todas las composiciones que quieras, y puedes almacenarlas en orden para renderizarlas cuando duermes. Las composiciones pueden ser usadas como capas en otras composiciones a esto se le llama Nesting o anidar, haciendo posible construir animaciones complejas que son fáciles de comprender y editar.

El panel de Herramientas El panel de Herramientas está situado en la parte superior de la interfaz del programa.

Contiene diversas herramientas que puedes utilizar o te permite identificar la que esta seleccionada. Algunas de estas tienen un submenú que se abre donde se pueden ver sus variaciones. Cuando seleccionas una herramienta específica, opciones adicionales también aparecen en medio del panel de Herramientas. (Un ejemplo puede ser los botones que definen los colores y tipos de trazo y relleno cuando seleccionas la herramienta de formas).

Al seleccionar algunas herramientas también puedes ver que se abren paneles relacionados como, por ejemplo: al hacer clic sobre la herramienta texto.

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

Herramienta de selección directa (V) Herramienta mano (H) Herramienta zoom (Z) Herramienta de rotación (R) Herramienta de cámara unificada (C) Herramienta panorámica trasera y punto de ancla (Y) Herramienta dibujo de formas (Q) Herramienta pluma (G) Herramienta texto (Ctrl+T) Herramienta pincel (Ctrl+B) Herramienta tapón de clonar Herramienta borrador Herramienta pincel de rotoscopia Herramienta de transformación libre (Puppets) Herramientas extra de herramientas principales

9

El panel Proyecto Como mencionamos al principio el panel Proyecto es el lugar donde todos los archivos que estarán dentro de tu proyecto se guardarán, en el también podemos encontrar información acerca de cada elemento, así como también eliminarlos o sustituirlos.

10

Agregar un archivo al panel Proyecto Existen diversas formas de agregar un archivo al panel Proyecto: • Arrastra un archivo directamente en el panel Proyecto.

• Arrastra un archivo directamente en el panel Composición.

• Arrastra un archivo directamente en el panel Línea de tiempo.

• Da clic en el menú Archivo, luego selecciona la opción importar, ahora seleccionamos la opción Archivo y buscamos el elemento deseado.

• Presiona el atajo Ctrl+L. Línea de Tiempo La línea de tiempo organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas. Al igual que en las películas, los documentos de After Effects dividen el tiempo en fotogramas. Las capas son como varias bandas de película agrupadas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario.

Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora, no puedes cortar capas de tiempo, sino más bien acortar o alargar el tiempo de las mismas.

1. Muestra el nombre de la composición.

2. Muestra el tiempo actual que está transcurriendo.

3. Opciones de capa entre ellas tenemos: ocultar, “mutear”, mostrar solo la capa seleccionada y bloquear, además incluye otra serie de iconos con otras opciones de capa:

.

Tímido: oculta capas, pero solamente del panel Línea de tiempo.

Rasterizar: rasteriza continuamente la calidad de una capa.

Calidad y muestra: permite mejorar los bordes de los objetos.

Fx: desactiva o activa todos los efectos aplicados.

Fusión de fotogramas: interpola el contenido de un fotograma con una fusión ponderada.

Desenfoque de movimiento: simula desfiguración del movimiento.

Capa de ajusta: al aplicarlo convierte a una capa en una capa de ajuste.

Capas 3D: cambia las capas a su modo 3D.

11

Procedimiento Crear una carpeta para guardar tus proyectos.

Crear un proyecto y una composición de 1280x720.

Importar archivos de imágenes, de película y archivos múltiples.

Ubicarlos en el panel composición.

Todo esto se encuentra en la parte teórica.

Próxima clase Elaborar un proceso de bocetería de logo para un corto animado, presentar boceto final vectorizado.

Referencias bibliográficas • Creating Motion Graphics with After Effects. Trish y Chris Meyer. Editorial Elsevier.

Estados Unidos. 2008.

12

GUÍA 2

Capas, sólidos y texto Contenidos • • • •

Creando una nueva composición Las capas de sólidos Las capas de texto Propiedades de capas

Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales • •

Guía No. 2 previamente leída.

Diseño de logotipo para animación de corto animado, vectorizado (Archivo Editable).

Una nueva composición Ahora vamos a aprender cómo crear una composición, como crear diversos tipos de capas y navegar en el tiempo. El saber bien estos conceptos básicos, técnicas y atajos nos ayudarán para la siguiente clase que es animación. También vamos a ver lo que es una Área de seguridad, cuadrícula, guías y regla que están sobre la ventana de composición y todo lo que es importante en como previsualizar su trabajo.

La composición es el lugar donde se ponen las capas, dichas capas son el resultado de todos los elementos que vamos a utilizar para crear nuestras animaciones, ahí podemos editarlas, escalarlas, etc. Con diversas propiedades que veremos más adelante.

13

¿Cómo crear una Composición?

Existen diversas formas para crear una nueva composición: Desde la pantalla de bienvenida, haciendo clic en la opción nueva composición.

Dando clic en el menú Composición, y luego dando clic sobre el botón nueva composición.

Al tener un archivo en el panel proyecto, arrastramos el archivo hacia la opción que presenta el siguiente icono.

Dando clic sobre el icono en el panel composición.

Ventana de bienvenida de After Effects CC

14

Cuando hacemos alguno de los pasos anteriores encontraremos el siguiente cuadro de diálogo:

a) Establece un nombre a la composición. b) Establece el ajuste de formato de video deseado. c) Nos especifica el tamaño de resolución de nuestra película, podemos cambiarlo manualmente haciendo clic sobre el número en pixeles. d) Velocidad de fotogramas, aquí especificamos la cantidad de fotogramas por segundo. e) Determina el formato de cómo se leerá el tiempo HH:MM:SS:FF. f) Determina el tiempo total de duración de la composición. g) Especifica el color de fondo que tendrá tu composición.

Nota: Puedes cambiar cualquier ajuste de tu composición, dando clic sobre el menú Composición y luego en la opción ajustes de la composición.

15

Después de crear la composición, vamos a tener dos ventanas, la ventana de composición a la que llamaremos monitor, y la línea de tiempo, ambas poseerán el nombre del proyecto.

El monitor es donde ves la imagen que estas creando, siendo vista en el punto actual de tiempo en sintonía con la línea de tiempo. La parte gris que sostiene el monitor es área de trabajo donde puedes sacar tus elementos esperando entrar a la escena. Si cierras la composición y necesitas reabrirla, lo único que tienes que hacer es un doble click en el nombre de la composición en la ventana de proyecto. La línea de tiempo es “secuencial”, donde tu controlas el tiempo en que las capas empiezan y acaban, y como se animan durante el tiempo. El tiempo actual se ve en la línea de tiempo y en el monitor, y también está indicado con cifras azules a un lado de la línea de tiempo.

Las capas Las capas son los elementos que forman una composición. Puedes utilizar cuantas capas sean necesarias en tu proyecto, pueden ir desde una hasta miles, si no existe una sola capa, nuestro proyecto solo será un archivo vacío; puedes nombrarlas presionando la tecla ENTER sobre ellas y así mantener un mejor orden cuando sean demasiadas.

Las capas de After Effects son parecidas a las pistas de Adobe Premiere Pro. La diferencia principal es que cada capa de After Effects no puede tener más de un elemento de material de archivo como su origen, mientras que la pista de Premiere Pro suele contener varios clips.

Cada capa dentro del programa poseerá una línea de tiempo, la cual no podrás cortar, pero si ocultar un espacio de la misma.

Capas de en línea de Tiempo Puedes crear varios tipos de capas Puedes crear video basado en diversos tipos de capas como, por ejemplo, imágenes fijas, películas y pistas de audio; Capas que se crean en After Effects para realizar funciones especiales como, por ejemplo, cámaras, luces, capas de ajuste y objetos nulos. Capas de color sólido, capas sintéticas que alojan elementos visuales que se crean en After Effects, por ejemplo, capas de forma y capas de texto, capas de precomposición, que utilizan composiciones como sus elementos de material de archivo de origen.

16

Cuando se modifica una capa, esto no afectará al archivo de origen. Puedes utilizar un mismo elemento cuantas veces lo creas necesario, crearlas a partir de él, y que realicen diferentes funciones. Los cambios realizados en una capa no afectan a las otras, a menos que se vinculen las capas específicamente. Por ejemplo, puede mover, girar y dibujar máscaras para una capa sin que afecte a las demás capas de una composición.

Hay unas cuantas maneras de añadir una capa a la composición Arrastrar un elemento que se encuentra en el panel Proyecto al panel composición.

Arrastrar un elemento que se encuentra en el panel Proyecto al panel línea de tiempo.

Usando el hot key Command+/ (Control+/) también añadirá la capa al comp.

Nota: Las composiciones pueden tener un sinfín de capas solo que eso también les afectará a la hora de usar el programa ya que todo depende de la memoria RAM. Las capas se colocan una sobre otra en el timeline de esa manera la capa que está arriba de todas es la que se visualiza primero.

17

Líneas y área de seguridad Como en todo programa de Adobe, After Effects nos permite crear líneas guías para tener una mejor referencia de nuestro trabajo, para ello debemos activar las reglas, las cuales podemos activarlas con el conjunto de teclas Ctrl+R, y automáticamente aparecerán en el panel composición.

El área de seguridad es un conjunto de líneas guías que nos dan un conjunto de márgenes para tratar de evitar que elementos como textos, se ubiquen en esa área, ya que probablemente se corten en los monitores.

Para activar el área de seguridad y cuadrícula, iremos al Menú que se encuentra en la barra inferior del panel composición:

18

Sólidos Son elementos de capa de color sólido, que puede crear como elemento gráfico dentro de un entorno 2D que se animará, puede animarlo y aplicar diversos efectos al sólido, para crearlo realice los siguientes pasos: Vaya al menú capa; Seleccione la opción nueva; Ahora de clic sobre la opción sólido; A continuación, aparecerá un cuadro de diálogo; De clic en la opción aceptar; Podrás observar en la línea de tiempo una capa llamada sólido “color” 1.

Nombre: puede establecer un nombre personalizado para cada sólido.

Anchura y altura: puede establecer un tamaño predeterminado para el objeto. sólido, por defecto After Effects lo acoplara al tamaño del área de trabajo.

Unidades: puede cambiar el tipo de unidad de medición.

Color: puede establecer un color para el objeto sólido.

Nota: Puede cambiar la proporción del elemento sólido con las propiedades de capa que veremos más adelante.

19

Textos Como en todos los programas de Adobe que hemos estudiado con anterioridad, After Effects posee una herramienta de texto con la cual podemos introducir caracteres dentro de la composición, que también generará una nueva capa de texto.

Además, dentro de los menús flotantes encontraremos un menú específico para texto y párrafo con el cual podemos editar el estilo del texto conforme a nuestra necesidad, si no vemos dicho panel, podemos activarlo de la siguiente forma: Ir al menú ventana; Dar clic en la opción carácter o párrafo.

Ventana flotante del menú texto

Animación del texto En After Effects contamos con unas herramientas que nos ayudan a animar de una forma fácil los textos dentro del programa, esto nos proporciona mayor dinamismo en nuestros resultados finales. Se pueden animar las capas de texto igual que las demás capas. No obstante, las capas de texto ofrecen opciones de animación adicional con las que puede animar el texto dentro de las capas utilizando los siguientes métodos: Para animar la capa completa, no su contenido de texto, anime las propiedades de transformación, como haría en cualquier otra capa.

Aplicando ajustes preestablecidos desde el Menú de Bridge.

Utilizando los animadores de texto que poseen las capas de texto.

20

Animación de texto con animadores La animación de texto con animadores y selectores consta de tres pasos básicos: o Agregue un animador para especificar qué propiedades va a animar. o Utilice un selector para especificar cuánto afecta el animador a cada carácter. o Ajuste las propiedades de animación.

Capa de texto en el área de trabajo Lo haremos de la siguiente forma: Seleccione una capa de texto en el panel Línea de tiempo o seleccione los caracteres específicos que desee animar en el panel Composición.

Ir a Animación > Animar texto y a continuación, seleccione una propiedad en el menú.

Elija una propiedad en el menú Animar.

En el panel Línea de tiempo, ajuste los valores de las propiedades de animación.

Cada propiedad que se puede animar posee un cronometro al lado izquierdo, lo cual nos permitirá definir un valor inicial y final para una acción.

21

Propiedades de capa en el panel Línea de Tiempo Dentro de After Effects cada una de las capas que contenga nuestro proyecto, posee diversas propiedades que nos ayudan a transformar y animar un objeto, las propiedades más básicas y que toda capa posee son las propiedades de Transformación, que incluye las propiedades Posición, rotación, escala y opacidad.

Al agregar ciertas características a una capa (por ejemplo, al agregar máscaras o efectos, o al convertir la capa en capa 3D), la capa adquiere propiedades adicionales que se van guardando justamente debajo de ella, y las podremos ver al desplegar dicha capa. Hay propiedades de tiempo y espaciales; las propiedades de tiempo alterarán nuestra capa en algún momento en la línea de tiempo, por ejemplo, la opacidad; las propiedades espaciales pueden ajustar la posición del objeto dentro de nuestro escenario.

La mayoría de las propiedades dispone de un cronómetro. Todas las propiedades con un cronómetro pueden animarse; es decir, cambiar con el tiempo. La idea básica es proporcionar un estado inicial y un estado final a nuestra capa, para ser capaces de ver una transformación en el tiempo.

1. Propiedades de capa 2. Herramienta Cronómetro

22

Procedimiento Crear un proyecto y una composición de 1280x720.

Importar los archivos de su logotipo para crear una nueva composición, debe preparar antes dicho archivo para poder trabajar de una forma correcta (siga las indicaciones del docente para la preparación de archivos).

Próxima clase Presentar un story board de animación de logotipo para corto animado Composición de logotipo listo para animar.

Referencias bibliográficas • Creating Motion Graphics with After Effects. Trish y Chris Meyer. Editorial Elsevier, Estados Unidos. 2008.

23

GUÍA 3

Conceptos básicos de animación, transformación de objetos Contenidos Animación Fotogramas y fotogramas clave Editor de gráficos Transformar objetos Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales Guía No.3 previamente leída.

Crear composición para la animación de logotipo.

La animación La animación esta todo en el tiempo y espacio, y es que básicamente podríamos decir que la animación es el arte del tiempo y After Effects es nuestro mejor aliado para poder hacer esto, cada una de las propiedades de capa es capaz de ser animada en el tiempo. Por ejemplo, se puede animar la propiedad de Opacidad de una capa del 0% en el tiempo cero al 100% en el segundo 1 para hacer un fundido de la capa. Cualquier propiedad posee a su lado izquierdo un cronómetro, nos proporcionará controles para ajustar o animar dichas propiedades.

Las propiedades de una capa se animan utilizando fotogramas clave, expresiones o ambas.

La combinación de ellos nos ayuda a poder crear animaciones más complejas.

Así también contamos con el Editor de gráficos, que nos ayuda a editar por medio de graficas los movimientos de los efectos según nuestras necesidades.

Hoy aprenderemos a animar por medio de los fotogramas claves.

24

Fotogramas clave (Key frame) Los fotogramas clave son espacios en el tiempo que nos ayudan a definir valores para las propiedades de capa asignando una posición inicial y una final, básicamente algo parecido a una animación pose a pose.

Por ejemplo, la posición en el espacio, la opacidad o el volumen de audio. Los valores entre los fotogramas clave se interpolan. Esto quiere decir que debemos usar cuantos fotogramas claves sean necesarios para lograr movimiento o transformación de una propiedad; un solo fotograma clave por sí solo no podrá crear nada.

Cuando damos clic sobre los cronómetros de las propiedades After Effects automáticamente asigna un fotograma clave en la línea de tiempo de dicha propiedad, este fotograma luce como un diamante. Al activarse un diamante podemos definir los valores que deseemos sobre ese diamante.

1. Agregar o quitar fotogramas.

2. Cronómetro activo.

3. Valores que se transforman entre fotogramas clave (puedes asignar directamente un valor sobre los números azules).

4. Fotogramas clave, Key frames o diamantes en la línea de tiempo.

Para agregar un nuevo diamante podemos hacerlo de las siguientes formas:

Dando clic en la opción: agregar o quitar fotogramas clave que se encuentra al lado izquierdo del cronómetro (esta opción nos proporcionará unas flechas para navegar entre cada fotograma).

Moviendo el valor de dicha propiedad en cualquier otro punto de la línea de tiempo generará un nuevo fotograma clave.

Copiando un fotograma y pegándolo en otro punto de la línea de tiempo.

Nota: Sí el cronómetro permanece inactivo y deseas configurar un valor para una propiedad esto no agregará un nuevo fotograma clave, si no, el valor será el mismo para toda la propiedad de dicha capa.

25

Si se desactiva el cronómetro, se eliminan todos los fotogramas clave para esa propiedad de capa. No lo desactives si estás seguro de eliminar todos los fotogramas.

Asistente de fotogramas Cuando en una línea de tiempo tenemos algunos fotogramas, podemos dar clic derecho sobre ellos, y en el menú que aparece encontraremos una opción denominada “asistente de fotogramas clave” dicha herramienta nos permitirá ajustar el movimiento de las cosas según las opciones que nos brinda, por ejemplo: que una animación tenga una aceleración o una desaceleración, estas funciones nos permitirán lograr movimientos más realistas entre las interpolaciones que suceden entre dos o más fotogramas.

El Editor de gráficos

El Editor de gráficos representa los valores de la animación en gráficos de líneas 2D; el valor de tiempo de composición se representa horizontalmente (de izquierda a derecha). Por el contrario, en el modo de barra de capa, el gráfico de tiempo representa solo el elemento de tiempo horizontal, sin mostrar ninguna representación visual vertical de los valores variables. Para alternar entre el modo de barra de capa y el modo Editor de gráficos, haga clic en el botón Editor de gráficos ubicado en el panel Línea de tiempo.

En el Editor de gráficos, cada propiedad se representa mediante su propia curva,

podremos ver en él, los fotogramas clave que están interviniendo en nuestra animación, será útil para observar cómo se comporta el movimiento y editar ese mismo movimiento para mejorar nuestras animaciones.

26

Los fotogramas clave en el modo Editor de gráficos pueden tener controles de dirección en uno o en ambos lados. Los controles de dirección se utilizan para controlar la interpolación de curva. Puede utilizar el botón Separar dimensiones en la parte inferior del Editor de gráficos para separar los componentes de una propiedad Posición en propiedades individuales (la Posición X, Posición Y y Posición Z (para las capas tridimensionales) para poderlas modificar o animar independientemente.

Transformación de objetos Puede transformar objetos o capas de formas, para lograr animaciones dinámicas y fluidas según lo que necesite, para este proceso se pondrán en práctica los conceptos aprendidos de animación y fotogramas claves: Crear una nueva composición.

En línea de tiempo, vamos a crear dos capas de formas un rectángulo y un círculo (Para crear capas de forma puede ir directamente a la herramienta formas en la barra de herramientas que se ubica arriba de la interfaz del programa).

27

Vamos a llevar los dos objetos al centro del área de trabajo, además vamos a reajustar el punto de ancla (pivote) al centro de nuestros objetos (para mover el punto de ancla haremos uso de la siguiente herramienta . El punto de ancla es una especie de puntero que poseen todos los objetos dentro del área de trabajo de After Effects).

Ahora vamos a desplegar las propiedades de capa de las dos capas de formas, puedes hacer este proceso individual para cada capa.

Ahora desplegamos la opción elipse 1/ rectángulo 1.

Ahora veremos otra opción que dice trazado.

Sobre esa opción damos clic derecho y seleccionamos la opción convertir en trazado de curva.

28

Ahora veremos que al desplegar el menú hay una nueva opción llamada trazado, vamos a activar el cronómetro de esta opción para las dos capas.

Ahora haz lo siguiente en el orden que desees: vamos a copiar el diamante de la elipse, y lo vamos a pegar sobre la opción trazado de la capa rectángulo, en algún punto de la línea de tiempo.

29

Ocultaremos la capa rectángulo, y al mover la cabeza lectora, podrás ver la transformación de los objetos.

Procedimiento -Crear un proyecto y una composición de 1280x720.

-Con la composición de nuestro logotipo, vamos a comenzar a realizar una animación básica de 10 segundos en el cual se evaluará el uso de las propiedades básicas de animación.

Próxima clase -Desarrollo de animación de 10 segundos de logotipo para corto animado.

Referencias bibliográficas • Creating Motion Graphics with After Effects. Trish y Chris Meyer. Editorial Elsevier, Estados Unidos. 2008.

30

Ejercicio de Aplicación GUÍA 4

GUÍA 4

Ejercicio de Aplicación Contenidos • • •

After Effects y su entorno Capas, sólidos y textos Conceptos básicos de Animación, Transformación de Objetos

Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales • •

Conocimientos adquiridos en la unidad 1.

Desarrollo de la práctica: Animación de logotipo para corto animado 10 segundos.

31

GUÍA 5

Previsualización y render Contenidos • Previsualización de video • Agilizando el trabajo • Procesos de Render Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción audiovisual de acuerdo a las necesidades de comunicación.

Materiales • Guía No. 5 previamente leída.

• Archivos editables de la guía número 4.

Previsualización de vídeo Dentro de After Effects, podemos contar con una herramienta que nos permite previsualizar nuestro proyecto sin necesidad de llevarlo a un proceso de render. Estas herramientas las encontramos dentro del panel Previsualización (ventana, previsualización).

32

Al utilizar la previsualización para ver el video, After Effects asigna RAM para reproducir vídeo en el panel Línea de tiempo, en tiempo real. El número de fotogramas que se puede guardar para la reproducción en tiempo real depende de la cantidad de RAM disponible y de los ajustes del panel Previsualización.

Lo que After Effects realiza en el proceso de previsualización, es que guarda un porcentaje de archivos en caché, con el uso de la RAM para dar la mejor visualización en tiempo real de la película que se está creando; Para poder verlo, podemos dar clic en el botón play de dicho panel, o solamente presionar la barra espaciadora; cuando notes que la barra verde de la línea de tiempo está totalmente llena, After Effects comenzará a reproducir el video en tiempo real, así también escucharás el audio si lo utilizas.

En el panel Previsualización, puedes encontrar diversas herramientas para configurar el tipo de proceso que necesites que After Effects realice, puedes crear una configuración que se ajuste a tu tipo de trabajo, y así agilizar el mismo.

Con las herramientas puedes modificar las teclas, asignar el total de cache de guardado, la velocidad el rango entre otros, si quieres restaurar los valores predeterminados solamente debes hacer clic en el icono reestablecer opciones

Agilizando el trabajo Normalmente cuando se habla de previsualización no solo se refiere al resultado final que estamos obteniendo, sino también a la rapidez con que el programa puede realizar un proceso; normalmente se cree que este tipo de software, terminará ralentizando tu computadora, y no es del todo falso, todo corresponde al tipo de hardware que tu Pc o Mac, estén utilizando.

Dentro del panel de la composición After Effects incluye una herramienta que baja la calidad de lo que estamos viendo, pero a la vez nos ayuda a ocupar menor RAM por parte del programa y así poder agilizar los procesos dentro de él.

La opción la encontramos en la parte inferior del panel composición, normalmente observarás un texto que dice “completa”, sin embargo, al dar clic sobre ese botón, notarás una lista de opciones que corresponden a la resolución con la que tu computador está

33

trabajando, para realizar todos los procesos del programa, puedes ajustarlo para así evitar forzar tu computador y que se congele por algunos segundos.

Procesos de render Cuando hablamos de render, nos referimos al proceso en el cual un programa de video o 3D, se configura para guardar el proyecto final en un archivo de video. Este proceso puede volverse largo según la cantidad de información y efectos que hayamos aplicado a nuestro trabajo; desde After Effects podemos ser capaces de guardar diversos tipos de archivos de video, a continuación, veremos el proceso para poder realizarlo.

•

Con nuestro proyecto finalizado, vamos a dar clic en el menú Composición y luego en el menú añadir a cola de procesamiento.

34

• •

En el área de línea de tiempo, aparecerá la ventana cola de procesamiento, podremos ver que nuestro proyecto ha sido agregado a esa área y solo debemos configurar para luego hacer el render.

En el menú cola de procesamiento vamos a editar los siguientes ítems:

1. Módulo de salida: al dar clic sobre esta opción, vamos a seleccionar el tipo de formato de vídeo que mejor nos parezca: AVI, MOV, WAV, H.264 etc.

Ahora damos clic en aceptar).

2. Salida a: Aquí seleccionamos el lugar de destino de nuestro proyecto, además de asignar un nombre para el archivo final, damos clic en aceptar.

35

3. Ahora en la parte derecha superior del panel, daremos clic sobre el botón procesar.

Nota: Adobe también incorpora el sistema de procesamiento conocido como Adobe Media Encoder, el cual nos proporciona un gran número de formatos de vídeo por defecto (composición, Añadir a la cola de Adobe Media Encoder).

Procedimiento -Realizar un proceso de render para la composición de tu logotipo.

Próxima clase -Diseño de personaje articulado según indicaciones del docente.

Referencias bibliográficas.

• Creating Motion Graphics with After Effects. Trish y Chris Meyer. Editorial Elsevier.

Estados Unidos. 2008.

36

GUÍA 6

Personajes articulados (Duik) Contenidos • • •

Introducción a la animación Animación personajes Plugin Duik

Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales • • •

Guía No.6 previamente leída.

Diseño de personaje articulado según indicaciones del docente.

Archivo editable para la práctica (recursos guía 6).

Introducción a la animación La animación es hacer muchas cosas simples, ¡una a la vez!; muchas cosas realmente simples y entrelazadas paso a paso, una por una en un orden lógico, pero ¿Por qué animar?

Todo sabemos lo difícil que es hacer todos esos dibujos y posiciones. Entonces... ¿cuál es el propósito? ¿Por qué hacerlo?

Nuestro trabajo se lleva a cabo en el tiempo y es ahí cuando tomamos nuestros dibujos y los llevamos a otra dimensión, como una serie de imágenes a las cuales les hemos dado vida y comienzan a andar es algo impresionante. Ver nuestros dibujos hablando o caminando es una experiencia increíble.

37

Animación de personajes Nuestro principal objetivo es dar vida a personajes y objetos, existen diversas técnicas y recursos para la animación, After Effects y su entorno, nos brindan una herramienta poderosa para lograr animaciones de alta calidad, y con la ayuda de un plugin llamado DUIK aprenderemos a crear huesos para nuestro personaje.

Panel de Duik

Puedes instalar Duik desde la página principal del plugin (https://rainboxprod.coop/en/tools/duik/). El plugin lo puedes encontrar tanto para Windows como para el sistema operativo Mac, su instalación es fácil y rápida, basta con hacer doble clic sobre el archivo ejecutable y se instalará directamente en tu versión de After Effects, al reiniciar el programa podrás encontrarlo en el menú ventana, y luego en la opción duik.jsx. Al dar clic aparecerá un cuadro de diálogo y te pedirá habilitar unas opciones de preferencias, para que el plugin se muestre correctamente en una ventana flotante.

38

Para poder comenzar con el uso de Duik, vamos a preparar nuestro personaje, es por ello, necesitamos que cada articulación de tu personaje este separado y en una respectiva capa (por ejemplo: manos, brazos, torso, piernas, cabeza, etc.); Es también importante ubicar el personaje en una posición donde sea fácil crear un esqueleto (por ejemplo, en posición T).

39

Nota: no es necesario crear articulaciones para codos o rodilla, ya que con Duik lo lograremos de una forma automática.

Ahora haremos lo siguiente:

Vamos a llevar el archivo editable de tu personaje al panel proyecto, al hacerlo After Effects preguntará si deseas hacerlo como una nueva composición, damos clic en aceptar, es importante que en el archivo editable establezcas un tamaño de resolución de video del área de trabajo a 1280x720.

Ahora podrás observar en el panel proyecto una nueva composición, si no está abierta en la línea de tiempo haremos doble clic sobre ella.

40

•

Ahora podrás observar que cada capa de tu archivo editable corresponde a una capa dentro de la línea de tiempo, puedes nombrarlas para tener un mejor orden, pero es mejor nombrarlas antes de llevarlo a After Effects.

•

Vamos agrupar aquellos elementos más generales como, por ejemplo: la cabeza, los ojos, nariz, etc. Lo haremos seleccionando esas capas y ahora hacer clic derecho sobre ella y se seleccionar la opción pre composición (una pre composición es una composición que nos ayuda a agrupar capas, y que más adelante las usaremos para crear animaciones anidadas o agrupadas).

41

No olvides seleccionar la opción, transferir los atributos a la nueva composición.

Para comenzar a trabajar vamos a ayudarnos de la herramienta “SOLO” la cual permite solo mostrar las capas que estén activadas con esta opción, esto nos ayudará a no confundirnos con todos los demás elementos y agilizará nuestro trabajo.

42

Comenzaremos creando los huesos del torso, para ello utilizaremos la herramienta conocida como Puppets o herramienta de posiciĂłn libre de la barra de herramientas , con ella ubicaremos los huesos del torso (Un hueso es un punto de color sobre la forma), segĂşn la anatomĂ­a de nuestro personaje, necesitaremos 3, cadera, pecho y hombros, es importantes lo hagas de abajo hacia arriba.

Los cĂ­rculos en color amarillo corresponden a la herramienta Puppet.

Vamos a abrir el plugin Duik (Windows,Duik.jsx) el siguiente paso es convertir los Puppets en huesos, y lo haremos de la siguiente forma:

43

o Seleccionamos la capa del torso y presionamos en el teclado la letra “U” esto abrirá las propiedades de los Puppets para las capas, ahora vamos a seleccionar los 3 diamantes que se generaron en la línea de tiempo para los Puppets, con ello vamos directamente al panel de Duik y seleccionamos la opción “Bones”

.

o Ahora observarás que se crearon 3 nuevas capas, esas capas son los huesos, vamos a cambiar el nombre de esas capas según el lugar del cuerpo al que corresponde cada hueso.

o Sobre el torso notarás que los círculos amarillos ahora son de color rojo.

Vamos también a crear un controlador (un controlador es un elemento que nos facilita el movimiento de los huesos, sin necesidad de seleccionar el hueso directamente) en este caso lo pondremos sobre el hueso de la cadera, seleccionamos la capa cadera y en el menú de Duik seleccionamos la opción “controllers” nos llevará a una nueva ventana donde solo presionaremos el botón CREATE,

44

y ahora aparecerĂĄ el controlador sobre nuestro hueso, tendremos ademĂĄs una nueva capa, esa es la capa del nuevo controlador.

Hueso con controlador

Nueva capa del controlador

Ahora vamos a emparentar la cadera con su controlador y lo haremos con la herramienta espiral (esto harĂĄ que los dos elementos funcionen como uno solo) tambiĂŠn vamos a emparentar los otros huesos del torso, en este caso,

45

hombros y pecho, hasta llegar a cadera, formando una cadena de huesos en ese orden.

Vamos ahora a crear los huesos para las piernas y los pies, debes concebir los huesos necesarios para que tu personaje se mueva con naturalidad; es muy probable que el pie este separado de todo el elemento de la pierna, es por ello que vamos a hacer huesos separados para cada uno, debes seguir el mismo proceso con el que creamos los huesos del torso.

Nota: en el caso del movimiento del pie en su acción rotar, antes de crear los huesos vamos a ajustar el punto de ancla (o centro de rotación) para que su movimiento sea natural, para ajustar el punto de ancla vamos a presionar la letra “Y” de tu teclado y con la capa del pie seleccionada, moveremos su punto de ancla a un nuevo centro de rotación.

46

Ahora vamos a emparentar los nuevos huesos que hemos creado, lo haremos como si fuese una cadena, esto permitirĂĄ que los huesos funcionen como una jerarquĂ­a, lo haremos de abajo hacia arriba, comenzando desde la punta del pie, hasta terminar con el ultimo hueso de la pierna, nos ayudaremos de la herramienta espiral.

47

Ahora crearemos un controlador para la pierna, lo haremos siguiendo los mismos pasos que usamos para crear el controlador de la cadera, en este caso lo formaremos sobre el hueso del tobillo y no vamos a emparentarlo.

Ahora vamos a crear un IK (Los Ik son elementos que hacen resistencia entre los huesos como si fuesen los tendones del cuerpo humano. Esto permitirá que la estructura del personaje tenga movimientos más reales).

Seleccionamos solo los huesos de la pierna y su controlador con la tecla SHIFT para selección múltiple, y ahora vamos al panel de Duik y seleccionamos la opción IK

, damos clic sobre el botón create, y ahora al mover el controlador podrás ver un movimiento más natural.

Nota: Puede que, al mover el controlador, tu elemento se mueva al contrario de lo que sería el movimiento natural, para resolverlo seleccionamos la capa del controlador y a la par del panel proyecto, buscamos la opción, controladores de efectos, aparecerá un panel donde tendremos la opción “Clockwise” y lo único que haremos será activar o desactivar la casilla según el movimiento que necesitamos.

Repetir los pasos para la pierna contraria.

48

Al tener esto completo vamos ahora a emparentar el último hueso de cada pierna, con el hueso de la cadera (no el controlador) ayudándonos de la herramienta espiral o seleccionándolo de la casilla que se encuentra a la derecha de la capa.

Ahora al mover el controlador de la cadera podremos observar como tiene influencia sobre gran parte de nuestro personaje, ya solo queda crear huesos para brazos y unir la cabeza al cuerpo.

El proceso para crear huesos en los brazos es exactamente igual al que realizamos para las piernas, la única diferencia es que, en este caso, la mano de nuestro

49

personaje no tendrá mayor doblez, entonces no necesitaremos crear huesos para ella, sino solamente emparentar la capa mano al hueso más cercano, en este caso podría ser el hueso de la muñeca, el controlador lo dejaremos sobre este mismo hueso.

Cuando tengas listos los brazos, vamos ahora a emparentar el hueso de los hombros de cada brazo, con el hueso hombros del torso.

Al mover el controlador de la cadera podrás ver como este ya tiene influencia sobre casi todo el personaje.

50

Para la cabeza y el cuello únicamente lo que haremos será emparentar las capas hacia el hueso hombros, cabe mencionar que deberás mover el punto de ancla de la cabeza, para que realice una rotación correcta de la misma.

Ahora como último paso solo nos queda crear el controlador padre, un controlador que sea capaz de mover todos los elementos del personaje, huesos y controladores.

51

Seleccionamos el controlador de la cadera, y vamos a Duik y seleccionamos la opción controllers para crear uno nuevo; podrás ver una nueva capa de ese controlador, puedes nombrarlo de una forma diferente e incluso modificar un poco su escala para denotar su importancia dentro de la estructura, puedes ubicarlo en la parte inferior.

Ahora lo que nos resta por hacer es emparentar cada controlador antes creado con el padre, al hacerlo podemos ver que el controlador padre, es capaz de mover todo el personaje.

Animando nuestro personaje Con una estructura de huesos será mucho más fácil poder dar vida a nuestros personajes, lo que haremos será una animación pose a pose ( animación planificada); Con las herramientas de After Effects posición y rotación, iremos agregando Key frames o fotogramas claves (cronómetro) para poder dar vida a nuestro personaje, nuestra labor será asignar nuevos valores a estas propiedades para las capas de huesos, controladores o capas solo de objetos, será un proceso largo según la complejidad del movimiento.

52

Ciclo de andar Lograr que un personaje camine es quizá una de las partes más difícil de la animación, sin embargo, con paciencia y practica te darás cuenta que los ciclos de andar no son difíciles de lograr.

Recurso: Animator survival Kit. Richard Williams. Página 102, Caminatas.

La mejor manera de crear un ciclo de andar en After Effects es animando el personaje en su lugar, como en una cinta trasportadora, la idea posterior es arrastrar el controlador padre asignando Key frames (cronómetro) de posición, para verlo recorrer todo el espacio de trabajo.

53

Procedimiento -Crear un proyecto y una composición de 1280x720.

-Crear un personaje en posición lateral, según indicaciones del docente -Animar el personaje por medio de una estructura de huesos, crear un ciclo de andar del personaje de 3 segundos.

Próxima clase -Seguiremos animando ciclo de andar de nuestro personaje.

Referencias bibliográficas Creating Motion Graphics with After Effects, Trish y Chris Meyer. Editorial Elsevier.

Estados Unidos. 2008.

Animator survival kit. Richard Williams. Editorial Faber & Faber. Estados Unidos.

2009.

54

GUÍA 7

Animaciones continuas (Nesting) Contenidos • •

¿Qué es Nesting?

Animaciones continuas

Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales • •

Guía No. 7 previamente leída.

Ciclo de andar finalizado.

¿Qué es Nesting?

La animación dentro de animación o “Nesting” (anidado), por su término en inglés, es simplemente la animación de una precomposición cuya línea de tiempo interna también posee una animación específica y que se puede apreciar al mismo tiempo que se ejecuta la animación principal.

Las precomposiciones agrupan conjuntos de capas dentro de nuevas líneas de tiempo, por lo que en la línea de tiempo principal se sustituyen todas las capas agrupadas, por una sola llamada precomposición (además podrás verlas en la lista de archivos del panel proyecto).

55

Cabe mencionar que una capa de precomposición, se comporta como una capa normal, entonces podemos ser capaces de editar sus propiedades como si fuese un objeto independiente. Las precomposiciones, nos ayudarán a tener un trabajo más ordenado si este es muy extenso.

Para anidar vamos a ayudarnos del archivo de tu personaje caminando, lo abriremos, pero eliminaremos todos los key Frame de posición del controlador padre.

• • •

•

Seleccionamos todas las capas y damos clic derecho y ahora en la opción precomponer.

En el cuadro de diálogo seleccionamos la opción transferir todos los atributos a la nueva composición.

Ahora podrás ver que hay una solo capa en la línea de tiempo, para poder ver todo lo que está dentro de ella damos doble clic sobre esa capa, y se abrirá una nueva ventana sobre la línea de tiempo.

Puedes agregar la pre composición cuantas veces quieras sobre la línea de tiempo principal, y así alargar el ciclo de andar de tu personaje.

Animación cíclica (loop) Una animación cíclica es una animación corta que se repite infinitamente, durante el tiempo total de un proyecto, estas propiedades de capas pueden ayudarnos a agilizar el tiempo de trabajo, para ello nos ayudaremos de algunas expresiones.

Vamos a realizar un ejercicio con un objeto: • Creamos una nueva composición.

56

• • • •

•

Creamos un objeto con la herramienta rectángulo o elipse.

Asignamos un valor de posición inicial y uno final, tratando que el objeto aparezca fuera del escenario y salga también de este este Sobre el cronómetro de la posición, con la tecla Alt presionada haremos clic sobre él.

Se activará en la línea de tiempo una sección donde escribiremos la expresión (Copia en ese lugar la siguiente expresión: loopOut(type = "cycle", numKeyframes = 0)

Ahora al reproducir, podrás ver que la animación se repite infinitamente Nota: Esta expresión puedes utilizarla solamente con las propiedades básicas de capa, rotación, posición, opacidad y escala.

Procedimiento Utilizaremos el archivo final de nuestro personaje caminando, lo que haremos será alargar esos 3 segundos a un ciclo de andar de 10 segundos utilizando cualquiera de las técnicas que se comprendieron en esta guía.

Próxima clase -Presentar el rostro del personaje en primer plano.

-Desarrollar en vector una serie de movimientos de la boca, tomar de referencia lo comprendido en la guía 08.

Referencias bibliográficas • Creating Motion Graphics with After Effects, Trish y Chris Meyer. Editorial Elsevier.

Estados Unidos. 2008.

• Animator survival kit. Richard Williams. Editorial Faber & Faber. Estados Unidos.

2009.

57

GUÍA 8

Lipsync (sincronización de labios) Contenidos • Importar audio • ¿Qué es Lipsync?

• Lipsync en After Effects Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales • • • • •

Guía No. 8 previamente leída.

Ciclo de andar finalizado.

Archivos en vector de las posiciones de la boca.

Audio de fondo.

Audio para sincronizar labios.

Importar audio Lo primero que tenemos que aprender, antes de poder hacer una sincronía de labios de algún personaje, es cómo importar audio a After Effects.

El proceso es muy fácil, nada más debes agregar la pista de audio en el panel proyecto y luego arrastrar este archivo al área de capas, podrás ver que ahora tenemos una línea de tiempo para el audio; Ya que no podemos cortar capas, lo ideal es preparar el audio con el tiempo requerido antes de llevarlo al programa.

Una capa de audio también tiene sus propiedades, entre ellas la opción niveles de audio y forma de onda.

58

El nivel de audio nos permite controlar el volumen de la pista de sonido, posee un cronómetro con el cual podemos jugar con el mismo y crear interpolaciones de volumen del mismo audio; la forma de onda nos permite visualizar el audio en un gráfico de onda.

El audio solo se escucha al reproducir la película con las herramientas de previsualización o con barra espaciadora, lo cual no ocurre al mover la cabeza lectora, si deseas escuchar el audio mientras mueves la cabeza lectora, para poder hacerlo debes presionar la tecla Ctrl de tu teclado mientras mueves la cabeza lectora; Esto te ayudará a poder tener precisión en algún punto que lo necesites.

Nota: para exportar el audio junto con el vídeo, en las opciones de la ventana cola de procesamiento (render), en el Módulo de salida, debes activar la salida de audio que se encuentra en la parte baja del cuadro de diálogo.

Lipsync (sincronización de labios) La sincronización de labios es el arte de hacer hablar un personaje junto con sonido pregrabado para simular su voz; Esta técnica implica la creación de diferentes formas de la boca y combinarla con un diálogo apropiado. Puede ser tan simple o tan complejo como lo decidas.

59

o Referencia: How to cheat in Adobe Flash CS5, Chris Georgenes, Pรกgina 148 After Effects nos permite crear Lipsync para nuestros personajes de una forma fรกcil:

โ ข

Vamos a importar nuestro archivo con los movimientos de las bocas, es importante que las distribuyas en capas con sus respectivos nombres (M,B,P,E etc.) ademรกs que todas se encuentren en el lugar que le corresponde.

60

Vamos a importarlo como una composición a After Effects, lo haremos arrastrando directamente el archivo al panel proyecto o desde el menú archivo, importar, archivo (Ctrl+L).

Ahora abrimos la composición y en nuestra línea de tiempo veremos todas las capas distribuidas, si la capa del rostro está incluida, la ocultaremos.

Ahora determinaremos un frame para cada capa (ver imagen a continuación); podemos hacerlo posicionando la cabeza lectora hasta donde queremos que llegue la línea de tiempo (en este caso un fotograma por línea de tiempo) y al posicionarla presionar la combinación de teclas Ctrl+Alt+; eso contraerá la línea de tiempo; si quieres hacer lo contrario y asignar un punto de origen para una línea de tiempo, posiciona nuevamente la cabeza lectora en donde quieres que inicie dicha línea, y luego presionamos la combinación de teclas Shift+Ctrl+; ahora haremos lo mismo para todas las capas con posiciones de la boca.

61

Esquema de cómo deben verse las capas, después del paso anterior.

Hoy reajustaremos el área de trabajo donde se encuentra nuestra boca, para evitar que la composición sea muy grande, lo haremos con la herramienta Región de interés, que se encuentra la barra inferior del menú Composición.

62

Crearemos una nueva composición y en su línea de tiempo agregaremos la composición donde tenemos todas las bocas.

Ahora vamos al menú capa, luego a la opción tiempo, y por ultimo a la opción activar remapeo de tiempo (Ctrl+Alt+T) todo esto sobre la capa donde se encuentran las bocas agrupadas.

Ahora agregaremos un objeto nulo (un objeto nulo, es un objeto invisible que funciona para controlar efectos sobre otras capas) vamos ir al menú capa, nuevo, objeto nulo.

63

Vamos adicionar un control de expresión sobre el objeto nulo, vamos ir al menú efecto, control de expresión y control del deslizador, esto agregará un deslizador que nos permitirá controlar las diversas posiciones de la boca.

Recuerda que el panel, control de efecto, aparecerá al lado del panel proyecto.

64

Cambiaremos el nombre de la capa objeto nulo por “Controldeboca”.

Vamos a desplegar la capa del objeto nulo (controldeboca), hasta encontrar el deslizador o slider, ahora vamos a emparentar dos propiedades, lo haremos dando Alt+clic sobre el cronómetro de la propiedad Remapeo de tiempo de la capa de las bocas, esto abrirá el panel de Expresiones, y veremos un pequeño espiral, que lo llevaremos hasta la propiedad deslizador o slider.

Si mueves el slider en el panel de control de efectos veras como ahora este es capaz de cambiar las posiciones de la boca.

El siguiente paso es decirle a la expresión que funcione basado en tiempo para las dos capas, por tal razón veras una expresión que se creó al emparentar las dos propiedades, sin embargo vamos a sustituirla por la siguiente expresión: (a=thisComp.layer("Controldeboca").effect("Control del deslizador")("Deslizador") framesToTime(a).

Nota: debes notar que el primer nombre entre comillas debe llamarse igual que la capa a la que cambiamos nombre (objeto nulo), en este caso: Controldeboca.

Nos podremos dar cuenta que en la ventana controles de efectos, también nos aparecerá el control del deslizador por medio de una barra, sin embargo el rango de esta va de 0 a 100, nuestra labor es cambiar el valor 100, por el número total de movimientos de boca que hemos diseñado, lo haremos dando clic derecho directamente en la opción deslizador, y luego en la opción editar valor. Donde aparece el 100, cambiaremos por el total de movimientos y damos clic en aceptar.

65

Nota: puede emparentar la capa movimientos de boca con la capa Control de boca, para que al mover los elementos en la composición lo hagan juntos.

• •

Llevamos la cabeza o cuerpo del personaje a la línea de tiempo principal, desde el panel Proyecto, y la ponemos en posición justo con la boca.

En la capa control de boca, vamos a activar el cronómetro del deslizador, ahora cada nuevo fotograma que agreguemos corresponderá a uno de los movimientos de boca que pusiste en la composición inicial.

Nota: para evitar que puedan verse algunos movimientos de boca que no deseemos entre fotogramas, vamos a seleccionar los diamantes, presionaremos clic derecho y seleccionamos la opción “Conmutar mantener fotograma clave”.

66

Procedimiento Con los conocimientos adquiridos en esta guía y las anteriores, crear una secuencia de video donde se muestre la animación del logo, el personaje caminando, y la aplicación de Lipsync, 15 segundos, presentar la próxima clase el render del video final, no olvides guardar todos tus archivos editables en tu carpeta personal.

Próxima clase Presentación de segundo proyecto, animación de corto animado 15 segundos.

Referencias bibliográficas • Creating Motion Graphics with After Effects, Trish y Chris Meyer. Editorial Elsevier.

Estados Unidos. 2008.

• Animator survival kit. Richard Williams. Editorial Faber & Faber. Estados Unidos.

2009.

Ejercicio de Aplicación GUÍA 9

GUÍA 9

Ejercicio de aplicación Contenidos • • • •

Animación de personajes Ciclo de andar Lipsync Procesos de render

Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales • Conocimientos adquiridos en la unidad 2.

• Desarrollo de Animación de corto animado 15 segundos.

67

68

GUÍA 10

Fondo cíclicos Contenidos • •

Los fondos cíclicos ¿Cómo hacer los fondos cíclicos?

Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales • • •

Guía No. 10 previamente leída.

Diseño de fondo según indicaciones en esta guía.

Archivo editable de ciclo de andar.

Fondos cíclicos Una técnica muy útil en animación es saber cómo crear fondos en movimiento cíclico, es decir, paisajes que se repitan una y otra vez durante la escena y que no se detengan hasta que así lo indiquemos.

Para lograr esto necesitaremos seguir un procedimiento sencillo: •

• •

Realizaremos un diseño de escenario (ilustrador) que contenga un elemento que se repita tanto al principio como al final, es importante que diseñemos en un tamaño de área de trabajo similar al tamaño de la composición que usaremos en After Effects, sin embargo, al guardar el archivo debes alargar el área de trabajo para poder verlo completo.

Añadimos otros elementos en el espacio que complementen el paisaje.

Ahora agruparemos todos los objetos creados.

69

•

Duplicaremos el grupo y lo posicionamos de tal forma que se sobreponga al último objeto, en este caso un pino.

•

Agrupamos todos elementos, reajustamos el área de trabajo y guardamos el archivo.

70

En After Effects creamos una nueva composición, importamos el archivo al panel Proyecto y lo agregamos a la línea de tiempo.

Podrás notar que el escenario es más grande que el área de trabajo eso es normal porque necesitamos un movimiento cíclico, ahora lo que haremos será posicionar el escenario (el primer pino debe estar al lado izquierdo de nuestra área de trabajo, ver imagen).

Vamos a animar la posición, de tal forma que el siguiente pino en el escenario tome la posición del primer pino que ya salió de la escena, vamos a activar el cronómetro de posición y asignar dos Key frames (diamantes) en la capa.

71

Con esta pequeña animación realizada, el último paso solo será ubicar una expresión para que el movimiento sea cíclico.

Vamos a utilizar la expresión que aprendimos en la guía número 7, damos Alt+clic sobre el cronometro de la posición, en la casilla activa pegamos la expresión: loopOut(type = "cycle", numKeyframes = 0).

Ahora, al reproducir nuestra película, apreciaremos un movimiento cíclico que solo finaliza por el tiempo que asignamos a nuestro proyecto.

Procedimiento Abriremos el archivo editable donde hicimos caminar a nuestro personaje, con los conocimientos adquiridos en esta guía, vamos a diseñar un escenario que posteriormente animaremos de una forma cíclica. El tiempo de duración mínimo del ejercicio será de 10 segundos.

Próxima clase Diseño de un nuevo escenario basado en el proyecto que hemos estado trabajando, posicionar el personaje en algún espacio dentro del escenario, no necesita venir articulado para animar.

Referencias bibliográficas Creating Motion Graphics with After Effects, Trish y Chris Meyer. Editorial Elsevier.

Estados Unidos. 2008.

Animator survival kit. Richard Williams. Editorial Faber & Faber. Estados Unidos.

2009.

72

GUÍA 11

Máscaras Contenidos Creación de máscaras Tipos de máscaras Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Aplica las herramientas de producción web y multimedia de acuerdo a las Necesidades de comunicación.

Materiales Guía No.11 previamente leída.

Diseño de escenario con personaje.

Creación de máscaras.

Las máscaras, como en cualquier programa de adobe que ya hemos estudiado funcionan de la misma manera, son elementos que ocultan ciertas partes de un objeto mayor a la máscara, nos sirven para recortar elementos sin destruir el archivo original.

Para crear una máscara es muy fácil y nos ayudaremos de algunas herramientas del panel herramientas, aprendernos algunas formas de cómo hacerlo: Creamos una nueva composición con el nuevo escenario de nuestra animación; Llevamos nuestro escenario al panel línea de tiempo; Sobre la capa del escenario creamos una nueva capa de formas, puede ser la forma que más te guste incluso, puedes dibujarla con la herramienta pluma;

73

Ahora activamos las opciones del conmutador (es un botรณn que se encuentra debajo de las capas, al presionarlo observarรกs como algunas propiedades de las capas cambian).

Con las nuevas opciones veremos una nueva columna llamada mate de seguimiento

74

Sobre la capa del escenario, veras una opción que dice ninguno, haremos clic sobre ese botón y seleccionamos una de las opciones que se nos presentan; a su lado observarás el nombre de referencia de la capa que será la máscara.

Ahora verás como la forma que hicimos al principio enmascara la capa de escenario (puedes animar la capa de forma y así tener animaciones basadas en máscaras).

Puedes crear máscaras basadas en trazados: Seleccionamos la capa del escenario; Sobre ella dibujaremos una forma, puede ser la que más te guste o incluso dibujarla con la herramienta pluma; Podrás ver que automáticamente nuestro escenario fue enmascarado;

75

Al desplegar las opciones de capa podrás ver ahora un menú llamado máscara, con él, puedes editar la máscara para tener otros efectos.

Nota: esta mascara adoptara todos los ajustes que hagas sobre las propiedades de una capa, por ejemplo: Posición.

Si haces doble clic sobre la herramienta de formas, automáticamente agregará una máscara al escenario.

Puedes crear máscaras basadas en textos: Con nuestro escenario en la línea de tiempo, vamos a crear una nueva capa de texto.

Seleccionando la capa de texto, iremos al menú capa, y luego a la opción “crear forma a partir de texto”.

76

Ahora en nuestra lĂ­nea de tiempo tendremos una capa de formas, pero con el texto que habĂ­amos utilizado, la pondremos justamente arriba de la capa del escenario.

Queda asignar una opciĂłn de mate de seguimiento.

77

Puedes crear máscaras basados en modo de color A la par de la columna mate de seguimiento, veras una columna llamada modo.

Hay una opción modo para cada capa, al desplegarla veras una serie de opciones parecidas a los modos de color de Photoshop e illustrator que funcionan de la misma forma.

En las opciones finales veras unos modos de color llamados alfa o luminancia.

Puedes crear máscaras basadas en estos modos de color, lo único que necesitas es un elemento que sea blanco y negro y al aplicar un efecto de alfa o luminancia sobre esa capa, enmascarará a la capa inferior, puedes aplicarlo con videos y objetos blancos y negros estáticos.

78

Ejemplo de imagen en Blanco y Negro

Resultado final Procedimiento Con el mismo escenario, crea diversas composiciones aplicando los diversos tipos de máscara vistos en esta guía.

Próxima clase Presentar el diseño de un cubo de Rubik, debes mantener la forma y los colores, puedes diseñar iconos propios para cada espacio, o dividir una imagen entre sus lados etc. Tamaño de imágenes 400x400 Referencias bibliográficas Creating Motion Graphics with After Effects. Trish y Chris Meyer. Editorial Elsevier, Estados Unidos. 2008.

79

GUÍA 12

Capas 3D Contenidos Las capas 3D Convertir las capas 3D Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Aplica las herramientas de producción web y multimedia de acuerdo a las Necesidades de comunicación.

Materiales Guía No. 12 previamente leída.

Diseño de cubo de Rubik.

Las capas 3D After Effects es un programa con un entorno 2D, sus capas son 2D y no podemos ser capaces de crear elementos nativos 3D; sin embargo, nosotros podemos asignarles a las capas propiedades 3D, las capas seguirán siendo 2D, pero adquirirán propiedades adicionales como: Posición (z), Punto de anclaje (z), Escala (z), Orientación, Rotación X, Rotación Y, Rotación Z y propiedades Opciones de material. Las propiedades de material nos permitirán especificar como estas capas con opciones 3D interactúan con la luz sombra y cámaras.

80

Nuevas propiedades de transformación 3D

Nuevas propiedades para ajustar una capa 3D Cualquier capa puede ser una capa 3D a excepción de las capas de audio, las luces y las cámaras vienen por defecto como capas 3D, si una capa no es 3D no será afectada por la luz y la sombra, ya que podemos tener composiciones combinadas por los dos tipos de dimensiones.

Puedes animar una capa 3D aplicar efectos, iluminarla, siempre y cuando ten en cuenta que todo dependerá del uso de las cámaras para poder ver un movimiento en 3D. Convertir una capa a 3D Para activar una capa 3D lo único que debes hacer es activar la casilla 3D que todas las capas poseen, esta justamente al lado derecho del nombre de la capa, al activarlo, puedes desplegar la capa y observarás como hay nuevas propiedades en ella, si quieres quitar el 3D de una capa nada más debes desactivar la casilla.

Casilla de capa 3D

81

Al seleccionar una capa 3D podas notar en el área de trabajo que ahora aparecen unas flechas de colores, estos corresponden a los ejes de movimiento, algo muy parecido al plano cartesiano, el poseer ahora un eje Z nos permite tener un eje de profundidad y crear el efecto 3D sobre capas 2D.

o Color verde: Eje “Y” o Color rojo: Eje “X” o Color azul: Eje “Z”

Un recurso muy importante para poder trabajar con las capas de 3D será el sistema de vistas, con el podremos distribuir las capas de una mejor forma en el plano, para activarlo debes ir a la parte baja del panel composición y dar clic sobre el botón que dice 1 vista, ahí encontraremos diversas opciones para poder seleccionar.

82

Con una de las opciones de vistas seleccionada, podrás notar que After Effects ahora posee más áreas de trabajo, sin embargo, solo estamos viendo la misma área desde varios puntos de vista (frente, lateral, superior) la cámara activa nos muestra la cámara que está influyendo en ese momento sobre la composición.

Panel composición con 4 vistas activas

Procedimiento Con las capas 3D y la ayuda de las vistas, vamos a tratar de armar nuestro cubo de Rubik, posicionando las imágenes cada una en su lugar hasta formar el cubo.

Próxima clase Terminar el cubo de Rubik, presentar archivo editable.

Referencias bibliográficas.

Creating Motion Graphics with After Effects. Trish y Chris Meyer. Editorial Elsevier.

Estados Unidos. 2008.

83

GUÍA 13

Cámaras Contenidos Las cámaras Creación de una cámara Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Aplica las herramientas de producción web y multimedia de acuerdo a las Necesidades de comunicación.

Materiales Guía No. 13 previamente leída.

Archivo editable con la construcción del cubo de Rubik en 3D. Las cámaras Las cámaras son capas que hacen la función de una cámara real, puedes moverla, rotarla y aplicar diversos movimientos como un Dolly in, un paneo entre otros.

Las propiedades se pueden modificar y animar para configurar la cámara y que esta misma nos pueda dar diversos puntos de vista dentro de nuestra animación, con ella podríamos también lograr diversos planos de enfoque, como un plano general, un plano a detalle, un plano medio, etc.

Propiedades de la capa cámara Las cámaras solo afectan a las capas 3D y es por ello que si aplicamos una cámara sin existir una capa 3D no podremos ver su verdadero potencial, también poseen una línea de tiempo que puedes reajustar según el tiempo que necesites ver dicha cámara; En la parte baja del panel composición existe un botón que normalmente lo distinguirás con la opción Cámara activa, en ese lugar podrás tener acceso directamente a todas las cámaras que has creado en la composición, puedes seleccionar una cámara para ver exactamente lo que ella está observando.

84

Creación de una cámara Puedes agregar cuantas cámaras necesites en una composición; para agregarla puedes hacer de la siguiente manera: Vamos al menú capa; Seleccionamos la opción nuevo; Luego seleccionamos la opción cámara;

85

Aparecerá un cuadro de dialogo: En este cuadro podemos especificar qué tipo de cámara necesitamos utilizar, en primer lugar, podemos seleccionar una cámara de un solo nodo o de dos nodos (que contiene un elemento de punto de interés) además podemos asignar un nombre específico para esa cámara (por defecto After Effects llamará a la primera cámara, “cámara 1” y así lo hará ascendentemente con las demás cámaras que agreguemos) con estos únicos datos damos clic en aceptar.

86

Ahora en nuestra línea de tiempo podremos ver una nueva capa que corresponde a la cámara, puedes animar sus propiedades básicas o de ejes 3D, además de nuevas propiedades que veremos al desplegar la capa en la opción de cámara.

Para animar, basta con agregar Key frames a las propiedades básicas de animación para que dicha cámara comience a moverse, con las opciones 3D podríamos configurar la cámara para que pueda ver aquellas capas que están interactuando en el eje 3D. After Effects nos permite navegar en el entorno 3D que estamos creando de una forma muy interactiva, para ello utilizaremos la herramienta de cámara unificada lo único que debemos hacer es tener activa una cámara, al seleccionar la herramienta, hacemos

87

clic sobre el panel composición y sin soltarlo, arrastramos el cursor, con ello podemos ver todo el esquema del plano en 3D que estamos construyendo.

Icono de cámara en el panel composición, visto desde la herramienta cámara unificada

Procedimiento Debes crear una secuencia de video basado en el movimiento de 5 cámaras, para completar una secuencia de 20 segundos El objetivo será crear una presentación del cubo de Rubik que anteriormente armamos.

Próxima clase Llevar el archivo editable con la secuencia finalizada del movimiento de cámaras 3D. Referencias bibliográficas.

Creating Motion Graphics with After Effects. Trish y Chris Meyer. Editorial Elsevier, Estados Unidos. 2008.

88

GUÍA 14

Iluminación Contenidos Las capas de luz Creación de una luz

Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Aplica las herramientas de producción web y multimedia de acuerdo a las Necesidades de comunicación.

Materiales Guía No. 14 previamente leída.

Archivo editable de animación de cámaras de 20 segundos.

Las capas de LUZ Las capas de luz, son aquellas que como su nombre lo dice tienen la función de iluminar aquellas capas 3D dentro de nuestra composición, son capaces de alterar los colores de esas capas sobre las cuales brillan.

Una luz posee un punto de interés, y es este quien determina el lugar hacia donde apuntará la totalidad de esa luz y a la vez son capaces de proyectar sombras de aquellos elementos a los que iluminan.

Cuando una capa se convierte en una capa 3D, podremos ver que al desplegar sus propiedades, tendremos opciones de material, dichas opciones nos ayudan a configurar nuestra capa conforme a cómo queremos que la luz interactúe con ella; en este caso vamos a hacer énfasis en las siguientes opciones:

89

Proyectar sombras: si esta opción esta desactivada los elementos iluminados no proyectaran sombra alguna Aceptar sombras: permite que una capa acepte la sombra de otra capa que esta frente a ella Aceptar luces: si esta opción esta desactivada, la luz no tendrá ningún efecto sobre dicha capa Creando una luz Para crear una nueva capa de luz, iremos al menú capa, luego en la opción Nuevo seleccionamos luz, aparecerá un cuadro de diálogo en el cual especificaremos las siguientes configuraciones:

90

Tipo luz: Existen 4 tipos de luces:

1. Paralelo: emite luz direccional e ilimitada

desde un origen infinitamente distante, aproximando la luz desde un origen como el sol.

2. Concentrada: emite luz desde un origen limitado por un cono, como los focos empleados en decoraciones.

3. Punto: emite una luz ilimitada y omnidireccional, como los rayos que emite una bombilla.

4. Ambiente: simplemente ayuda a aportar luminosidad general a la escena y no proyecta sombras.

Color: Podemos especificar el color que deseamos proyecte la luz.

Intensidad: aquí configuraremos la intensidad y brillo que necesitamos tenga la nueva capa de luz.

Ángulo de cono: El ángulo del cono que rodea el origen de una luz, que determina la anchura del rayo a una distancia.

Calado de cono: El suavizado del borde de una luz concentrada.

Difuminación: describe el modo en que una intensidad de la luz disminuye con la distancia.

Proyecta sombras: Nos permite especificar si el origen de luz es capaz de proyectar sombra de los objetos que ilumina, si esta opción esta desactivada ningún objeto proyectara sombras

Al configurar las opciones anteriores, estaremos listos para dar clic en el botón aceptar, si quieres seguir configurando una luz, puedes hacerlo seleccionando la capa de luz, y ahora dando clic sobre el menú capa, luego en la opción configuración de la luz, también puedes hacerlo desplegando las propiedades de capa de la luz.

Ahora podrás ver en tu línea de tiempo, una nueva capa llamada “Luz1”, puedes configurarla como cualquier otra capa, puedes animar su posición, escala, rotación, etc. La luz podrá iluminar como tú se lo indiques, y te ayudará a dar un poco más de realismo a tus proyectos.

91

Icono de la luz en el panel composiciรณn.

Procedimiento Iluminaremos nuestro cubo de Rubik, lo haremos utilizando al menos 3 luces.

Prรณxima clase Presentaciรณn de animaciรณn cubo de Rubik, debes utilizar algunos textos descriptivos de tu producto en la animaciรณn.

92

Ejercicio de Aplicación GUÍA 15

GUÍA 15

Ejercicio de aplicación Contenidos: Capas 3D Cámaras Luces y sombras Competencia Maneja herramientas de edición digital y las TIC para la producción de materiales multimedia.

Indicadores de logro Utiliza herramientas digitales en la producción gráfica de acuerdo a las necesidades de comunicación.

Materiales Conocimientos adquiridos en la unidad 3.

Desarrollo de proyecto final: Animación de cubo de Rubik.