Introducción a la animación 2D: fotograma a fotograma para principiantes

1. ¡Hola!: Hola ahí. Bienvenido a “Intro a la animación 2 D”. Mi nombre es Jack Grayson, y seré tu maestro. Soy una animadora e ilustradora de 22 años de Australia. Llevo animando alrededor de los últimos seis años. Tengo un enfoque específico en la animación cuadro por fotograma 2 D dibujada a mano y el trabajo de stop motion. En los últimos dos años, he creado alrededor de media docena de cortometrajes y alrededor de 40 otras animaciones cortas, loops, y proyectos. La narración es una enorme pasión mía, y siempre lo ha sido desde que era un niño pequeño. Pasaría cada momento de vigilia llenando cuadernos de bocetos y blocs de notas con todo tipo de pequeños dibujos e historias y cómics y todo lo que pudiera llegar, de verdad. Y hacer eso casi todos los días me ha llevado a la animación, y me encanta la animación. Te permite crear todo tipo de mundos, historias, y personajes que serían muy difíciles de hacer en cualquier otro formato. Permite todo tipo de proyectos visualmente únicos y divertidos de todo el mundo. Y creo que eso es increíble. Ahora bien, si no sabes nada de animación, no estreses, esta clase en realidad está un poco orientada hacia ti. Esta clase está dirigida a principiantes absolutos. Es para ilustradores, diseñadores gráficos, o artistas que quieran meterse en la animación 2 D, pero nunca lo han hecho antes. Pero también podría ser bueno para las personas con ese nivel intermedio que buscaban retocar esas habilidades fundamentales. Vamos a empezar con lo básico, mirando cosas como velocidades de fotogramas y relaciones de aspecto antes de sumergirnos de cabeza en conceptos de animación como extremos, anotar dibujos intermedios y limpiezas. Estas cosas realmente forman los bloques de construcción de casi todo tipo de animación. Pero específicamente lo vamos a ver en el contexto de la animación dibujada a mano, fotograma por fotograma 2 D. Para tu proyecto de clase, vamos a trabajar juntos en una animación corta y pequeña de 2-3 segundos de uno de tus personajes saludándonos. Y esa es la mejor parte. No vamos a usar ningún modelo de carácter conjunto o forma de personaje. Vamos a usar a tus personajes. Entonces si tienes tu propio personaje original, eso será absolutamente perfecto para esta clase. Si no lo haces, puedes diseñar uno. Si no sabes por dónde empezar ahí, hay un montón de clases aquí en Skillshare que pueden ayudarte con esos primeros pasos del diseño básico de personajes. Y para este proyecto, vamos a estar animando en Adobe Animate CC. A través de esto, aprenderás todas las habilidades que necesitas para desarrollarte aún más como animador. Tendrás todas las herramientas que necesitas para crear tus propios cuentos, anuncios o proyectos personales de cualquier tipo. Estoy tan emocionado. Has elegido tomar esta clase y no puedo esperar a ver qué crees. Empecemos. 2. Los fundamentos: navegar tu software: Vamos a empezar realmente simple. Esta clase se va a impartir dentro de Adobe Animate CC, que se incluye como parte del Adobe Creative Cloud. Ahora si no tienes ya una copia de este programa, está bien. Si ya tienes una suscripción a Adobe Creative Cloud, puedes descargarla directamente desde su aplicación de escritorio. De lo contrario, puedes descargar una versión de prueba y usar el programa desde ahí, y puedes encontrar el enlace para descargar esa versión de prueba, después de la descripción de esta clase. Una vez que tengas lista tu copia de Adobe Animate, arranquemos y echemos un vistazo a cómo funciona. Estoy creando mi proyecto en la versión 20-20 de Adobe Animate CC. Al momento de esta grabación, esta es la versión más reciente del programa. Cuando abras esta versión de Animate te reunirás con esta pantalla de bienvenida, dirígete al lado izquierdo y pulsa Crear Nuevo. En este panel, hay muchas opciones preestablecidas que puedes explorar para ayudarte a configurar tus archivos. Vamos a echar un vistazo a los detalles del lado derecho de este panel. Aquí, puede ajustar manualmente ajustes como su relación de aspecto y marco, velocidad. Pero espera, Vamos a frenar un segundo, y pasar por lo que significan esas cosas. a Relación de aspecto es solo dos números que representan el ancho y alto del escenario en el que estás trabajando. Ahora la relación de aspecto más común es de 16 por 9, lo que esencialmente significa que tiene 16 unidades de ancho y nueve unidades de alto. Esta es la proporción de cosas como pantallas de computadoras, teléfonos, televisores, todas las cosas en las que vemos la mayor parte de nuestro contenido. ratios de 16 por 9 incluyen cosas como 1080p, 720p, 480, 420p, ecetera. Las mediciones de una relación de aspecto estándar de alta definición fue de 1920 píxeles por 1080 píxeles. De ahí que para el término 1920 por 1080 se presente. Otras relaciones de aspecto comunes incluyen un cuadrado, que es un 1:1, que es lo que ves en Instagram normalmente, también hay un 3:2, 4:3 la lista realmente continúa. El ratio de aspecto del archivo en el que trabajas realmente puede ser el tamaño que quieras. Pero hay parámetros comunes a los que la gente tiende a atenerse. Para nuestro proyecto, vamos a estar trabajando en esa relación de aspecto cuadrada 1:1. De esa manera será perfecto para Instagram, Facebook, Twitter, todas estas redes sociales. Queremos hacer el tamaño del escenario 1080 por 1080 pixels. Así que adelante y cambia tus archivos a eso. Ahora hablemos de fotogramas por segundo o de velocidades de fotogramas. Es un concepto bastante simple, ese es básicamente un número que representa cuántas imágenes aparecen por segundo. Por ejemplo, si estás trabajando a 24 fotogramas por segundo, eso significa que van a ser 24 imágenes las que aparecen cada segundo en tu archivo de video. Algunas tasas de fotogramas comunes incluyen números como 12,24,25,30, y 60. Para nuestro proyecto, vamos a estar trabajando a 24 cuadros por segundo. Así que adelante y cambia todos tus archivos a eso. Ahora esa es mi preferencia. Es mayormente porque soy malo en Matemáticas, y siendo un número par, hace que hacer cálculos sea bastante fácil. Pero a mucha gente le gusta usar muchas velocidades de fotogramas diferentes, y es absolutamente algo que vale la pena explorar, para que puedas encontrar tu propia preferencia. Pero para esta clase, nos vamos a quedar con 24. Ahora hay algunos trucos para esto, digamos que estás trabajando en 24 fotogramas por segundo, no necesariamente significa que haya 24 dibujos diferentes cada segundo. La primera técnica sobre la que quiero enseñarte es algo que llamo 1's, 2 y 3's Ese número representa la frecuencia con la que haces un nuevo dibujo. Si estás trabajando en 1, significa que estás haciendo un nuevo dibujo cada cuadro. Para el de 2s, Es un dibujo nuevo cada dos marcos, 3's Es un dibujo nuevo cada tres marcos, ecetera. La idea detrás de esto es básicamente, cuanto menor sea el número, más suave será tu animación. Alguien que trabajó en 1 mucho fue el legendario Animador Richard Williams. Fue notoriamente meticuloso con sus trabajos, y se fue a grandes esfuerzos para asegurarse de que toda su animación fuera lo más buena posible que ser.así que en este clip, cada cuadro es un dibujo totalmente nuevo. Un ejemplo de alguien que trabaja en 2 soy yo. Hago toda mi animación en 2's, porque me parece que todavía crea un bonito movimiento suave. Pero es la mitad del trabajo. Es una técnica que uso para elevar la eficiencia de mi producción. Un ejemplo clave de personas que a menudo funcionarían en 3 se encuentra en Animate. Este es un ejemplo de la ruto, y en este clip solo había un dibujo nuevo cada tercer fotograma, puedes contestar un estilo realmente particular, es algo entrecortado, es un poco suelto, pero es realmente genial para la eficiencia, que es lo que siempre necesita la producción animada. Personalmente, te recomendaría que trabajes en 2. 1 luce bellamente suave, pero si intentas hacer toda una producción así, te matará. Había términos absolutamente, donde es apropiado y necesario usar 1's, pero lo cubriré en otra clase por lo que ahora que hemos cubierto eso, Sigamos mirando a Adobe Animate. lo único que nos queda por hacer para configurar cómo es el archivo, asegúrate de que esta casilla en la parte inferior esté configurada en acción-script tres. Una vez que hayas hecho eso, pulsa crear y Animate generará tu archivo. Antes de pasar por algunos de estos paneles, quiero hablar rápidamente de los espacios de trabajo. Este es mi espacio de trabajo personal. Es una que he trabajado a lo largo del tiempo que funciona perfectamente para mí. Tiene todas las herramientas en Windows que necesito listas para ir al aviso de clics, Ahora si esta es tu primera vez que trabajas en Adobe Animate, notarás que este no es el espacio de trabajo predeterminado, y eso está bien. No tienes que trabajar en los mismos espacios de trabajo que yo. No obstante, podría ser más fácil seguir al resto de esta clase si pones la tuya de la misma manera que yo. Adobe Animate ofrece muchas opciones en cuanto al espacio de trabajo predeterminado va. Mi espacio de trabajo es muy similar al de lo esencial. No obstante, si tu programa está configurado en un espacio de trabajo como Animator o Classic, se verá muy diferente. Si quieres ajustar tu espacio de trabajo, siéntete libre de pausar la clase y hacerlo ahora, la clave Windows que he abierto, que necesitarás para esta clase son propiedades, herramientas de biblioteca, y línea de tiempo. Para reiterar, no hay que trabajar en los mismos espacios de trabajo que yo. Mucha gente tiene muchas preferencias diferentes de cómo dibujan sus programas y debes resolver absolutamente algo que funcione para ti. Pero sigamos adelante. El primer panel al que quiero mirar se llama propiedades. Este panel te da muchas opciones para ajustar cosas como tus archivos, publicación y la configuración del documento de la que acabamos de hablar. También puede cambiar la configuración de las herramientas que haya seleccionado o de los marcos u objetos en el escenario. Siéntase libre de explorar estos si lo desea, y familiarizarse con cómo afectan a su archivo y animaciones. A continuación, veremos el panel de herramientas, que en mi espacio de trabajo está a la derecha del panel Propiedades. Aquí encontrarás todas las diferentes herramientas que necesitas para utilizar Adobe Animate. Casi todas las herramientas de Animate tienen su propio atajo dedicado en el teclado. Algunas de las herramientas clave que uso, y los accesos directos son la herramienta Pincel, que es B, la herramienta Cubo, K, la Herramienta Lazo, L, la herramienta Selección, V, la herramienta Transformar libre, Q, la herramienta Mover, que es la barra espaciadora, la herramienta Borrador, E, la herramienta Zoom que es Z, o puede mantener presionada Alt para alejar. Y el Selector de Color, que es I. No espero que ustedes memoricen estos. Siéntase libre de tomar algunas notas o incluso remitirse de nuevo al video más adelante si es necesario. A continuación, quiero mirar la línea de tiempo. Aquí es donde pasa toda la magia. En el lado izquierdo de este panel se encuentra el menú Capas, aquí es donde se enumeran todas las diferentes capas de tu animación. Aquí, tenemos los botones para crear una nueva capa, para crear una nueva carpeta, o eliminar una capa existente. El lado lógico del lado derecho es la propia línea de tiempo. Está conformado por una larga línea de rectángulos, todos los cuales representan marcos individuales. Cuando un marco tiene un dibujo en él, aparece gris. Un rectángulo con un círculo en la parte inferior del mismo es un fotograma clave. Ahora la diferencia entre fotogramas y fotogramas clave es que los fotogramas son duplicados exactos de continuaciones de lo que les precedió. tanto que un fotograma clave permite crear un dibujo completamente nuevo o editar uno antiguo sin afectar a ninguno de los fotogramas anteriores. Existen algunos atajos que son relevantes para la línea de tiempo y la creación de nuevos fotogramas y fotogramas clave. Al presionar F7 se creará un nuevo fotograma clave en blanco en tu línea de tiempo. Al presionar F6 se creará un fotograma clave duplicado en su línea de tiempo. Al hacer esto, podrá editar dibujos existentes sin afectar a los fotogramas anteriores y extender un dibujo más abajo de la línea de tiempo, simplemente haga clic en el camino que desee que vaya, y presione F5. mantienes el turno antes de presionar F5 o F6, los invertirás, lo que te permitirá quitar un fotograma clave pulsando Shift F6 o quitando los fotogramas por completo presionando Shift F5. Si quieres previsualizar tu animación, pulsa Intro para reproducir la línea de tiempo. Eso cubre todo lo que necesitas saber sobre Adobe Animate para hacer el proyecto para esta clase, vamos a animarnos. 3. Planifica tu movimiento: dibujos extremos: Entonces, ahora que conoces tu camino alrededor de Adobe animate un poco, empecemos con el primer paso de los extremos de animación. Ahora como mencioné en la introducción en el proyecto, es animar uno de ese personaje nos está saludando y ese es un movimiento bastante simple y los extremos son bastante simples también. Son los puntos más lejanos del movimiento, o las partes más extremas del mismo. Por ejemplo, si tuvieras que animar a un personaje lanzando una pelota, los extremos de ese movimiento serían, el brazo estuviera atrás y luego el brazo fuera hacia adelante, después de que lo hayan arrojado. Entonces para nuestro proyecto, los extremos son nuestros sonidos de personajes siendo abajo, y luego arriba, y luego cada punto de la ola después de eso. Sin embargo, no es tan sencillo. no es sólo una recta arriba y luego onda, porque eso es un poco incómodo. Si le saludaras a uno de tus amigos, no levantarías el brazo esperar un segundo y luego empezar a saludar. Te levantas a la ola y luego sigues yendo desde ahí. Entonces eso es lo que vamos a hacer. Entonces como dije, al principio extremo está el brazo bajando. Pero luego vamos a escuchar el primer punto de esa ola e ir de ahí. Mi punta número uno de averiguar los extremos de tus movimientos, es actuar siempre antes de que empieces a animar. Podría sentirse un poco tonto al principio, pero confía en mí, te acostumbrarás. Entonces vamos a animarnos. Se puede ver aquí en mi archivo ya tengo el cuerpo de mi personaje dibujado en una capa llamada cuerpo. Vamos a dibujar el agitar con ese personaje en una capa separada. Por lo que he dejado un hueco en el hombro para que el brazo se encoja. También he dejado fuera el color en este dibujo porque vamos a cubrir eso en una lección posterior. Entonces, por ahora, sólo vamos a trabajar con el trabajo de línea. Así que adelante y llama a tu cuerpo de primera capa y dibuja a tus personajes cuerpo, cabeza y izquierda en esta Capa. Cuando estoy dibujando con la herramienta de pincel y animo, me gusta asegurarme de tener activada la sensibilidad a la presión. El icono para esto aparece como un bolígrafo con una ondulación a su alrededor. Tener esto activado te permite dibujar con mucha variación de luz de línea bonita en tu perspectiva. No tienes que usarlo sin embargo. Está enteramente a tu gusto y al estilo que dibujas. Otro consejo clave para dibujar con la herramienta pincel y animar, es asegurarse de que no tiene activado el modo de dibujo de objetos. El icono para esto aparece como un círculo con un cuadrado a su alrededor y puede causar muchos problemas si está encendido una vez que empezamos a colorear, así que asegúrate de que esté apagado mientras dibujas. Una vez que hayas hecho eso, no necesitaremos usar esta vida por un tiempo. Así que asegúrate de golpear lock, para que no estés dibujando en la línea equivocada de Cuando empezamos a animar. Crea otra capa nueva, y llama a este brazo. Vamos a dibujar la primera pose de ese brazo en el marco número uno. Este es el extremo de sus personajes brazo estar abajo. Así que adelante y dibuja eso. Una vez que hayas hecho eso, haz clic delante para encuadrar tres y pulsa F7 en el teclado. Al hacer esto se creará un nuevo marco clave en blanco, lo que significará que tu primer dibujo solo dura dos fotogramas, que es exactamente lo que queremos. A continuación, haga clic delante para encuadrar 17 y presione F6 para crear otro fotograma clave. En este marco, vamos a dibujar un segundo extremo de la mano de ese personaje estando en el primer punto de la ola. Antes de hacerlo sin embargo, vamos a encender una herramienta llamada Onion Skin, que se puede encontrar en la parte superior del panel de línea de tiempo aquí. Pero aguanta. ¿ Qué es el desollado de cebolla? Es una de las herramientas más útiles en el mundo de la animación. Permite ver una versión ligeramente transparente del dibujo antes y después del marco en el que estás trabajando actualmente. Es una herramienta esencial para asegurarte de que tus dibujos se alineen perfectamente a lo largo de tu animación. Puedes ajustar rápidamente el rango de tu piel de cebolla arrastrando las pestañas a cada lado de la cabeza de juego más abajo por la línea de tiempo hasta el punto que necesites. Así que vamos a arrastrar hacia fuera la piel de cebolla de nuevo para enmarcar uno para que podamos ver exactamente donde nuestro brazo de personajes se sienta en la para.Necesitamos asegurarnos de que también podamos ver el cuerpo de nuestros personajes a lo largo de la animación. Así que extiende tu dibujo corporal haciendo clic en el marco 17 y presionando F5. Entonces podemos usar esto como guía para asegurarnos el hombro de ese personaje se alinee en el cuadro 17. Recuerda expandir tu dibujo a dos marcos usando F7. Vamos a dejar seis cuadros entre cada punto de la ola. Entonces dibuja el siguiente punto en el marco 25. Y asegúrate de seguir extendiendo tu dibujo corporal a medida que avanzas. Entonces, debido a que la mano se está moviendo de nuevo al mismo lugar, podemos copiar el dibujo en el marco 17 y pegarlo en el marco 33. Estos dos puntos son todo lo que necesitamos por ahora. Por lo que no agrego más extremos todavía. Hablaremos de extender la ola en una lección posterior. Ahora bien, este momento podría no resultar ser exactamente lo que te gusta y eso está bien. Es el momento que me gusta, pero puede que no coincida con tu gusto y eso está bien. nos quedaremos con ella a lo largo de esta clase Aunquenos quedaremos con ella a lo largo de esta clasey si quieres jugar con ella al final, siéntete absolutamente libre de hacerlo. Pero recapitulemos los extremos son el primer paso en el proceso de animación. Son puntos más alejados de cualquier movimiento, y a menudo es mejor actuar antes de empezar a animar. Para nuestro proyecto, los extremos están más allá de estar abajo, más allá de estar arriba en ese primero de la ola y luego en cada punto de la ola que los sigue. Para el momento en el que estamos trabajando, esos fotogramas clave se encuentran en el fotograma 1, 17, 25 y 33 y eso es todo para los extremos, son bastante simples, pero son súper importantes. Pasemos a mi siguiente paso. 4. Haz que sea un aspecto real: Breakdowns de verdad: Breakdowns: Ahora nos estamos poniendo un poco de fantasía. El siguiente paso en mis procesos de animación, agregando lo que llamamos formularios de desglose. A menudo también se le conoce como acciones secundarias. Realmente hacen que los movimientos parezcan realistas cuando las personas se mueven, no todas las partes de ellos se mueven al mismo tiempo, los hombros están conectados a los brazos, están conectados a las manos y conectados a los dedos. Entonces cuando nos movemos, dependiendo de qué parte de esto esté liderando el movimiento, todo lo demás se arrastra para el paseo. Esto crea un retraso o un rezago en algunas partes del cuerpo o una acción secundaria. Entonces, por ejemplo, si un movimiento fuera a ser dirigido por el codo, la mano, se rezagaría, para luego ponerse al día más tarde. Descomponer estas sutilezas en tu animación realmente puede hacer que tus movimientos parezcan convincentes, en el contexto de nuestro proyecto el movimiento está siendo liderado por el brazo y así la mano es que la vaina se va a quedar atrás. Si echamos un vistazo a esa línea de tiempo, usualmente me gusta poner mi desglose durante smack bang en medio de mis extremos. Por lo que con nuestra animación caerían en el cuadro 9, 21 y 29. Recuerda al configurar tus fotogramas clave para mover dos fotogramas hacia adelante y pulsa F siete otra vez, que tus dibujos solo duren dos fotogramas. Al igual que hicimos al dibujar extremos, vamos a usar la herramienta de piel de cebolla como guía para ayudarnos a averiguar exactamente dónde colocar nuestros dibujos desglosados. Si nos fijamos en el fotograma nueve, este es el punto medio exacto de cuando se está levantando el brazo de los personajes. Por lo que necesitamos dibujar el brazo justo en medio de nuestros dos dibujos extremos. Así como expliqué, la mano está rezagada. Tiene que estar apuntando más cerca a nuestro primer extremo como si estuviera siendo arrastrado por el brazo. Una vez que hayas hecho eso, avanzaremos al encuadre 21, igual que el cuadro nueve, este cuadro es smack bang en medio del movimiento de nuestro personaje ondeando. Por lo que una vez más, el brazo necesita estar justo en medio de nuestros dos dibujos extremos. Al igual que en nuestro primer dibujo de desglose, la mano está rezagada. Nuevamente, tiene que estar apuntando más cerca al primer extremo como si estuviera siendo arrastrado por el movimiento. Repite esto nuevamente en el marco 29, y ese es nuestro desglose de dibujos terminados. Cuando estés dibujando esta última derecha hacia abajo, dependiendo del diseño de tu personaje, potencialmente puedes copiar el dibujo del brazo directamente desde el marco 21 ya que el brazo volverá a estar justo en medio de tus dos extremos de la ola. Basta con redibujar la mano. Nuevamente, asegurándose de que apunte hacia el extremo anterior, ya que se arrastra por el movimiento. Esto es lo que he hecho en mi proyecto, y reutilizando partes de dibujos como esta como una gran manera de ahorrar tiempo en el proceso de animación. Entonces, desglosemos de lo que acabamos de hablar. Los dibujos desglosados son el segundo paso en el proceso de animación, y te ayudan a que los movimientos se vean realistas. También se les conoce como acciones secundarias. El término desglose se se utiliza para describir un movimiento en el que una parte del cuerpo se queda rezagada por otra. En el contexto de nuestro proyecto, los movimientos están siendo liderados por el brazo, y por lo tanto la mano, es la parte que se queda atrás. Con el tiempo que estamos trabajando con estos dibujos de desglose, aterriza en el marco 9, marco 21, y marco 29. Se dibujan para que parezca que la mano está siendo arrastrada por el brazo. Eso es todo para esta lección. Entonces sigamos moviéndonos. 5. Relleno en los vacas: Inbetweens: Un en-medio es exactamente lo que suena. Son dibujos que se sientan entre tus extremos y tus averías. Ahora, no te voy a mentir, En el medio son notoriamente la parte más tediosa del proceso de animación al paso donde terminamos el lado más creativo de las cosas y solo estamos trabajando para terminarlo. No obstante, personalmente también me parece que es una de las partes más satisfactorias de todo el proceso. Es la parte donde se llega a ver que todo se une y ver todos tus movimientos completamente acanalados en su forma final. Volvamos a sumergirnos en ese proyecto. Para esta lección, sólo nos vamos a centrar en el segmento en el inicio donde nuestros personajes se levantan ahí brazo. Terminaremos el resto en nuestra próxima lección. Tenemos un hueco de seis marcos a cada lado de nuestro primer dibujo de descomposición. El primero que tenemos que hacer es crear dos nuevos fotogramas clave-en blanco en el marco cinco y el marco siete. Como puedes ver, eso nos deja con tres marcos NDK que necesitamos llenar en medio. La forma más fácil de trabajar tu en el medio es empezar desde el medio y trabajar tu camino hacia arriba. Vamos a empezar con nuestro dibujo en el marco cinco. Enciende nuevamente tu herramienta de piel de cebolla y ajusta el rango para que puedas ver tu primer dibujo extremo y descomponer, y así como el nombre lo indica, vamos a dibujar justo entre estos dos dibujos. El brazo es bastante sencillo ya que se sentará a punto muerto entre los dos brazos que ya dibujaste. Una vez que hayas hecho esto, te quedas con dos dibujos más en blanco a cada lado de este entremedio en el marco tres y el marco siete. Sigue el mismo proceso para rellenar estos dibujos entre lo extremo y lo intermedio, y lo intermedio y el desglose. Necesitas asegurarte de prestar atención al movimiento de la mano. Como discutimos en la fase de descomposición, la mano se queda atrás del brazo. Además de la posición de la mano, debes asegurarte de que la rotación de la misma también esté a mitad de camino entre lo que está en el extremo y la avería. Para el apartado después del desglose, vamos a hacer algo un poco diferente. En lugar de colocar nuestro primer entremedio en el medio, lo vamos a colocar directamente después de la avería en el marco 11. Seguidamente seguiremos llenando este vacío colocando entre uno tras otro hasta llegar al siguiente extremo, siendo cada dibujo justo en medio del dibujo antes y después de él. Asegúrate de ajustar tu piel de cebolla a medida que vas para que puedas guardar los dibujos según necesites. Ahora al hacer esto, estamos creando un efecto que se llama flexibilización. ¿ Qué es la flexibilización? Me alegra que lo pidieras. 6. Suave como mantequilla - flexibilidad del zarago: flexividad: Cuando estás trabajando en tus Inbetweens, existe una técnica que puedes implementar que agrega un nuevo nivel de suavidad y autenticidad a tus movimientos y se llama Easing. Cuando la gente se mueve, por lo general no nos movemos a velocidades completamente consistentes; lo general, nos relajamos lentamente en movimientos o salimos lentamente de ellos. A veces es realmente sutil, pero casi siempre es así, sobre todo cuando se trata de animación. flexibilización es un paso importante para asegurarte de que tus movimientos parezcan humanos. Sin ella, las cosas pueden empezar a parecer un poco robóticas, y no de buena manera. Aunque estés animando a un robot, definitivamente te recomiendo que intentes implementar la flexibilización donde puedas. Entonces veamos cómo encaja la flexibilización en nuestro proyecto. Ya que ya abordamos la primera sección de la animación, vamos a prestar atención a la última parte de nuestro proyecto donde el personaje está agitando. Ahora como dije, Easing pasa al principio y al final de un movimiento. Nuestra ola necesita comenzar con lentitud, que se llama Easing In, y moverse más rápido en el medio y luego terminar con lentitud, que se llama Easing Out. Hay dos formas de facilitar: primero, es agregando más dibujos a un movimiento, ampliando la cantidad de tiempo que va para. Esto hará que tus movimientos parezcan más lentos pero eso también tomará más tiempo. La segunda forma de facilitar es cambiando la distancia entre tus dibujos cuando los dibujas. Esto significa que el momento de tus movimientos no cambia. En cambio, la distancia entre algunos dibujos es mayor que otros, por lo que parecen moverse más rápido. Para nuestro proyecto, vamos a estar usando ese segundo enfoque. Ahora en nuestra línea de tiempo, ya tenemos los dibujos de desglose de nuestra ola. Esta es la parte de nuestro movimiento que necesita moverse más rápido. ambos lados de esto, queremos sacar el brazo moviéndose lentamente fuera del extremo, rápidamente por la avería y luego lentamente hacia el extremo nuevamente. Para ello, necesitamos acercar a estos Inbetweens a los extremos. De esta manera, hay menos distancia al extremo y más distancia al desglose, y como estos dibujos ocupan la misma cantidad de espacio en la línea de tiempo, el movimiento para el desglose parece mucho más rápido. Asegúrate de dibujar estos Inbetweens relajados a ambos lados de la avería y hazlo por ambas partes de la ola. Ten en cuenta que para este proyecto mientras estás dibujando tus Inbetweens relajados, debes asegurarte de que estén posicionados más cerca de los extremos. Ahora esto no significa simplemente acercarnos al dibujo anterior, que se ve como azul en la piel de Onionskin. Este es sólo el caso si estás animando el movimiento hacia la ola. Si estás dibujando estos Inbetweens que se encuentran en los marcos 19 y 27, entonces el extremo vendrá antes del marco en el que estás trabajando actualmente. En este caso, tu extremo aparecerá como azul en la piel de Onionskin, por lo que debes acercar tu Inbetween al dibujo azul. No obstante, si estás animando el movimiento fuera de la Wave en fotogramas 23 o 31, el extremo vendrá después del cuadro en el que estás trabajando actualmente. Esto significará que aparece como verde en la piel de Onionskin, por lo que debes acercar tu Inbetween al dibujo verde. Recapitulemos todo lo que ahora sabemos sobre Inbetweening y Feasing. inbetweens son exactamente lo que suenan; son los dibujos que se sientan en medio de tus extremos y tus dibujos desglosados. La forma más fácil de hacer tus Inbetweens es comenzar desde el medio y trabajar tu camino de regreso a tus extremos y averías. Usar la Herramienta Onionskin para una guía es lo más útil que puedes hacer al dibujar tus Inbetweens. flexibilización es un efecto que se utiliza para hacer que tus movimientos parezcan humanos y realistas. Se crea animando algo moviéndose lentamente dentro o fuera de un movimiento. El contexto de nuestro proyecto, Easing encaja mejor en dos lugares: el primero es cuando nuestro personaje levanta el brazo y nos relajamos fuera de ese movimiento hacia el primer punto de la ola. El segundo es en cada punto de la ola; nos movemos lentamente hacia ella, más rápido en el medio, y luego lentamente salimos de ella otra vez, y eso es todo lo básico de Inbetweening. Para este punto del proyecto, deberías tener todos tus dibujos hechos. Ahora es justo el momento de unos últimos toques finales. 7. Toques finales - coloración, bucle y exportar y exportar: Y mira eso, hiciste una animación. Eso es bastante guay. Hay dos cosas rápidas que vamos a hacer para terminarlo. Una es, agrega color y la otra es hazlo bucle. La forma más fácil de agregar color a tu animación en Adobe Animate es usar la herramienta bucket. Nuevamente, el atajo para ese es k Una peculiaridades que debes tener en cuenta al usar la herramienta de cucharón es que si tu trabajo de línea no está sellado, herramienta de cubo no podrá llenar nada. Entonces, si como yo, tienes un hueco en la parte inferior del cuerpo de tu personaje necesitaremos sellarlo para que la herramienta de cubo pueda llenar las áreas. Todo lo que necesitas hacer es dibujar una línea de cualquier forma que selle estos huecos. En Adobe Animate nada que no esté presente en el escenario blanco no aparecerá en tu exportación final, por lo que puedes estar tan desordenado como quieras con esto. Ahora, si como yo, también has dejado un hueco en el hombro donde encaja el brazo, necesitarás sellarlo también en la capa corporal. Esto lo haremos usando la herramienta pincel, el atajo para el cual, es b, con la herramienta pincel seleccionada, aparecen algunas opciones en la parte inferior del panel de herramientas. Estas opciones también aparecen en la parte superior del panel de propiedades bajo el menú de herramientas. Vamos a ver el de arriba justo aquí, que es un círculo con una línea a través de él. Al hacer clic en esto te da una gama de opciones de cómo funcionará el pincel. Paint normal es el valor predeterminado para dibujar cualquier línea en animate. Pero vamos a ver este en la parte inferior, pintar por dentro, seleccionar esto significará que el pincel sólo dibuja en un área específica en la que empiezas a dibujar. Entonces si empezáramos a dibujar dentro de una forma, el pincel no saldría fuera de esa forma. Esta herramienta es ideal para sellar huecos al colorear sin afectar su trabajo de línea. Asegurándose de tener un color seleccionado que no sea el mismo que su trabajo de línea. Simplemente comienza a dibujar en un área que no está en el trabajo en línea y sella el hueco. Puedes dibujar sobre las líneas, porque de nuevo con la herramienta de pintura interior seleccionada, la herramienta de pincel no te permitirá dibujar en tu trabajo de línea. Si hay pequeños huecos en tus líneas, está bien, hay una manera de evitarlo. Una vez que tenga seleccionada la herramienta de cubo, aparecerá un botón de un cuadrado en la parte inferior izquierda del panel de herramientas y en la parte superior izquierda del panel de propiedades debajo de herramienta. Si haces click en esto, abrirá un menú que te da cuatro opciones. Tienes la opción entre, no cerrar brechas, cerrar brechas pequeñas, cerrar brechas medias y cerrar brechas grandes. Seleccionarlas significará que tu herramienta de cubo interpreta automáticamente los huecos que quieres que cierre. Entonces si hay pequeños huecos en tu línea trabaja, eligiendo cerrar más huecos, lo que significa que el cubo sellará automáticamente estos para ti y llenará las áreas en las que hagas clic. Ahora tenemos que elegir algunos colores, para ello, basta con hacer clic en el cuadrado coloreado en la parte inferior del panel de herramientas. Hay una muestra predeterminada disponible en Adobe Animate. No obstante, si quieres personalizar tus colores, puedes hacer clic en el icono de la rueda de color en la parte superior derecha de este panel. Al hacerlo se abrirá tu menú selector de color. Si estás familiarizado con el recolector de colores de programas como Photoshop, éste podría parecer un poco extraño. Aunque es fácil conseguir que se vea igual. Todo lo que necesitas hacer es hacer click en la h en la parte superior aquí, que luego mostrará tu recolector de color por hew. Abajo por la parte inferior del panel selector de color aquí, se encuentra un cuadro de texto con un hash junto a él. Esto es para introducir el código hexadecimal de colores. Si ya tienes un archivo digital del personaje que estás animando en un programa como Photoshop o Illustrator, puedes abrir el seleccionador de colores en estos programas, seleccionar los colores que has elegido ahí, copiar el código hexadecimal y luego pegarlo directamente en Animate. Los códigos hexagonales, son universales en todo el software de Adobe, por lo que reconocerá el color al instante. A partir de ahí, es un proceso bastante sencillo. Pasa y elige los colores que quieras y agrega color a tu animación. Recuerda al colorear en tu brazo, posible que tengas que sellar el extremo del mismo que está debajo de la capa corporal, lo contrario el cubo no podrá llenar las áreas en las que hagas clic. Te darás cuenta a lo largo del proceso de colorear mis dibujos, estoy agregando sombreado a cada marco. Para ello, estoy usando esa misma herramienta de pincel interior que usamos para sellar antes el hueco en el hombro. Este es otro gran uso para la herramienta de pintura interior. Te permite sombrear áreas de una a la vez sin tener que preocuparte por poner los colores equivocados en los lugares equivocados. Por ejemplo, puedo empezar a colorear dentro de una de estas secciones azules con mi azul oscuro. Y entonces soy libre de dibujar tan lejos en cualquiera de las otras áreas como quiera, ya que la herramienta de pintura interior restringirá el azul más oscuro a las secciones azules. Ahora que tenemos algo de color ahí dentro, hagámoslo bucle. Este proceso puede ser un poco complicado, así que siéntete libre de rebobinar y volver a ver tantas veces como necesites. La parte de la animación que vamos a hacer loop es la ola. El oleaje inicia en el marco 17. Así que selecciona tu dibujo que está en este marco y pulsa F8 en el teclado. Presionar F8 es el atajo para crear un nuevo símbolo en Animate. Los símbolos pueden hacer muchas cosas en Adobe Animate, pero en su mayoría actúan como contenedores para la animación. Permiten manipular toda una sección de animación a la vez como un solo activo, en lugar de simplemente poder trabajar con un dibujo a la vez. Si hace doble clic en un símbolo, el panel de línea de tiempo se abrirá en la línea de tiempo del símbolo. Cada símbolo individual tiene su propia línea de tiempo única dentro de ella, lo que permite poner animación dentro del símbolo para que pueda ser manipulada como un todo en la línea de tiempo principal. Hay mucho que se puede hacer con los símbolos y se pueden complicar bastante. Cubriré el resto en otra clase, pero por ahora, eso es todo lo que hay que saber. Llame a su onda de símbolo, y asegúrese de que esté configurada en gráfica, ya que esta es la única variedad de símbolo que previsualiza en la línea de tiempo. Todos los demás símbolos solo previsualizan en exportación. Lo siguiente que tenemos que hacer es poner todos los marcos de nuestra ola dentro del símbolo. Para ello, resalta todos los marcos desde el marco 19 hasta el 34, haz clic con el botón derecho y pulsa los marcos cortados. Notarás que no destacamos el marco 17 o 18. Esto se debe a que estos marcos actualmente sostienen el símbolo del que estamos a punto de colocar nuestra animación dentro. No se puede colocar un símbolo dentro de sí mismo. Si copiáramos el marco 17 e intentáramos pegarlo en el símbolo, obtendríamos este mensaje. Una vez que hayas cortado tus fotogramas de la línea de tiempo principal, haz doble clic en tu símbolo. Tenemos que hacer nuestro primer dibujo durante los dos últimos cuadros. Por lo tanto, haga clic en el marco dos y presione F5 para extenderlo. Después, haga clic en el marco tres, haga clic con el botón derecho y presione pegar marcos. Ahora tienes toda tu animación de onda dentro de ese símbolo. Pero aún quedan algunos hipo con los que tenemos que lidiar. Aquí te explicamos cómo arreglarlas. El primero que podrías notar es que todos los marcos que acabamos de pegar un poco fuera de lugar, pero ese es un arreglo fácil. El único dibujo que está en un lugar diferente al resto de ellos es nuestro primero. Pero si recuerdas volver a cuando estábamos haciendo nuestros extremos, el último fotograma de esta secuencia es en realidad una copia del primer fotograma. Cuando estás creando un bucle, debes asegurarte de que tus primeros y últimos fotogramas no sean los mismos. De lo contrario habrá un retraso en el bucle y el tiempo se verá muy incómodo. Esto se debe a que el bucle estará repitiendo este marco, lo que significa que permanece en esto en el almacenamiento por doble de tiempo que lo hace para cualquiera de los otros. Entonces con esto fijo, vamos a conseguir dos pájaros de un tiro. Selecciona tu primer fotograma y pulsa borrar. A continuación, muévete a tu último fotograma, haz clic con el botón derecho y pulsa el marco cortado, vuelve a enmarcar uno y pega el marco ahí. Todavía tenemos dos fotogramas en exceso al final de esta secuencia, por lo que resaltan ambos y golpea turno F5 para eliminar esos fotogramas de la línea de tiempo. Ahora, tenemos un bucle perfecto. Todavía tenemos dos problemas más muy pequeños, pero ambos son arreglos muy fáciles. De vuelta en la línea de tiempo principal, un símbolo sufre por dos fotogramas, que no es lo suficientemente largo para mostrarnos toda nuestra animación. Queda un fotograma clave en blanco en el fotograma 19 desde que cortamos nuestros fotogramas en este inicio. Simplemente haga clic en este fotograma clave y pulse Shift F6 para quitar el fotograma clave. Ahora nuestro símbolo puede jugar en su totalidad. También verás que todo el brazo está fuera de lugar. Pero como esta ola está en un símbolo, podemos mover todo a la vez. Haga clic en su símbolo en el marco 17 y vuelva a colocarlo en su lugar. Esto moverá toda la animación de onda al lugar correcto. Todo lo que queda por hacer ahora es extender nuestras líneas de tiempo para que la onda pueda recorrer el tiempo que queramos. Para ello, simplemente seleccione el fotograma en su línea de tiempo al que desea que se extienda el bucle y presione F5. Asegúrate de hacer esto también por el cuerpo para que no solo tengamos un brazo flotante. Y eso es todo, ya terminamos. Recuerda que si quieres previsualizar tu animación en la línea de tiempo todo lo que tienes que hacer es presionar Enter en el teclado. El último paso que tenemos es exportar nuestra animación para que podamos publicarla en línea y mostrarla a todos. El primer paso para hacer esto es simplemente pulsando el control Enter en el teclado para exportar un archivo SWF de puntos desde Adobe Animate. Este archivo swift es en realidad un formato que sólo se puede reproducir en Adobe Flash player. Por lo que necesitamos convertirlo en un MP4 antes de poder publicarlo en cualquier lugar. Una forma fácil de hacerlo es descargar el software Swivel de newgrounds.com. Se trata de un software libre que existe puramente con el propósito de convertir Swift a video MP4. Puedes encontrar el enlace de descarga al mismo en la descripción de esta clase. Una vez que hayas descargado Swivel, ábrelo, carga tu animación y pulsa convertir. Deja que el programa haga lo suyo y rápidamente escupirá un MP4 para ti, listo para publicar cualquiera donde quieras. Y eso es todo. Ya has hecho una animación y está lista para publicar. Bien hecho. Recapitulemos lo que aprendimos en esta clase. La forma más fácil de colorear tu animación en Animarlo para usar la herramienta de cubo, atajo k La herramienta de cubo solo funcionará si tus líneas están selladas, así que asegúrate de hacerlo. Si estás teniendo problemas con pequeños huecos en tu trabajo de línea, todo lo que necesitas hacer es encender cerrar más huecos y la herramienta de cucharón hará el trabajo por ti. Elegir tus propios colores para tu animación es tan fácil como hacer clic en el cuadrado al lado del cubo, hacer clic en la rueda de color en la esquina superior derecha y luego hacer clic en h Si tienes un archivo de tu personaje ya coloreado en otro programa de Adobe, todo lo que necesitas hacer es copiar los códigos hex de ese programa en animate y podrás colorearlo exactamente igual. Al crear un bucle en Animate, todo lo que necesitas hacer es crear un símbolo pulsando F8, puedes cortar y pegar fácilmente todos los fotogramas de tu línea de tiempo principal en este símbolo para hacerlos viables, pero no puedes pegar el símbolo dentro de sí mismo. Cuando estás creando un bucle, tienes que asegurarte de que tu primer fotograma y tu último fotograma no sean el mismo dibujo. Entonces si lo son, asegúrate de borrar uno de ellos. Una vez que tu animación está dentro de un símbolo, eres capaz de manipular todo a la vez. Y hacer que tu animación recorra la línea de tiempo es tan simple como hacer clic a donde quieres que vaya y presionar F5, y eso es todo. Esos son los fundamentos básicos de la animación fotograma por fotograma de dos días. 8. ¡Lo lograste!: Acabas de hacer tu primera animación, felicitaciones, solo a través de ese proyecto, aprendiste los conceptos básicos de Adobe Animate, algunos conceptos básicos como las tasas enmarcadas y las relaciones de aspecto y los fundamentos de animación de los extremos, averías, in-between, a-sync, e incluso algunos extras divertidos como crear loops, todas estas cosas son las habilidades básicas que necesitas saber para hacer tus propias animaciones. Y tomará un poco de práctica, pero estás absolutamente en camino. Hay una cosa que quiero tocar muy rápidamente sin embargo, en esta clase, empezamos por ir directamente al outlet final para la animación pero este no es el proceso habitual. Por lo general, los animadores usan dibujos en bruto para trabajar al momento de su animación antes de saltar a hacer su trabajo final limpiado duramente ganado. De hecho, hice exactamente eso mientras desarrollaba esta clase y esto es lo que me gusta a mis roughs, racionalicé un poco el proceso para esta clase, pero ten en cuenta al hacer tus propias animaciones que es bueno usar áspero dibujos para planear las cosas fuera de ella primero antes de comprometerse con su hora final. Pero ahora que has terminado de animación de gira, asegúrate de publicar en la galería de proyectos de esta clase para que yo y todos los demás podamos verlo. Me encantaría ver tu trabajo y darte algunos comentarios y estoy seguro de que todos los demás también lo harían, si disfrutas de esta clase, por favor asegúrate de dejar una reseña para hacerme saber lo que pensabas y asegúrate de seguirme para cualquier futuro si hay algo de lo que estás confundido y quieres echar un vistazo más de cerca hay algunos recursos que puedes descargar de la sección de proyectos de esta clase que podrían ayudar. El primero es mi versión de un proyecto de clase que me viste crear a través estas lecciones y el segundo es mi archivo de trabajo de Adobe Animate de esta clase. Siéntete libre de descargar estos y cavar a través de ellos si quieres echar un vistazo más de cerca a cómo creé mi versión de este proyecto. Si tienes más preguntas sobre la animación sobre los fundamentos de hoy, siéntete libre de ponerte en contacto conmigo. El lugar más fácil para encontrarme es en Instagram @jackhgrayson. Muchas gracias por tomar esta clase. Realmente aprecio tu tiempo y hacerlo y se escuchan de verdad que sacaste algo bueno de ello. Te veré la próxima vez.