Guía para intermedios para crear animaciones de interfaz de usuario | Bolt Bite | Skillshare

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Guía para intermedios para crear animaciones de interfaz de usuario

teacher avatar Bolt Bite, Tournament Winner Lottiefiles Creator.

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introduccion

      1:17

    • 2.

      01.Complementos útiles

      1:29

    • 3.

      02.Recreación de iconos y animación de iconos en bucle

      20:55

    • 4.

      03.Creación de animación de personajes e ilustraciones

      68:45

    • 5.

      04.Animación para clientes y animación de textos

      21:27

    • 6.

      05.Animaciones complejas y gestión del flujo de trabajo

      27:43

    • 7.

      06.Tutorial de Bodymovin y opciones de exportación

      21:02

    • 8.

      Felicitaciones y...

      1:01

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

57

Estudiantes

1

Proyecto

Acerca de esta clase

¡Bienvenido a Animación de interfaz de usuario intermedia!

Resumen de la clase: aprende a desarrollar habilidades de principiante y domina la animación de la interfaz de usuario. Aprende animación de personajes, animación de chat para clientes y sitios web, y más.

Por qué tomar esta clase: las empresas confían en plataformas en línea, lo que genera una demanda de diseñadores de movimiento de interfaz de usuario calificados. Eleva tus habilidades para que no dejes de ser competitivo.

Quién debería matricularse: para graduados del curso para principiantes y para cualquier persona que desee mejorar sus habilidades de animación.

Materiales y recursos: se requiere Adobe After Effects e Illustrator.

Complementos opcionales: Overlord, Herramientas de movimiento, Bodymovin.

Conoce a tu profesor(a)

Teacher Profile Image

Bolt Bite

Tournament Winner Lottiefiles Creator.

Profesor(a)

Hi World, Boltbite here, A tournament winner lottiefiles creator & one of the best creator at lottiefiles platform.

Ver perfil completo

Habilidades relacionadas

Diseño Diseño UX/UI
Level: Intermediate

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • Sí
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción perfecta: Muchas gracias por hacer clic en este curso. Espero que ustedes estén bien. Y ahora vamos a un montón de nuevas técnicas en este curso. Muchas gracias a todos los alumnos anteriores que vieron mi curso anterior y el primer curso. Esperaba llegar sólo a diez alumnos antes de lanzar el segundo. Y luego hubo algunos problemas y llegué tarde. Y ahora hay 73 alumnos en mi primer curso. Y realmente me encanta la respuesta en mi curso anterior. Muchas gracias a todos ustedes. Yo sugeriría y solicitaría a todos ustedes que si por favor puedan dejar más comentarios en mi curso anterior, entonces realmente me va a ayudar Y ahora en esta clase, primero vamos a ver qué herramientas y qué plugins vamos a usar en este curso. Porque quiero compartir con ustedes que cómo vamos a estar usando muchos archivos asionalmente y brindando servicios a los clientes, y no se trata solo aprender a crear buenas animaciones También se trata de aprender más rápido y usar el tiempo manera productiva y construir resultados de riesgo increíbles sin perder tiempo. Bien. 2. 01.Complementos útiles: Entonces estaremos usando estos tres complementos en este curso, y definitivamente no puedes tener ninguno de estos y también completar este curso. Sin esto, estos son solo para ahorrarle mucho tiempo y facilitarle su tarea. Estos no van a impedirte crear la animación. Estos son sólo para ayudarte. Eso es. Entonces, antes que nada, vamos a estar usando motion tools pro. Este es completamente destacado, así que solo tienes que seguir adelante y descárgalo y simplemente podrás instalarlo. Y puedes encontrar los ttoals de instalarlos en YouTube de manera bastante simple Bien. El siguiente que vamos a estar usando es este cuerpo movin este es el propio desarrollador que creó este plug in, va a tener que seguir adelante y hacer clic en este enchufe y simplemente hacer clic en los rieles desde Acabo de devolver el golpe, y luego solo puedes descargar el archivo sin procesar desde aquí, y luego puedes resolverlo. Es bastante simple. Y el tercer enchufe que vamos a utilizar es la sobrecarga. Ahora bien, esto puede parecer un poco caro, pero esto va a ahorrar una gran cantidad de tiempo y créeme, vale cada centavo, en realidad. También puedes ver este tutorial que lo que hace este plug in hace, pero vamos a sumergirnos en el uso de este enchufe en nuestro curso realmente muy profundamente. Así que estoy deseando atraparlos en primera clase, y buena suerte a todos ustedes. 3. 02.Recreación de iconos y animación de iconos en bucle: Bien, entonces hemos descargado los plugins y son bastante sencillos de instalar, así que solo puedes si tienes algún problema instalándolos, simplemente puedes buscar en YouTube, y encontrarás esos tutoriales de cómo instalarlos. Bien, entonces ahora vamos a crear en esta primera clase una animación LTI Entonces se han instalado los plugins, y ahora vamos a ver cómo crear un icono de animación loop able te. Bien. Entonces estaremos usando un ícono de WiFi para esto. Y acabo de buscar icono de WiFi, y ahora solo voy a visitar este. Creo que este es muy bueno para nuestro ejemplo. Podemos usar esta también. Pero creo que esta va a funcionar bien. Así que solo visitemos, y descargaremos el archivo vectorial SVG. Bien. Entonces ahora solo voy a abrirlo en mi carpeta. Voy a abrir mi archivo y hacer illustrator. Bien, entonces hemos abierto nuestro archivo dentro de doble recta, y como pueden ver, nuestro icono es bastante genial, ¿de acuerdo? Entonces ahora hay algunos problemas con nuestro diseño que resolveremos en un minuto. Pero antes de hacer eso, vamos a comprobar cuál es el tamaño de nuestra mesa de Es de 800 por 800 puntos o píxeles. Bien. Ahora vamos a estar creando una comp de 800 por 800 píxeles, y vamos a hacer que sea de diez segundos de duración, y la velocidad de fotogramas va a ser de 24 fotogramas, y ahora le vamos a nombrar icono. Bien. Entonces lo que vamos a hacer es seleccionar todas estas capas, y lo que estoy tratando de hacer es construir una animación en mi mente. Estoy pensando que las líneas dibujan y luego también se desvanecen. Entonces para esto, vamos a usar un truco mucho más simple, pero no podemos usar eso con el efecto de relleno aplicado. Solo se puede aplicar a efectos de trazo. Y podemos simplemente crear la animación con estas formas también en los efectos posteriores, pero no será compatible con lty Como aprendimos en la clase de fundamentos, la clase de vaguedad que hay ciertas restricciones a las difies, entonces es por eso que vamos a simplemente bloquear estas formas, y ahora vamos a crear una Bien, ahora lo que vamos a hacer es crear un círculo, y voy a hacer que sea un trazo. Voy a cambiar el color a rojo, y voy a volver sobre este diseño lo más cerca de lo que pueda Voy a borrar el resto de los puntos de anclaje. Y ahora tenemos una forma sencilla. Bien. Entonces lo que vamos a hacer ahora es seguir adelante en las propiedades y aumentar el punto de trazo. Bien. Eso se ve bastante bien, y acabaremos de redondear eso a los 80. Ahora vamos a redondear las brechas. Bien. Entonces ahora vamos a ajustar esto un poco. Y eso es todo. Lo vamos a recuperar un poco. Bien. Perfecto. Entonces ahora vamos a simplemente duplicar esta capa, seleccionarla Alt arrástrela, y ahora vamos a simplemente agregar solo nuestros puntos de anclaje. Ahora, como pueden ver, esta forma no está funcionando del todo bien. Entonces en este tipo de situaciones, podemos simplemente tular esta y crear otro círculo Volveremos a hacer el trazo a un punto para que podamos crear una buena referencia. Ahora voy a simplemente dejar caer los ojos el otro golpe, y eso también aumentará el tamaño de nuestro trazo. Solo hagamos algunos ajustes más. Y estamos bien para irnos. Bien. Entonces ahora sobre el círculo, realmente usamos un círculo simple, aquí mismo. Vamos a hacer que sea un relleno. Y ahora vamos a hacerlo más grande. Bien, entonces ahora nuestro diseño está hecho. Ahora lo que voy a hacer es seguir adelante y desaparecer por completo la primera capa corrida de su visibilidad, y ahora vamos a cambiar el color de éste a negro. Ahora, para eso lo voy a hacer es que no voy a seleccionar el relleno. Seleccionaremos los círculos y los trazos, y sólo voy a hacerlos negros negros. Ahora vamos a hacer éste también negro. Ahora nuestro diseño está listo, y ahora vamos a iniciar el proceso de animación. Seleccione todas estas capas. Ahora bien, lo que hace la sobrecarga es una vez que tienes instalada la sobrecarga, lo que puedes hacer es simplemente ir a windows y a extensiones, y luego vas a seleccionarla Sobrecarga, y luego aparecerá esta ventana, se abrirá. Entonces este es un panel acoplable, que puedes acoplar en cualquier lugar que quieras Ahora lo que vas a hacer es seleccionar todas estas capas. Hay múltiples características dentro de la sobrecarga, pero solo nos centraremos en esta principalmente, o simplemente puede seleccionar esta también. Hará que los puntos de anclaje se centren en las capas seleccionadas. Ahora bien, lo que esto va a hacer te va a volar la cabeza. Sólo vamos a hacer clic en este botón y viola. El icono y las capas de iconos están ahora dentro ab tras efecto y no nos hizo perder el tiempo, y nos ahorró mucho tiempo, ¿de acuerdo? Porque todas las capas están aquí y ahora son muy compatibles porque son estrellas y sin forma En realidad, hice clic dos veces por error, así que sólo voy a hacer click una vez Ahora puedes ver que aquí hay cuatro capas. Entonces ahora vas a etiquetar nuestra capa para hacer una mejor comprensión. Porque cuando estás trabajando con archivos complejos, vas a tener un momento difícil. Por eso para los trazos, vamos a ir con una etiqueta de color naranja. Para fil, vamos a estar usando un color marrón. Puedes usar lo que quieras. Entonces lo vas a hacer por delante es que vamos a estar usando estas herramientas de movimiento. Bien. Entonces lo que vamos a hacer es crear un anual. Ahora bien, ¿qué hace All object es? Básicamente es para propiedades de crianza simples, y lo estaremos usando para ese propósito solo en este caso. Bien. Entonces ahora lo que vamos a hacer es crear empezar a construir nuestra animación. Lo que estaba pensando es que estas líneas van a dibujar de izquierda a derecha, y luego éstas aparecerán de derecha a izquierda. Entonces déjame mostrarte lo que quiero decir con eso. Lo que vamos a hacer es agregar un camino prim, y voy a iniciar la creación de la animación así Vamos a animar el final, así, como pueden ver Así se dibuja. Ahora, una vez que esté dibujado, quiero que esto desaparezca así así. Es bastante simple. Vamos a golpear F nueve en nuestro teclado, y ahora vamos a aplicar algunos fáciles. Bien. Entonces yo segundo éste y vamos a hacer esto una manera y vamos a aplicar la influencia sobre el otro lado. Entonces ahora, esto comenzará en el segundo uno y saldrá en el segundo tres. Bien. Entonces así es como se ve. Bastante genial, ¿verdad? Bien, entonces lo que vamos a hacer es simplemente seguir adelante y copiar la ruta de la pantalla porque queremos la misma animación en las otras capas también. Vamos a copiarlo y vamos a seleccionar las otras dos capas, y vamos a controlar. Ten en cuenta que deberías estar en el punto cero y de partida de tu comp para hacer que los fotogramas también se alineen con otras capas, ya que si sigues adelante y pegas la animación de ruta crema aquí, entonces comenzará desde aquí. Bien, así que ten en cuenta eso. Entonces ahora vamos a pegar este overhre. Como puedes ver, nuestra animación está casi terminada, vamos a agregarle algunos detalles más. Bien. Lo que vamos a hacer por delante es que seleccionaremos este círculo. Vamos a seguir adelante y animar su propiedad de escala. Y sólo voy a hacer que sea cero. Y yo sólo voy a aplicar la flexibilización también. Bien. Entonces, lo que voy a hacer ahora es también quiero reproducir la misma animación de este lado. Pero con la ayuda de este enchufe gratuito y lo que podemos hacer es simplemente seleccionar estos dos fotogramas clave, y luego vamos a phi si pasas el cursor sobre el botón, te dirá todas las funcionalidades del botón Como se puede ver, dice, Mayús haga clic en invertir la animación. ¿Qué significa eso? Estoy aguantando mi turno ahora mismo, y voy a luchar contra él. Por lo que volvió a agregar dos fotogramas clave. Pero ahora ha creado la dinamón inversa de la misma escala Entonces es básicamente reflejo de esos fotogramas clave en la dirección opuesta. ¿Verdad? Entonces ahora esta es una animación perfecta lopable Ahora bien, ¿qué significa una animación perfecta lopable, en realidad Una animación perfecta lopable significa que el primer fotograma de nuestra animación debe estar alineado e igual al último fotograma de nuestra animación Así es como decidimos y llegamos a la conclusión de que es una animación perfecta lopable En nuestro caso, ese es un marco vacío. Bien. Entonces ahora lo que vamos a hacer es que vamos a estar agregando algo de aferramiento entre capas, y. ahora, cómo vamos a hacer eso usando este plug in, lo que vamos a hacer es ahora este botón decide el orden de selección en el que aplicará la secuenciación a las las. Bien. Entonces un desplazamiento significa que cuántos fotogramas desea compensar. Y un paso significa que cuántos pasos se deben involucrar en el primer offset. Bien. Entonces en nuestro caso, queremos desfasar cada capa, un fotograma, y vamos a mantener el paso uno porque no queremos agregar muchos más pasos entre las capas porque estas son sólo tres capas. Podemos agregar más pasos cuando estamos tratando con más complejos o más. Tamaños de archivo de proyecto más grandes que tienen más capas para que podamos agregar la easing y overflow o overshooting usando sin complicar las cosas y mantenerlo simple Bien. Entonces ahora lo que vamos a hacer es hacer clic en el botón de secuencia, y como pueden ver se ha agregado, permítanme mostrarles. Como puede ver, hay una diferencia de un fotograma clave en cada capa. Ahora, vamos a seguir adelante y jugarlo y ver cómo se ve. Bien, así es como se ve. Bien. Pero hay un problema. Creo que primero debería aparecer la primera capa, y luego ésta y después ésta. Así que solo voy a controlar Zs, y solo voy a cambiar el orden de la secuenciación Ahora, vamos a seguir adelante y jugar. Verás, creo que esta se ve mucho mejor. Ahora lo que vamos a hacer es que vamos a revertir esta animación. Entonces lo que vamos a hacer es que vamos a cambiar el orden selectivo, y vamos a acertar secuencia. Ahora vamos a alinear el marco clave final nuevo en el área workson Y así es como se ve nuestra animación en estos momentos. Entonces. Como puedes ver, así es como se ve nuestra animación. La primera capa aparece en primer lugar, y se desvanece en la última Bien. Entonces lo que vamos a hacer ahora es crear alguna posición ge framing también, porque quiero mostrar la conectividad de la conexión WiFi, ¿verdad Entonces, lo que vamos a hacer ahora es crear marcos gay de posición libre, y seguiremos adelante y presionaremos shift y flechas para que se muevan en dirección ascendente Ahora voy a seguir adelante y no voy a simplemente copiar y pegar e k ahora. Sólo voy a seleccionar todos estos tres y golpear clon. No voy a golpear el clon de Shift porque no estamos invirtiendo ningún fotograma. Solo queremos los mismos fotogramas clave aquí. Bien, y nuestra animación ya está creada. Vamos a aplicar un poco de flexibilización ahora. Así es como se ve. Bien, vamos a agregar solo algunas cosas ahora. Bien. Entonces ahora quiero hacer lo mismo. Quiero aplicar offset a esto. Entonces la primera capa empujará las capas superiores. Entonces este será el primero, y este será el segundo y este será el tercero. Sigamos adelante y agreguemos de nuevo la secuenciación. Veamos cómo se descompone su Thatsn. Bien. Entonces ahora lo que quiero hacer quiero mostrar la influencia del círculo impactando las capas Así que sólo voy a seguir adelante y llevar esta animación un poco por delante. Bien, entonces tal vez diez cuadros. Sí. Creo que eso será suficiente. Ahora lo que vamos a hacer es agregar un fotograma clave de escalado y uno, dos, tres, cuatro, cinco, seis, siete, ocho , nueve, diez, y voy a hacer 110. Bien. Entonces ahora vamos a aplicar algo de flexibilización sobre ello. No. Bien. Entonces, como pueden ver, esto no se ve bien porque la animación empieza a aparecer aquí, pero el impacto está muy retrasado, ¿verdad? Entonces esto no está funcionando. Tenemos que agregar solo el timing de nuestra animación y emparejarlo. Entonces será mejor si empieza al mismo tiempo, ¿ ves? Eso se ve mucho mejor. Y ahora también vamos a clonar los fotogramas clave. Simplemente llevaremos esta animación de regreso a donde estaba. Diez fotogramas clave. Voy a seleccionar todos estos fotogramas clave y éste también Y los traeremos de vuelta aquí. Ahora lo que voy a hacer es ir al último fotograma clave. Voy a seleccionar estos dos fotogramas clave. Voy a c desplazarlos. El otro marco clave también es reemplazado por este. Veamos cómo se ve esto primero. Bien. Bien, entonces ahora hay algún problema con la flexibilización, ¿creo No, es perfecto. Bien. Entonces ahora, lo que pasa es que las capas caigan. Pero la flexibilización va retrasada. La flexibilización debería estar en este lado de la animación. Voy a pegarle a F nueve, y ahora así es como se ve. Veamos cómo se ve. Bien, entonces está más retrasado. Ahora bien, ¿por qué sucede esto porque los marcos clave están por delante del último fotograma clave Vamos a traerlos de vuelta. Vamos a tomar este, y vamos a traerlo de vuelta por aquí. Como este otoño. Ahora, vamos a comprobar la flexibilización en estas lata. Como pueden ver la flexibilización está aquí, ¿no? Entonces vamos a traer esto por aquí. Ves, eso es más impactante. Sí, eso tiene más sentido. Y entonces esto tiene que desaparecer. Bien. Entonces vamos a salvar esta, y como pueden ver, no hay flexibilización en esta parte Entonces vamos a aplicar la flexibilización. Así es como debería ser. Entonces ahora nuestra animación empieza así. Ver. Bien, entonces lo que podemos hacer es ahora, si quieres, y esta es una elección muy subjetiva, y si te gusta, puedes hacerlo o si no lo haces, entonces depende de ti completamente. Voy a agregar una animación de escalado al objeto nulo parentado también porque quiero que el icono aparezca desde el centro de la comp desde aquí y escale hacia arriba Bien. Entonces veamos cómo se ve eso. He sido padre de todas las demás formas, y como pueden ver, sólo vamos a cron todo Estoy usando la misma técnica que usé en el círculo. Entonces voy a cronearlo y veamos cómo se ve. Así es como se ve la animación. Y puedes proporcionar este tipo de servicios a muchos clientes porque hay una gran demanda de animaciones de iconos. Y en todo tipo de plataformas freelance, hay clientes que piden este tipo de animaciones. Por eso solo quería mostrarte cómo crear estas animaciones sin perder tiempo y usando estos plug-ins, puedes ahorrar mucho de ti mismo mucho tiempo. Así que pasemos a la siguiente pestaña. 4. 03.Creación de animación de personajes e ilustraciones: Bien, entonces antes de comenzar nuestro próximo ejercicio, lo que quería mostrarles es un ejemplo relevante también en nuestra clase pasada. Creé esta animación de cargador para un cliente, ¿de acuerdo? Entonces, el significado de mostrarte es que hay múltiples enfoques para el mismo diseño o la misma animación también. Se suponía que esta animación era una animación de cargador. Ahora bien, ¿qué significa una animación de cargador? Ahora bien, esta es también una animación loopable perfecta. El cliente básicamente quería que esta animación se mostrara mientras su sitio web se cargaba. Ahora, hay una ligera explicación detrás de eso, que es que el cliente básicamente necesitaba esta animación para un propósito. El propósito era cuando el sitio web se está cargando en el back end, como ustedes sabrán, que haya algunos datos de back end, ¿verdad? Entonces el sitio web está cargando esos datos. Ahora, dependiendo también de la conexión a Internet del usuario o de sus capacidades de PC. O su móvil. Bueno, la mayor parte es esta velocidad basada en la conexión de datos a Internet. Pero digamos que si el dispositivo funciona más lento que el otro, entonces el sitio web podría tardar unos segundos más en cargarse, ¿verdad? Entonces no puedo ofrecer al cliente una animación de logo o una animación que solo se mostrará y se quedará en la pantalla como este otro ejemplo que quiero mostrarles chicos, ¿de acuerdo? Porque como ves. Ahora bien, esto también se ve bien. No hay problema en usar este tipo de animaciones también. Pero para una página de carga, es mejor usar este tipo de animaciones que tienen el mismo final y el mismo punto de partida. De esta manera, digamos que el usuario abre el sitio web y el sitio web baja en 5 segundos. Y otro usuario que tiene un dispositivo de baja capacidad baja el sitio web en 10 segundos. Durante los 10 segundos, esta animación seguirá cargándose una y otra vez y también esta también. Pero creo que esto se verá mejor de muchas maneras, y hay una razón detrás esto porque esto se está cargando continuamente, ¿verdad? Da la sensación de que la página se está cargando y está refrescando la página. Y este tipo de animación funciona mejor para fines de animación de logotipos que el logo anima y permanece en la pantalla Bien. Entonces es por eso que este es otro ejemplo de que el cliente solicitó algo muy parecido a lo que acabo de crear en la clase anterior. Entonces ahora voy a seguir adelante en free pick y ahora vamos a estar animando un diseño de animación de personajes artw Así que solo voy a seguir adelante y seleccionar vectores ahora, y voy a ir a por tal vez algo así como un personaje de quien está en depresión solo digamos vamos a tratar encontrar algo. Bien. Busquemos a la mujer de la prensa. Sí. Estos son bastante planos. Pensando un poco más de detalle en realidad. Sólo vamos arriba y tratemos de hacerlo. Este es uno que no tiene rasgos faciales. Quiero animar algo con rasgos faciales en realidad Veamos qué nos muestra esto. No del todo en realidad. No, no, no, no, no, no. ¿Estoy buscando? Voy a regresar e ir a seguir garabateando hasta que encuentre algo relevante Sigamos adelante en la página siguiente. Va a agregar el filtro gratuito también. Bien. Depresión. En, vamos a ver. ¿Cómo se ve eso? No. Estos son felices. Sólo voy a encontrar algo más relevante. Ella es feliz donde hay un tipo en particular creo que estoy buscando. Y eso es de Historias, creo que creo que sí. Este tipo de diseño de personajes, creo que será nuestro trabajo. ¿Cuál es el nombre del creador? Esto está bien eso. Conjunto de historia. Bien. Creo que este tipo consiguió lo que necesito. Bien. Bien. Bien. Estos son muy, muy buenos. Bien, vamos a usar uno de estos. Oh, este es bastante bonito. Sí. Sí. Este es un muy buen ejemplo, creo. Nosotros usamos este. Sí. Bien. Aquí es donde hago esto. Bien. Bien, entonces este es el archivo de descarga. Ahora, sólo voy a ir a crear un nuevo tamaño de obra de arte. Esto va a ser de mil por mil puntos. Y ahora voy a seleccionar todas estas capas, y yo solo voy a copiar y batear esto aquí. Sólo voy a aumentar el tamaño de éste porque cuando acercamos dentro de aftert no podremos ver detalles nítidos porque el efecto after se basa en píxeles Así que no vamos a poder ver qué estamos animando en realidad Y antes de comenzar a importar la obra, es importante que nagruparemos muchos de estos grupos porque si hay demasiados grupos, entonces la sobrecarga no funciona muy bien Así que por favor tenlo en cuenta mientras estás animando tus cosas. Bien. Voy a golpear todo esto, y sólo voy a entrar en After Fats y crear una composición de diez 80 por diez 80. Lo llamaremos depresión. Niña. Voy a darle sólo a este botón. Y vamos a ver qué pasa. Bien. Bien, entonces hay un pequeño problema con la capa del zapato, y también hay algunos elementos que tienen algunos problemas. Ahora vamos a arreglarlos, y luego vamos a volver a entrar aquí. Bien, seleccionaremos todo esto, y lo vamos a eliminar. Ahora sigamos adelante y arreglemos el error del zapato. Vamos a volver a hacer ngrop el zapato. Bien, entonces este es el tema que se mostraba ahí. ¿Bien? Entonces vamos a simplemente ngrop hasta que no haya grupo Bien, ahora esto se ve bien. Sí, esto se ve bien. Bien. Vamos a seleccionar todo esto de nuevo y ahora vamos a presionar de nuevo el botón. Bien, como pueden ver nuestra obra de arte está aquí. Vamos a llenarlo. Bien. Es realmente increíble, ¿verdad? Lo que puede hacer la sobrecarga, como puedes ver, es realmente increíble. Bien. Entonces ahora lo que vamos a hacer es antes de sumergirnos en el proceso de animación, necesitamos etiquetar la agrupación de las capas Bien. Ahora, voy a dividir los elementos en algunas partes, y sólo voy a etiquetarlos en colores. Entonces podemos saber dentro de un segundo qué parte es esta capa de la ilustración. ¿Bien? Entonces las nubes están donde voy a ir con ellas con un color marrón, y va a apagarlas, así puedo ver si hay algo que no se seleccionó. Yo sólo voy a hacer esto marrón también. Sólo voy a apagarlo. Bien. Ahora vamos a ir por el llovido va a hacer todo esto de color verde oscuro, solo apago esto. Yo sólo voy a seleccionar estos también. Bien. Entonces quedan algunas gotas de lluvia, pero vamos a hacer primero el color de nuestro personaje Voy a ir por la naranja con esta. Bien, entonces voy a abofetear las gotas de lluvia restantes ahora. Bien. Entonces estás para. Bien, entonces ahora por estos arbustos, voy a ir con un color melocotón. ¿Bien? Entonces voy a solo a de esos, y solo voy a seleccionar estas dos gotas de lluvia, la última, y solo voy a hacerlas de color verde oscuro también. Y ahora, éste, creo que es parte de los cuerpos, sólo voy a hacerla naranja. Bien, y esta capa solo estará bloqueada. Eso es. Ahora lo que vamos a hacer es seguir adelante y descomponer la animación en pedazos. Entonces sólo voy a seleccionar a todos los jugadores naranja. Sólo voy a encender su visibilidad. Ahora vamos a crear la animación de nuestro personaje. Estoy pensando en un bucle de 6 segundos en mis términos. Bien. Entonces depende del tipo de animación que vayas a realizar. Creo que 6 segundos serán perfectos para lo que estoy pensando en animar para esta mujer Bien. Entonces, sigamos adelante y comencemos con el brazo. Bien. Entonces para el brazo, sólo voy a seguir adelante y traer el punto de anclaje por aquí. Bien. Entonces, debido a que el brazo no está dividido en dos capas, es solo una sola capa. Entonces creo que será mejor si movemos el punto de anclaje por aquí. Empecemos a girarlo y ver cómo se ve. Bien. Yo sólo voy a traerlo por aquí. Y vamos solo a cero. Bien. Voy a llegar a cero, creo que se ve bien. Bien. Voy a crear el primer fotograma clave ahora, y seguir adelante y crear el primer fotograma clave aquí porque quiero crear una animación de bucle sin fisuras para esta mujer. Yo sólo voy a seguir adelante y hacerla menos tres, y ahora va a hacer la animación de contador también en sentido contrario serán cuatro. Entonces veamos cómo se ve. Bien entonces la mujer tiene mucha razón. Bien, ahora vamos a seguir adelante y animarle el cuello. Esta es la capa principal del cuello. Yo sólo voy a seguir adelante y hacer esto de aquí mismo. Ahora habrá algunas capas que necesitaremos nombrar en realidad. Sólo voy a hacer que sea un cuello. Yo sólo voy a recordar el número de capa también, es 41. Bien. Entonces vamos a necesitar padre de todo por encima de esta capa, toda la cabeza a esta capa, que cuando giremos el cuello, todo funcione con ella. Vamos a seguir adelante y a ver si tuvimos éxito Bien, pero no tenemos éxito. Hay algunas capas que no están parentadas en este momento . Esta es la capa posterior. Yo solo sigo adelante y padre ese también, y esta capa exterior de pelo también. ¿ Vamos a ser padres de eso? Sólo estoy tratando de verificar. Creo que es bastante genial. Bien, ya estamos bien. Sólo voy a crear un marco clave en el cuello y va a seguir adelante y crear. Tres cuadros, tres grados misión aquí va a hacer menos cuatro por aquí. Porque quiero que la mujer sienta que se está tocando la cabeza en este momento. Oh, mi lo que acaba de pasar, ¿verdad? Y luego sólo tienes que ir en la dirección también. ¿Verdad? Entonces, básicamente, la cabeza se mueve en dirección opuesta al brazo. Eso es exactamente lo que está pasando ahora mismo. Entonces el brazo se mueve en la otra dirección y la cabeza se mueve en sentido contrario, ¿verdad? Bien. Entonces ahora lo que vamos a hacer es ir a que la banda de la otra mujer se quede en el lugar correcto, ¿verdad? Sea quiero decir, obviamente, no podemos mover la banda porque se verá raro, ¿verdad? Bien. Porque no hay demasiado momento en la cabeza. A lo mejor también podemos agregar una ligera animación en los pelos. Entonces sólo voy a llevar el punto de anclaje entre la cara, porque los pelos están conectados a la cabeza. Entonces vamos a crear un marco de tal vez dos grados solo dos es demasiado. Se está rompiendo el laico. Sólo lo voy a hacer un grado, y en la otra dirección, lo voy a hacer menos dos. Bien, entonces veamos cómo se ve. Bien. Entonces se está retrasando un poco Bien. Entonces creo que se ve bastante bien. Sí. No es demasiado. Sí, creo que se ve bien. Bien. Entonces ahora que vamos a hacer es vamos a crear la animación en los ojos, ¿verdad? Porque el personaje está vivo. Entonces, obviamente, el chacor debe estar parpadeando. Así que también vamos a animar estas lindas lágrimas. Entonces voy a hacer ésta también. Yo también voy a salvar a la clase. Este va a ser curso la clase tres va a ser la clase tres. Bien. Entonces, sólo voy a traer este punto de anclaje también aquí. Ahora también puedo usar los elementos secundarios para colorearlos también porque me ayudará a identificar dónde están los rasgos faciales porque hay demasiadas capas naranjas en el personaje. El tiro también es naranja, y los pelos también son anaranjados. Entonces, ¿cómo identifico dónde están los rasgos faciales? Entonces por eso no usé estos colores en el etiquetado de otros colores, porque los estaré usando ahora. Bien. Entonces para este brazo, este es el brazo principal, así que sólo voy a dejarlo en naranja ahora mismo porque actualmente el brazo está animado, así que vamos a simplemente cerrarlo. Y quiero decir, ahora me voy a centrar en los rasgos faciales. Bien. Entonces esta banda también está interrumpiendo nuestro proceso de animación Así que sólo vamos a bloquear las capas que están animadas ahora mismo. Y por ahora solo me voy a centrar en las capas faciales. Bien. Entonces esta es la capa frontal del cabello, así que solo voy a bloquear esta también. Bien, podemos aplicar un poco de animación aquí también. Que a lo mejor los pelos se están extendiendo también un poco. Entonces solo voy a traer el punto de anclaje arriba, y solo voy a agregar animación de escalado. Justo adelante. Entonces este tipo de pequeños detalles en realidad dan el valor a, ya sabes, la animación correcta al siguiente nivel. Y solo por estos pequeños detalles, mis animaciones se han descargado miles de veces. Así que hay que tener en cuenta estos pequeños detalles en realidad. Bien. Entonces veamos cómo se ve. Verás, es muy sutil. Es realmente, muy sutil. Bien. Entonces hagámoslo uno uno. Creo que es un poquito demasiado. Sí. Sí, esto se ve bien, creo. Bien. Sí, parece que los pelos también se mueven con la cabeza de la mujer. Así que vamos a hacer es que vamos a animar las cejas, ¿de acuerdo? Porque la mujer también está preocupada. Así que sólo vamos a hacerlos morados, y yo sólo voy a animar los fotogramas clave de posición Sólo voy a crear dos fotogramas clave. Y a medida que avanza la cabeza, sólo voy a cambiar. Crea el caso de flecha aquí, ¿verdad? Y tenemos que mantenernos en la perspectiva de la cara derecha. Entonces creo que esto se ve bien. ¿Ves? Las cejas vienen en esa dirección descendente. Y ahora sólo voy a poner estos dos y sólo voy a golpear C. Así que estos están de vuelta en donde estaban. Ahora van a ir un poco en dirección superior . Bien. Entonces veamos cómo se ve. Bien, entonces así es como se ve. Ahora, hicimos el tamaño 1,000 pixeles por 1,000 pixeles, sigue siendo vari, ¿verdad? Y lo estamos renderizando en su totalidad. Si lo estuviéramos haciendo al cuarto, oh, Dios mío, ni siquiera podemos animarlo, ¿verdad Por lo que esto es muy importante, vez que se tiene en cuenta. Además, ten en cuenta que cuando el archivo listado esté aquí, si lo escalamos hacia arriba, no afectará el tamaño de nuestro archivo de lote porque el tamaño del archivo de lote básicamente está funcionando sobre la base de la animación vectorial. Por lo que aumentar el escalado o el tamaño de la animación, no hará nada. Otro consejo que puedes hacer es solo digamos que tal vez el cliente proporcionó un tamaño específico para ello, ¿ verdad? Así que no se puede escalar. Entonces lo que puedes hacer es traer el diseño y luego arreglarlo. Y entonces lo que puedes hacer es seleccionar todas estas capas. Vas a seleccionar todas estas capas. Vas a presionar control, A, vas a controlar C. Lo que vas a hacer es crear una nueva comp, y vas a bloquear la relación de aspecto. Ahora lo que vas a hacer es multiplicar este tamaño de comp por cuatro. Ahora lo que vas a hacer es pegar todas estas capas en esta nueva comp. Como puedes ver, estos están todos aquí. Y ahora, lo que vas a hacer es que vas a crear un nuevo objeto nulo. Ahora lo vas a traer aquí en el centro, en el centro del personaje, y ahora seleccionar todas estas capas, y lo vas a hacer es que lo vas a padre, y luego hacer que este nulo 400. Bien. Y entonces solo lo vas a alinear, ¿verdad? Esto lo que puedes hacer es que puedes acercar muy bien C. Esto se ve mucho mejor. Pero obviamente, esto ralentizará el proceso de renderizado cuando esté previsualizando la inicialidad. Se ralentiza mucho. Entonces por eso no vayas demasiado lejos con la resolución porque entonces cuando tu obra esté animada, puedes simplemente dejar todo y luego volver a la misma comp, pegar todo aquí, eliminar esta, pegar todo aquí, pegar todo aquí, y volver a bajar la escala a 100. Bien, así puedes darle esta mente también. Bien, así que continuemos con nuestra animación. Bien, entonces hemos agregado este y ahora necesitamos algo de animación en los ojos también. Bien. Entonces, debido a que la mujer está viva, lo más probable es que también esté parpadeando los ojos Ahora bien, porque el characor está mirando hacia abajo, a la derecha, y los ojos del personaje deben ser como los ojos parpadean en perpendicular Entonces básicamente, no podemos simplemente hacer este paralelo como en los 90 grados. Por lo que hay que tener en cuenta que tenemos que tener en cuenta también la perspectiva de la ilustración. Entonces no sólo voy a colocar el punto de anclaje aquí porque va a quedar mejor aquí porque el caracor está mirando hacia abajo de esta Entonces, vamos a seguir adelante y uno, dos, tres, cuatro, cinco. Y ahora voy a crear de nuevo, este fotograma clave, y va a ir dos fotogramas atrás, y va a hacer que sea uno 80, y 20. Esta es la forma más fácil por cierto de crear una animación de parpadeo Bien. Como puedes ver ahora, así es como se ve. Bien, así que sólo voy a copiar esta animación, y sólo voy a pegarla en este otro ojo. Voy a seleccionar esta , y solo voy a hacer el punto de ancla por aquí también, y solo voy a pegarlo. Y así es como se ve. Bien. Entonces, sin continuar en la animación, seleccioné la capa equivocada. Esta es la correcta. Sin seguir adelante, solo voy a crear aquí la repetición de la animación parpadeante En primer lugar, así que terminamos con la animación parpadeante. Bien. Entonces ahora sobre la animación TS. Vamos a trabajar en eso. Va a seguir adelante y hacer esto todo morado, y vamos a estar haciendo éste. Aquí también. Bien. Entonces como saben, que vamos a estar creando una animación loople, ¿verdad Entonces es mejor pensar también en el final de esta animación, ¿quieres que las lágrimas estén en escena o no? ¿Bien? Entonces creo que no habrá lágrimas al final del primer fotograma clave porque queremos mostrar la sensación de que la persona está llorando y las lágrimas se desvanecen, ¿verdad? Eso es lo que me refiero, en realidad. Entonces solo voy a seguir adelante y crear una animación de escalado. En él y va a hacer que sea cero. Bien, como esta. Sólo voy a crear un marco de posición aquí mismo. Voy a traerlo de vuelta hasta aquí. Bien. Entonces ahora vamos a tener algunos problemas porque primero animamos la escala Entonces animemos la posición. Bien, sólo voy a traerlo de vuelta a aquí. Ahora, sólo para hacerlo vamos a ver cómo se ve. Bien. Entonces esto se ve un poco falso en este momento. Vamos a arreglar eso tal vez. Bien. Entonces como esto viene aquí, esto escala hacia arriba y la posición se detiene. No queremos que la posición se detenga, creo, porque la T debería estar limpiando la cara, y aquí debería haber demasiado movimiento Bien, sólo voy a seguir adelante y hacerlo en mi libreta. Bien. Yo sólo voy a hacer este auto con la animación. Bien vas a estar usando así. Voy a en realidad esto es seleccionar el punto de anclaje, así que solo voy a hacer que vuelva, antes que nada. Bien y luego solo voy a seleccionar este asa y hacerlo así. Bien, veamos cómo se ve esto ahora. Bien. Entonces el personaje está llorando, y creo que vamos a hacer que se desvanezca con la opacidad Antes de que se detenga, ¿verdad? B porque la lágrima está cayendo y se va desvaneciendo a medida que cae Veo outs. Bien. Esto se ve bastante real. Mucho más real. Sí, ¿verdad? Porque hay que tener en cuenta que este es un mundo idealizado, ¿verdad? Así que no todo va a funcionar igual como pensamos o queremos igual como pensamos o queremos o digamos que no vamos a poder animar esto como llora una persona real, y las lágrimas se les caen de la Bien. porque va a ser una silla pequeña, ¿verdad? Así que no podemos enfocarnos demasiado en crear una gota para los ojos. Bien. Entonces, ahora, lo que voy a hacer con esta es, solo estoy pensando que llora y esta se cae de aquí y se desvanece justo Bien. Así que comencemos desde el ojo. Bien. Vamos a animar este de aquí y lo voy a mantener como referencia Traeremos a colación las famas clave en la otra capa. Bien. Entonces lo que voy a hacer ahora es copiar los fotogramas clave de escala. Yo sólo voy a pegarlas aquí. Y solo vamos a desplazar esto un poco. Yo solo voy a agregar los fotogramas clave pastosos también, y colocarlos, y también estaremos raspando la animación de posición por aquí P para el puesto. Yendo a retroceder en el tiempo y pretar un fotograma clave, adelante y bajarlo abajo abajo abajo abajo. Muy abajo, veamos cómo se ve. Bien. Bien. Entonces la animación de escalado ocurre mucho después. Entonces queremos que esto suceda antes. Bien. Bien, esto empieza a desvanecerse demasiado tarde, creo, porque me parece falso Esto parece más de Esto es enfatizar más la emoción, creo. Sí. Además, la posición es bastante lenta. Sólo vamos a aliviarlo un poco y vamos a ir en una gráfica de lanza La altura es igual a la velocidad, por cierto, si no estás familiarizado cómo animar la velocidad Entonces vamos a empezar con alta velocidad. Bien. Entonces este es Tom, creo. Sí, sólo vamos a hacer esto. Bien. Entonces la tercera gota. Ahora, hagamos eso muy rápido. Bien. Bien, entonces se crea la animación , pero hay un problema. Creo que se verá mejor si sucede después de un abrir y cerrar de ojos Bien. Así que sólo voy a hacer estas capas. Avanza aquí. Y cuando la animación se corta o digamos después de la última grasa por las capas. Estoy usando el turno de control D para cortar las capas. Bien. Entonces así es como se. Bien. Empecemos. Bien. Entonces la mujer está preocupada, ¿ verdad? Está súper deprimida. Bien. Entonces ahora lo que vamos a hacer es simplemente copiar y pegar la capa también. Lo vamos a hacer es que vamos a controlar D, los vamos a hacer aquí, los vamos a poner aquí. Bien. Así que solo podemos abrir estas capas y ver si la animación está terminada o no. Bien. Por lo que este no se completa el como caída. Bien, así que voy a hacer esto un poco, a ver cómo se ve esto. Bien. Entonces mientras la grieta parpadea, la animación comienza a caer Bien. Sí. Entonces, esto se ve bien. Bien. Sí. Y esta otra, bien. Este debería comenzar por aquí, creo. Bien. Entonces puedes agregar un poco de variedad en la animación porque quiero decir, la que estaba aquí al mismo tiempo, así que no es realmente importante que también sean iguales en la otra. Así que definitivamente también puedes retocar esto como quieras. Bien, porque no hay ciertas reglas al respecto, solo tienes que ser experimental con tus pensamientos y tu proceso. Bien. Entonces este no es un bucle perfecto. Por cierto, vamos a arreglar ese láser, ¿de acuerdo? Acabaremos de darle a cron al final, y estaremos recreando todos los primeros fotogramas clave hasta los finales Así que ahora solo estamos pensando de manera inteligente. Bien. Entonces, ¿vamos a seguir adelante y animar la boca también ahora? Porque la boca debe estar moviéndose un poco también. Así que adelante y crea un marco clave. En la posición, sólo vamos a traer bajar un poco la cara. Y lo que estoy pensando es que el personaje podría no levantar mucho la boca. Entonces tal vez solo apenas apenas vuelve a la posición anterior. Bien. Entonces tal vez así, ya veo. Bien. Entonces creo que el momento es demasiado, así que sólo voy a hacerlo menos. Estas me van a ir en un poquito, y solo voy a hacerlo menos. Bien, entonces este es el punto central, creo. Sí, este es nuestro punto de partida. Entonces se mueve mucho, así que sólo voy a traerlo de vuelta por aquí. Sí. Mira cómo se ve. Bien. Eso se ve bien. Eso se ve bien. Sí. Eso se ve mucho mejor. Bien, ahora vamos a animar los sostenes. Bien. Y vas a crear marcos de tumbas de posición en el s también. Va a crear uno, uno, dos, y va a traerlos por aquí. Bien, y solo los levantaremos. Voy a estos, y voy a sacarlos a colación. Bien. Sí, por aquí. Creo que esta roja. Bien. Así que vamos a verlo. Bien. Esto está bastante rezagado ahora Entonces lo demuevo. Bien. Sí. Creo que esto se ve perfecto. Y también coincide con la animación de cejas superiores también. Entonces sí, creo que esto se ve bien. Bien. Entonces lo vas a hacer es que vamos a animar un poco este brazo también Derecha. Entonces lo que estoy pensando es que, antes que nada, si separamos el brazo de la parte superior del brazo, como pueden ver, no hay superposición entre el brazo, ¿verdad? Entonces vamos a tener un poco de problema aquí. Lo que podemos hacer ahora es que lo vamos a traer aquí y vamos a experimentarlo. Verás, si giro el brazo, estamos teniendo algunos problemas. Solo vamos a presionar el control Z y va a hacer clic por aquí, y veamos qué capa está arriba. Bien, entonces esta capa, la parte superior del brazo está por debajo del brazo bajo real. Ese no debería ser el caso, ¿verdad? Entonces deberíamos traer este abajo, y ahora solo voy a seguir adelante en el camino, y solo voy a hacer el camino vaya por debajo de la parte superior del brazo. De esa manera también tendremos algo de superposición, y también podremos crear animación. Yo solo voy a ajustar un poco el camino también para que podamos trabajar con algunos con los que tenemos algo de espacio para trabajar. Bien. Así que sólo voy a seguir adelante y crear una rotación yt ahora va a poner el punto de anclaje correcto, va a golpear rotación ahora. Y como pueden ver, podemos animarlo bastante ahora. Bien. Ahora, sólo voy a crear un marco de rotación. Yo sólo voy a seguir adelante y crear Sí, cierto, ¿verdad? Bien. Entonces como pueden ver, esta de aquí mismo, dónde está esta capa. Esto es justo aquí. Ahora vamos a tener que volver a cero y emparejar a esta capa. Para que se mueva con el brazo. Bien. Entonces creo que esto es demasiado porque como puedes ver por aquí, se ve algo así, bien, porque en este punto, el brazo está encima de las piernas, ¿verdad? Entonces se ve natural. Al igual que hay una sensación de que la mano está detrás de los pantalones, ¿verdad? Pero ahora cuando esto sucede, no se ve de esa manera. Entonces vamos a tener que cubrir eso también. Vamos a adentrarnos en los caminos, y yo sólo voy a seguir adelante y encontrar este camino muy rápido. Sólo vamos a encontrar esta. Bien. ¿Dónde está este ? Vamos a averiguarlo. Bien. Aquí está esta. Bien. Sólo voy a darle y crear un fotograma clave Voy a subir aquí y voy a seleccionar éste. Sólo voy a traerlo de vuelta por aquí y por aquí desde aquí. Así que sí. Creo que esto debería quedar bien. Vamos a ver. Se ve bastante bien, ¿verdad? Bien, hay un ligero problema de abravation de píxeles, creo. Así que solo tendremos que agregar esto un poco por aquí. Parece que la mano está ahí atrás y se está moviendo. Ver, ten en cuenta que este pequeño detalle g una gran diferencia. Bien Bien. Ahora, lo que vamos a hacer es que vamos a seguir adelante y animar en la dirección wverse En primer lugar, tenemos que volver a la parte superior de la capa, p, y vamos a crear dos fotogramas clave aquí Bien. Entonces fue más dos, vamos a ir por un menos tres tal vez. Entonces ahora las manos tienen que salir de ahí. Así que sólo tendremos que copiar el primer fotograma clave. Pasándolo por aquí, voy a arrastrar éste por aquí, y esto por aquí. Bien. Así que vamos a jugar a éste también. ¿Ves? Se ve sin costuras, ¿verdad? Se ve absolutamente perfecto. Ahora no hay problema con eso. Bien, esto se ve bien. Y lo que vamos a hacer es. La mayor parte de nuestra animación de crack está hecha. Lo que podemos hacer para enfatizar aún más la animación es que también vamos a animar esto Podría causar algún problema, pero vamos a experimentar con él también. Esta capa es la parte inferior del brazo, y esta es la parte inferior derecha. Entonces, cuando estás amañando, solo tienes que nombrar las capas en esta acción. R significa derecha. Vamos a agregar el bajo slash, y ahora vamos a llamarlo brazo inferior Entonces esto es r significa bajo. Ahora vas a presentársela a la que creo. Sí, esta es la m y ahora vamos a llamarla parte superior del brazo. Entonces ahora vamos a seguir adelante y animarlo sólo un poquito. Bien. Bien Puedes experimentar con esto también. Será mejor ir con la misma dirección, pero también puedes ir en la dirección contraria intuitiva. Como pueden ver, cometí un error. No agregué el marco clave. Entonces agreguemos el fotograma clave. Regresa. Va a agregar uno solo. Como puedes ver, rompió la otra animación. Entonces hubiera sido mejor si creamos esto en primer lugar, pero hagámoslo por ahora, y vamos a arreglarlo también. Yo sólo voy a hacer menos dos por aquí. Y ahora podemos simplemente arreglar la animación de path también aquí. Voy a golpear camino hacer el camino, mover hacia atrás. Bien. Bien. Ahora bien, esto parece más razonable, creo. Ahora vamos a hacer que esto se presente aún más. Hay alguna línea blanca. Nosotros solo arreglamos eso también. Veamos cómo se ve ahora. Bien, el brazo se ve perfecto. Entonces sí, esto se ve perfecto. Creo que esta animación se ve bastante enorme en este punto. Yo solo voy a seguir adelante y animar menos al inferior, y arreglar el camino también Bien, entonces estamos perfectos ahora. Todo bien. Ahora, lo que vamos a hacer es que vamos a revisar la animación hasta este momento. ¿Esto se ve genial o no? Bien. Bien, esto se ve perfecto. Vamos a seguir adelante e ir a los seis segundos, y ahora voy a desbloquear todas las capas bloqueadas. Y ahora vamos a estar comprobando si dejamos alguna capa o no. No, no lo hicimos. Bien. Entonces lo que vamos a hacer ahora es que vamos a seleccionar todas estas capas. Para que el bucle funcione perfectamente. Lo que vamos a hacer ahora es que vamos a seleccionar todas estas capas anaranjadas y moradas porque las purper también son laicos de carácter Téngalo en mente también. Ahora, lo que vamos a hacer es golpear en nuestro teclado, y ahora vamos a pasar por todas nuestras capas. Como sabes que las capas moradas son estas están en bucle, ¿verdad Entonces solo necesitamos enfocarnos en los primeros fotogramas clave de todo. Bien. Entonces lo que vamos a hacer ahora es, bien, entonces no hay ninguna capa debajo. Vamos a llegar a la última, y ahora vamos a seleccionar ésta e ir en la dirección superior. Bien. Todos estos son seleccionados. Ahora vamos a golpear clon. Y eso es todo. Eso es. Vamos a revisar. Ves, se ve perfecto, ¿verdad? Se ve perfecto. Bien. Entonces vas a hacer ahora es que vamos a seleccionar todas estas capas. Bien, espera. Lo que podemos hacer es seguir adelante y bloquear estas capas. Bien. Vamos a cerrar a estos. Ahora, todas estas capas necesitan flexibilización aplicada. ¿Bien? Así que vas a hacer ahora vamos a seleccionar todos estos y F nueve en nuestro teclado. Ahora, si necesitas alguna flexibilización realmente personalizada, entonces obviamente puedes seguir adelante y aplicar la flexibilización dentro de aquí también Pero realmente no lo recomiendo porque si lo estás subiendo un perfil porque creo que más flexibilización funciona bastante bien, en mi opinión, pero obviamente puedes seguir adelante y aplicar más flexibilización y agregar la obra de arte flexibilizando como quieras Bien, entonces esto es lo que hemos establecido hasta ahora. Bien, así que sigamos adelante y ahora animemos el resto de las cosas. Bien. Vamos a hacer. Ahora lo que vamos a hacer es que vamos a tímidos a estas capas. Vamos a apagar los morados. Estos también. Y ahora, lo que voy a hacer es bloquear estos. Voy a seleccionar los morados, y también voy a bloquear estos también. Bien. Entonces ahora lo que vamos a hacer es que nos deshagamos de la animación correcta, ¿ verdad? Nunca lo habías visto. Perfecto. Entonces ahora lo que vamos a hacer es que vamos a trabajar en los clavos Bien, entonces lo que estoy pensando sobre la animación en la nube es que solo voy a primero antes de animar eso Sólo voy a seleccionar estos dos, y voy a golpear Merge. Lo que esto hará es hacer estas una capa, y no te preocupes. Esto seguirá siendo compatible con ty. Yo lo he probado, para que no tengas que preocuparte por ello. Bien. Entonces lo que vas a hacer es trabajar en las nubes. En primer lugar, sólo voy a seleccionarlos a todos y sólo voy a traerlos por aquí. Entonces todas las nubes están aquí ahora. En el orden de las capas, presione P en nuestro teclado, presione el fotograma clave de posición Y para trabajar en un ritmo, la animación es unir en todo. Entonces te recomiendo que te apegues a mismas marcas de tiempo en tu animación para todos los elementos, porque de esa manera, parece que todo está funcionando sincronizado entre sí. A menos que tu elemento esté haciendo algo muy diferente al resto de la escena. Entonces lo que vas a hacer ahora es Las garras se van a mover un poco aquí y en sentido contrario, luego un poquito En cuanto a éste, creo que éste desaparecerá y se desvanecerá. Este fotograma clave va a ir aquí, y esto simplemente se desvanecerá, creo Simplemente agregaremos los plásticos más adelante. ¿Qué vamos a hacer por este T uno chocará en éste y éste chocará en éste y éste va a venir por aquí y éste va venir aquí también, éste va a venir aquí un poco más, éste va a venir aquí un poco más, y luego el se moverá en otra dirección Así que sí, vamos a hacer eso ahora Bien. Entonces este va a ir por aquí. Este también se moverá, aquí mismo. Bien, entonces éste también se moverá. Y éste se moverá en esta dirección porque también puedes ser un poco más aleatorio con elementos porque como sabes, el clima es perturbador Por lo que no es necesario que la nube se mueva en un lineal o en un patrón, todos ellos. Por lo que puedes hacer una variedad de cambios en este tipo de animaciones. Bien. Entonces lo que vas a hacer es dejar todo esto ahora y va a golpear clon. Bien. Y yo sólo voy a seguir adelante y pegarle flexibilizando Bien. Veamos cómo se ve esto. Bien. Bien, ahora esto se mueve aquí. Bien. Quiero ver las partes en movimiento en cada una de ellas. Yo sólo voy a pisar a todos ellos. Bien, entonces este movimiento en esta dirección. Y luego en esta dirección. Bien, entonces éste se mueve mucho, creo. Va a hacer que se mueva así que creo que esto no parece real, en realidad. Entonces esto se moverá. Y estos son rezagados un poco y luego vienen. Sí. Esto está perfectamente bien. Ahora bien, este, ¿qué hace este? Bien. ¿Éste no está animando? Creo que porque el fotograma clave fue clonado en realidad. Yo sólo voy a seguir adelante y crear el fotograma clave de plástico por aquí Este se desvanecerá en un segundo, creo. Esto no estará en la pantalla y aparecerá. Así que sólo apareceré así. Éste va a aparecer, y luego simplemente simplemente nos desvanecemos al quinto segundo y nos desvanecemos. Y yo sólo voy a cambiar clic por aquí, y como pueden ver. Bien. Bien, entonces hay un pequeño problema. ¿Qué es eso? Ahora, ¿la nube parece detenerse por la flexibilización? Entonces no creo que esta flexibilización funcione realmente en esta nube. Así que sólo voy a hacerlo lineal. Bien. Creo que esto va a funcionar más mejor para esta multitud. Hay que tener en cuenta estos detalles. Algunos de ustedes podrían estar pensando que soy un maníaco. Estoy poniendo demasiados detalles en cada elemento. Sí, lo hago, y por eso creo que mis animaciones realmente se ven bien. No un flex, creo. Yo sí creo que es cierto hasta cierto punto. Entonces sí, esta es la razón. Creo que los pequeños detalles sí importan, en realidad. Así que vamos a seguir adelante y nuestros paños están hechos. Entonces, sigamos adelante y apaguemos estos también. Podríamos necesitar esto en realidad, porque vamos a animar la lluvia sobre la base de esto, así que solo voy a cerrar esto ahora mismo Ahora vamos a animar la lluvia. Bien. Entonces, ¿qué vamos a hacer con la lluvia? Bien, entonces esta 5. 04.Animación para clientes y animación de textos: Hola a todos. Bienvenidos de nuevo al curso. Bien. Entonces en esta clase, voy a compartir un ejemplo de una obra que creé para su cliente. ¿Bien? Entonces, en este ejemplo, debes haber visto que ha habido muchas cosas de IA en el mundo, cierto, y la gente necesita animaciones para sus modelos de IA, bien, en las que quieren transmitir a los clientes que lo que su modelo de IA puede hacer realmente. Bien. Así que ha habido múltiples solicitudes, y he completado múltiples pedidos relacionados con estas cosas y múltiples proyectos relacionados con estas cosas particularmente. Entonces solo quería agregar esto en el curso también. Y también les muestro algunos ejemplos de cómo podemos usar lotificantes en estos asuntos Esta forma roja básicamente está aquí solo para cubrir el registro del cliente porque también quiero respetar su privacidad. Bien. Entonces, ¿qué sucede realmente? Vamos Esta es nuestra comp principal. Bien. Así que sólo voy a entrar en el chat PC comp. Como puedes ver, esto también se llama como Chat PC significa que es una precomp Y dentro de esta precomp, hay múltiples capas Vamos a revisar nuestro archivo ahora mismo. Bien. Entonces, antes que nada, lo que sí pasa aquí es que aparezca esta burbuja de chat. Bien, así que sigamos adelante y verifiquemos eso. Eso es bastante sencillo como viste en la clase anterior, tenemos escena compleja animada. Entonces esto no es realmente una cosa enorme. Como pueden ver, esto es solo animación a escala, y acabo de secuenciar las capas usando este plug in hair motion rules, okay. Entonces es básicamente confuso que el tablero de chat esté pensando o escribiendo Y se crea la misma animación tanto para el usuario como para el tablero de chat. Bien. Entonces, cuando estás creando este tipo de animaciones, tienes que tener en cuenta algunas cosas. En primer lugar, siempre hay una sensación que tenga eso en cuenta que Todas las cosas de IA que están pasando o dando vueltas. Hay una cosa común entre eso, que es que la IA te va a ahorrar tiempo. ¿Bien? Entonces la animación no debería ser realmente muy larga, o no debería tomar mucho tiempo, ya sabes, mostrar las habilidades de lo que la IA puede hacer, en realidad. Entonces es por eso que podrías pensar que la animación se está animando demasiado rápido, pero esta animación se aplicará en un sitio web Entonces esto se va a cargar una y otra y otra vez. Y si alguien está realmente interesado en leer todo el texto, entonces simplemente puede volver a verlo porque la animación se recargará y comenzará a reproducirse de nuevo en el Entonces, así que solo queremos que esto se vea atractivo cuando estamos creando este tipo de animaciones. El propósito en solitario no es animar cada letra una por una Entonces no queremos que la animación sea muy larga y letra por letra porque El usuario podría interesarse menos en ver toda la animación y podría desplazarse hacia abajo en la página del sitio web. ¿Bien? Entonces, digamos, como pueden ver, esta es la animación de burbujas. Y acabo de agregar marcos de opacidad en él. Comienza con la opacidad y se desvanece, y solo aparece una burbuja de texto Bien. Solo sigamos adelante y verifiquemos eso. Bien. Así que aquí hay una animación de escalado. Y encima de eso, lo que sucede después de eso es que hay un poco de rebasamiento en la burbuja Y después de eso, lo que realmente sucede es que la persona está pidiendo a AI que me gustaría remodelar mi casa, bien. Entonces como puedes ver eso es solo esta capa por ahora. Como puedes ver, esta es una capa de texto. Y ahora vamos a ver que lo que realmente hay dentro de la capa, lo que en realidad está animado. Como puedes ver, solo se anima la opacidad, y hay una máscara en la capa Ahora podemos hacer muchas otras cosas con el enmascaramiento también, lo cual estaremos cubriendo en el curso más avanzado, que llegará pronto ojalá, y cubriremos muchas técnicas complejas que podemos hacer para lograr múltiples resultados con máscaras dentro del técnicas complejas que podemos hacer para lograr múltiples resultados con máscaras dentro animisón artístico porque las máscaras están soportadas por archivos artísticos Entonces realmente aprenderemos a usar estos con mucho más detalle. Bien. Entonces ahora vamos a apagar la máscara y ver. Y si no hubiera máscara. Bien. Entonces deshabilité la máscara, y como pueden ver, tampoco hay nada. Y también está esta capa inferior, que también contiene una máscara. Ahora bien, por qué he aplicado la máscara a estas capas es que lo descubrirás muy pronto. Como puedes ver en el siguiente mensaje, existe esta capa de texto. La primera línea está enmascarada. Y ahí está esta segunda línea, que también está enmascarada. Y luego está esta tercera también. Entonces, ¿por qué no elegí ninguna otra técnica en lugar de usar máscara es porque también estaremos aprendiendo los detalles de cómo exportar estas animaciones, usando el body move y plug in, que instalé en la clase anterior. Bien. Entonces, lo que vamos a estar haciendo es que estas técnicas de enmascaramiento nos van a ahorrar mucho tiempo si el cliente solicita muchos cambios. Entonces, ¿a qué te refieres con eso es que digamos que el cliente solicita cambiar el texto ¿Bien? Entonces, lo que vamos a hacer es que todas estas capas en realidad son la misma capa, ¿de acuerdo? Así que vamos a desactivar la máscara en vamos a dar la vuelta a estos dos y desactivar la máscara en esta. Como pueden ver, todo el texto está dentro de éste. Entonces en vez de, digamos que el cliente solicita que quiera cambiar el texto. Simplemente podemos editar todo el texto en una capa, y luego podemos simplemente duplicar esa capa, y luego no tenemos que mover la capa porque como sabrás, todas las empresas tienen algunas restricciones y algunas reglas para sus fuentes y sus tipos de letra, y el espaciado también entre las líneas Así que tenemos que tener todo en mente a la hora de eso. Entonces es mejor simplemente mantener el estándar de lo que te dice el cliente, y luego solo puedes editarlo y luego aplicar máscaras a cada capa y dividirlas en las líneas. Creo que este enfoque funciona muy bien, y esto nos ahorra mucho tiempo a la hora de flujo de trabajo y también a la edición del texto. Ser u otras cosas que puedas hacer, digamos que quieres aprender la alternativa a ello. La alternativa puede ser que dupliques esta capa. Vamos a venderlo por ahora. Deshabilitaremos esto lo venderemos por ahora, y solo quitemos la máscara. Bien. Ahora, digamos que queremos crear capas de forma a partir de esta. Bien. Ahora, vamos a esperar, a ver, ahora se crea el texto. Ahora hay un problema con éste. El problema con este es que antes que nada, realmente no podemos editar el texto ahora. Y también, si tenemos que eliminar las dos capas superiores, vamos a tener mucho tiempo difícil. Y a lo mejor se pueda decir eso, no queremos editar eso. Lo que queremos hacer es que queremos que volvamos a sol. Sólo queremos mantener la palabra considerando. Bien. Si eliminamos las dos líneas superiores, lo que básicamente va a pasar es que el texto va a cambiar su posición. Entonces podríamos luchar mucho con esto. Solo tendremos que arrastrarlo por debajo de las otras dos capas en la posición adecuada sin cometer ningún error de píxel, y esto puede desperdiciar mucho tiempo. Bien. Entonces no aprecio este enfoque, y creo que este enfoque, el enmascaramiento funciona mucho mejor en este tipo de proyectos de animación de conversaciones de texto. Bien. Y porque el proceso de la región se vuelve mucho más fácil. Bien. Y claro, van a haber momentos en los que habrá momentos en que el cliente cambie el guión o haya cambios debido a alguna otra cosa o tal vez escribiste algo mal. Bien. Por lo que es importante tenerlo en cuenta. Y también, hay otra cosa a tener en cuenta, que discutiremos en otra clase en la próxima clase. Bien. Entonces ahora, esta burbuja también se anima a sí misma, Bien. Y luego este texto viene del usuario, y luego la IA lo reconoce y lo piensa un poco. Y entonces esto es lo que le sugiere al cliente, y luego la persona escribe todo y luego esto aparece. Bien. Entonces así es como va la conversación entre la IA y la persona. Bien. Entonces ahora hemos establecido la animación. Entonces, por ejemplo, en este tipo de edición de texto, puedes frustrarte mucho más si eliges el otro enfoque del que te hablé. Pero ahora porque uso la misma capa de texto, solo tenemos que desplazar la capa Eso es todo y solo crea máscaras. Eso es. Y si el cliente solicita cambiar solo digamos el texto, lo que solo tenemos que hacer es que solo tenemos que seguir adelante y hacer algunos ajustes en los bordes de la máscara. Eso es. O simplemente podemos seguir adelante y eliminarlo y dibujar uno nuevo en un minuto. Sólo tenemos que crear éste. Vaya a la herramienta pluma y comience a crear una nueva y solo agregue algunos puntos y haga los ajustes según los necesitemos. Entonces entiende mi punto, ¿verdad? Bien. Entonces ahora solo digamos que hemos animado toda esta animación. Ahora, una vez finalizada la animación, ahora lo que vamos a hacer es que se muestre para el usuario que alguien está usando esta animación en un móvil. Entonces vamos a necesitar un teléfono móvil para este derecho. Vamos a usar un marcador de posición para que todo este texto vaya dentro del teléfono móvil Entonces vamos a volver a nuestra comp principal, y voy a mostrarte cómo creé esto. Bien. Entonces ahora lo que hemos creado aquí este es un teléfono que obtuve de FP creo. Y ahora lo que podemos hacer es o tal vez creo que el cliente me envió el archivo. Entonces esto era básicamente un archivo EPS. Este es el archivo, que cliente me envió. Yo solo seleccioné todas esas capas y solo las llevé a sobrecargar y solo las conseguí aquí en after effects. Y después de eso, acabo de pre Cate y lo coloqué por aquí y solo habilito el botón estrella por aquí. Bien. Entonces, que se conoce como transformación del colapso. Bien. Así rasterizar o vectorizar continuamente. Bien. Entonces Ahora, lo que hemos hecho aquí es que aquí estaba el logo del cliente. Nosotros colocamos el logo porque, por supuesto, ellos quieren mostrar su branding. Ahora sólo vamos a seguir adelante y bloquear el teléfono. Y ahora aquí está nuestra animación. Vamos a seguir adelante y quitarnos la máscara para ver cómo se ve la conversación por aquí. Bien, porque queremos mostrar toda la animación dentro de un teléfono, hay un poco de problema. Como pueden ver, la animación es bastante larga, en realidad, ¿verdad? Y como sabrás, si ustedes han usado las redes sociales y otras cosas. Hay un panel U i por aquí en el Vamos a traer primero la máscara. Bien. Ahora les voy a explicar por qué no he mostrado los últimos mensajes por aquí abajo porque como saben, el usuario siempre escribe algo en esta zona, como nosotros los chicos usamos whatsapp ustedes saben que esta es como nosotros los chicos usamos whatsapp ustedes saben que esta es la zona donde tecleamos todo, ¿verdad? Ahora bien, se podría decir que la animación debería haber funcionado de esta manera, que ahí estaba la tasa de texto se estaba escribiendo aquí mismo y luego subiendo arriba en el chat, ¿verdad? Pero eso no es lo que quería el cliente. El cliente quería que mostrara la conversación entre la IA y la persona de esta manera. Bien. Entonces por eso fuimos con este enfoque. Bien. Y además, aún no tenían diseño de interfaz de usuario de su aplicación. Así que en realidad no pudieron establecer eso. Bien. Así que ahora lo que he hecho es que la animación está aquí, ¿de acuerdo? Y ahora lo que queremos mostrar es que también hay algún espacio negativo en la parte superior algún espacio negativo en la parte superior porque ahí está el branding, y obviamente ahora el chat empieza desde aquí. Ahora bien, esto es algo interesante que lo que he hecho por aquí es que esta precomp de chat en realidad quiero crear un efecto de desplazamiento, básicamente, Y hay dos formas de crear eso. Una de ellas es que podemos crear la animación de desplazamiento por dentro aquí Bien, y luego podemos simplemente padre de todo a un nulo y luego posicionar el marco clave del objeto nulo. ¿Bien? Entonces todo se mueve con el nulo en la dirección pro. Nosotros también podemos hacer eso. Pero habrá problema mientras con eso cuando editemos el texto porque tal vez el siguiente párrafo va a ser un poco más largo, y uno de ellos va a ser un poco más corto, y la brecha entre los mensajes podría llegar a ser disruptiva Es posible que la brecha entre los mensajes no quede igual como puedes ver que es ahora mismo. Bien, así podemos correr entre problemas debido a eso. Por eso elegí este enfoque de crear una precomp porque la animación de texto debería ser perfecta en sí misma Bien. Y entonces el resto de la animación que queremos combinarla su interior debería crearse en un apego más expandido. Yo creo. Entonces básicamente, si algo se descompone en la animación, la animación de texto no se verá afectada por ella porque está dentro de esta capa. Está dentro de esta precomp. Entonces si cometemos algunos errores o los ajustes están equivocados, se aplicará sólo a la precomp No va a arruinar todo nuestro proyecto. Entonces primero, acabamos de perfeccionar la animación en el chat, y luego acabo de pre Commed Ahora lo que he hecho por aquí es que creé una máscara en la que quería asegurarme de qué área se va a usar para nuestro chat, que es esta área que puedes ver. Vamos a cambiar el color de nuestra máscara para que ustedes puedan ver con claridad. Bien, vamos a hacer que sea de color lima. Bien. Bien, entonces no hay contraste en el fondo, así que vamos a usar un más oscuro. Bien, usaremos un negro. Bien. Creo que esto se ve más visible. Bien. Entonces como pueden ver esta área de trabajo en esta vamos a estar animando cosas. Y debido a que nuestra animación va a ser una animación vectorial, realmente no tenemos que preocuparnos por el enmascaramiento o mantenerlo sostén vector porque las capas su interior son todas ellas vectoriales. Entonces esto no causará ningún tipo de problemas en realidad. Bien. Para que puedas quitar la estrella de la capa. No va a hacer ningún problema. He probado las animaciones en las plataformas. Funcionan perfectamente bien. Bien. Entonces hay una máscara. Bien. Ahora lo que estoy tratando de mostrar es que los mensajes van en la dirección superior porque hay nuevos datos que queremos mostrar dentro del chat, ¿verdad? En palabras simples, así es como funciona whatsapp, ¿verdad? Los mensajes más antiguos se mueven hacia arriba y los nuevos mensajes están abajo. Bien. Por lo que ahora el Camino se anima de este punto a este punto Ahora lo que realmente está sucediendo, vamos a seguir adelante y ver. Bien. Entonces como puedes ver, la máscara viene de arriba a abajo. Y también hay una animación de posición, que está compensando la animación de la máscara en la dirección apropiada ¿Y cómo está funcionando eso? Solo eliminemos la cición de posición para que puedas hacerte una mejor idea ¿Ves lo que pasó ahí? Se entiende la idea. Lo que estamos tratando de mostrar aquí es que queremos mover el chat en la dirección superior. Pero a medida que muevo la masa hacia abajo, parece que toda la charla baja en la pantalla. Eso no es lo que queremos mostrar. Queremos mantener el primer mensaje en la parte superior de la pantalla. Y hay un poco de diferencia si ustedes notan que el primer mensaje viene por aquí. Vamos a dibujar una guía. Pero después, el mensaje está por aquí. Entonces, ¿por qué no coincide este espacio? La razón detrás de éste es que aquí está este mensaje púrpura. Ahora, podría simplemente ponerlo el mensaje morado a la mitad cortarlo por aquí, pero eso no se veía muy bien. Así que simplemente seguimos adelante con la idea de que queremos asegurarnos que la conversación se vea punto a punto, ¿verdad? Porque es una historia que estamos tratando de contar. Así que simplemente no quería que se retratara un mensaje medio cortado se retratara entre la historia porque la gente ya ha leído este, ¿de acuerdo Y en el caso de que algunas personas no lo hayan leído, ahí está esto. En primer lugar, no es posible que no lo hayan leído porque este mensaje permanece en la pantalla por unos segundos. Bien. Y entonces éste se desplaza hacia arriba. Entonces tomé esta decisión solo para que el diseño se vea más limpio. Eso es. Bien. Y a medida que la máscara se mueve hacia abajo, hay una animación de posición que lleva toda la animación en la dirección superior, ¿de acuerdo? Al igual que vamos a quitar la llave de la máscara, veamos qué pasa. ¿Ves lo que está pasando? Bien. Entonces básicamente el chat se mueve en la dirección superior. Eso es. Eso es todo lo que pasa. Ahora bien, esto se ve bastante raro porque hemos cruzado nuestro marcador desde aquí y ahí está el logo del cliente. Entonces por eso creé estos cuatro fotogramas clave en que una animación está abordando a la otra en dirección opuesta, y es simplemente básicamente hacer que parezca que estamos garabatando Pero eso no es en realidad lo que está pasando. Pero recuerda siempre que Siempre se trata de lo que la persona quiere ver. No se trata de cómo está funcionando. Se trata de la ilusión que estamos creando. Queremos transmitir el mensaje de que esta conversación se está animando en la dirección descendente. ¿Bien? No importa cómo lo logramos. ¿Bien? Sólo el resultado debe ser suave. Eso es. Y la conversación continúa y esta también se anima, y nuestra animación se completa, y permanece en la pantalla alrededor de un segundo, y luego vuelve a comenzar de nuevo Eso es. Bien. Entonces así es como ustedes pueden crear este tipo de animaciones. Y te voy a mostrar en la siguiente clase cómo vamos a exportar este tipo de escenas en realidad y cuáles son ajustes optimizados y los ajustes ideales para lograr los mejores resultados de tus archivos de lote usando movimientos de cuerpo en realidad. Y porque ofrece muchas características más avanzadas que los lotifiles enchufables en sí mismo en realidad Entonces los cubriremos en la clase posterior. Muchas gracias. Veré en la siguiente clase. Bien. 6. 05.Animaciones complejas y gestión del flujo de trabajo: Bien, entonces volvemos otra vez. Y ahora vamos a ver otro ejemplo y otro estudio de caso de un proyecto realmente complejo también. Creé estas animaciones para un sitio web llamado Quander en realidad, y solicitaron algo bastante asombroso Y voy a compartir este caso de estudio con ustedes. Vamos a mostrarte lo que en realidad creé para esta compañía. Bien. Entonces solo voy a seguir adelante y tocar la animación, antes que nada. Bien. Bien. Entonces, como puedes ver, básicamente están mostrando y explicando todo el concepto de su producto, bien, de una manera realmente creativa. Y creo que este proyecto fue uno de mis mejores proyectos, y realmente es algo que quiero compartir con ustedes y explicarles cómo logré este tipo de resultados. Y antes de seguir adelante, sólo voy a mostrarles algo que es realmente importante que creé este proyecto hace bastante tiempo. Y lo que te voy a mostrar es que solía traer también los marcos de estilo de un astrador que me envió el cliente y luego solo me tocó recrear todo capa por capa, dentro después de los efectos usando este paso Pero es mucho mejor, ya sabes, simplemente abrir los archivos dentro de liraor y luego simplemente crear la animación usando esta sobrecarga porque entonces no tendrás que pasar por ese proceso, y te ahorrará mucho tiempo Bien, entonces comencemos con lo que realmente me envió el cliente. Entonces el cliente básicamente me acaba de enviar estos marcos de estilo, ¿de acuerdo? Sólo voy a abrirlas todas y compartirlas con ustedes. Bien. Entonces comencemos con el primero. Bien, entonces este es el primero, el centro animado este centro animado imatet esto en esto en esto en esto en esto en esto en esto en esto en esto en esto Y como se puede ver que no hay cambio de texto. En realidad, los archivos tenían algunos problemas y el cliente me pidió algunos cambios, y acabo de recibir el nombre que se encontró de ellos, y luego solo hice los cambios como me pidieron. Entonces, básicamente, estos marcos de estilo tenían algunos errores, en realidad. Así que sí. Como pueden ver, aquí no hay textos, pero los hay en mis animaciones. Entonces esto es básicamente lo que el cliente me compartió. Y ahora lo que hice aquí es que el proceso de animación no era realmente algo en lo que el cliente estuviera pensando. No tenían una dirección particular de lo que querían hacerme hacer con el proceso de animación. Solo necesitaban una animación suave. Estoy transmitiendo su historia del punto A al punto B en este caso, que es a través de estos derechos. Bien. Entonces se me ocurrió este woo. De hecho, estoy visitando este archivo después de bastante tiempo. Entonces como veis, whoo. Es un hombre realmente increíble. Estoy asombrado por mi propio trabajo, para ser honesto porque estoy abriendo mi expediente después de mucho tiempo. Entonces bien. Entonces básicamente, primero, el concepto también es el cliente solicitó que necesitaran esta animación en 60 fs por segundo. Entonces es por eso que esta animación se crea en 60 fs por segundo comp. Bien. Entonces, lo que realmente sucede es que tuve que crear transiciones más suaves entre Así que simplemente seguí adelante con la idea y creé esta animación. Bien, ahora vamos a ver algunas de las técnicas que uso, teniendo en cuenta que voy a estar entregando un lotifile para el cliente y qué técnicas usé para hacer el trabajo Y hay tres animaciones en este proyecto que hice para el cliente, pero voy a estar compartiendo solo una con ustedes porque creo que esto es suficiente para hacerme la idea. Vamos a seguir adelante y sumergirnos en esto. El primero es una animación circular, que es realmente simple. Esta es la animación circular que está animada y el círculo aparece, y luego va hacia abajo. Básicamente, no tiene valor mantener este círculo en la pantalla durante mucho tiempo. Porque aún no hay motivo construido. Eso lo que representa este círculo. Bien. Entonces vamos a llegar a ese punto más tarde por aquí, ¿verdad? Que este color básicamente representa a un aprendiz. Bien. Entonces eso no está establecido aquí. Por eso no tiene sentido mantener este punto en la pantalla durante bastante tiempo. Pero inconscientemente, básicamente es representar al usuario que está mirando la pantalla. Bien. Entonces básicamente, esta es la persona que está mirando la pantalla. Ahora bien, esto va hacia abajo en los estudiantes. Bien. Y ahora, estos son todos los menos etiquetados como color amarillo. Bien, vamos a hacer esto muy simple para ustedes porque esto es demasiado, creo. Bien. Entonces aquí están los marcos de la escala K. Entonces todos ellos simplemente dan un círculo. En primer lugar, también este círculo simplemente vuelve al centro, y escala hacia abajo en el centro. Bien. Y ahora, lo que realmente sucede aquí es que estos círculos escalan primero luego lo que realmente sucede es después de que se escalen, también tuve que tener en cuenta que los marcos deben estar alineados con los guiones gráficos del cliente Entonces como se puede ver en esta. La mejor manera de crear este tipo de animaciones es que antes que nada hay que recrear todo, en tan solo seguir adelante y crear esto Y el enfoque para crear animaciones fluidas sin cometer ningún tipo de errores es que cuando copias el marco de estilo y está dentro de after effects, antes que nada, solo tienes que asegurarte de que todo permanezca igual. Por eso solo vas a seguir adelante y crear los marcos clave de todo lo que está como es. Bien. Por lo que no vas a aplicar ningún tipo de cambio. Sólo vas a agregar fotogramas clave. ¿Bien? Hay que tener en cuenta que ¿qué tipo de propiedades vas a animar Y entonces sólo hay que tenerlo en mente. Obviamente, el cliente me proporcionó los marcos de estilo. Así que sólo puedo seguir adelante y ver qué tipo de animación voy a hacer. Ahora, como pueden ver, esto es obvio que tendremos que animar las posiciones Así que solo creo los fotogramas clave de posición. Bien. ¿Qué más vamos a hacer? Bien, vamos a necesitar fotogramas clave de opacidad porque hay diferencia de opacidad Y hay algo más. También hay una diferencia de color, ¿verdad? Como se puede ver. Este color es diferente. Bien. Así que eso hace tres propiedades. Bien. En primer lugar, acabamos de agregar fotogramas clave de posición Ahora vamos a agregar marcos de color. Bien. Así que solo crea fotogramas clave de color Lo que podemos hacer es simplemente hackear éste. Vamos a buscar el color. Solo vamos a agregar las capas primero que nada, y luego ir a escribir en color. Bien. Entonces ahora que ha llegado el color, solo agregaremos los fotogramas clave en todas las capas. Entonces así es como básicamente creas el mismo marco de estilo antes de comenzar el proceso de animación. Entonces ahora se agregan los fotogramas clave de color. Ahora, lo tercero que queremos añadir es que vamos a seleccionar todos estos. Ahora vamos a p t porque vamos a animar la opacidad Vamos a crear un marco clave. Bien, entonces ahora estamos bien para irnos. Si vamos a animar cualquier otra propiedad, solo seguiremos adelante y buscaremos eso también Pero no lo creo para que tengamos que animar cualquier otra propiedad Entonces creo que esto es suficiente. Bien, así que ahora solo sigo adelante y empiezo a animar las cosas, ¿de acuerdo? Así es como inicias el proceso de animación. Tienes que mantenerte en contacto con los guiones gráficos y luego pensar en qué fotogramas clave vas a necesitar Porque no puedes simplemente crear rotación y opacidad y escalar fotogramas clave también si no los necesitas Es muy importante tenerlo en cuenta porque los fotogramas clave contienen datos, ¿verdad? Entonces, si agregas usa menos fotogramas clave, solo va a aumentar el tamaño del lotifile Ahora, obviamente, si no hay cambio en los datos a lo largo de los fotogramas clave, no va a afectar realmente a nada Pero es importante mantener menor cantidad de fotogramas clave posible en tus artifies y si hay ciertos problemas o temas que quieres abordar, que hablaremos también ahora mismo en un minuto Entonces puedes crear algunos extra es también, que podrás optimizar más adelante. Bien. Entonces, simplemente eliminemos esto, y volvamos a la comp principal y discutamos esto más a fondo. Bien. Entonces después de la animación del escalado en estos. Como puedes ver, todos estos animan. Y entonces lo que pasa es eso, entonces estas son las capas. Bien, entonces volveremos a esta porque quizá debió haber habido algunos temas y proceso de edición en estas coms Entonces por eso estos son este no es el com final. Porque como pueden ver por aquí, he añadido un efecto de campo. Bien, entonces esto no va a funcionar en la loteria. Entonces este puede ser el primer borrador de la animación. Y además, puedes hacer esto mientras creas la animación aproximada que no tienes que tener todo en mente sobre el lottie Simplemente puedes crear un borrador rápido de la animación porque como puedes ver, si en realidad lo siento, simplemente no bloqueé esa. Bien, así que sigamos adelante y bloqueemos esa. Es solo un consejo importante que digamos que tenemos que cambiar el color de todas estas capas Entonces hay algunos pasos. La forma en que podemos cambiar el color de estas capas. Uno de ellos es agregar un filift que es realmente una forma de atajo, y esto nos ahorrará mucho tiempo Tenemos que hacer eso. Así que solo uso este enfoque de aquí para ahorrarme algo tiempo porque el cliente puede solicitar posteriormente la edición en el texto o algo así. Entonces tendrás que recrear las capas de forma del texto y luego cambiar el color también Entonces es por eso que esto puede llegar a ser problemático a veces. Por lo que acabo de crear esto en el borrador aproximado. Entonces solo dejo este fuera del camino, solo nos enfocaremos en el único lote, que es el último cinco, que es arty compatible Bien. Entonces después de esto, hay animación de abrir la propiedad de posición. Bien, entonces la posición empieza desde aquí. Bien, entonces toda la animación comienza desde el centro de la com, y luego escalan hacia arriba y hasta su respectiva posición. Así que básicamente, creé estos fotogramas clave más tarde, ¿de acuerdo? Empezamos desde aquí. Pegué estos fotogramas clave. Empecé con estos fotogramas clave, bien, estos. Y luego creé estos, y luego pasé a los siguientes. Bien. Entonces Ahora, de aquí a aquí, esto se queda igual. Bien. Entonces estas son solo las copias de los primeros fotogramas clave porque no hay interpolación entre los fotogramas clave Entonces esto realmente no hace mucha diferencia en el tamaño del rotifi Ahora lo que vamos a hacer por delante es que esto anima de aquí a aquí Bien. Entonces, ¿cómo habría logrado eso? En palabras simples, lo hubiera logrado de una manera que es seguir adelante y en 1.3. Bien. Y yo habría creado todos estos también en capas de forma, creado fotogramas clave de posición en estos también y luego copiar los también y luego copiar fotogramas clave de estos y solo clóquelos. Bueno, en realidad no los garra porque no se puede garrar el fotograma clave en otra capa Así que lo más probable que hubiera hecho es crear estos en capas de forma y luego hacer marcos de posición en estos como este. Bien y luego solo copia todas las capas. Esto, tráelos aquí así y luego solo selecciona una de las bolas del círculo y luego solo selecciona la respectiva y luego simplemente copia y pega todo, desde la referencia una a la otra. Bien. Entonces déjame mostrarte un ejemplo de ello. Sólo nos quedaremos con uno de estos aquí. Simplemente eliminaremos el resto de ellos. Bien. Yo sólo voy a borrar el resto. Conserva este. Sólo estoy suministrando un efecto de relleno en esto. Bien, seleccionemos esta . Recorte este. Bien. Así que vamos a mover este por aquí. Ahora vamos a seguir adelante y copiar este fotograma clave. Bien. Y ahora sólo voy a dar click por aquí. Haga clic en el marco clave. Ahí está esta capa. Bien. Es por aquí. Control V, y esto está exactamente en la misma posición. Así lo habría hecho yo. Bien. Entonces ahora sigamos adelante al siguiente paso. ¿Qué está pasando después de eso? Bien. Entonces aquí hay una capa de texto , y contiene algunos espacios. Bien. Así que vamos a hacer que el fondo sea negro para que podamos leer el texto. Bien, entonces hay un hueco entre el texto, y entonces el resto del texto simplemente aparece con posición y opacidad Bien, hay una cosa a tener en cuenta que Como puedes ver, esta animación es diez, 20, 30, key frans ¿bien? Y así es éste, y también este, y también este. Tienes que hacer un estándar para cada animación cuando estás creando trabajo para el cliente, como ya hemos comentado esto antes, que la marca no se pierda, ya sabes, algunas de las capas, y algunas de las capas se están animando otra manera desde la primera Así que eso se verá raro. Bien. Entonces ahora lo que vamos a hacer es que acabo de crear estas capas. Bien. Entonces una capa aparece por alrededor de un segundo para que la persona pueda leerla, y luego pasa a la segunda. Bien. Entonces ahora la opacidad anima Sigamos adelante y comprobemos ahora los fotogramas clave de opacidad. Bien. Entonces le pegué a T en nuestro teclado, y voy a ver cómo he animado esto. Bien. Bien, ahora esto es algo notorio aquí que todos estos están animando bien excepto éste Esta no se está animando. La opacidad no se está animando, pero aún así, como pueden ver aquí hay fotogramas clave Ahora bien, estos fotogramas clave no contienen ningún dato entre sí. Esto también es acosado y éste también es ded. Entonces, ¿por qué creé estos dos fotogramas clave? La razón para crear estos fotogramas clave es que hace que todo sea mucho más fácil cuando estás copiando y pegando toda la animación Y además, si el cliente solicita que quiera alargar la animación, ¿verdad? Quieren que la animación sea más larga en el tiempo y tome más tiempo y debería ser lenta, ¿verdad? Entonces no puedo simplemente arrastrar estos fotogramas clave hacia adelante porque habrá algunos huecos en la capa El que no esté animando se verá interrumpido porque todos los fotogramas clave no están alineados No puedo, no puedo simplemente seguir adelante y secuenciar estas capas también porque hay algunas brechas entre las capas. Entonces por eso es importante tener esto en mente, y también me facilitará mi trabajo a la vez que animo todo porque me voy a confundir menos que qué capa está animando y hipo no está animando. Porque en términos de mirar lo que debería estar animando, eso no es un gran problema, porque dices eso, no estoy seguro de lo que necesito animar Sólo voy a seguir adelante y revisar el marco de estilo. Eso es. ¿Bien? Entonces eso no es un gran dolor de cabeza. Sólo tengo que seguir adelante y revisar. Eso es. Y sabré cuál debería ser animado y cuál no. Eso lo puedo comprobar en la referencia. Bien. Entonces lo mismo va a pasar con los fotogramas clave de color también Bien, así que vamos a seguir adelante y revisar la tecla de color fms ahora Voy a seleccionar todos estos. Adelante y revisa las películas clave de color. Bien. Entonces, como puedes ver, la mitad de las capas cambian de color, pero hay fotogramas clave en cada una de ellas. Y además, como te dije, hay un marco clave de referencia al principio, ¿de acuerdo? Ver, cada capa comenzó con el mismo color, así que hay un fotograma clave. Y ahora, aquí es donde comienza la animación, así que hay un fotograma clave y de aquí las estrellas de color cambian. Así que vamos a comprobar cuando la estrella de color se está cambiando sola. Bien. Bien. Entonces el color empieza a cambiarse de aquí a aquí. Bien. Así que vamos a seguir adelante y ver por aquí. Como puedes ver, estas capas están cambiando su color, pero también hay fotogramas clave en la de abajo , ¿verdad? Bien. Entonces porque no hay ningún cambio de color va a ocurrir por aquí, entonces no hay fotograma clave aquí Bien. Y como verás, pasamos por el archivo, hay marcos clave en cada punto. Esto es un error que no he agregado fotogramas clave en estos porque también debería haber fotogramas clave en estas capas para que cada capa tenga un fotograma clave en cada momento incluso cuando una capa cambie su color, todas las demás capas también tienen fotogramas clave Ahora bien, puede haber algunas personas que deben estar pensando que esto puede aumentar el tamaño del archivo del lote, pero ese no es el caso en realidad porque hay interpolación entre los fotogramas clave Entonces esto no aumenta ningún tamaño de archivo en realidad. Y en algunos casos, aunque lo haga, o hay algunos problemáticos. A lo mejor habrá algunos problemas con este tipo de encuadre clave cuando se utilizan imágenes o datos basados en ráster Entonces entonces te sugeriría encarecidamente que no agregues fotogramas clave adicionales, o tal vez puedas simplemente seguir adelante y limpiar los fotogramas clave una vez que el cliente haya aprobado el proyecto, y luego puedes simplemente crear una copia de este policía y luego simplemente seguir adelante y eliminar todos los fotogramas clave adicionales como estos Simplemente puede seguir adelante y eliminar estos seis fotogramas clave. Pero una vez que el proyecto está terminado, y estás en el último paso de entregar los archivos, solo hazlo entonces, ¿de acuerdo? Sólo para la optimización del archivo. No lo hagas antes de eso. Lo recomendaría mucho, o de lo contrario te confundirás mucho. Bien. Entonces después de eso, puedes ver la mitad del último cambiar tu color, y el texto sigue animándose Entonces ahora, básicamente, el texto está reflejando la historia entre estos puntos. Entonces los puntos reaccionan al texto. Como puede ver, las lecciones personalizadas son más efectivas que la instrucción típica. Y ahora, ahora básicamente está apuntando al otro público, que es qué clase de maestro eres tú. ¿Bien? Entonces ahora han utilizado un concepto realmente único de representar eso también con puntos solamente. Eso es. No usaron una animación correcta o algo así. Utilizaron un enfoque muy minimalista con esto. También puedes agregar marcadores, por cierto, para asegurarte de que vas a agregar una diapositiva. Y si en realidad revisas la marca de tiempo entre estas. Es solo decir diez, 20, 30, 40, 50, 60701890, 100, 110 y Entonces este también es 120, esto también es 120. Entonces cada animación está tardando 2 segundos, ¿de acuerdo? Entonces, lo que puedes hacer al inicio del proyecto es que solo puedes traer todos los activos de tu proyecto. Y entonces lo que puedes hacer es dejarme seguir adelante y mostrarte lo que quiero decir con eso. Bien. Vamos a crear un siete 50 por siete 50. Nosotros lo llamamos pruebas. Y ahora sólo voy a seguir adelante y cambiar su color. Éste, lo voy a llamar. Bien. Ahora vamos a simplemente rastrear todos estos hasta aquí. Bien. Ahora lo que estoy pensando es que digamos que el cliente no sabe cuántos tiempos van a ser efectivos para cada una de las diapositivas. Así que sólo voy a ir sin ningún trabajo duro. Sólo voy a asegurarme que el momento de la animación sea el correcto. Yo sólo voy a seguir adelante y hacer estos 2 segundos cada uno. Bien. Entonces, en lugar de usar esto, también podemos seguir adelante y hacer esto que seleccionaremos todos estos. Bien, ahora sólo vamos a cambiar este orden de orientación del orden de las capas, y ahora voy a añadir los pasos uno 20. Vamos a aplicar el desplazamiento a una sola capa, y voy a golpear secuencia. Bien, entonces el plugin en realidad no está funcionando por alguna razón, y en realidad sucede. Así que solo tendremos que reiniciar nuestros after effects para que funcione. Bien, entonces ahora vamos a seleccionar toda la capa y la secuencia de golpes. Por alguna razón, el plugin no está funcionando. Vamos a seguir adelante y seleccionarlo de aquí también. El plugin va a estar alrededor. Por alguna razón el plugin no está funcionando. No estoy muy seguro de por qué sucede esto. Entonces lo que vamos a hacer es que vamos a hacer esto manualmente. Bien, así que básicamente puedes crear una diapositiva simple como esta y puedes enviarla al cliente. Tenemos que cambiar el orden de las capas. Eso es, y estaremos listos para irnos. Bien, entonces esta es la segunda diapositiva. Bien. Vamos a desbloquear estos. Ahora lo que puedes hacer es enviar esto a tu cliente y dejar que le eche un vistazo que si el tiempo parece correcto o no. Pueden hacerse una idea bastante buena a partir de aquí, que como va a ir la animación o si el tiempo es correcto o no. Eso es. Simplemente puedes hacerlo dentro de 5 minutos y enviarlo al cliente. Entonces eso es lo que debo haber hecho y luego inicié el proceso de animación creando los pasos de tiempo y finalizando el timing final de la animación Bien. Entonces, a medida que avanza la animación y el texto sigue animándose, y los puntos se animan a sí mismos y los puntos se animan Están ocurriendo cambios de opacidad y también hay cambios de color ocurriendo al mismo tiempo Bien, solo voy a seguir adelante y esconder las capas y va a deslizarlas todas y revelar opacidad, como pueden ver, en todas partes se crean los títulos incluso en las capas que no están siendo Bien. Bien. Esto parece más menos confuso a la hora de agregar revisiones a tus archivos o algo así. O tal vez tengas que ajustar el tiempo de los fotogramas clave, o simplemente tienes que hacer que toda la animación sea más larga o más corta. Simplemente puedes hacer clic alt y arrastrar todo esto. Bien. Entonces, pero si hay brechas entre los fotogramas clave, esto arruinará la animación. Realmente no se puede cambiar el momento. Además, no se pueden usar expresiones también. En latifiles no funcionan muy bien. Así que realmente no podemos usar ninguna inversión o expresiones o efectos de estiramiento de tiempo también Así que solo tendremos que cambiar el tiempo de la animación manualmente. Entonces esto es realmente útil en términos de eso. La animación pasa por todo eso y luego este texto aparece él mismo y es animado. Ahora, como puedes ver, hay una enorme desventaja para dar forma a las capas cuando se trata de texto porque ahora todas las letras están animadas por separado. Pero si se tratara de una capa fiscal, solo habría una capa. Entonces nuestro proyecto tendría muy menos espacio y muy menos capas. Y con la ayuda de eso, el efecto posterior se rezagará mucho menos. Y vamos a aprender en la siguiente clase que cómo vamos a exportar estos archivos de la mejor manera posible. Así que pasemos a la siguiente clase y veamos cómo vamos a hacer eso. Bien. 7. 06.Tutorial de Bodymovin y opciones de exportación: Bien, entonces este es el enchufe móvil del cuerpo, y así es como se ve la interfaz. Bien, entonces hay múltiples opciones que vamos a aprovechar, y hay múltiples configuraciones que estaremos discutiendo en el curso más avanzado, en realidad. Bien, entonces vas a seguir adelante y entrar por las ventanas en la extensión, y luego encontrarás el cuerpo moviendo el enchufe y vas a hacer clic en él, y así es como va a aparecer. En primer lugar, puede que no haya ningún coms, solo vas a tener que hacer clic en el botón de lista de actualización y te hará aparecer todas las composiciones que se crean dentro de after effects Ahora vas a seguir adelante y enfocarte en el Duty uno. Bien. Entonces antes de renderizarlo, sólo tenemos que seleccionarlo. Simplemente van a dar click sobre este botón, y esta capa es esta C ahora está seleccionada. Ahora bien, este es el botón de configuración, en realidad. Hay animaciones bastante lindas en su interior. El cuerpo se mueve y enchufa, por cierto, si los notas. Bien. Entonces a partir de aquí, puedes simplemente seguir adelante y cambiar la ubicación de tu animación, en realidad, donde vas a guardar esto. Así que sigamos adelante y hagamos lo mismo que las clases del curso uno. Así que vamos a seguir adelante y guardarlo ahí. Bien, sólo voy a llamarlo D t uno. Inter. Ahora solo vas a cambiar algunas configuraciones. Bien. Entonces, la configuración. Ahora bien, hay un montón de cosas que podemos aplicar en el cuerpo Mogfin y hay múltiples tipos de ajustes que podemos Bien. Entonces, sobre todo, la opción importante va a ser la de los glifos, ¿de acuerdo? Lo que hace este es que básicamente, podemos cambiar las fuentes dinámicas realmente en los archivos loti, y puedes aprender eso en YouTube que cómo hacen eso los desarrolladores, ahí es donde realmente las cosas de los desarrolladores Y si vas a cambiar la fuente en la página web en tu animación de lote, entonces quieres desmarcar esta Pero a menos que vayas a hacer eso, quieres mantener esta blis encendida, porque lo que esto hace es que básicamente, como puedes ver, hay una capa de texto en nuestra animación, ¿verdad Éste. Lo que esto hará es que automáticamente al exportar el archivo, cambiará todos los caracteres y letras de tu fuente en capas de forma, automáticamente. Entonces no habrá mucho lío. ¿Bien? Solo tienes que escribir tu texto, y eso es todo. Lo hará y convertirá esto en capas de forma cuando se esté exportando. Así que no tienes que crear realmente ese tipo de capas como esta. Bien. Creé este porque estaba luchando por crear el mismo estilo de fuente, en realidad, porque en realidad personalizaron una o dos letras entre esto, creo. Entonces por eso luché con esto. Bien. Entonces esta es la primera y más importante opción de que puede usar este valor de característica de manera muy útil Y tampoco afectará el tamaño del archivo. Lo mantendrá mínimo. También, después de eso, existe una opción conocida como los caracteres de reemplazo con coms Bien, reemplace los caracteres con composiciones personalizadas de la carpeta. Realmente no lo he usado mucho y nunca casi. Creo que no sé realmente que ¿qué hace realmente esta característica? Bien. Y después de eso, hay selección oculta si necesita que se exporten capas ocultas. Como sabes que hay capas en la composición como esta, que básicamente es una copia creada, pero está bloqueada y ocultada Si queremos explotar este también, entonces solo tendremos que hacer clic en nuestro cabello también, pero no queremos eso, solo queremos los datos que son asables en la comp Básicamente, si hay múltiples capas dentro de tu comp que están ocultas y bloqueadas, entonces no tienes que preocuparte por ellas porque body moven no las exportará y no se agregarán en tu animación, y no afectará el tamaño de tu archivo Después de eso, esta opción son guías. Seleccione algunas capas guiadas necesarias para ser exportadas. Como ya sabes, Afterft tiene la opción hacer de una capa una capa guía A partir de aquí, solo puedes hacer que las capas guíen las. qué se utilizan las capas guía Para qué se utilizan las capas guía es básicamente hacer referencia, en realidad, mucha gente la usa cuando importan una paleta de colores, simplemente la convierten en una capa guía, y trabajan con su capa guía en Entonces porque cuando las secuelas renderizan la animación, no exporta la guía las Esa es la función principal y ventaja de una capa guía. Bien. Por lo que esta opción también puede incluir la capa guía. Y no necesitamos eso también. Entonces va a dejar ese extra comps. Seleccione si las expresiones apuntan a través de los grupos externos Esto puede ser útil cuando estás creando animación de personajes usando esto porque puede haber algunos precomps de brazos y piernas de personajes que son puntiagudos o vinculados a la con principal del Pero realmente no lo recomiendo porque las expresiones no funcionan muy bien en todas las plataformas. Podrían ocasionar algunos problemas en las vueltas móviles. Entonces solo ignora este. Yo diría, o tal vez tienes una demanda muy específica por parte de un cliente en el que van a usar la animación solo en la web. Entonces solo tendrás que hacer algunas pruebas antes de darle la animación al cliente. Entonces esto es realmente experimental en mi opinión. Luego está esta característica, que se conoce como esta es una de las características más importantes. Vamos a ir más a bucear en esta característica en el próximo curso, el curso más avanzado. Y lo que esto básicamente hace es que puedes incluir imágenes dentro de tus tifiles Así que vamos a dejar esta por ahora porque realmente no hemos usado ninguna imagen raster en nuestro proyecto hasta ahora. Ahora en cuanto a lo que es el modo de exportación que se desea. En primer lugar está la opción que estándar exporta la animación como un archivo GSM. Dividir la comp dividida en múltiples archivos JS cada segundo. Básicamente dividirá la animación en, digamos que queremos una animación de 1 segundo. Hará que solo podamos escribir el número y lo exportará exportará más de 24 J porque la animación es de más de 24 segundos. Pero no es realmente útil y realmente no lo he usado nunca porque no tiene sentido dividir tus datos en realidad. Entonces es si esta sin marcar. Y entonces este es un botón para las exportaciones y HTML para la vista previa local. Esto también se va a discutir más a fondo en los más moscos porque esto también es muy complicado de explicar Y hay algunas excepciones para los clientes cuando van a pedir un archivo HTML, pero realmente no puedes exportar todos tus archivos de lote a TML porque HTML también tiene algunas restricciones muy, e incluso restricciones estrictas, luego muchas animaciones, en realidad Así que no se puede realmente el camino de recorte de animales también, creo, en la imación HTML Así que vas a tener que tener mucho cuidado a la hora de crear una animación HTML. Entonces este es un tema para otro día en realidad. Bien. Y además, puedes crear un reporte de la animación, que es básicamente un archivo de texto, que explica todo sobre tu composición. Que lo que es el tamaño de la composición, el color, el tipo de capas y todo. Entonces eso es todo en palabras sencillas. A lo mejor el desarrollador pueda usar esto para encontrar un error en tu animación. Entonces tal vez están luchando con el tema. Simplemente puedes enviarles este reporte, exportarlo desde aquí y luego enviarles esto. Por lo que les ayudará a leer los datos muy bien y encontrar el error sin esfuerzos. Bien. Y luego está este botón que dice proyecto de animación RV. Bien, entonces RV está básicamente en auge desde hace unos meses, y lo estoy aprendiendo. Y realmente no he probado este porque RV y las emisiones son bastante diferentes de la forma en que funciona ti. Así que realmente no he probado esto porque también hay algunas restricciones en R algunas restricciones en R cuando se trata de animación. Entonces no creo que las animaciones después del efecto realmente funcionen allí también sin problemas. Y la gente ha hecho algunas pruebas respecto y los resultados no son realmente ideales. Entonces no es realmente recomendable porque si realmente quieres crear la animación para RF, entonces se recomienda que crees la animación en su software nativo, en lugar de crearla aquí y explotarla como un proyecto RIF. Bien. Y luego está este reproductor de exportación independiente y animación en un solo archivo S. Realmente no lo he usado, y no sé cómo funciona esto. Por lo que puedes encontrar algunos datos respecto obviamente en los canales de YouTube de personas. Pero nunca lo he usado realmente, y ni siquiera una vez que nuestro cliente lo haya solicitado también. Así que nunca he usado realmente. Bien. Y éste dice pancarta paquete de pilas para uso de pancartas. Nunca he usado realmente este también. Y luego está éste y XML para Androids animado v vector dibujar disponible Va a haber todo un curso sobre éste en el futuro. Tomará mucho tiempo construir esa, creo. Así que sólo estoy trabajando en la construcción de esa. Estoy trabajando en la idea de ese curso y recopilando las ideas para crear algunas clases realmente útiles para esta, porque hay algunos cambios aplicados a la nueva actualización de Android. Y desde esas actualizaciones, ha habido algunos problemas entre artifis trabajando dentro de vueltas móviles Entonces sí, pero está muy basado en nichos, y tomará algún tiempo obtener datos detallados sobre este, y luego voy a crear curso sobre este. Y luego está este puerto y archivo SVG que usa SML para la animación Esto es experimental y no todo va a funcionar. Entonces esto básicamente va a ser una animación SVG. Si ustedes, no sé si lo saben o no. Como todos sabemos que SVG es un formato para imágenes de Steel, vectores de imágenes de acero, gráficos vectoriales escalables. Eso lo que significa SVG. Pero en realidad puedes animar el SVG usando codificación. Y entonces muchos desarrolladores realmente hacen eso, pero es realmente muy complejo. Así que la mayor parte de la animación que creas aquí podría no ser realmente convertida en los datos SVG muy bien. Entonces esto realmente no funciona porque si funciona habría funcionado muy bien. Entonces la gente usará esto en lugar de ft en realidad porque es mucho más fácil implementar SVG simplemente. Bien. Y luego está esta opción que dice opciones de expresión convierte expresión en fotogramas clave. Entonces, lo que es esto básicamente es que digamos que aplicas una animación de gal a una de las capas, derecho. Así que básicamente convertirá toda la animación gal para convertirla en fotogramas clave, pero hará que el tamaño del archivo sea enorme. Así que realmente no se recomienda. En la mayoría de los casos, te recomendaría encarecidamente que simplemente no uses expresiones en absoluto. Pero obviamente, hay algunas excepciones. Por lo que recomiendo encarecidamente que experimentes mucho con esto antes de darle el archivo al cliente. Bien. Y luego están estas características avanzadas de exportación que son solo más un problema del lado del desarrollador. En mi opinión, porque dice que usar composición como nombres de composición IDS se usarán como ID de referencia. Entonces, básicamente, el desarrollador puede ser capaz de usar el nombre de la comp e importar el archivo y tal vez conectar los datos a los cos de Lot. Digamos que hay múltiples coms dentro de un archivo lot, así que tal vez puedan desencadenar solo una comp específica usando este tipo de ID Bien. Por lo que existe esta exportación en un formato más legible por humanos, no lo use para el archivo final, ya que el tamaño del archivo se hace significativamente mayor. Entonces, básicamente, también necesitamos esto. Y propiedades no compatibles. Solo verifica esto si necesitas un uso específico de propiedad que no sea el jugador. Entonces, lo que esto básicamente significa es que también renderizará los efectos en tu archivo también. Pero quiero decir, el expediente no va a funcionar. Entonces no sé quién va a usar esta función. Bien. Y luego va a haber tranvía usado fotogramas clave y capas, eliminar capas y fotogramas clave más allá del área de trabajo Realmente puedes usar esto y esto podría ahorrarte algunos KBs en los datos del tamaño del archivo, pero no realmente necesario en mi opinión Y exportar JSF para compatibilidad con versiones anteriores, digamos que la gente construyendo la animación para una app, pero algunos de los usuarios están usando versión anterior de androides, tal vez esto te ayude a crear un archivo JSON más compatible para eso, pero no en los casos más normales Y luego están las propiedades esenciales, Exportar propiedades esenciales, Exportar propiedades esenciales a partir de la composición de la raíz. Esto se comprueba por defecto, así que déjalo como está, y luego hay opción que es propiedades esenciales como slots. No sé lo que esto significa en realidad. Actúo mapearé propiedades esenciales dos ranuras en el archivo JSON que permite una fácil modificación. Yo actividad, reemplazará las propiedades en línea en la composición. No estoy muy seguro de cómo funciona esto. Ahí están estos metadatos. No realmente me interesa eso. Blueprint, realmente no sé cómo vamos a usar eso también Utilice el blueprint para adjuntar a la animación para validar la exportación. No es realmente necesario. Ahora bien, los archivos de audio son básicamente, nunca he usado realmente archivos de audio dentro no animaciones porque el desarrollador realmente puede conectar los archivos de audio a la animación cuando están incrustando la animación en realidad Así que también he hablado con los desarrolladores sobre esto, y creo que eso funciona mucho mejor porque cuando trabajas dentro de After fx, también tienes que aplicar compresión en audio. Entonces es mejor si solo lo hacen manualmente cuando están incrustando el archivo Bien, entonces estos son todos los ajustes. Ahora van a golpear seguro Hay otra característica realmente increíble. Primero, solo vamos a exportar este y presionar guardar y luego presionar render. Como puedes ver que uno de los más importantes a tener en cuenta aquí en este momento es que cuando exportamos el archivo usando Roti files plug in, en realidad me requirió tener una conexión a Internet para poder guardar el archivo en el espacio Sí dices que no tengo conexión a internet, pero aun así quiero exportar mis archivos GSN Realmente podemos usar body mopin aquí en lugar de usar mucho plug in porque lot plug in realmente requiere que guardes los archivos en su espacio Entonces este programa realmente ayuda esa manera que en realidad no tienes conexión a internet. Bien. Así que ahora la animación se renderiza terminada, y ahora podemos previsualizar la animación muy fácilmente. Sólo vamos a previsualizar, y vamos a aplicar la animación. Ahora sólo podemos previsualizar la animación. Bien. Bien, así que solo estropeé la animación en esta Así que podemos arreglarlo más tarde también. Como puedes ver, la animación es perfecta, ¿verdad? Bien. Entonces otra cosa que puedes hacer, que es realmente, muy importante y bastante útil es que puedes importar animaciones de trama que están en tu disco, y puedes previsualizarlas aquí, lo cual es realmente increíble, en realidad. Digamos que un cliente te envía un huevo f, ¿verdad? Y las misiones del cliente. Digamos que el cliente te envía la misma animación y dice, quiero arreglar la animación en este inicio, ¿verdad? La animación en este inicio, ¿verdad? Entonces lo que vamos a hacer es digamos que vamos a importar el tipo de archivo local en la ruta, y solo vamos a seleccionar los archivos enviados por el cliente, y solo vamos a golpear. Bien. Ahora esto puede llevar algún tiempo, pero volverá a construir la animación dentro después de las grasas. Y por cierto, también puedes usar esta función para aprender de otros creadores. Simplemente puedes seguir adelante en LotyFiles. Puedes descargar las animaciones lotty de otras personas, y luego puedes importarlas dentro después del fax y luego aprender de sus archivos Digamos que te interesa una de mis animaciones uti, y quizás tengas curiosidad cómo creé una animación de Auty en particular o tal vez algo que podrías pensar que cómo logré ese efecto en particular o algo así, ¿ logré ese efecto en particular verdad Entonces solo puedes seguir adelante y descargar mi animación. Digamos que piensas que este es muy bonito y quieres ver cómo animé todo. Solo tienes que seguir adelante y descargar este, y luego simplemente puedes descargar el archivo JS, y luego puedes importarlo aquí. Bien. Y entonces la animación será, en tu com como fue creada por mí. Podría haber algunas diferencias. Y déjame decirte esas. Las etiquetas no se aplicarán a la emisión cuando se importe porque la razón detrás de eso es que las etiquetas se crean dentro después de los efectos. Por lo que estos datos no se exportan al archivo JSN, por lo que podría no funcionar Bien. Entonces esto está tomando algún tiempo, pero te das la idea de que puedes usar esta función muy bien. Sólo voy a cancelar la exportación. También puedes escribir la URL, pero obviamente requerirá la conexión a Internet. Bien. Y también puedes previsualizar las animaciones. Digamos que quiero previsualizar un archivo local, ¿verdad? Yo sólo quiero verlo. No quiero recrear la animación. Digamos que nuestro cliente dice que la animación no está funcionando correctamente. Entonces lo que voy a hacer es, solo voy a seleccionar la animación, y sólo voy a presionar enter. Y simplemente importó esa animación aquí. Ahora, estoy viendo la animación desde mi drive. Esta no es la animación que hemos alquilado. Está recogiendo el lotifile de la unidad. Bien. Entonces esto es realmente útil. Puede seguir adelante y verificar el archivo. Que si un cliente dice que hay un problema en el archivo, quiero que previsualicen este archivo. Simplemente puedes entrar aquí y entrar en el movimiento del cuerpo y simplemente presionar vista previa y navegar por un archivo de casillero. Eso es. Eso es. Eso es todo lo que tienes que hacer. Bien. Entonces esto es realmente útil. Puedes importar informes indefinidamente y entrar en la configuración, y nunca he usado realmente este Y también puedes entrar en estos tipos, seleccionar una o más propiedades de tu composición para obtener la información sobre su soporte. Bien, entonces vas a hacerlo. Como puedes ver, esto realmente te ayuda a entender qué propiedad se acepta en qué plataforma. Entonces, si hay algún problema en tu archivo, o tal vez quieras verificar que si esto va a funcionar en la función de Android, 4.5 0.0, solo puedes seguir adelante y leer los datos, o simplemente puedes tomar la captura de pantalla de esto y enviar esto a tu cliente y ayudarles, que estos son los datos y decirle a tu desarrollador estos datos, y esto ayudará al desarrollador entender por qué el la animación no está funcionando. O tal vez encuentren la manera de hacerlo funcionar. Así que sí. Y así es como funciona este plug in, y estas son las características. Entonces así es como funciona el plug in, y estas son las ventajas que ofrece en lugar de y en la comparación de archivos de lote versus body moble plug in Recomiendo encarecidamente usar body moble plug in cuando se trabaja para clientes. Así que muchas gracias. 8. Felicitaciones y...: Enhorabuena por completar este curso. voy a ver en la siguiente muy pronto, y créeme, esto no va a llevar otro año. Volveré realmente muy pronto. También me puedes apoyar financieramente comprándome cafés también También puedes seguirme en redes sociales para compartir lo que se te ha ocurrido y lo que has aprendido a través de mi trabajo. También puedes comunicarte conmigo si tienes alguna duda o tienes ganas de aprender algo nuevo. Puedes dejarme un mensaje en Instagram por cualquier medio y en cualquier momento que quieras. Con ganas de enseñarles más chicos y con ganas de ver el oficio. Por favor, continúe y envíeme algunos trabajos en la página de la Clase porque todavía no he visto una animación. Será realmente increíble si veo algunas de sus obras también. Y esperando tus comentarios también sobre este curso, te veré en el siguiente. Muchas gracias. Adiós.