Expresiones con IA en After Effects

1. Introduccion: Hola, soy Valerie, y bienvenido a AI for Motion. Si alguna vez te sientes intimidado por las expresiones y quieres aprovechar la IA para ayudarte en tu flujo de trabajo de animación, entonces este es para ti En cinco lecciones, te mostraré cómo usar herramientas de IA como HAGPT para generar expresiones que automaticen tus animaciones, construyan configuraciones inteligentes y te ahorren horas de trabajo manual Cubriremos todo, desde crear carruseles, efectos de desplazamiento, rebotar paneles I hasta automatizar clics del cursor sin escribir una La gran noticia es que no necesitas ser un experto en después de los efectos. Ya sabes lo básico, estás listo. Al final de este curso, tendrás una configuración reutilizable que podrás aplicar a tus propios proyectos. Y lo más importante, tendrás una forma completamente nueva de pensar sobre la animación con IA. Entonces, si estás listo para animar de manera más inteligente y rápida, saltemos a la primera lección. Te veré ahí. 2. Cómo crear una animación de carrusel inteligente: Ahí, y bienvenidos a la primera lección del curso. Espero que ya hayas descargado la carpeta del curso. Lo llamé expresiones para SAS porque las animaciones que vamos a crear en este curso se utilizan principalmente en videos explicativos SAS. Todo bien. Entonces primero, comencemos revisando lo que hay dentro de esta carpeta. No es nada demasiado complicado. Dentro de la carpeta hat GPT, encontrarás archivos PDF de las conversaciones que tuve con Chat GPT durante este curso Eso significa que dentro de estos PDF, verás mis conversaciones exactas con el chat pero guardadas como archivos PDF Los agregué porque para cada uno de nosotros, el chat podría dar respuestas ligeramente diferentes. Y en caso de que la IA te dé algo completamente fuera de tema en tu chat, siempre puedes volver a estos archivos PDF y copiar las expresiones exactas que utilicé. Pero no te preocupes. Estoy seguro que no importa qué IA estés usando, todos obtendremos resultados muy similares porque al final del día, estamos generando líneas de código muy simples. Bien, pasemos al siguiente. Hay una carpeta Assets que contiene todas las imágenes que usaremos en este curso, como las imágenes de animales y los logotipos de iconos del software. También verás una carpeta AE con los archivos de proyecto de After Effects. Un archivo incluye la animación final que vamos a trabajar en este curso, y el otro es la versión sin animación, con la que empezaremos ahora mismo. Entonces abramos esa y comencemos la lección. Antes de seguir adelante, asegurémonos de que todos estamos usando el mismo diseño del espacio de trabajo para que todo permanezca sincronizado. Para ello, ve a Ventana, luego al espacio de trabajo y elige por defecto. Si tu diseño aún se ve diferente al mío, probablemente sea porque algunos paneles se movieron. Para solucionar esto, podemos restablecer el espacio de trabajo juntos. Ahora todos deberíamos estar viendo lo mismo. Ahora, en este punto, no hagas nada, solo mira y escucha. Nos pondremos en manos muy pronto. Déjame primero guiarte a través del panel del proyecto para que puedas entender lo que hay ahí dentro. Dentro de la carpeta Activos, tenemos las imágenes de animales y los iconos del software. También hay una carpeta de sólidos con los sólidos que utilicé como fondos para cada lección. Cada carpeta de lección contiene la comp principal para esa lección y una subcarpeta con las pre comps relacionadas con ella Ya preparé las escenas con las que vamos a practicar en este curso. En cada lección, practicaremos algo diferente. No te preocupes. También voy a explicar cómo configuré cada escena antes de empezar a animar. Por ahora, podemos cerrar todos los precomps y enfocarnos en la primera lección en la que crearemos una animación de carrusel súper genial con muchas micro animaciones como opacidad, escalado e incluso animaciones de sombra paralela, pero sin crear realmente fotogramas clave para estas micro animaciones pero sin crear realmente fotogramas clave Lo haremos todo usando expresiones. Pero no te preocupes. No hace falta conocer expresiones en absoluto para que funcione. Vamos a usar la IA para generar las expresiones que necesitamos. Antes de saltar a la animación, déjame explicarte rápidamente cómo configuré esta escena porque hay mucho que puedes aprender de ella. Como pueden ver, aquí tengo unas pre comps, cada una con una imagen animal Podrías preguntar, ¿por qué los precomponías? ¿Por qué no usar simplemente la capa de imagen tal como es? Entonces déjame entrar a esta precomp y explicarte por qué hice eso. En primer lugar, es porque todas las fotos son de diferentes tamaños y necesito que sean del mismo tamaño. Además, quería crear el aspecto de bordes redondeados. Creé un cuadrado redondeado usando una capa de forma, luego usé la función Track Matty para usar esta forma como alfa para la imagen Esta forma ahora se usa como máscara para la imagen. Es mejor que aplicar una máscara regular directamente sobre la capa de la imagen porque me permite posicionar libremente la imagen como quiera. Lo más importante es que me permite intercambiar fotos fácilmente más tarde si un cliente solicita cambios. Simplemente selecciono la imagen que quiero reemplazar, luego mantén presionada Alt u Opción en Mac y arrastre la nueva sobre ella. Después de eso, puedo ajustar la nueva imagen para que se ajuste al diseño. Como pueden ver, las esquinas redondeadas siguen siendo las mismas, y estoy lista para seguir trabajando. Bien, presionaré Control Z para deshacer mis cambios. Ah, y por cierto, cuando trabajo en proyectos que incluyen muchas imágenes, utilizo dimensiones precomp de tamaño mediano. Un tamaño como 1080 por 1080 suele funcionar bien. Dicho esto, espero que vean el beneficio de configurarlo de esta manera y ahora podemos empezar a trabajar juntos. Prepárate para hacer algo de magia. Entonces ahora comencemos a crear la animación de carrusel Avanzado Como mencioné anteriormente, vamos a utilizar IA para ayudarnos con esto. En nuestro caso, utilizaremos la versión gratuita de hat GPT. Si aún no tienes una cuenta, sigue adelante y crea una. Pero honestamente, a estas alturas, mayoría de la gente ya tiene uno. Estoy usando la versión paga, pero aquí me verás usando la versión gratuita llamada GPT four oh También funciona de la misma manera con versiones anteriores. Aunque para cuando estés viendo este curso, esa versión puede que ya no exista. En fin, comencemos a construir. Primero, quiero compartir tres consejos importantes que harán que este proceso sea mucho más eficiente para ti. Uno, al pedir ayuda con After Effects, siempre comienza mostrando a GPT una captura de pantalla de tu pre comp De esa manera, puede ver toda la configuración, lo que hace que su solicitud sea más fácil de entender. Dos, al escribir tu primer mensaje o tarea, siempre terminarlo con una pregunta como, ¿entiendes a lo que me refiero? Esto ayuda a GPT a pensar en tu idea con más cuidado y a menudo te la explica incluso mejor de lo que la describiste Tres, si las cosas no salen según planeado y GPT no te está dando lo que quieres, no sigas intentando en el mismo chat, ciérrala y empieza una nueva Eso restablece su memoria. Si sigues preguntando en el mismo hilo después de varios intentos fallidos, permanecerá bloqueado en tu mensaje original, lo que puede que ni siquiera sea exacto. Entonces es mejor empezar de nuevo. Todo bien. Con eso en mente, comencemos a crear la animación karoel Según nuestro primer consejo, comenzaremos tomando una captura de pantalla de nuestra escena para compartirla con GPT En mi caso, buscaré la herramienta Snipping. Aquí están los atajos tanto para PC como para MAC. Los usuarios de PC cambian a Windows S. usuarios de Mac Comando Shift cuatro. No es necesario capturar toda la interfaz, solo los paneles importantes. En nuestro caso, lo que más importa es el panel de vista previa, para que GPT pueda ver el layout y el panel Capas, para que pueda leer los nombres de las capas Queremos que GPT pueda ver nuestra escena. Así que asegúrate de que la captura de pantalla incluya el panel de vista previa y el panel de capas, para que también pueda ver los nombres de las capas. Ahora copiemos la captura de pantalla y la peguemos en Chat GPT. A continuación, explicaremos lo que queremos que haga. Voy a escribirlo usando inglés simple con algunos errores gramaticales solo para mostrarte que el inglés perfecto no es necesario para obtener buenos resultados. Ahí es donde ayuda nuestra segunda regla. Entonces probémoslo. Te recomiendo siempre empezar por mencionar qué software estás usando. Después describe brevemente lo que hay en tu escena. Nuestro objetivo es darle a GPT una tarea básica sin profundizar demasiado en los detalles al inicio Por ejemplo, un valor específico como 20% no es muy importante en este punto. Todos los valores se pueden afinar más tarde, así que no te preocupes por ser exactos. Solo concéntrate en describir la idea de animación de la manera que la imaginas. Como lo estoy haciendo aquí, te estoy diciendo que quiero que la opacidad de los precomps no centrados sea menor para que el centrado destaque más Y ahora, una vez que lo hayas descrito todo, no olvides nuestra segunda regla. Si no estás seguro de haber explicado tu idea con claridad, termina tu mensaje preguntando, ¿Entiendes a lo que me refiero? Ahora bien, debes saber que la respuesta da GPT será un poco diferente para cada uno de nosotros. Y eso está totalmente bien. Lo más importante es comprobar que entienda tu visión en la primera parte de su respuesta. Si algo no está bien, puedes corregirlo antes de seguir adelante. Por ejemplo, noté que GPT sugirió escalar la precomp centrada en 20%, lo que en su mente, significa pasar de una escala de 100 a 120 Pero en mi caso, mi escala precomp predeterminada no es 100, así que no quiero escalarla a 20 Voy a decirle a GPT que de una manera sencilla, mi escala predeterminada es 40 Después vuelvo a mi proyecto, reviso lo que queda bien, y veo que 60 funciona bien. Entonces vuelvo al chat y le cuento 60. Antes de continuar, también voy a ver otras sugerencias de GPT En este caso, veo que está ofreciendo dos estilos de movimiento diferentes. Quiero que la animación sea suave, así que voy a mencionar eso también en el chat. Con eso hecho, vamos a ejecutar la tarea. Ahora, tenemos algunas respuestas generadas con algunas explicaciones simples, no tienes que leerlas todas, pero si quieres empezar a aprender cómo funcionan las expresiones, es una buena idea leerlas. Lo bueno es que, aunque no entiendas expresiones, GPT suele dar explicaciones claras dentro del código de expresión sin romper nada También nos dice a qué propiedad debemos aplicar la expresión, y esa es la parte importante para nosotros. Solo recuerda, antes de seguir adelante, si tienes alguna duda, sigue leyendo el resto de la respuesta de GPT La mayoría de las veces, encontrarás la explicación que necesitas ahí mismo. Bien. Entonces ahora vayamos a la primera expresión de escala y copiemos el código. Ahora, abra su proyecto y presione S para revelar la propiedad de la escala. Para abrir la entrada de expresión, mantenga presionada la tecla Alt u Opción en Mac y haga clic en el Cronómetro de Escala Ahora, presione Control o Comando V para pegar la expresión. Para completar la acción, haga clic en cualquier lugar fuera del panel de expresión. Y ahí lo tenemos. La primera precomp ahora se escala a 60 Vamos a abrir la cuadrícula de acción y colocar la precomp en el centro para ver si está funcionando Se ve bien. Ahora hagamos lo mismo para la propiedad de opacidad Vamos a comprobarlo. Impresionante. Se ve muy bien. Si te encuentras algún error o algo no funciona, no te preocupes. Simplemente puedes copiar las expresiones que utilicé. Están listados en la carpeta de chat GPT. En las próximas lecciones, te mostraré cómo corregir errores de expresión. Pero por ahora, solo sigue adelante y ponte cómodo con el proceso. Bien, ahora vamos a seleccionar todos los precomps y moverlos, así que el que estamos viendo actualmente se coloca en el I Genial. Ahora, para aplicar estas dos expresiones al resto de las capas, primero abra la propiedad de opacidad, haga clic derecho sobre ella y elija Copiar expresión solamente Después selecciona el resto de los precomps y presiona Control o Comando V para pegarlo Hagamos lo mismo con la propiedad de escala. Impresionante. Y ahora necesitamos controlar la posición de todas las capas a la vez. Para ello, vamos a crear una nueva capa nula y padre todos los precomps a la Asegúrese de no confundir la pista Mat Piwip con el padre y vincular Esas son dos cosas distintas. Impresionante. Ahora, podemos mover la capa nula hacia la izquierda o hacia la derecha, y obtendremos ese efecto de carrusel suave Imagínese cuántos fotogramas clave se necesitarían para crear esto manualmente animando y cronometrando cada precomp Y ese es el verdadero poder de saber usar IA para ayudar con tareas reales en nuestros proyectos, incluso si no conoces expresiones en absoluto. Con eso hecho, solo hemos arañado la superficie de lo que es posible con la IA y las expresiones Ahora vamos a llevarlo al siguiente nivel. Digamos que quiero cambiar los valores de escalado y opacidad en las expresiones Para ello, necesito abrir cada expresión, encontrar los parámetros correctos y ajustarlos manualmente para cada capa. Como puedes imaginar, eso lleva mucho tiempo. Entonces ahora aprendamos cómo la IA puede ayudar a automatizar este proceso. Cuando se quiere controlar los parámetros de expresión dinámicamente, la configuración es un poco diferente. Acabas de aprender a hacer una configuración sencilla. Ahora construiremos uno más avanzado. Para comenzar, seleccionemos nuestros precomps y presionemos dos veces E para revelar las expresiones Ahora eliminaremos todas las expresiones, para ello mantén pulsada la tecla Alt u Opción en Mac, y daremos clic en el cronómetro de la propiedad Hagamos esto por todos los precomps. Y no olvides despejar la expresión desde la pre comp centrada, también. Genial. Ahora volvamos a Chat GPT y pídele que cree una nueva configuración de expresión para nosotros. Escribiré la solicitud de una manera muy sencilla, e incluso puedo incluir algunos de los términos de expresión como los que vimos antes. Entonces GPT entiende qué parámetros queremos controlar. Así que simplemente voy a copiar estas frases de la expresión que GPT dio anteriormente, para que entienda exactamente qué parámetros quiero controlar A continuación, agregaré los parámetros de opacidad, también. Simplemente le estoy diciendo a GPT que quiero poder controlar ambas propiedades Veamos qué sugiere. Aquí vamos. Sin siquiera saber que esto era posible, solo le pregunté a GPT si se podía hacer, y me dio el proceso completo paso a paso Me dio las expresiones y también sugirió qué números usar en el controlador. Ahora bien, tal vez no entendamos completamente lo que significa todo, pero eso está bien. Solo sigamos los pasos y veamos qué obtenemos. Primero, crearé una nueva capa nula como lo instruyó GPT, y ahora me aseguraré de etiquetar las capas exactamente como sugirió, que no nos encontremos con ningún error más adelante Impresionante. Ahora, veamos cuáles son los siguientes pasos. Seguiremos siguiendo la guía de GPT y crearemos cuatro controles deslizantes diferentes puedes encontrar en el panel de efectos ya sea haciendo clic derecho sobre la capa nula y yendo a los controles de expresión o escribiendo el nombre del efecto en la barra de búsqueda de efectos. Genial. Ahora, agreguemos este efecto a la capa nula. Usa Control o Comando D para duplicarlo tres veces, así terminas con cuatro deslizadores en total Por último, cambie el nombre de cada deslizador con los nombres exactos que GPT dio Simplemente copie los nombres del chat y péguelos en el campo de nombre del efecto. Hagamos esto para los cuatro deslizadores. Impresionante. Antes de ir más lejos, este es un buen momento para guardar una copia de seguridad de su proyecto, acaso después de que los efectos se bloqueen. Vamos a guardarlo como un nuevo archivo. Se le puede llamar algo así como práctica. Siempre es inteligente mantener una versión del proyecto antes de que comience la animación, especialmente en escenas más complejas para que no pierda su diseño preparado si alguna vez necesita comenzar de nuevo. Todo bien. Ahora, volvamos al chat y copiemos la expresión de escala. Lo probaremos en el pre comp centrado. En nuestro caso, ese es el cuadro seis. Bien, entonces ahora no vemos la pre comp en absoluto, pero está bien. No estamos recibiendo un error de expresión, así que probablemente sea solo un problema de parámetros en el controlador. Como puede ver, todos los valores del controlador están configurados actualmente en cero. Ese es muy probablemente el problema. Si ve algún error de expresión, aquí está mi consejo. Elimina el nombre del controlador y vuelve a teclearlo manualmente en lugar de copiarlo pegándolo desde el chat Por alguna razón, después de los efectos a veces no reconoce el texto pegado de otros programas Aunque el nombre tenga el mismo aspecto, no va a funcionar. Y eso es lo que causa esos raros errores de expresión. Así que solo vuelve a escribir los nombres manualmente, y el problema debería desaparecer. En fin, sigamos siguiendo los pasos de GPT. Volvamos al chat y copiemos la expresión de opacidad Ahora pegarlo en la propiedad de opacidad. Después regresa al chat y comprueba qué dice hacer a continuación. Y aquí está. Paso tres, sugiere ajustar los valores de control. Entonces hagámoslo rápidamente. Todo bien. Ahora, vamos a probarlo moviendo nuestra capa nula de lado a lado y veamos qué sucede. Increíble. Funciona perfectamente. Ahora puedo ajustar los controladores para la configuración del carrusel y previsualizar cómo se ve todo solo mover la capa nula Lo mejor de esta configuración es que siempre puedes volver y modificar los valores en cualquier momento que quieras Además, después de que terminemos la lección, puedes guardar este proyecto con esta genial configuración para usarlo como plantilla para tus futuros proyectos. Lo único que tendrás que hacer es reemplazar las imágenes por otras que sean relevantes para tu proyecto y ajustar el controlador si quieres que se vea un poco diferente. Por ahora, copiemos las expresiones que agregamos a esta precomp y péguelas en el resto de las capas Para ver ambas propiedades, primero presione T para mostrar la opacidad, luego mantenga presionada la tecla Mayús y presione S para revelar también la propiedad de escala Ahora, vamos a copiar solo las expresiones y pegarlas en las otras capas. Todo bien. Ahora podemos probar el controlador y ver si todo funciona. Como puedes ver, la capa fox no está reaccionando al controlador de escala, así que probablemente nos olvidamos pegar la expresión de escala en esa. No es gran cosa. Simplemente copie la expresión de escala de uno de los otros precomps y péguela en la capa de zorro. Genial. Ahora, quiero mencionar algo realmente importante a la hora de trabajar con precomps Si decides colapsar tus precomps para mantener la mayor calidad de imagen posible, ten en cuenta que podría cambiar la apariencia de tu escena Como puedes ver aquí, la opacidad se ve diferente ahora. Pero en nuestro caso, esto es súper fácil de arreglar. Simplemente ajuste el controlador de opacidad en nuestra configuración, y actualizará automáticamente todas las capas Impresionante. Ahora, vamos un paso más allá y hagamos que el diseño se vea aún mejor agregando un simple efecto de sombra paralela. Ajustemos los parámetros de sombra y cambiemos también el color de la sombra para que se fusione bien con el fondo Aquí tienes un gran consejo. Al agregar una sombra paralela, primero muestrea el color de fondo de tu escena y luego afina los valores de color. Así es como obtienes sombras de aspecto más natural. La sombra se ve increíble, pero quiero que aparezca solo en la precomp centrada Estoy tratando de crear un sutil look elevado. Pero como puedes imaginar, animar y cronometrar la sombra paralela para cada capa manualmente tardaría una eternidad. Ahí es donde vuelve a entrar nuestro amigo de IA. Para ayudar a GPT a entender mejor el contexto, tomaré una captura de pantalla de mi escena Es importante que GPT vea el efecto de sombra paralela en las capas de la línea de tiempo Así que toma una captura de pantalla y pegarla en el chat. Ahora, tratemos de explicar lo que estamos tratando de lograr. Nuevamente, usando un lenguaje muy sencillo. GPT está sugiriendo ahora algunos pasos. Pero como ya tengo un controlador que administra toda la configuración, me pregunto si puedo agregar esta automatización de sombra paralela al mismo controlador. Entonces, preguntémoslo. Genial. Dice que podemos. Sigamos los pasos y veamos qué pasa. Ahora voy a copiar el nombre y volver a mi proyecto para seguir los pasos. Entonces primero, necesitamos crear otro control deslizante como él sugirió, y podemos pegar el nombre que copiamos hace un segundo. Bien. Pongámoslo también a 100, como vimos en la sugerencia. Volver a GPT. Veamos qué sigue. Bien, realmente no lo entiendo todo. Hay mucha explicación pasando. Simplemente saltemos adelante y copiemos las expresiones. Lo más importante para mí es verificar dónde dice la IA para pegar la expresión. En este caso, dice aplicarlo a la propiedad de opacidad del efecto de sombra paralela Entonces hagámoslo ahora. Ahora puedo controlar la sombra paralela desde aquí. Lo pondré en 100 por ahora y comprobaré si desaparece automáticamente cuando mueva la capa nula hacia los lados. Eso es increíble. Funciona perfectamente. Ahora voy a ajustar el color de la sombra para que se ajuste mejor a mi diseño. Y con eso hecho, vamos a copiar este efecto de sombra paralela y pegarlo en el resto de los precomps Et's mueven el nulo alrededor y ver si todo funciona. Bonito. La sombra sólo aparece cuando la precomp está en el centro Estoy contento con cómo resultó la automatización. Como ahora tenemos una sombra paralela aplicada a todos los precomps, vamos a ajustar ligeramente la opacidad, también, porque la sombra paralela cambió un poco cómo se ve aplicada a todos los precomps, vamos a ajustar ligeramente la opacidad, también, porque la sombra paralela cambió un poco cómo se ve. Todo bien. Entonces ahora podemos animar la escena como queramos. En mi caso, solo crearé un simple movimiento lateral para el carrusel Al inicio de la animación, comenzaré mostrando al elefante. Entonces después de 3 segundos, traeré al tigre al centro. Por último, 3 segundos después, voy a mover al leopardo al centro. Acabo de darme cuenta de que podría no haber colocado el elefante y el tigre perfectamente en el centro, así que iré al primer fotograma clave y ajustaré el valor de posición nula Yo haré lo mismo por el tigre. Impresionante. Ahora, como solemos hacer, vamos a mejorar el movimiento ajustando la velocidad del fotograma clave Pero esta vez, en lugar de mantener presionada la opción Alter y hacer doble clic en un fotograma clave, usaré un atajo que descubrí no hace mucho tiempo para abrir rápidamente el panel de velocidad del fotograma clave Después de seleccionar tus fotogramas clave solo presiona Control Shift K o Command Shift K en Mac, y ahí lo tienes Ahora, cambiemos la velocidad a algo así como 75% para fotogramas clave tanto entrantes como salientes. Vamos a previsualizar eso. Impresionante. Se ve genial. Ahora vamos a Second nine y copiemos y pegue el primer fotograma clave ahí para que obtengamos una bonita animación de lazo Presiona para acortar el área de trabajo y entra en el editor Speedgraph para verificar si la velocidad es consistente en toda la animación Bien, todo se ve bien. Y con eso, terminamos la primera lección. Lo más importante que quiero que tomes de esta lección es que a veces vale la pena dedicar unos minutos extra a construir una configuración automatizada antes de saltar a la animación. Te puede ahorrar mucho tiempo después, porque cuando el cliente regrese y pida cambios, podrás ajustar las cosas súper rápido en lugar de lidiar con toneladas de fotogramas clave y rehacer todo manualmente Recomiendo seguir practicando esta lección agregando un efecto de desenfoque genial a la configuración. Puedes pedirle a Chat GPT que haga borrosas todas las pre compilaciones no centradas y mantenga solo enfocada la pre comp centrada y vea lo que sugiere Las posibilidades son infinitas, y espero que ahora entiendas lo fácil que es construir cosas como esta con la ayuda de la IA. Nunca usé expresiones complejas en mis propios proyectos, pero ahora me siento seguro de que puedo construir casi cualquier automatización que necesite sin aprender expresiones o codificación. Bien, ahora abramos la segunda lección y cerremos esta Y antes de comenzar a ver la siguiente lección, no olvides tomarte un descanso de diez minutos para refrescarte antes de continuar. Nos vemos en la siguiente. 3. Animación de la interfaz de usuario de rebote: Hola, y bienvenidos de nuevo. En esta lección, vamos a crear un movimiento hinchable para el panel de interfaz de usuario que ves aquí Pero antes de saltar a la animación, déjame mostrarte rápidamente cómo configuré la escena. Entonces tengo una precomp principal de mi avatar, y si abrimos los precomps para esta lección, verás que hay uno para la imagen de Avatar y otro para el imagen de Avatar y otro para Dentro de la precomp de imagen Avatar, quiero darte un consejo rápido Cuando trabaje en escenas como esta, evite hacer que sus dimensiones de precomp sean demasiado grandes. Es mejor trabajar con pequeñas dimensiones ya que no necesitamos ver esta imagen de cerca. Además, al igual que en la lección anterior, utilizo la función Track Mat para enmascarar la imagen con un círculo que creé usando la herramienta Elipse Ahora vamos a explorar la comp principal de avatar. Aquí tengo el resto de las capas, incluyendo la precomp de botón, que es solo un simple rectángulo redondeado con un trazo y una capa de texto Bien, cerraré esos precomps y entremos en la animación Esta escena, quiero crear una animación de introducción para el panel UI, pero quiero que sea más interesante Quiero agregar algo de movimiento secundario y hacer que se mueva de manera hinchable Una vez más, realmente no sé qué expresiones usar, pero sí sé cómo quiero que se vea la intro En mi caso, quiero que el panel entre a la escena desde abajo. Así que vamos a crear esa animación básica muy rápido. Primero, abramos la propiedad de posición. Podemos acercar la línea de tiempo para ver los códigos de tiempo con mayor claridad. Como quiero que la precomp termine en su posición actual, iré a, digamos, la segunda y crearé ahí un fotograma clave A continuación, iré al inicio de la línea de tiempo y moveré la precomp hacia abajo fuera del marco Entonces ahora tenemos una animación muy sencilla. Antes de agregar cualquier Es fácil a los fotogramas clave, tomemos una captura de pantalla rápida de la escena y pidamos hat GPT que nos ayude a hacer rebotar esta animación Asegúrese de que la propiedad position esté abierta para que GPT pueda ver los fotogramas clave que hemos creado. Todo bien. Ahora vamos a Chat GPT. Y en lugar de continuar el chat de la lección uno, comencemos una nueva conversación haciendo clic en el nuevo icono de chat. Genial. Ahora podemos pegar la captura de pantalla y comenzar a chatear. Primero, empieza siempre diciéndole a GPT qué software estás usando A continuación, describe lo que estás tratando de crear. Y antes de seguir adelante, tengo una pregunta para ti. ¿Cómo debemos terminar nuestro mensaje antes de que GPT nos ayude? Así es. Tenemos que preguntar, ¿entiendes a lo que me refiero? Ese es el paso más importante. Queremos que GPT nos devuelva a describir nuestra visión antes de que dé una solución ¿Sólo entonces podemos estar seguros de que va por buen camino? Por lo que GPT ya preparó la expresión y explicó cómo aplicarla. También nos dio algunos consejos por si queremos ajustar los ajustes de rebote. Esto es lo que él piensa que queremos lograr. Como pueden ver, lo consiguió muy bien, e incluso mencionó un nuevo término más preciso para lo que estamos tratando de crear. Sabe que queremos crear una animación de sobreimpulso y rebote Ya preparó la expresión y explicó cómo aplicarla. Y también sugirió qué hacer en caso de que queramos ajustar algunos de los parámetros del movimiento de sobreimpulso Bien, vamos a copiar la expresión y aplicarla a nuestra animación de posición para ver qué pasa. I Impresionante. Ya tenemos un bonito efecto hinchable. Pero en mi opinión, la animación se siente un poco lenta. Vamos a traer el último fotograma clave un poco antes en la línea de tiempo. Colóquelo alrededor del marco 20. Ahora, aleje la vista previa y compruebe si la expresión que le dio GPT también está desencadenando un sobreimpulso en el Si lo hace, no te preocupes. Solo vuelve al chat y pídele a GPT que haga que el efecto de rebote de sobreimpulso se aplique solo al segundo Bien, volvamos a la lección. Ahora, vamos a facilitar fácilmente los fotogramas clave y ver qué tenemos Como puede ver, el efecto rebote apenas es visible ahora, y eso se debe a que la velocidad de los fotogramas clave cambió después de la En ese caso, podemos seguir sugerencia de GPT y ajustar la cantidad de rebote en la expresión Aunque no sepas nada de expresiones, GPT suele escribirlas con notas cortas en su interior Entonces sabrás qué valores afectan más al movimiento. Todo lo que tenemos que hacer ahora es probar diferentes valores hasta que encontremos algo que nos guste. Primero, voy a cambiar el valor de rebote en pequeños pasos. Entonces intentaré un salto más grande para ver qué me da. Te estoy mostrando esto porque quiero que te sientas libre de cambiar los valores y jugar con los escenarios cuando practicas por tu cuenta. Nada malo realmente puede pasar. En el peor de los casos, solo presionas deshacer o pedir ayuda nuevamente a GPT Bien, ahora que encontramos un valor de rebote que funciona, quiero arreglar una pausa que está sucediendo en la animación Es importante que entiendas por qué esa pausa está ahí. Realmente simple. Cuando facilitamos fácilmente fotogramas clave, su velocidad cambia. Y como puedes ver aquí en el editor de grafos, la velocidad a este fotograma clave final es actualmente cero Para solucionar esto, podemos convertir el fotograma clave final de nuevo a lineal manteniendo presionado el control o comando en Mac y haciendo clic en él una vez Ahora, la velocidad es de alrededor de 13 54 píxeles por segundo. Antes estaba atascado en cero. Ahora tenemos moción otra vez. Por lo que ahora la animación continuará sin problemas con el efecto rebote. Pero como puedes ver, es un poco demasiado en este momento, y es porque originalmente lo ajustamos en función del fotograma clave facilitado Pero ahora tenemos un fotograma clave lineal regular. Así que ahora afinaremos de nuevo los ajustes de rebote para que coincidan con la nueva velocidad. Te estoy mostrando este proceso porque quiero que explores y te pongas manos a la obra cuando sea necesario. No tengas miedo de probar las cosas. Es la mejor manera de aprender rápidamente. Ahora, hagamos que la animación comience más lentamente tirando del asa del primer fotograma clave hacia la derecha. En mi opinión, ya se ve increíble, y estamos listos para seguir adelante. Por supuesto, siempre puedes cambiar los valores para obtener un aspecto ligeramente diferente si quieres. Pero ahora quiero que esta animación se vea aún más dinámica agregando una animación de rotación simple junto con la posición. También intentaré agregar un divertido movimiento hinchable a la rotación, si eso es posible Entonces comencemos por crear la animación de rotación. Seleccione la capa, presione R y luego vaya al fotograma 20. Cree un fotograma clave aquí. Esta será la posición final de rotación. Después regresa al inicio de la línea de tiempo y gira la precomp Vamos a girarlo a 25 grados y ajustar la posición en ese punto para que panel de la interfaz de usuario quede oculto fuera de la pantalla. Bien, se ve bien, pero quiero volver a Chat GPT e intentar llegar a una animación más interesante Sólo vamos a decirle lo que hicimos y lo que queremos lograr. Quiero que la rotación se sienta un poco mojada. Y como no estoy seguro de explicarme claramente, preguntaré a GPT. ¿Entiendes a lo que me refiero? Ahora puedo ver algunas explicaciones, y GPT está usando términos como jitter o movimiento tembloroso Entonces tal vez le pida que haga que la capa se mueva un poco y luego se detenga A ver si entiende la tarea. Después de leer la explicación, todavía no estoy seguro de que sea a lo que me refería. Entonces en ese caso, solo lo probaré y corregiré GPT si es necesario Esa es la parte útil de explorar la IA y los efectos posteriores. Realmente quiero que sigas estos mismos pasos y que no tengas miedo al probar las cosas por tu cuenta. Bien, entonces ahora veo que la moción es un poco jiggly, pero aun así no se ve como me Antes de volver al chat, intentaré ajustar algunos de los valores en la expresión para ver si eso ayuda. Después de algunas pruebas, todavía no consigo el movimiento exacto que quiero, así que cancelemos la expresión, y ahora volvamos al chat y explicarlo mejor. Empezaré diciendo: Esto no es exactamente a lo que me refería, y luego describiré mi idea de una manera aún más sencilla. Como siempre, terminaré preguntando, ¿Entiendes a lo que me refiero? Esta vez, dice GPT, entiendo completamente. Entonces veamos si eso es cierto. Impresionante. Esto es exactamente lo que yo buscaba. Ahora puedo jugar con los valores y retocar las cosas hasta que se vea perfecto Así que juguemos con estos tres valores bajo la sección de configuración en la expresión. Todo bien. Creo que se ve bien. Después de eso, ajustaré los fotogramas clave y veré cómo interactúan con la expresión de rotación Se ve genial ahora. También ajustaré la velocidad para que coincida mejor con el movimiento de posición. Nuevamente, fue muy importante para mí mostrarles este proceso de ida y vuelta con GPT A veces no obtenemos lo que queremos de inmediato, pero si explicas las cosas con claridad, GPT lo conseguirá eventualmente Bien. Ahora que hemos creado la introducción para el panel UI, vamos a entrar en la precomp y crear algunas micro animaciones geniales dentro En este caso, quiero agregar algo de animación a escala hinchable a capas como la imagen Avatar, la estrella y el botón Para las otras capas, podemos reutilizar la animación de posición hinchable que creamos anteriormente para la precomp principal Así que volvamos a chatear GPT y pedirle que cree una animación a escala de rebote o pop up También podemos mencionar que queremos que sea similar a la animación de posición de popping que usamos anteriormente Entonces aquí tenemos todas las explicaciones y sugerencias para la animación a escala pop up. Volvamos al proyecto y creamos la animación a escala para la imagen Avatar para que podamos agregarle GPTSepression Al igual que antes, ya que quiero que la escala final sea lo que es al final de la animación, iré al fotograma 20 y crearé un fotograma clave con el valor actual Después al inicio de la línea de tiempo, pondré la escala a cero. También puedes aislar esta capa para que podamos enfocarnos solo en ella. Ahora que tenemos los fotogramas clave en su lugar, intentemos usar la expresión que GPT nos dio Genial. Funciona perfectamente. Ahora, voy a ajustar la flexibilización, para que coincida con la animación de posición que creamos para el panel principal de la interfaz Después de eso, jugaré con los ajustes de expresión para ver qué se ve mejor para esta capa específica. Bien, vamos a aplicar la misma expresión al siguiente elemento que queremos sacar. Hagámoslo para la precomp del botón. Primero, cree la animación de escala y luego aplique la expresión. Simplemente seleccione la capa y pegue la expresión. Veamos cómo se ve. Ahora, ajusta la velocidad y modifica el efecto rebote hasta que se sienta justo para esta capa Impresionante. Esto se ve genial. Hagamos lo mismo por la estrella y el gran número. Ahora, para aplicar la expresión, selecciona ambas capas y pulsa Control V. Veamos cómo se ve. Como la capa numérica es bastante pequeña, prefiero hacer que el rebote sea un poco más notorio así que aparece muy bien. Eso también se ve genial. Ahora, vamos a crear una animación pop up para el icono que tengo aquí. Este archivo es realmente grande, pero lo bajé a un valor muy pequeño Entonces veamos si la expresión aún funciona en ella. A veces, GPT podría crear una expresión basada en el valor de escala real de la capa, y que podría no funcionar bien para cada capa, especialmente si todas están escaladas Si eso te pasa, solo vuelve a GPT y pídele que construya la expresión usando porcentajes como lo estamos haciendo ahora Si te encuentras con algún problema, solo explica que estás trabajando con capas que tienen diferentes valores de escala, y quieres una animación emergente universal que funcione sin importar cuál sea la escala de capas. Todo bien. Ahora que hemos terminado las animaciones de escala emergente, vamos a crear una introducción de posición simple para las capas de texto Primero, vaya al fotograma 20 y cree un fotograma clave para su posición actual Luego regresa al comienzo de la línea de tiempo y mueve las capas de texto hacia abajo y fuera del marco. Ahora, copie la misma expresión de posición hinchable que usamos para el panel principal de la interfaz y péguela en las capas de texto Por último, ajuste la flexibilización y vea cómo se ve. Eso se ve genial, pero sí tenemos un pequeño problema. Se pueden ver las capas de texto entrando a la escena fuera de los bordes de la forma azul principal. Tengo una pregunta para ti. ¿Qué tenemos que hacer para arreglar esto? Necesitamos hacer que las capas de texto usen el tapete alfa de esa forma. Entonces solo vuelve a encender la visibilidad de la capa de forma. Ahora, todo se ve perfecto. Tenemos el texto visible solo dentro de la capa de forma. Lo último que tenemos que hacer es cronometrar las micro animaciones que creamos dentro del avatar pre comp para que coincidan con la animación en la comp principal. Comencemos la animación de introducción para las capas dentro de esta comp desde el fotograma 15 En este punto, puedes arreglarlo como quieras. En mi caso, quiero que las capas de texto ingresen primero a la escena, así que empezaré con el nombre entrando. Después después de dos fotogramas, la siguiente línea de texto. Después de eso, haré que aparezca la imagen del avatar seguida del icono. Y finalmente, terminaré con la estrella, el número y el botón. Ahora, vamos a revisar la animación y ver cómo se ve todo junto en la comp principal. Creo que la animación interna debería comenzar un poco antes. Intentemos Intentemos moverlo para encuadrar cinco. Sí, eso se ve mucho mejor. Y con eso, terminamos esta lección. Espero que te haya dado un poco más de confianza para salir y empezar a automatizar tus propias animaciones Además, espero que esta lección te haya ayudado a ver que a veces es mejor no crear un solo controlador para todas las capas como hicimos en la Lección uno. En este caso, fue una opción más inteligente controlar cada capa por separado y ajustar los valores uno por uno. Dicho esto, ahora estamos listos para pasar a la siguiente lección donde crearemos un efecto de hover muy genial para los íconos Va a ser increíble, así que nos vemos ahí. 4. Configuración avanzada de la animación del desplazamiento: Regresa. En esta lección, quiero enseñarte a crear una configuración avanzada de animación de desplazamiento Pero antes de comenzar, déjame explicarte por qué precompongo mis íconos en lugar de usar las capas originales La razón principal es que cada icono tiene un tamaño diferente. Si los animara tal cual, la escena sería mucho más difícil de controlar. Cuando trabajas en escenas como esta, te sugiero hacer lo mismo. También hace que sea muy fácil intercambiar íconos en el futuro si alguna vez lo necesitas. En cuanto al tamaño pre comp, sugiero trabajar con pequeñas dimensiones, algo así como 300 píxeles tanto para ancho como alto debería estar bien. Usa dimensiones más grandes solo si sabes que los iconos aparecerán de cerca en tu vista. En fin, como pueden ver, el tamaño de esta capa de iconos es muy grande, y la bajé a 14 Lo mismo para el icono de Illustrator. Vinieron en el mismo tamaño original. Pero el ícono de Photoshop tenía un tamaño original diferente, así que escalé ese a 46 Y para el icono de Figma, utilicé una escala de 33. Mi objetivo era hacer que todos aparecieran del mismo tamaño visualmente, y por eso los precompongo y utilizo las mismas dimensiones para todos los precomps Muy bien, entonces espero que entiendas la idea. Ahora, comencemos a construir la configuración que se cierne. Imaginemos que no tenemos idea de qué hacer primero. Entonces vamos a pedirle a Chat GPT que nos ayude. Con eso en mente, tengo una pregunta para ti. ¿Qué nos ayudará a explicar la situación a Chat GPT con claridad Necesitamos tomar una captura de pantalla de nuestra escena. Entonces hagámoslo muy rápido. Asegúrate de que tu captura de pantalla incluya el panel de vista previa y el panel de capas. Aquí hay una pequeña propina de bonificación. Para mejorar la claridad de tu mensaje a GPT, puedes dibujar un boceto rápido o una flecha en tu captura En este caso, estoy dibujando una flecha desde el cursor hasta el icono. Todo bien. Entonces ahora copiemos esta captura de pantalla y volvamos al chat GPT Vamos a crear una nueva conversación y pegar la captura de pantalla en. Y como siempre, comencemos diciéndole qué software estamos usando. Entonces intentemos explicar la animación que estamos tratando de crear. No te preocupes por cometer errores gramaticales. Solo trata de ser lo más específico que puedas. Esta vez, ya le diré a GPT que quiero controlar los diferentes parámetros del efecto hover porque tal vez quiera cambiarlos Voy a mencionar los parámetros que ya conozco, y también le preguntaré a GPT si hay otros parámetros que me faltan que puedan mejorar la configuración Y como siempre, terminemos preguntándonos , ¿ entiendes a lo que me refiero? Entonces aquí tenemos todos los pasos que necesitamos, y puedo ver que GPT realmente agregó un parámetro realmente agradable en el que ni siquiera pensé, que es poder controlar el tamaño predeterminado de los iconos Genial. Así que sigamos adelante y veamos qué más tenemos. Noté en el paso tres que GPT explica cómo hacer que el movimiento sea más suave Eso me dio la idea de preguntar si podemos agregar este parámetro al controlador para que podamos ajustarlo sin tener que abrir el manual de expresión. Y aquí está. GPT también nos dio la expresión para ese parámetro Entonces ahora sigamos los pasos desde el principio. Primero, volvamos a nuestro proyecto y creamos una capa controladora usando un objeto nulo. Asegúrate de nombrar esta capa exactamente como sugirió GPT, porque si los nombres no coinciden, la expresión no funcionará Todo bien. A continuación, vamos a crear los tres deslizadores y etiquetarlos exactamente como él recomendó Ahora, ajustaremos los valores predeterminados para cada controlador, tal como nos dijo GPT Y antes de aplicar las expresiones, agreguemos también ese controlador final para movimiento suave y fijemos el valor predeterminado como se sugiere. Ahora, copiemos la expresión de escala actualizada creada por GPT y peguéela en la propiedad scale del primer icono Déjame redimensionar un poco este panel. Si tienes problemas para abrir el campo de expresión, no te preocupes. Simplemente cancele la expresión actual y haga clic Alt en el Cronómetro nuevamente. Todo bien. Después de pegar la expresión, veo un error, así que haré clic en la expresión para revelar el mensaje de error, luego usar el atajo para abrir la herramienta de captura de pantalla y tomar una instantánea de la misma Asegúrate de que tu captura de pantalla incluya el mensaje de error completo. Eso es muy importante. Ahora, pega esa captura de pantalla en el chat de GPT y deja que se encargue del problema Aquí podemos ver la explicación. Parece que el problema es con un nombre que usé. Podría haber escrito algo mal, pero aunque no veas un error, todavía te sugiero que borres el nombre y lo vuelvas a escribir manualmente Como expliqué en la Lección uno, copiar nombres desde afuera a veces causa errores raros. Y ahí vamos. El error se ha ido, y la expresión funciona perfectamente. Genial. Ahora podemos empezar a jugar con los parámetros para ver cómo afectan el movimiento y el aspecto general de la escena. Ahora, antes de aplicar esta expresión a todos los demás precomps, intentemos mejorar el efecto de desplazamiento haciendo que el icono se mueva ligeramente hacia arriba cuando el cursor Volvamos a GPT y le digamos que queremos que el icono o precomp se mueva hacia arriba sin problemas cuando se Impresionante. GPT sugiere agregar otro controlador para que podamos ajustar este parámetro cuando queramos. Hagámoslo muy rápido. Ahora, aplique la expresión a la propiedad position, tal como nos dice GPT Vamos a echarle un vistazo. Intenta cambiar el valor en el nuevo deslizador para ver qué se ve mejor. Una vez que estemos contentos con cómo se ve, podemos copiar las expresiones de esta capa y pegarlas en el resto de los precomps de iconos Todo se ve genial, y la mejor parte. Ahora estamos controlando todos los iconos desde un solo controlador. Puedes cambiar todos los valores de los parámetros en cualquier momento que quieras. ¿Qué tan genial es eso? Incluso puedes darle la vuelta al efecto. Entonces, en lugar de que los íconos crezcan al pasar el mouse, se encogen. Así que ahora incluso podemos revertir el efecto, hacer que los iconos se encojan cuando se ciernen en lugar de crecer. Todo bien. Voy a restablecer todo de nuevo a la normalidad. Y ahora comencemos a animar la capa del cursor. En este punto, como siempre, puedes crear cualquier tipo de animación que desees. No tienes que copiar exactamente lo que estoy haciendo. Mi principal objetivo en este curso es ayudarte a aprender a construir configuraciones de expresión usando IA, no enfocarte en el diseño detallado de animación Y espero que a estas alturas estés empezando a darte cuenta de lo fácil que es generar sistemas de expresión complejos que solían tomar mucho tiempo para aprender y crear manualmente todo gracias a la IA. Yo Bien, creo que mi animación se ve bastante bien, y con eso, hemos terminado esta lección Puedes seguir adelante y abrir la siguiente lección y cerrar esta. En la siguiente lección, vamos a aprender a hacer un efecto de desplazamiento genial para los botones en lugar de los iconos También hablaremos sobre qué hacer en situaciones en las IA se niega a darnos el resultado que queremos por mucho que lo intentemos. Va a ser increíble, así que te veré ahí. Pero antes de saltar al siguiente, recomiendo tomar un descanso de diez minutos. 5. Automatización del cambio de color sobre el cursor: Hola, y bienvenidos de nuevo. En esta lección, vamos a crear un efecto de cambio de color fresco, y también hablaremos sobre qué hacer cuando nos encontramos con problemas molestos con sombrero GPT Como siempre, déjame mostrarte rápidamente cómo construí esta escena sencilla. Lo que tengo aquí son sólo unos precomps que representan botones Dentro de cada precomp, hay una capa de texto y un rectángulo redondeado Es importante saber que todos los métodos que utilizamos en este curso funcionan igual de bien con capas regulares también. No tienes que usar precomps si no quieres. Bien. Ahora, comencemos a construir la expresión. Quiero que los botones cambien de color cuando pase el cursor sobre ellos Lo primero es lo primero, tomemos una captura rápida de la escena y las capas. Ahora, copiemos la captura de pantalla, diríjase al chat GPT, iniciemos una nueva conversación y la peguemos Entonces describiremos nuestra idea de una manera muy sencilla. Como no tenemos idea de cómo hacer que el color cambie, solo le preguntaremos a GPT qué efectos debemos usar y cómo hacerlo Y como siempre, terminaremos preguntando, ¿Entiendes a lo que me refiero? Todo bien. Entonces aquí tenemos el proceso completo, y también podemos ver los efectos que sugirió GPT Creo que el efecto de tinte es mejor en este caso, ya que proviene de la familia de efectos de corrección de color . Entonces noté que GPT creó una expresión para el efecto de relleno Pero por ahora, ignoremos eso y volvamos al proyecto para entender qué hace realmente el efecto tinte, ya que ese es el que quiero usar. Busca el efecto en el panel de efectos y presets y agrégalo a uno de los precomps de botón Ahora cambiemos los colores dentro del efecto de tinte para obtener el aspecto que queremos cuando el botón se haya cercado Una vez hecho esto, revisa la cantidad para matizar la propiedad. Esto controla la fuerza con la que se aplican los nuevos colores. Pero digamos que no nos dimos cuenta GPT creó la expresión para el efecto de relleno, y copiamos esa expresión y pegamos en la propiedad amount to tint Como probablemente adivinaste, recibiremos un mensaje de error Ahora, digamos que no entiendo el error, pero aún así quiero arreglarlo. Primero, podemos cancelar la expresión. En situaciones como esta, lo mejor que hacer es tomar una captura de pantalla de tu configuración actual y asegurarte de que GPT pueda ver claramente qué efecto estás usando Después pega la captura de pantalla en el chat y dile a GPT, estoy usando el efecto de tinte ¿Me puede decir dónde exactamente debo pegar la expresión? Y de inmediato, GPT nos da nuevos pasos en una expresión laboral Copiemos eso y lo probemos en el proyecto. Bonito. Funciona. Pero honestamente, no me encanta cómo el efecto solo se activa cuando el cursor está en el centro del botón. Y no soy fanático de la rara mezcla de colores de medio tono que ocurre cuando el cursor se acerca al centro Digamos que no entiendo por qué sucede eso. Solo quiero que el cambio de color ocurra instantáneamente cuando el cursor toque el botón. En ese caso, solo vuelve a GPT, dile que no te gusta el comportamiento actual, y describe lo que quieres en su lugar como si estuvieras hablando con un asistente A después de explicar, GPT creará una nueva expresión para nosotros. Vamos a copiarlo y pegarlo en el panel de expresión. Impresionante. Ahora se ve mucho mejor. Intentemos colapsar la pre comp para verificar si algo se rompe o necesita ajustarse en la expresión Todo todavía se ve genial, así que estamos bien para seguir adelante. Así que ahora hemos aplicado expresiones a efectos y propiedades básicas de capa. Pero vamos un paso más allá e intentemos usar expresiones en estilos de capa. Por ejemplo, haga clic derecho en la precomp, vaya a estilos de capa y agregue un efecto de trazo Abra los ajustes de trazo, establezca el tamaño en diez y cambie el color a blanco. Ahora, quiero que este trazo aparezca sólo cuando el botón se cierne. De esa manera, crearemos un efecto de desplazamiento más único y dinámico Toma una captura de pantalla de esta configuración actualizada y vuelve a Chat GPT En el chat, describe brevemente la situación y explica lo que quieres que suceda. Y ahí está. GPT nos dice que apliquemos la expresión a la propiedad de opacidad del efecto de trazo Hagámoslo y veamos qué pasa. Genial. Se ve realmente genial. Ahora podemos copiar este estilo de capa desde la primera precomp y pegarlo en el resto de los precomps de botón Después de confirmar rápidamente que funciona, hagamos lo mismo para el efecto de tinte. Copiarlo y pegarlo a los demás. Me ve increíble. Todo funciona perfectamente. Ahora, vamos a crear una animación rápida para que el cursor practique un poco. Como de costumbre, puedes animarlo como quieras. Pero no dediques demasiado tiempo a ello. Queremos avanzar y seguir explorando lo que la IA puede ayudarnos a construir. Por ejemplo, quiero que el propio cursor cambie de color cuando pasa el cursor sobre un botón. ¿Por qué? Porque en algunas escenas como esta, el contraste entre el color de desplazamiento y el cursor no es lo suficientemente fuerte El cursor se vuelve, pero primero terminemos la animación, y luego intentaremos usar IA para ayudarnos a generar la idea y la solución para hacer que el cursor sea más notorio al pasar el cursor Todo bien. Entonces, una vez que estemos contentos con la animación, comencemos a trabajar en el cursor cambiando la automatización del color. Tomemos una captura de pantalla mostrando el cursor pasando el cursor sobre el botón y enviarlo a GPT para que pueda entender nuestro problema visualmente Una vez pegados, explicaremos qué queremos hacer y cómo esperamos resolver el problema O. GPT sugiere usar el efecto de relleno en el cursor y luego usar la expresión en la propiedad color de este efecto Entonces sigamos los pasos. Primero, necesitamos agregar el efecto de relleno en uno de los precomps de botón A continuación, cambiemos el color. Digamos al amarillo. También podemos reducir un poco la forma del cursor, establecer el tamaño en 65. Y ahora peguemos la expresión que GPT nos dio en la propiedad que sugirió Veo que el cursor no cambia el color en absoluto, aunque intentemos cambiarlo manualmente. Pero no pasa nada. El color no cambia. Hemos pegado la expresión en la propiedad correcta, así que ahora vamos a decirle a GPT lo que pasó Preguntaremos si tal vez es mejor controlar la opacidad del efecto en su lugar Eso funcionó cuando antes usamos opacidad para el estilo de capa de trazo Bien, entonces copiemos la nueva expresión de GPT y volvamos al proyecto Cancelar la expresión en la propiedad color y en su lugar aplicarla a la opacidad del efecto de relleno Aún así, no pasa nada. Ahora bien, el cursor es invisible por alguna razón, aunque no tengamos ningún error de expresión. Sigamos intentándolo. Toma una captura de pantalla de la situación y díselo a GPT. Aplicamos la expresión, pero ahora no podemos ver el cursor en absoluto. Un GPT responde con una explicación más larga y una nueva versión de la expresión Vamos a darle una oportunidad. Copia la expresión, y repasemos rápidamente el resto de la explicación para ver si hay algo importante que podamos necesitar. Digamos que realmente no entendemos lo que está diciendo. Así que volvamos al proyecto y peguemos la nueva expresión. Bien, todavía no puedo ver el cursor en absoluto. Cambiar los valores no hace nada. Honestamente, después de intentarlo más de dos veces, estoy empezando a sentir que tal vez este enfoque simplemente no funcione. Cuando reviso la animación, no pasa nada. Así que claramente, algo anda mal aquí. Podemos cancelar la expresión, y además, en situaciones como esta, prefiero simplemente probar un enfoque completamente diferente. Así que vamos a eliminar el efecto de relleno del cursor y probarlo con el efecto de tinte en su lugar porque eso funcionó mejor antes. Entonces agreguemos el efecto de tinte al cursor, luego cambiemos el color a amarillo y ahora tomemos una nueva captura de pantalla y volvamos al chat, et GPT sabemos que el efecto de relleno no funcionó, y ahora queremos probar tint Déjalo hacer lo suyo. Después copia la nueva expresión. Podría ser un poco complejo y probarlo en el proyecto. Aún no funciona. No hay errores, pero el color no cambia. Vamos a intentarlo de nuevo y mostrarle la situación actual. Toma una nueva captura de pantalla y asegúrate de incluir la expresión en la imagen. Después de pegar la captura de pantalla, hágale saber que esta expresión no funciona Mientras tanto, mientras él está generando la respuesta, volvamos al proyecto y cancelemos la expresión. También podemos intentar cambiar el segundo color del efecto de tinte a amarillo. Quizá eso ayude. Todo bien. La nueva expresión está lista. Escanearé rápidamente su explicación y sugerencias para ver si hay alguna pista importante para esta configuración. No encontré nada crítico, así que vamos a copiar la nueva expresión y ver qué pasa. Aún no funciona. Ahora, antes iniciar una nueva conversación con el chat, quiero probar una última cosa. Volvamos al chat y le volvamos a decir que no está funcionando. Pero esta vez, también le daré algunos datos técnicos y le haré saber que la opacidad permanece en cero todo el tiempo A veces, agregar solo un pequeño detalle técnico como ese ayuda a GPT a comprender mejor lo que está pasando mal Entonces, vamos a copiar la nueva expresión y ver qué pasa. Impresionante. Esta vez, funciona perfectamente. Quería mostrarte todo este proceso para que entiendas que a veces necesitas cambiar tu enfoque, probar un efecto diferente o agregar un poco de detalle técnico para ayudar a la IA a ayudarte mejor. Recuerda eso al tratar con configuraciones complicadas como esta. Veamos la animación que acabamos de crear. Impresionante. Se ve bien. Ahora, antes de que terminemos, quiero darte una propina rápida. Anteriormente, agregamos un efecto de trazo a todos los precomps de botón Digamos que ahora quieres cambiar el color del trazo, pero no quieres hacerlo manualmente en cada uno, sobre todo si podrías cambiar el color nuevamente más tarde. Aquí hay un truco. Busque la propiedad de color usando la barra de búsqueda en el panel de línea de tiempo. Entonces ahora podemos ver la propiedad de color del trazo para todos los precomps Luego use el látigo de selección de la propiedad en sí, no el látigo de selección parental de capa para vincular todas las propiedades de color de trazo con la primera Haz esto para cada uno de los precomps de botón. Ahora, estás controlando el color del trazo para todos los botones desde un solo lugar. Esto funciona para cualquier propiedad efecto. Puedes usar este truco si no quieres o no necesitas configurar controladores complejos como hicimos en la primera lección. Otra forma inteligente de controlar las propiedades de un efecto desde una capa es copiarlo con los enlaces de propiedad. De esa manera, después de pegarlo en el resto de las capas de la escena, estarás controlando todas las propiedades de ese efecto desde una sola capa, y no necesitas formar las propiedades una por una. Y con eso, hemos terminado esta lección. Cerremos todas las capas y veamos la animación. Observe que aunque no tengamos muchas capas o efectos en la escena, los tiempos de renderizado de vista previa son súper lentos. Eso está sucediendo porque tenemos algunas expresiones complejas dentro de las capas. Decirte esto porque quiero que sepas que usar demasiadas expresiones en tu proyecto realmente puede ralentizarlo. Bien, la animación se ve genial, y podemos pasar a la siguiente lección Entonces vamos a abrirlo y cerrar el actual. En la siguiente, aprenderemos a crear una automatización de clics de cursor súper útil . Va a ser una gran. Entonces nos vemos ahí. 6. Automatización de los clics del cursor con marcadores: Regresa. En esta lección, aprenderemos a crear una automatización de clics de cursor súper útil enfocada en hacer que las capas reaccionen a la animación de clic del cursor. Para comenzar, primero vamos a crear la animación del cursor de clic. Y lo que quiero decir con eso es que quiero activar el clic del cursor sin crear fotogramas clave por cada clic Siempre que necesite una animación de clic para un cursor, es mejor tener el cursor en una precomp separada Entonces comencemos por crear el cursor. Y esta vez, hagamos que se vea hermosa. Seleccione la herramienta de elipse y defina el relleno para usar un degradado radial Nos ocuparemos de los colores en un segundo, así que no te preocupes si no se ve exactamente como el mío. A continuación, apague el trazo. Punta rápida. Si quieres cambiar el estilo de relleno rápidamente, simplemente coloca el cursor sobre el cuadro de relleno, mantén presionado Alt u Opción en Mac y haz clic Esto recorrerá los tipos de llenado. Lo mismo va para la caja de trazos. Ahora, mantén presionado Shift y dibuja un pequeño círculo en la escena. Vamos a establecer el tamaño en 100 para que todos estemos en la misma página. A continuación, alinéelo al centro y comience a editar el degradado. De mis pruebas de gradiente anteriores, tengo un montón de colores guardados. Los arrastraré para eliminarlos. Ahora, elige un bonito color para la primera parada de degradado. Asegúrese de que la opacidad esté establecida en 100. Haz lo mismo para el segundo color. Voy a elegir un rosa oscuro, y otra vez, asegurarme de que la opacidad sea de 100 Si desea agregar más paradas de color, simplemente haga clic a lo largo de la línea. Luego puedes elegir cualquier color para el nuevo punto. Si cambias de opinión, arrastra el tope de color fuera de la línea para eliminarlo. Ahora, para ajustar la apariencia del degradado, cambie a la herramienta de selección para revelar los manejadores de degradado. Acercar y ajustarlos para obtener el aspecto que deseas. Si accidentalmente hace clic en otro lugar y los manejadores desaparecen, simplemente vuelva a seleccionar la capa de forma de elipsis o abra la propiedad de relleno degradado desde dentro de la Si eso aún no funciona, puede ajustar los valores de punto de inicio o punto final manualmente. Eso hará que los mangos vuelvan a aparecer en el espectador. Todo bien. Ahora, agreguemos un poco de resaltado a la esfera para que se vea aún mejor. Haga clic derecho en la capa de forma, vaya a Estilos de capa y elija sombra interior. Abre la configuración del efecto, cambia el color a algo brillante. Y luego cambia el modo de fusión a pantalla para que se fusione con el color base. Ahora, verás el resaltado, ajusta los valores para obtener un aspecto suave y brillante Una vez que estés satisfecho con el diseño del cursor, pasaremos a crear la animación de clic real. Como mencioné antes, para automatizar los clics después, debemos precomponer el cursor Llame al nuevo cursor de precomp, asegúrese de que ambas casillas de verificación estén seleccionadas y haga clic en Aceptar Ahora ve dentro de la precomp del cursor. Aquí puedes crear cualquier animación de clic que quieras. Comenzaremos con algo simple y luego agregaremos algo de micro animación para mejorar el efecto. Entonces primero, vamos a crear una animación a escala simple. Le haremos diez cuadros de largo. Comenzaré en escala al 100%, luego lo encogeré hasta 70% y lo traeré de nuevo hasta 100. Ahora, facilitaré fácilmente los fotogramas clave y ajustaré el movimiento en el editor de gráficos para que se sienta más natural Se ve bien. Pero creo que podemos hacer que el click se sienta aún más fuerte. Así que volvamos y dejemos caer el fotograma clave del medio a 60 en lugar de 70 Sí, ahora mucho mejor. Ahora, agreguemos un poco de micro animación para que el clic se vea aún más genial. Algo así como un efecto pulsador. Entonces volveré a seleccionar la herramienta Elipse, pero esta vez, apagaré el relleno y activaré el trazo Lo colocaré de blanco y estableceré el ancho del trazo en cuatro solo por ahora. Ahora voy a crear un círculo un poco más grande. Hagámoslo 400 de tamaño, y lo alinearé al centro. Para la animación, iré al final de la animación de clic y estableceré un fotograma clave para la escala Después volveré al principio y pondré la escala a cero. Ahora también animaré el ancho del trazo. Al final de la animación, la pondré a cero. Y al principio, pongámoslo en 20. Probemos 60. Hmm. Probemos 40 en su lugar. Facilitaré fácilmente los fotogramas clave y ajustaré la velocidad, para que comience rápidamente y se flexione. Ahora, voy a mover esta forma ondulada detrás de la esfera principal. Vamos a previsualizar eso. En mi opinión, es demasiado rápido, así que seleccionaré todos los fotogramas clave. Y mientras mantengo presionado Alt u Option en Mac, arrastraré uno de los últimos fotogramas clave al fotograma 15 para estirarlo. Volvamos a jugar eso otra vez. Sí, se ve genial. Ahora que la animación de clic está terminada, vamos a limpiar las cosas. No queremos una precomp gigante sin motivo alguno. Así que vamos a cambiar el tamaño de la precomp para que se ajuste a la animación. Establezca tanto el ancho como el alto en 500 píxeles. Impresionante. Volvamos a la compilación principal y descubramos cómo activar esta animación de clic sin duplicar fotogramas clave cada vez que queremos que haga clic en el cursor Así que vamos a pedirle a nuestro nuevo amigo Chachi PT que nos ayude a automatizar el click Primero, toma una captura de pantalla donde podamos ver claramente el panel de vista previa y el panel Capas. Ahora, inicia una nueva conversación, pega la captura de pantalla y explica la situación. Es importante decirle a GPT que ya tenemos una animación de clic lista dentro del cursor pre comp Ya que esta tarea es bastante sencilla, y la expliqué claramente, no voy a preguntar, ¿Entiendes? Sólo voy a preguntar cómo hacerlo. Ahora, veo que GPT me dio dos opciones y ambas involucran la función de remapeado de tiempo Entonces entiendo que no importa qué método elija, necesitaré habilitar el remapeo de tiempo en mi comp de cursor He decidido ir con la segunda sugerencia de GPT, que utiliza una expresión que activa la animación usando marcadores A ver si eso funciona. Primero, habilite recorrelación de tiempo en la capa del cursor. Aún no pasa nada. Eso está bien. Volvamos al chat y copiemos la expresión que GPT nos dio para el tiempo remap propiedad Ahora regresa al proyecto. Alt haga clic en el Cronómetro junto a Remapeado de tiempo y pegue en la expresión no pasa nada. Eso está bien. Ahora, vamos a probarlo. Ve al segundo y agrega un marcador a la capa del cursor. Comprueba el acceso directo para agregar un marcador en tu dispositivo si no estás seguro Boom, funciona perfectamente. Ahora avanza otro segundo y agrega otro marcador. Bonito. Vamos a previsualizarlo de nuevo. Impresionante. Ahora, eliminemos los marcadores de prueba y creemos una simple animación de desplazamiento para el cursor a medida que se mueve sobre cada icono Por el momento, el movimiento del cursor es lineal, por lo que no se detiene al llegar a los iconos. En lugar de crear manualmente fotogramas clave de pausa, vamos a facilitar fácilmente todos los fotogramas clave de posición Esto hará que la velocidad disminuya a cero antes y después de cada una, lo que da un efecto de pausa. Si quieres afinar la flexibilización, puedes hacerlo manualmente en el editor de gráficos o simplemente usar el atajo Control Shift K o Command Shift K en Mac para abrir el panel de velocidad del fotograma clave y ajustar la influencia Ahora tenemos un bonito movimiento suave con pausas entre íconos Sigamos adelante y agreguemos marcadores en cada punto donde se detenga el cursor. De esa manera, la animación de clic se activará exactamente donde queramos con solo usar esos marcadores. Vamos a previsualizar todo el asunto. ¿Qué tan genial es eso? Estamos activando la animación de clic con solo colocar marcadores. No es necesario copiar fotogramas clave o capas onduladas manualmente. Imagina cuánto tardaría esto si tuviéramos que duplicar todos los fotogramas clave y capas por cada clic Ahora, llevemos esta automatización un paso más allá y hagamos que los iconos reaccionen a la animación de clic sin animarlos manualmente. Iré al punto donde los cursores se cierren sobre uno de los íconos y tomaré una captura de pantalla de la escena, asegurándome de que incluya los marcadores y los fotogramas clave que acabamos Después pegaré esa captura de pantalla en el chat GPT y explicaré lo que quiero hacer Esta vez, como no estoy 100% seguro haberlo explicado con claridad, le preguntaré a GPT ¿Entiendes a lo que me refiero? Me encanta preguntar eso porque GPT a menudo responde usando los términos profesionales correctos para lo que estoy tratando de construir para poder aprender a comunicar mejor estas ideas Bien, GPT entendió y me dio los pasos. Desde que agregué la captura de pantalla, ya sabe lo que hay en mi escena. Entonces todo lo que tengo que hacer ahora es seguir el paso final. Ese paso es aplicar la expresión a la propiedad scale del icono precomps Probémoslo en un icono y veamos qué pasa. Perfecto. Funciona muy bien. Pero no soy un gran admirador de cómo la animación a escala se siente un poco rígida. Entonces volvamos al chat y preguntemos si puede ser más suave. Como pueden ver, GPT ya anticipó y me preguntó si quiero que el movimiento sea más suave, así que diré que sí y esperaré la expresión actualizada Probemos la nueva versión. Impresionante. Eso se ve mucho mejor. Ahora que estamos contentos con los resultados, podemos aplicar esta expresión al resto de los iconos. Pero antes de que hagamos eso, tengo una pregunta rápida para ti. ¿Cuál es la forma correcta de copiar una expresión en after effects? Necesitamos usar solo la expresión de copia, no solo la copia regular. Se ve genial. Y con eso, terminamos esta lección. Espero que hayas aprendido muchas técnicas nuevas y lo más importante, útiles durante esta sesión. Gracias por mirar, y te veré en la siguiente. 7. Conclusión: Hola, soy yo otra vez. Yo sólo quería decir muchas gracias por acompañarme en este curso, y felicidades por terminarlo. Espero que aprendas muchas formas nuevas de usar la IA para acelerar tu flujo de trabajo de animación, y ahora te sientas más seguro usando expresiones. Si disfrutas del curso, agradecería que dejaras una reseña rápida. Me ayuda mucho. Gracias de nuevo por ver y te veré en la siguiente.