Guía avanzada para crear animaciones de UI | Lottiefiles

1. Introduccion: Hola a todos. Soy Bold Bt, y bienvenido a Advanced UI Guide to creating UI animations. Espero que vayas a aprender muchas cosas nuevas en este curso. Y en este curso, básicamente vamos a mirar múltiples aspectos nuevos. Este es el curso Advanced Lotti files, y retoma justo donde deja el curso intermedio En el interior, trabajarás con complementos complejos, aprenderás a solucionar los errores de exportación y renderizado que realmente rompen archivos de producción y animan las máscaras limpiamente Y un poco de mi experiencia es que he creado múltiples proyectos de Animaciones Lotti, y aparte de eso, he creado más de 100 animaciones que están en vivo en mi perfil de Latifis que puedes consultar También estoy certificado como creador ganador animativo de Latifitore, así como experto en Webflow, aftereffects framer, Figma, aftereffects framer Figma, Así que estoy deseando crear algo increíble juntos, y voy a mostrarles un trabajo realmente excelente que también he hecho para los clientes. Esta clase es para animadores que ya conocen fundamentos de los archivos de Lotti o han terminado el curso intermedio y que quieren pasar al trabajo de nivel de producción listo para el cliente Así que buena suerte a todos ustedes, y comencemos. 2. 01.Plugins complejos: Hola, bienvenido de nuevo. Bien, así que bienvenidos a la primera clase de este curso. Bien, entonces en esta clase, estaremos viendo cuáles son los plug ins que vamos a utilizar en este curso. Y al igual que el curso anterior, estos son solo para ayudarte a ahorrar tiempo. Puedes completar todo el curso sin comprar ninguno de estos. Bien, entonces vamos a sumergirnos ahora. Bien, entonces el primer plug in que vamos a estar usando es GifGun two Uno va a ser AEUX. Bien. Tienes que hacer clic en este enlace de GitHub, clic en él o simplemente puedes hacer clic en este, descargar uno. Bien. Y desde el inicio, solo puedes ver este video y aprender a qué hace. Bien, pero vamos a estar aprendiendo eso en la futura clase. Así que vamos a saltarnos eso. Um, solo puedes seguir adelante y descargarla. Bien. Y después de eso, el proceso para instalar esto ya está aquí, ¿de acuerdo? Este plugin es para dos software, básicamente, bien. Y uno de ellos es un boceto, y el otro es después de los efectos. Y el tercero es Figma. Bien. Y vamos a estar haciendo un vínculo entre Figma y después de los efectos. ¿Por qué estamos haciendo esto? Hay algunos problemas con los que podrías encontrarte mientras trabajas en Illustrator o tal vez no puedas permitirte Illustrator, digamos, y solo tienes acceso a los efectos posteriores, entonces puedes usar Figma en su lugar Bien, y además este plugin es gratuito. Debes usar esto para agilizar tu flujo de trabajo y evitar algunos errores que discutiremos. Bien, avanzando, y antes de seguir adelante, por favor mira este tutorial, y solo tienes que por favor tener en cuenta que te aseguras instalar este plugin tanto en software en after effects como en FicMA también para que funcione perfectamente porque entonces creará un puente entre dos softwares, y luego podremos importar archivos Bien, siguiendo adelante, después de haber instalado esto usando este método, y luego simplemente puede seguir adelante y también comprar este también. Esto va a ser fácil copia, y esto te va a ayudar mucho, también. Este es uno realmente barato, y te va a ahorrar mucho tiempo, y no solo es bueno para muchas animaciones. Te ayudará en cualquier y cada uno de los proyectos de after effects. Te lo garantizo. Bien. Y otro plug in que vamos a estar usando va a ser un plugin dentro de Figma, que es conseguir ondas Si quieres comprobar esto, solo tienes que escribir onda en la sección plug in y lo conseguirás las olas get. Bien. Y solo puedes usar esto para crear animaciones de olas. ¿Y cómo entramos en el detalle de eso? Entraremos en el detalle de eso muy pronto también en la próxima clase. Bien, entonces estaremos usando este plugin. Así que solo sigue adelante y descarga estos plugin en tu PC y estaremos bien para ir. Muchas gracias. 3. 02.Resolución de errores: Bien, entonces estamos de vuelta otra vez. Y entremos en los efectos posteriores, y empecemos a trabajar. Bien. Entonces en esta clase, lo que vamos a discutir son los problemas fundamentales, que era la sobrecarga enchufable. ¿Bien? Y era un enchufe de pago, como sabrás. Entonces fueron 55 dólares, cierto. Y puede ocasionar a veces algunos problemas. Vamos a seguir adelante y déjame mostrarte qué tipo de problemas puede causar. Bien, entonces estamos dentro después de los efectos. Ahora, vamos a seguir adelante y revisar nuestro diseño. Bien. Y vamos a abrirla dentro de Illustrator. Bien. Entonces este es un archivo SVG que me fue proporcionado por el cliente, ¿de acuerdo? Y necesitaban esto animado. Ahora, vamos a seguir adelante y seleccionar esto y tomar esto en after effects, pero vamos a comprobar el tamaño 1920 por 1920. Vamos a hacer una nueva comp y hacerla 1920. ¿Bien? Y tomemos estas capas en los efectos posteriores. Bien. Entonces, si notas que hay un pequeño problema, ¿de acuerdo? Como puedes ver, el gradiente de capa no coincide con el degradado aquí, ¿verdad? El gradiente está por debajo de aquí, y este gradiente tampoco es correcto. Este tiene el pelo verde, pero en realidad lo tiene aquí. Entonces el famoso uTuber Austin Bowens de Ray V Studio en realidad arregla este problema por solo tienes que editar el degradado dentro de los efectos posteriores, y eso solucionará Obviamente, podemos hacer eso. Pero, ¿ si fuera el logotipo de un cliente, verdad, y se suponía que entregarías un perfecto en la animación de su logotipo? ¿Y si editas su degradado manera incorrecta y si solo hubiera una versión ligeramente mala que creaste de su logotipo simplemente estropeando su degradado Entonces esto no es realmente recomendable, ¿verdad? Así que no deberíamos estar metiendo la pata con los temas de color y degradados de los clientes, Entonces en ese caso, lo que deberíamos estar haciendo es que deberíamos estar encontrando la manera de animar estos exactamente como son Otra forma que podría venir a tu cabeza es que tal vez podamos usar el archivo illustrator en su lugar. Vamos a seguir adelante y golpear guardar como. Solo volvamos aquí y copiemos esta ruta y sigamos adelante y péguela aquí, y llamaremos a esto lo convertiremos en un archivo de ilustrador de IA, y vamos a presionar guardar. Bien. Sólo vamos a golpear. Bien. Y ahora vamos a seguir adelante y tratar de traer esta animación de nuevo al archivo. Sólo dame un minuto. Creo que no se guarda en la ubicación correcta. Um, sí, hubo un error. Bien, lo haremos logo, anillo. Bien. Bien, entonces se guarda el archivo. Ahora vamos a cerrar esto y minimizar esto también. Vamos a usar esto en su lugar. Solo sigamos adelante en after effects e intentemos usar esto. Si usamos sistema de capas o capa de metraje, eso no importa, en realidad, porque cuando lo arrastramos aquí, como puedes ver, necesitamos que se convierta en capa de forma para que funcione en. Um, para que funcione en el archivo de Lottie. Pero siempre que conviertas las capas, esto hará que este gris ya que los gradientes no se pueden convertir usando capas de Adobe After Effects y convirtiéndolas en capas de efecto A After No va a crear el gradiente. Solo aplica el color del campo. Eso es. Solo se aplican colores de campo plano. No aplica el gradiente. Entonces, ¿qué hacemos ahora? Bueno, hay una solución, por suerte, y ya vamos a resolverlo. Bien, vamos a seguir adelante y abrir Figma, ¿de acuerdo? Y lo que vamos a hacer ahora es que vamos a arrastrar aquí este SVG. Y si tu diseño no está ya en SVG, lo que puedes hacer es simplemente abrir tu archivo AI proporcionado por tu cliente y simplemente guardarlo, guardarlo como, y simplemente convertirlo en un SVG y simplemente sentarte a salvo. Eso es. Y solo lo guardo versión 1.1 y funciona perfectamente. Pero si en algunos casos no funciona a la perfección, entonces obviamente puedes ajustar estos ajustes e intentar resolverlo también. Bien. Entonces ahora tenemos el SVG. Así que vamos a llevarlo a la Figma, ¿verdad? Es aquí. Y como puedes ver, los gradientes son exactamente los mismos que deberían ser, cierto Así que sólo voy a bajarlo un poco. Después de eso, solo voy a hacer clic derecho y solo voy a entrar en los complementos y luego entrar en la sección de desarrollo y luego presionar los complementos de AEUxPlugin, ¿ luego presionar los complementos de AEUxPlugin Y esto va a aparecer. Bien. Y luego sólo voy a seleccionar estas capas. Es importante que las capas estén dentro de un marco. Si no hay marco, entonces por favor cree uno y luego simplemente haga clic en este botón. Bien, dice tres capas y dos. Bien, así que vamos a entrar ahora en AE. Bien. Entonces, como puedes ver, ahora los gradientes son perfectos y algunas cosas a tener en cuenta, que son realmente importantes porque podría meterse con tu mente Habrá algunas capas adicionales también importadas cuando importe cualquier activo de FIGMA. Ahora bien, ¿por qué sucede esto? Realmente no lo sé, en realidad, pero realmente sé que estas son capas guía, así que solo tienes que seleccionarlas y simplemente eliminarlas, y no va a hacer nada, ningún daño a tu archivo. Bien. Y luego está esta capa vacía también. También puedes eliminar esta. Así que ahora solo hay dos capas, ¿de acuerdo? Y ahora nuestro gradiente es perfecto. Ahora bien, esto es realmente increíble. Y ahora, es realmente increíble que este plugin gratuito funcione mejor que un plugin de pago que es de $55 Pero obviamente, el uso de sobrecarga tiene ventajas porque ofrece mucho más, en realidad, y puedes trabajar de ida y vuelta en After Effects e Illustrator. Y además, es mucho más importante saber que Lister es un software de diseño, no un software de diseño de interfaz de usuario, en realidad Por lo que ofrece tantas más herramientas, y en realidad puedes diseñar con mucha más libertad dentro de Lister Pero al final, si no puedes permitirte esto, entonces simplemente puedes convertir tus activos al final en SVG y luego simplemente tomarlos Pigma y luego simplemente convertirlos en Ailiers Bien, entonces hay que tener esto en cuenta que habrá algunos brillos. Otra cosa que es realmente importante que hay que tener en cuenta es el tamaño del marco realidad va a convertirse en el tamaño de la com. Y también, cuando un cliente te envía un diseño, y si hay demasiados marcos dentro de un diseño, lo que realmente va a hacer After effects es que convertirá cada fotograma en un pre comp. Como dijiste había más marcos, ¿verdad? Había otro marco aquí. Probemos esto, tal vez funcione o tal vez no lo hará. Entonces déjame seguir adelante y probar esto. Simplemente hago clic en la selección de Santo. Entonces como puedes ver, creó este marco, y luego está este marco. Y entonces como pueden ver, creé otro marco, ¿verdad? También está este marco. ¿Bien? Entonces las capas están dentro de esto. Entonces el número de fotogramas que están en diseño, será la creación de marcos y marcos y marcos dentro después del efecto. Ahora bien, podría ser mucho desordenado cuando estás trabajando en un diseño de interfaz de usuario de AP tal vez porque habrá tantos marcos, ¿verdad Entonces, lo que vas a hacer en esas situaciones es que solo vas a seleccionar los marcos, y luego solo vas a reaccionar los elementos fuera de esos marcos, ¿de acuerdo? Y luego solo puedes eliminar las capas. Y si el diseñador realmente usó autoayout, ¿verdad? Y así cuando quites los elementos del marco, ellos se van a mover aquí y allá. Entonces entonces solo tienes que apagar el diseño automático, en realidad. O otra cosa que puedes hacer es que puedes simplemente tomar todos estos activos Bien, en after effects, digamos, solo escribamos una vez más. Vamos a seleccionarlo y hacerlo una vez más. ¿Bien? Las capas se envían ahora. Bien. Ahora lo que puedes hacer es simplemente abrir la comp, Bien. Bien, entonces las capas no están dentro del marco, como pueden ver. Por lo que no fueron exportados. Sólo hagámoslo una vez más. Simplemente eliminemos todos estos primero. Bien. Y vamos a hacer con un nuevo comienzo. Vamos a hacer clic aquí. Bien, aquí se envían cuatro capas, bien. Hay una comp de marco, y luego dentro hay una comp de marco, y luego hay capas internas, ¿verdad? Entonces, lo que puedes hacer es que puedes simplemente seguir adelante y eliminar las capas guía, y luego puedes usar esta comp, en realidad, Control C, y luego simplemente cerrar todas estas y luego simplemente crear una nueva comp y luego simplemente pegarla ahí. ¿Bien? Y va a funcionar a la perfección. Puede utilizar este método para evitar los fotogramas adicionales y capas adicionales y ATC Bien. Así que tenemos la comprensión de este enchufe, en realidad. Entonces, ¿qué hace en realidad, verdad? Así que pasemos al siguiente plug in, que es este, el copy de la facilidad, derecho. Y lo que hace este plugin es eso, sigamos adelante y ahora voy a abrir la animación. Bien, bueno, solo dale No salve. Bien, entonces lo que vamos a hacer ahora es que voy a mostrarte un montón de ejemplos de proyectos, en realidad. Bien. Así que vamos a echar un vistazo a estos. Bien, entonces estas son bastantes animaciones que hice para nuestro cliente. Bien. Y como pueden ver, hay múltiples animaciones, ¿bien, verdad? Y en realidad hemos animado las partes dentro de aquí. Bien, como puedes ver, los dientes no se ven bien y luego se están arreglando. Si solamos la capa, puedes verla mejor. Vamos a ver solo, ¿verdad? Y luego la portada se pone encima de ellos y el efecto se completa, en realidad. Al igual que este solapamiento de mandíbula está cubriendo y fijando esto. Bien. Y vamos a seguir adelante, como se puede ver. Bien, así que asumamos que le envié una animación al cliente, y a él le encantó todo al respecto, ¿verdad? Y el cliente quiere que use exactamente la misma flexibilización, el mismo tipo de sentimiento en todos estos íconos, ¿verdad Entonces, ¿qué voy a hacer con lo correcto? Tenemos que tener algo en mente al respecto, que igualemos la flexibilización, ¿verdad Entonces lo que podemos hacer es decir que este fue el ícono que hice para el cliente. Um, ¿bien? Este fue el ícono que hice para el cliente. Y este momento es perfecto. Dice que le encanta, ¿verdad? Entonces quiero igualar la flexibilización. Asumamos que se trata de una flexibilización personalizada como esta. Bien. Quiero animar a todos los demás y copiar la flexibilización de esto ¿Bien? No los valores de posición, sino solo la flexibilización Entonces, ¿cómo hacemos eso? No podemos hacer eso con las características nativas en los efectos posteriores. Entonces usamos plugins para cosas como esta. Entonces lo que vamos a hacer ahora es hacer clic en el botón de copiar, y luego hay dos opciones en el panel de pegar, en realidad. Bien, lo que vamos a hacer es que vamos a darle a éste y luego voy a seguir esta capa. Entonces como pueden ver, ya he usado esto, creo, voy a seleccionar estos dos, y voy a darle a Es. ¿Bien? Entonces este proyecto en realidad es de tres años. Yo hice este proyecto hace tres años, así que tal vez no estaba usando plugins malos en ese entonces. Entonces sí, ahora es muy bueno volver a revisar mi trabajo y ver cuánta mejora he hecho. Y como puedes ver, ahora esto se verá mejor y consistente en todos los íconos de su sitio web, ¿verdad? Por lo que el cliente estará más feliz muy probablemente. Bien, así podemos ajustar esta flexibilización también, ¿verdad? Y solo juega a éste de nuevo. C, ¿verdad? Entonces este plugins es realmente útil en esos términos. Y la otra cosa que puedes hacer es que también puedes valorar las copias también. Digamos que queríamos otra capa detrás de ella. Vamos a duplicar éste. Bien. Y no había fotogramas clave en éste Y esta era otra capa, y tenía algunos problemas en ella, digamos, ¿de acuerdo? Entonces tenía cavidad en su interior. Bien, vamos a reducir la escala también, solo hazla por aquí, tal vez. Bien. Y solo ajusta el camino también porque es una cavidad. Así que vamos a arruinar el camino. Bien. Mi mal. Yo sólo lo arreglo ahora. Bien, ¿verdad? Entonces hay dos formas, en realidad podemos padre de la capa así como lo hemos aprendido en el curso anterior. Pero digamos solo por alguna razón o tal vez tal vez quiero agregar algún offset realmente en la animación. Por eso no quiero que la capa también se apadrezca. Entonces lo que estoy pensando es que tal vez debería haber algún derecho compensado. Así que solo puedes seleccionar esta capa. Copia. En realidad ha copiado la flexibilización y el valor ambos, pero va a pegar lo que le decimos que pegue ¿Bien? Entonces lo que voy a hacer ahora es que voy a presionar P en mi teclado y presionar fotograma clave y solo hacer clic en valor ¿Bien? Ahora, dice, si estás copiando y pegando múltiples ess, debes seleccionar el mismo número de números o varios números de fotogramas a copiar Bien. Así que sólo voy a crear dos fotogramas clave. Bien. Y vamos a seleccionar éste, presionar Copiar, seleccionar estos, y voy a golpear valor. Ves, ahora copié el valor, ¿de acuerdo? El envejecimiento no ha sido copiado. Ahora sólo le pegaré a Es también. Por lo que ahora también se ha aplicado el envejecimiento. Bien. Entonces ahora quiero agregar algunos digamos offset. Así que solo lo haremos ahora. Bien. Bien, entonces está funcionando perfectamente, ¿verdad? Entonces este es el uso principal del plugin. Y ahora esta es realmente una suposición de uso muy simple. Pero como saben, en el curso anterior, hicimos bien toda una escena de animación de personajes. En esas situaciones en las que hay más de 150 capas que animamos, podemos simplemente animar una capa y perfeccionar su flexibilización y luego simplemente copiar esa flexibilización y colocarla en todas partes, ¿ Simplemente no tenemos que pasar por todos los extremos de 150 capas y luego seleccionarlos y luego facilitarlos manualmente. Entonces tal vez algunas capas se deseleccionen o se deseleccionen mientras hacemos el proceso Entonces lo que podemos hacer es simplemente aplicar flexibilización en una capa y luego copiarla y luego simplemente seleccionarlas todas y luego simplemente presionar Ease Entonces este es el uso principal de este plugin. Bien. Entonces ahora lo que vamos a hacer es que vamos a ver otro ejemplo de animación y vamos a estar usando otro plugin. Entonces sigamos adelante y hagamos eso ahora. Simplemente cerraremos este proyecto, y solo voy a crear una nueva comp. Bien. Y entonces sólo voy a hacer que sea 1080 por 1080. Bien, es sólo nombrarlo para bebe. Y ahora voy a seguir adelante y crear una elipse. Ahora va a hacer que sea un círculo. Bien. Sólo voy a hacer que sea de color azul. A mí me gusta este, ¿verdad? Um, más como uno morado. Bien. Lo hicimos, y ahora sólo voy a hacer que el trazo sea cero. Y yo sólo voy por delante. Ahora, digamos que había una flecha dentro de esto, bien. Y yo quería que esto fuera animado. ¿Correcto? Vamos a seguir adelante y crear una flecha muy rápido. Bien. Yo sólo voy a seguir adelante y hacer esto. Bien. Ahora, lo que voy a hacer es hacer el camino, y luego solo voy a hacerlo redondo, en realidad, así. Bien. Entonces sólo voy a duplicar esta. Yo solo rotaré esto 190 grados. Bien. Entonces sólo voy a abrir el camino de éste. Yo sólo voy a golpear a G. Vamos a hacerlo centro. En primer lugar, eso va a funcionar mejor. Bien, así. Voy a golpear el baño, va a golpear C y mi teclado, va a llegar al punto de anclaje aquí. Bien. Entonces nuestro botón ya está creado. Bien. Entonces ahora lo que voy a hacer es que quiero esta animación de olas. Quiero que el botón enfatice que en realidad ha habido mucho cargando o descargando. Entonces una animación de olas debería ir dentro de esto, ¿de acuerdo? Entonces, antes de hacer eso, esto no va a hacer ningún contraste, en realidad, ¿verdad? Entonces quiero que haya un trazo en el botón en realidad, también. Así que hazlo 20. Y vamos a hacerlo de un color más claro también. Así. Bien. Y entonces sólo voy a seguir adelante y hacer que este sea más largo así, ¿verdad? Y entonces tenemos que crear la animación interior, ¿verdad? Al igual que, queremos que este círculo esté animado. Bien, vamos a simplemente apagar nuestra sensación en realidad en la capa anterior. Lo que puedes hacer es hacer clic en este botón aquí mismo, y luego simplemente se desvanecerá. Simplemente barajaré entre las opciones, y ahora estamos vacíos Bien. Ahora estamos vacíos en el campo. Bien. Así que ahora solo voy a apagarlo, apague, ¿verdad? Y como pueden ver, solo tiene un trazo, así que solo voy a bloquearlo y solo voy a bloquear estos también. Ahora tenemos que crear una animación de onda. Ahora lo que podemos hacer es que no podemos usar el efecto wave warp en realidad porque dentro de Late no funciona, ¿verdad? Entonces tendremos que usar otra cosa porque no podemos usar este método. Hay otra técnica avanzada que me gustaría destacar, podemos usar, pero no es recomendable, en realidad. Lo que podemos hacer es que en realidad hagamos que sea una precom antes que nada, así te lo puedo explicar Vamos a controlar a Z éste. No. Bien, vamos a seguir adelante y precom este Círculo de olas, solo llamémoslo. Bien, y va a seguir adelante y hacer que sea rastreo automático. Vamos a entrar en capa. Voy a golpear Auto trace. Bien, solo voy a hacerlo Alpha, y tú también puedes ajustar la configuración, esto es solo para decirte lo que puede hacer. Bien, sólo voy a hacer 1 segundo antes de iniciarlo. Entonces mi software no tiene que pasar por la miseria de ir a animar y reparar Sólo voy a hacer que se aplique, ¿de acuerdo? Ahora, como puedes ver, hay múltiples puntos en el camino, a la derecha, y está animado. Ahora lo que puedo hacer es seguir adelante y crear un rectángulo, en realidad, y solo voy a darle sensación de que va a dejar caer el trazo. Y yo sólo voy a copiar la máscara de aquí. Bien, y sólo voy a pegarlo por aquí. Sólo voy a meterme en la máscara. Vamos a apagar esto, y voy a hacer que se agregue, ¿verdad? Es y yo sólo voy a entrar en el rectángulo, en realidad, el camino del rectángulo, y va a arrastrarlo hacia abajo. Bien. Entonces ahora sólo vamos a jugar y ver. ¿Ves? La animación es compatible con Lottie ahora porque Lottie soporta máscaras, pero, pero, pero, pero, pero hay un problema Vamos a refrescar esta lista. ¿Bien? No es pking por alguna razón Bien, entonces bien, solo voy a seguir adelante y salvar el camino, en realidad. Simplemente lo llamaremos animación de manera. A lo mejor eso hará que el archivo funcione. Bien. Bueno, en realidad, esto también es un consejo profesional que si tu archivo no se guarda, entonces esto también sucede a veces en realidad, que el plugin pudimn no funciona Bien, entonces tienes que asegurarte de que tu archivo esté guardado. Además, a veces también estropea los archivos de renderizado Por lo que es mejor guardar el archivo en realidad. Bien. Entonces ahora sólo voy a seguir adelante, seleccionarlo, y luego sólo voy a ir aquí. Entonces sólo voy a copiar la ruta y pegarla aquí. Y sólo voy a llamarlo V test. Sólo voy a golpear render. Bien, entonces se renderiza, y ahora solo voy a seguir adelante y revisar el archivo Path. Como puede ver, en realidad es 2.2 KB en este momento, ¿verdad? Y vamos a seguir adelante en nuestra capa de efectos posteriores, y vamos a seguir adelante y previsualizarla. Bien. Bien, entonces ha habido un error, en realidad. Rendí el equivocado en realidad. Vuelve atrás y renderiza la comp correcta. Yo solo lo hago de la manera en que probamos. Yo sólo voy a seguir adelante y reemplazarlo. Bien, entonces ya está hecho. Vamos a comprobar ahora el tamaño del archivo. Es de 82 KB, ¿verdad? Bien, ahora solo vuelvo a nuestros after effects y vamos a previsualizar la animación aquí. Bien. Bien. Como puedes ver, la animación es perfecta, ¿verdad? Y el tamaño del archivo es de 82 KB por el momento. Y es de sólo 1 segundo de largo en realidad. Y en realidad he probado este método con las múltiples capas y múltiples proyectos, pero no es ideal porque podría funcionar en una situación ideal como esta donde hay que animar la animación solo por 1 segundo Ahora, obviamente se pueden hacer clones de estos, pero los fotogramas clave individuales en realidad crean más datos Entonces realmente no recomiendo este método en realidad. Pero obviamente, si no hay otra opción, entonces definitivamente puedes probarla si tu cliente no está satisfecho con el método que vamos a probar ahora. Así que sigamos adelante y hagamos el otro método, en realidad, ¿de acuerdo? Entonces solo voy a seguir adelante y duplicar esta otra vez. Sólo voy a desbloquear el superior. Yo sólo voy a hacer que el trazo cero y que sea un fracaso. Y sólo voy a seleccionarlo. Sólo voy a seleccionarlo y copiar el color. Vamos a guardar el archivo también a lo largo del trabajo. Y vamos a eliminar este archivo. Bien. Y ahora solo voy a seguir adelante y abrir el plug in hecho y darle a los plugins de escapadas Ahora, sólo voy a crear una nueva ola. Bien. Se puede agregar variación a la ola. Puedes hacerlo así. También puedes crear edificios como este, por cierto. Y también puedes hacer pinchos como este también. También puedes usar este botón aleatorio en realidad para aleatorizar el patrón también, pero solo voy a apegarme a la ola Y también, este realmente controla las longitudes de onda en el diseño, y este botón realmente te dice dónde dibujará la onda en la parte superior o en la parte de abajo de la capa Estos complementos son realmente útiles para crear imiones WV en crear imiones WV Incluso dentro de la creación de prototipos también, esto realmente te ayudará a hacer el prototipado muy fácilmente Creo que este se siente muy bien. También puedo darle al aleatorizador, pero creo que este se ve bien Voy a cambiar el color también ahora. Entonces esto me queda perfecto. Ahora lo que puedo hacer es, sólo voy a seleccionar esta capa. Voy a entrar en el plug in desarrollo. Golpea AEX y toma esta capa en los efectos posteriores. Ahora, dice que la capa debe estar dentro de un marco. Ahora como esta capa está fuera del marco, vamos a seguir adelante y aflojar el marco, arrastrar la capa al marco. Ahora, haga clic en él, y vamos a llevarlo a la. Bien, como puedes verlo, ddt el marco también. Así que dejemos el marco, copiemos esto, lo llevemos de nuevo en nuestro conteo principal, y aquí está. Ahora depende de usted que la forma en que elija trabajar con esto. Es completamente tu elección de libertad creativa. Ahora, solo estoy haciendo esta ola pequeña, en realidad, ¿de acuerdo? Y ahora sólo voy a animar esto. Bien, así que vamos a seguir adelante y animar esto. En primer lugar, lo que voy a hacer es seleccionar el camino is. Yo sólo voy a hacer que se convierta a camino Bezier. Bien, solo voy a hacer clic en Path, crear un fotograma clave, y ahora va a seleccionar mi ruta WV y va a golpear Pentool y seleccionar esta herramienta aquí mismo, que hace máscara en las Selecciónala, agrega un punto, controla V para pegarla. Y ahora sólo voy a seguir adelante y seleccionarlo y solo traerlo aquí. Bien. Ahora solo voy a editarlo hasta que se ajuste perfectamente a mis necesidades. Bien, así que ahora lo voy a hacer solo voy a darle a Agregar una máscara, Bien, solo voy a apagar esta capa. Ahora vamos a animar esto. ¿Y cómo vamos a animar esto? ¿Ahora? Bueno, hay diferentes formas, pero probemos ésta. Sólo voy a darle a frame la posición, y sólo voy a seguir adelante. 12 marcos. Voy a sacar la ola así. Bien. Sólo voy a volver al camino y hacer que esta parte inferior sea realmente más larga porque entonces va a funcionar mejor. Simplemente seleccionemos esto y arrástralo hacia abajo así. Bien, perfecto. Ahora, lo que realmente está sucediendo es que vamos a arreglarlo muy rápido, y te va a golpear en mi teclado. Solo voy a crear otro fotograma clave en mi máscara y luego solo seleccionarlo y luego arrastrarlo hacia abajo. Simplemente. Eso es. Eso es lo que tengo que hacer. Vamos a seguir adelante y reproducir la animación. Como pueden ver, es bastante plano, en realidad, ¿verdad? Así que solo la traigo de vuelta hacia abajo y va a hacer que mi máscara quede aquí parada. Bien. Y ahora solo voy a mi capa está abajo, ¿verdad? Así que sólo voy a hacer que se mueva de esta manera. Bien. Y ahora sólo voy a arrastrar mi máscara así. Bien. Bien. Entonces probemos esto ahora. Verás, obviamente, la animación es muy corta, en realidad. Entonces por eso no se ve bien. Pero probemos esto en una longitud más larga. Oye. Bien, entonces esto se ve mejor, ¿ verdad? Esto se ve mejor. Bien, entonces todavía no hay animación hasta el momento. Vamos a crear fotogramas clave de fotogramas clave en la posición aquí y hacer que arrastre todo el camino hacia atrás así Bien, entonces hay un error ahora, ¿no? Vamos a tener que arreglar la máscara, en realidad. Vamos a comprobarlo ahora. Bien, entonces está funcionando, ¿verdad Pero hay un poco de problema, que es que debería ser, creo, por aquí, ¿verdad? Entonces la ola debería ser como moverse realmente muy rápido. Bien, así que voy a arrastrar esto por aquí. Ahora solo está seco. Bien, mira, perfecto. Ahora, lo que podemos hacer es crear múltiples capas de esto también y crear otra variación de velocidad también. También podemos ajustar la flexibilización, ¿verdad? Podemos trabajar nuestro camino a lo largo de esto como queramos, ¿verdad? Esto es para nuestra elección de libertad creativa es en realidad cómo usamos este enfoque, y vamos a tratar de hacer algo con él. Bien, como pueden ver, hay un poco de variación en la ola, ¿verdad? Entonces hace que parezca líquido, en realidad. Ves, ¿verdad? Entonces se trata de trabajar alrededor de esto y crear animación de olas se vuelve realmente fácil y simple. Obviamente puedes usar el efecto de guerra de olas y también crear animaciones de olas usando eso también. Pero realmente no lo recomiendo, porque creo que este enfoque es realmente mejor, y puedes editar la capa más fácilmente, en realidad, porque Um, digamos que tienes que editar la ola, solo tienes que seguir adelante y hacer algunos ajustes en el camino correcto. Pero si estabas usando waver, entonces tendrás que seguir adelante y hacer el ajuste en el efecto, luego volver a y hacer el ajuste en el efecto, trazarlo, trazarlo automáticamente nuevamente y luego aplicarlo nuevamente a la forma Entonces creo que este método funciona mejor, y también hace que el tamaño del archivo sea menor también, en realidad. Así que vamos a comprobar nuestro tamaño de latifle en realidad. Um, sólo voy a probar esta. Por cierto, esto también tiene dos capas ahora, así que tal vez el tamaño del archivo sea más, pero vamos a comprobarlo ahora. Vamos a golpear hecho. Así que vamos a seguir adelante y revisar nuestro archivo exportado para ver su tamaño. Bien, entonces como pueden ver, el tamaño del archivo es de nueve KB ahora, ¿verdad Para que puedas ver la enorme diferencia entre los archivos. Es realmente enorme. Es realmente enorme, ¿verdad? Entonces, como puedes ver, el tamaño del archivo será realmente, muy, muy pequeño si usamos este enfoque. Está aumentando el tamaño del archivo en diez veces. Eran alrededor de 90 cuando estábamos usando Wave Work, y ahora solo son nueve. Entonces esta es una gran diferencia, ¿verdad? Entonces estas son las principales razones por las que estos complementos te ayudarán a mejorar las animaciones creativas y hacer que tu animación más optimizada y te destaquen entre la multitud. Bien, así que eso es todo para esta clase. Te atraparé en la siguiente. 4. 03.Lottie as a Service.: Hola a todos, y bienvenidos de nuevo. Antes de continuar con la siguiente lección, hay algo que quería destacar, en realidad, que quedó fuera en la clase anterior, que es este último plug in, que también es GifGun Entonces esto es básicamente solo para ayudarte a crear animaciones gif o regalos rápidas para que puedas enviárselas al cliente, en realidad. No hay realmente grandes ventajas en este plug in, excepto lo que hace es si estás creando animaciones de regalo, particularmente para clientes, entonces esto te va a ahorrar mucho tiempo, y también crea tamaños de archivo muy optimizados. Y hay muy pocas configuraciones en el plugin, realidad, y también puedes revisarlas. También puede renderizar que uses gradientes en tus animaciones, entonces no va a crear un regalo tan increíble debido a la limitación de 256 colores que ofrece el formato de regalo Bien, así que por favor tenlo en cuenta, y hay algunos ajustes que puedes ajustar aquí. Entonces, sí, una vez que seleccionas la comp, y luego presionas el botón de regalo M, lo que hace es renderizará toda la animación, y luego simplemente la renderizará, y luego puedes simplemente hacer doble clic en él y podrás previsualizarla. ¿Ves? ¿Verdad? Es perfecto. Bien, entonces ese es el único uso de esto, y son 188 Kws Bien, entonces solo voy a deularlo, y ahora vamos a pasar a la siguiente clase, que es un proyecto cliente, en realidad, que hice en el pasado, pero vale la pena mirar, en El cliente en realidad solicitó que el archivo final fuera la animación gif en realidad. Entonces es por eso que a lo largo de todo el proyecto, notarás que no hay capas de ja. Pero en cambio, el diseño está en lista o archivos de Photoshop. Bien. Entonces, como pueden ver, esta es la comp principal. En lugar de que Alpha lo mate con el teléfono, podría haber usado la técnica de máscara simple, ¿de acuerdo? Eso no es realmente un gran problema, en realidad. Entonces sí, pero debido a los requisitos por parte del cliente estaban en animación Jif, en realidad, así que realmente no me molesté en crear una máscara, en realidad Bien, entonces sólo voy a abrir la comp principal. Ahora vamos a pasar por las diapositivas y les voy a decir que esta animación también se pudo haber hecho en Lotti , posiblemente Y fue hace mucho tiempo cuando hice este proyecto, en realidad. Pero si hoy estuviera haciendo este proyecto, obviamente lo haría mejor. Y también, sugeriría a mi cliente y muy probablemente solo los obligaría a tomar la decisión de usar un Lotti en lugar de usar una animación de regalo Bien. Así que vamos a pasar por las diapositivas ahora. Esta es la primera diapositiva. Bien. Y aquí están las capas de ilustrador. Y como puedes ver, los diseños son un poco complicados, digamos, como puedes ver aquí, ¿de acuerdo? Hay una alternativa a esto, así como discutimos en el curso anterior que también podemos importar las imágenes. ¿Verdad? Así que definitivamente podríamos convertir estos en PNGs también y luego exportarlos también Y luego podemos incrustarlos aquí para reducir el tamaño del archivo lady. Si hay más de 100 capas en ese diseño, entonces definitivamente puedes hacer eso para hacer una situación más optimizada porque hay múltiples diseños como este. Entonces tal vez sea mejor usar PNGs de estos en lugar de usar SVG porque en realidad hay tantas capas Entonces tal vez el PNG será menor tamaño en lugar del SVG en realidad. Así que ahora vamos a repasar por nuestras coms. Bien, así que solo voy a abrir esta, y vamos a abrir nuestra primera diapositiva. Bien, entonces en el movimiento del cuerpo y el enchufe, en realidad podemos seguir adelante y volver a abrir el movimiento del cuerpo. Bien, entonces como pueden ver, había una opción en el enchufe en la que no discutimos antes en realidad, que era esta opción. En realidad, esta opción es realmente útil en estos casos porque digamos que este diseño en realidad hizo que este diseño en realidad hizo todo el café con leche fuera muy pesado debido a la complejidad de las capas Entonces lo que podríamos hacer es volver al interior de nuestro archivo de Illustrator. Es solo que veamos qué archivo es este país seleccionado, ¿verdad? Vamos a abrir nuestro archivo de selección de país. ¿Bien? Bien, nuestro archivo ya está abierto. Y ahora, como pueden ver, hay muchas más capas, ¿verdad? Entonces lo que podemos hacer es simplemente hacer esta capa solo en realidad. En realidad es solo en este momento. Así que vamos a hacer clic en él y vamos a arrancar todas las capas o simplemente podemos entrar en IU Archivo copia éste, pruébalo por aquí. No tenemos que cambiar el tamaño de esto en realidad porque si aumentamos el tamaño, entonces también aumentará el archivo del tamaño del archivo de la imagen, lo que realmente no queremos hacer porque vamos a estar usando un PNG, por lo que afectará nuestra optimización y tamaño Yo solo lo guardo controlar todos los turnos. Sólo voy a hacer que sea un PNG. Voy a golpear guardar, y ahora voy a ver el camino. Ahora voy a llamarlo Singapur. Bien, Singapur PNG. Bien. Entonces ahora lo que puedo hacer es simplemente buscar Singapur aquí. Aquí no se exporta. Debe ser un error. Bien, entonces Singapur ahora se exporta. Así que vamos a seguir adelante y arrastrarlo a los efectos posteriores. Bien, ahora lo que vamos a hacer es simplemente arrastrarlo por aquí y igualarlo. Voy a aplicar el efecto de relleno, y ahora solo voy a Bien, así que esto se ve perfecto. Sólo voy a eliminar el efecto. Y sólo voy a apagar esta. Y ahora solo voy a hacer esto en realidad. Entonces considerando que esto era un proyecto de animación Latty, realmente nos ayudará a reducir tamaños anteriores, en realidad, y también optimizar los tamaños de archivo en lugar de usar un SVG, podemos usar un NG Y entonces lo que podemos hacer es que podamos en el panel Activos, podemos elegir la opción include INJsn, y también incluirá la imagen Puedo dejar la compresión al 80%. Funciona casi bien cada vez. Si hay problemas en los tamaños de archivo o la animación no se ve muy bien con el diseño, definitivamente puedes ajustar estos números de compresión, y luego puedes exportarlo nuevamente. Y esto incluirá también la imagen, y también aplicará la compresión a la imagen. Entonces sí, así es como funciona. Bien. Entonces esta es una forma de optimizar tus archivos, en realidad. Se trata de encontrar la solución adecuada para su problema en realidad y tomar la decisión correcta, para aumentar la flexibilidad de su archivo y también de reducir el tamaño del archivo. Por lo que funciona en las situaciones más óptimas y perfectas a la perfección. Bien, así que vamos a entrar ahora en la siguiente diapositiva. Lo cual está bien, así que veamos primero la animación de esta. Bien, entonces todas estas capas están animadas en realidad a esta capa nula. ¿Bien? Entonces lo que hace es básicamente que se acaba de hacer de la imagen por ahora, también podemos ser padres de esto así como esto. Verás, básicamente estoy creando un efecto click, en realidad, ¿verdad? Entonces así es como está funcionando porque este proyecto fue creado hace mucho tiempo, como puedes ver, aquí hay algunos errores. Bien. Entonces se hace clic en este botón y luego pasamos a la siguiente diapositiva, como puedes ver aquí Se acerca la siguiente diapositiva. ¿Qué pasa con la diapositiva anterior? Como puedes ver, se desliza con la posición. Bien. Y la siguiente pantalla se aparenta a la anterior, que cuando se salga de la pantalla, arrastre la que está detrás de Y el mismo principio se aplica a lo largo de todas las pantallas. Como se puede ver, cuando una pantalla va, arrastra a la otra detrás de ella. Bien. Entonces continuemos, ¿verdad? Estos son solo dos simples marcos clave de posición, así que en realidad no hay mucho que explicar al respecto. Entonces, vamos a abrir éste y echemos un vistazo a esto. Bien. Entonces estas pocas capas están parentadas a este nulo y está creando un efecto click Como pueden ver, solo etiqueté las capas que me fueron necesarias, y luego solo agregué una animación a escala, como pueden ver aquí. Bien. Y lo que pasa después de eso es que hay una siguiente diapositiva, ¿de acuerdo? Y luego se desplaza hacia abajo. Bien. Entonces, como puedes ver, la comp es en realidad más grande por dentro, hay demasiados datos. Así que solo apliqué los marcos de posición K por crianza de los hijos y todo. Ahora, como pueden ver, hay algunos errores de diseño, realidad, porque en el pasado, realmente no solía pensar tanto en el diseño y tampoco realmente no me enfocaba en él. Pero ahora, como he mejorado, si vuelvo a hacer el proyecto, definitivamente arreglaría por mí mismo errores tan pequeños para mejorar el diseño. Bien. Entonces, avanzando, lo que realmente sucede en esta diapositiva es solo que se hace clic en el mismo botón de la misma manera que la diapositiva anterior Como pueden ver, todo esto puede ser Latty en realidad, ¿verdad? El texto puede llegar tarde. Todo puede llegar tarde en lugar de solo la imagen. Definitivamente podemos hacer exportar un PNG e importarlo aquí, y el resto del artículo se puede convertir en capas de forma, en realidad, ¿verdad? Bien. Entonces, avanzando en lo que realmente sucede es que se hace clic en este botón , creo, sí Se hace clic en este botón. Ahora hay efecto de relleno aplicado, obviamente, pero definitivamente podemos aplicar los mismos fotogramas clave a la propiedad de color también si se trataba de una capa de forma. Entonces sí, esto también es compatible muy tarde. Y como puedes ver, se hace clic en él, a la derecha, lo hace clic, y luego se vuelve púrpura Bien. Y entonces lo que pasa es, pasemos a la siguiente diapositiva. Bien, entonces esta es la siguiente diapositiva. Bien, entonces esto se transforma en la capa de onda, en realidad. Entonces básicamente la app está diciendo que puedes enviar regalos a cualquiera y además adjuntar un nodo de voz de 30 segundos. Entonces esto convierte, bien. Vamos a ver la animación. Como pueden ver, se está aplanando, ¿de acuerdo? Esa es una animación muy simple. No están pasando cosas realmente difíciles. Es solo animación a escala. Eso es, ¿verdad? Bien. Y el micrófono interno también se reduce a escala. Sí, ¿verdad? Como puede ver, una vez que lo tocamos, se escala hacia arriba, y luego se encoge. Y entonces esta línea viene en realidad. Ahora bien, realmente importante notar esto como se puede ver, hay un archivo de audio, en realidad, que estaba parentado a esto Ahora vamos a encontrar esta capa en realidad. Esta es una capa de visualizador. En realidad, como puedes ver, esto se le suma el efecto de espectro de audio. Así que en realidad se animó como anima el tornillo de banco. Bien. Sólo entremos en el expediente y echemos un vistazo. Como pueden ver, la voz se está animando aquí, ¿verdad? Bien. Entonces, ¿cómo lo hacemos tarde? Bueno, hay una manera sencilla, y vamos a pasar por eso. Bien, entonces hay dos formas, en realidad. Solo pasemos por ambos. Bien. Voy a crear com. Vamos a llamarlo voz de prueba. Bien. Ahora lo que voy a hacer es seguir adelante y crear una línea. Bien, así, ¿verdad? Sólo voy a hacer que sea diez pixeles. Ahora sólo voy a hacer que el centro esté alineado. Ahora podemos hacer dos cosas. Podemos agregar partes de recorte, en realidad. Bien. Sigamos adelante y probemos eso. Vamos a hacerlo 50, hacer el otro 149. Bien, para que haya un poco de dt. Bien. Y ahora lo que vamos a hacer es, vamos a hacerlo en esquinas redondeadas. Eso se verá mejor, creo. ¿Ves? Eso se ve mejor. Bien. Entonces me voy es keyframe ambos. Voy a acercarme un poco un poco. Y vamos a tratar de animar esto. Hagámoslo ir aquí, que vaya aquí, aquí, en la otra dirección. Dos fotogramas después, uno viene aquí. El otro va aquí. Bien. Y luego solo puedes pasar por estos y luego simplemente hacerlo un poco, y luego puedes simplemente clonar los fotogramas clave como hicimos en el curso anterior. Bien. Por cierto, expliqué estos plugins en el curso anterior. Entonces, si necesitas entender cómo usarlos, entonces solo puedes consultar cursos anteriores. Bien, ya ves, bien, esto funciona, ¿verdad? Bien. Y solo puedes usarlo y solo vamos a hacer el camino más largo, en realidad, así. Y luego, como puedes ver, solo puedes usar el mismo método y hacerlo muchas veces. ¿Bien? Y luego solo sigue adelante. Eso es. Y luego podrás recrear todos estos y también, vamos a hacer que sean tres Entonces también hay pequeñas líneas entre ellos si quieres. Bien. Y vamos a jugar a esto. ¿Verdad? Ahora obviamente también puedes compensar los fotogramas clave. Pero intentemos eso. Va a lograrlo. Vamos a traerlo por aquí. Y ahora voy a hacer que en realidad se aleatoriice. Y yo sólo voy a dar el paso diez, y vamos a golpear secuencia y ver qué se nos ocurre. Bien, entonces ha habido un error. Este será uno, pero el desplazamiento va a ser diez. Bien, mi error. Bien. Vamos a seguir adelante y jugar esto. Bien, así que vamos a jugar a esto. ¿Verdad? Entonces parece que se está enviando la voz o se está reproduciendo la voz. Bien. Pero otro método que podemos probar, que es mucho más sencillo y fácil. Ahora que va a ser podría afectar un poco el tamaño de tu archivo, pero es mucho más fácil de editar, y puedes aplicar las revisiones de cliente también muy fácilmente. Bien, he creado este camino. Bien, el mismo método. Voy a hacer diez, para que podamos verlo con claridad. Voy a hacerlo todo. Así que de nuevo, alrededor de gorras. Bien. Y ahora lo que voy a hacer es que no voy a agregar partes de llanta. En su lugar, voy a hacer clic en mi propiedad de escala, y voy a agregar una expresión. ¿Bien? Y cómo funciona la expresión es básicamente complicado de explicar, pero es solo que si estás familiarizado con las expresiones, entonces será fácil de entender. Pero si eres nuevo en las expresiones, entonces te recomendaría encarecidamente que revises un tutorial básico al respecto en YouTube tal vez. Bien. Así que ahora sólo voy a escribir algunos valores. Yo sólo veo cómo se ve esto. Bien, así como pueden ver, esto parece que esto funciona, creo, correcto. Lo que podemos hacer es que podamos llegar a los 80, ¿verdad? Bien. Y vamos a tratar de hacer el valor de saqueo, 200 y ver qué va a pasar Bien. Como puede ver, esto no parece realista. Así que vamos a bajarlo a 20 de nuevo y hacer este 1800, ver qué va a hacer esto, ¿verdad? Parece que se está tocando la voz. Bien. Y vamos a hacerlo de vuelta al 50 sólo para ver la diferencia. Bien, entonces lo que puedes hacer es crear múltiples copias de esto, derecho. puedes escalar estos, o simplemente puedes establecer el camino y alargarlo en ambos extremos, ¿verdad? Y si tienes que ajustar las longitudes de onda, solo puedes editar la expresión Eso es. Eso es todo lo que tienes que hacer. Sólo hay que copiar la misma capa una y otra y otra vez. Y entonces lo que puedes hacer es simplemente editar la expresión gal. Mira, se ve más realista, ¿verdad? Hay cierta aleatorización en cada capa. Y para los pequeños nodos o nodos en la voz, solo puedes seleccionar esto y hacerlos más pequeños, o hacer uno de estos pequeños y luego copiar ese, ¿verdad? Y entonces puedes crear la ola a partir de esto así. Bien. Lo siento, mi mal. Bien, intentemos jugar a esto. Voy a hacer 2 segundos, y vamos a jugar a esto. Ver, esto se ve más realista. Obviamente, puedes bajar algunas de las capas aún más, pero entiendes mi punto. Ahora bien, ¿cómo exportamos esta animación? Bien, esto es muy importante. Ahora, ¿qué hacemos ahora? Yo solo voy a, um, seleccionar nuestra prueba Vice comp. Solo voy a entrar en ajustes, y como pueden ver, no hay opciones adicionales seleccionadas. Ahora, intentemos exportar esto y déjame decirte que esto no va a funcionar, ¿de acuerdo? Bien, entonces prueba Voz, No. Bien, entonces esta es la animación de vista previa. Como pueden ver, está funcionando, bien, pero todavía hay algo a tener en cuenta. Antes de enviar el archivo al cliente, tienes que revisar el café con leche en realidad, y puede que no funcione tal vez en el móvil o tal vez en la web Entonces, antes de enviar esto, solo tienes que entrar en la configuración, entrar en la configuración de Desplazarse hacia abajo, entrar en opciones de expresión, y seleccionar convertir expresiones a fotograma clave Golpea guardar, y luego puedes volver aquí. Como puede ver, el tamaño es de 20 KB. Solo reemplacemos esto. Es hit render. Y vamos a comprobar de nuevo el tamaño del archivo. Bien. Como puede ver, el tamaño de la voz ahora es 89 KB porque convirtió todos los valores en fotogramas clave Bien, entonces sí, esta voluntad también funciona de la misma manera en realidad en el enchufe de movimiento corporal. Pero si renderizas la animación con este método, entonces funcionará perfectamente en todas las plataformas. Bien. Entonces volvamos a nuestros estudios. Entonces sí, puedes agregar la animación usando eso. Y luego después de eso, el botón se hace clic en el siguiente botón, en realidad, ¿verdad? Y lo que pasa es que la voz se reproduce aquí un poco, y luego se desliza hacia la siguiente, ¿verdad? Bien, entonces lo que está pasando aquí es que abramos esta. Bien, entonces esto es solo una capa de texto, básicamente una capa de forma, y estamos usando una máscara para revelar el nombre. Y luego hay una capa de cada línea que está enmascarada. Bien, entonces es todo una capa, creo, sí. Hay tres máscaras en la misma capa. Bien. Entonces sí, esto también funcionará perfectamente al final, pero le recomiendo encarecidamente que elija una línea para una máscara y luego duplique esa misma capa. No uses cuatro máscaras en la misma capa porque si la máscara se interrumpe entre sí, entonces la tarde podría chocar o no funcionar perfectamente Bien. Volviendo a la comp principal, después de que se revele el mensaje, se vuelve a presionar el siguiente botón, y estás en la página de pago, te desplazas hacia abajo. Como se puede ver aquí dentro. Ahora, todas las capas están parentadas a una capa, que es la quinta capa, la última Y luego porque no había necesidad de agregar objeto, así que por eso está animado de esta manera. ¿Bien? Entonces se desplaza hacia abajo. Presionarte como puedes ver, aquí está la animación a escala del botón. Bien. Ahora a quién lo has enviado, y luego pasa a la pantalla de acceso, y luego puedes ver cómo hay animación de chat. Ahora, hemos visto animaciones de chat realmente antes en el curso anterior. Ahora bien, esta no está animando bastante bien si la comparamos con esas. Ahora la razón detrás de eso es porque la utilidad de la animación de texto y el propósito del chat aquí es muy menor porque hemos presentado toda la idea de la aplicación. ¿Verdad? Por lo que la interacción entre dos personas no es realmente tan importante porque nuestro producto no está basado en su interactividad Ahora bien, si estás animando chats de bot de chat de IA, entonces la interactividad es la que más importa Pero en este caso, la productividad, el producto, la empresa, qué hace la empresa es lo que más importa, lo que ya se mostró en la animación anteriormente. Entonces por eso animamos esto de una manera muy rápida y precipitada, ¿verdad Como puede ver, la notificación llega a la persona, y luego dice: Gracias. Y luego la última diapositiva, cuando la persona hace clic en ese mensaje, realidad, veamos, creo que se hace clic en él No, no lo hace. Bien. Entonces sí, éste se abre, y luego lo que pasa es que se reproduzcan los nodos de voz. Esto es muy fácil. Esto es solo una capa de forma de onda, y es una capa blanca realmente dentro, como puedes ver, así que todas las capas están separadas, en realidad. Um, podría haber usado el merge, pero no creo que antes tuviera este plugin. De lo contrario, no tendría que crear una pre comp sobre esto. Entonces puedes ver que este tipo de cosas te pueden ahorrar una pre comp completa, en realidad, ¿verdad? Así que solo puedes enmascarar una capa en lugar de precompinarla. Podría haber enmascarado esto en lugar de volver a esta comp Sí. Entonces eso va a funcionar más limpio, creo, si tenemos que hacer ideas o cambiar el color, en realidad. Simplemente puedes escribir la capa y cambiar el color en lugar de volver al interior y cambiar el color. Bien, entonces esto se juega y luego reciben mi botón se hace clic y termina la animación Así es como podríamos haber logrado la misma animación usando también la animación artística. Por eso fue muy importante mostrarte cómo puedes crear este tipo de animaciones también importando o usando las opciones de exportación de incluir las imágenes dentro de tus animaciones usando esta función, y también usando expresiones cuando sea necesario para ciertas capas, como la de Voz que teníamos en la diapositiva anterior. Bien, así que eso es todo para esta clase en la siguiente. 5. 04.Estudio de caso del proyecto: Bienvenidos de nuevo al curso. Bien, entonces estoy abriendo un proyecto cliente, y voy a tratar de mostrarles tantos ejemplos como sea posible de cómo entrego proyectos de clientes y cómo creo sus animaciones porque la parte principal y el foco principal de estos cursos es enseñarles a ustedes cómo crear animaciones para sus clientes en realidad, ¿verdad? Entonces esta es una animación que creé para un cliente en realidad hace unos meses, bien. Y lo que querían básicamente era que crearan un software de IA que ayude a los estudiantes a crear su en la educación de los niños y estudiantes. Bien, así que sin más preámbulos, solo revisa nuestro archivo. Solo volvamos a nuestra comp principal. Entonces esta es nuestra comp principal. Bien, hay dos coms principales. Entonces también tenemos una comp, particularmente, esta, que en realidad se renderiza. No es éste, en realidad. Es éste, el render. El cliente en realidad solicitó al final que toda la animación se mostrara dentro de un escritorio en realidad, porque era la versión de escritorio de su IA. Así que acabo de tomar este escritorio de un sitio web de stock gratuito, y luego estos son solo jugadores compartidos. Bien, solo usé sobrecarga y la ingresé aquí usando sobrecarga. Bien. Y ahora lo que está pasando, lo que está pasando aquí es que entremos en eso. Bien, entonces esta es la animación principal. Solo entremos en la primera com. Bien, como pueden ver, ahí está este avatar. En primer lugar, no podemos hacer de este avatar un SVG. Entonces esto es solo un avatar de IA, y esta es una imagen PNG. Y utilizo la misma opción que te mostré en la clase anterior mientras entraba en ella y mantenía disponible la opción de imagen, ¿verdad? Seleccionando aquella que incluya las imágenes raster en el archivo JSON, y luego esta imagen renderizada perfectamente. Bien, entonces esto es simplemente animar de manera muy sencilla. Bien. Entonces esto es básicamente pensar y guiar. Ese es el lema de estos tres fotogramas clave que estamos tratando de mostrar Bien, volvamos a nuestra comp principal. Entonces, um, vamos a golpear U en nuestro teclado para que podamos ver. Bien, entonces esta es la primera capa que anima. Se escala, bien. Y luego está esta capa de texto. Y he usado la primera opción aquí en la configuración, la opción Glifos Bien, marque este y simplemente podrá seguir editando el texto, y simplemente lo convertirá mientras renderiza el archivo en reproductores compartidos en realidad. Bien. Entonces la primera línea en realidad anima usando máscara, una máscara muy simple, bien. Y hay dos fotogramas clave en la máscara y revela. Ahora hay algo importante que destacar aquí, que es que alguien podría pensar que no es una forma profesional de animar esto tal vez porque la gente quiere que el efecto de escritura muestre realmente letra por letra, ¿verdad Puedes lograrlo convirtiendo esto en un jugador de acciones y luego simplemente compensarlo por un fotograma clave como lo hicimos en el curso anterior. Pero eso no es muy recomendable en esta situación porque a medida que avanzamos por aquí, hay toneladas de texto realmente animando Por lo que en realidad tomará mucho tiempo tomar un fotograma clave por cada letra, porque entonces esto se convertirá en dos o tres veces aún más Tomará aún más tiempo, en realidad, ¿verdad? Actualmente está tomando. Sólo veamos cuánto tiempo está tomando. Está tardando alrededor de 6 segundos, ¿verdad? Y luego tardará alrededor de 18 segundos en animarse. Así que realmente no queremos que el usuario se aburra de la animación, en realidad, porque esta es una animación tocas, ¿verdad Esto va a que solo si miras la animación, puedas conseguir completamente eso lo que es capaz de hacer la IA por ti. Entonces nuestro trabajo es crear una animación que retrate el significado en muy menos tiempo. Bien. Entonces todas estas formas son solo formas, formas simples, ¿verdad? Entonces solo hay una escala de animaciones. Los puntos de anclaje se desplazan en este sitio utilizando este plug in, que discutimos en el curso anterior. Muy sencillo. Y estas son solo las capas de impuestos usando la misma técnica de máscara. Todos estos se revelan, ¿verdad? Bien. Entonces, cuando todos estos están animados y entonces este botón se revela, bien, revela, y luego el clic sucede en el botón enviar. Bien. Y entonces lo que pasa es, nos metemos en la segunda comp. Bien. Vamos a golpearte en nuestro teclado. Como puede ver, se posiciona en la dirección superior. Bien, puedes comprobar la flexibilización también aquí. Bien, va en la dirección superior con la opacidad también, así que básicamente se desvanece, Y entonces la A empieza a generar la respuesta. Vamos a entrar en esta comp. Y antes de continuar, solo abriré el ilustrador para poder mostrarte el archivo de diseño que el cliente realmente me envió. Entonces déjame mostrarte eso muy rápido. Bien, entonces este es el archivo que el cliente realmente me envió. Esta es la página principal. Ahora, como pueden ver, hice algunas modificaciones. Eliminé el fondo de esta señora y sustituí el fondo con ayer, capa de forma simple. Bien, porque preferí que el cliente usara un círculo simple en el fondo lugar de usar un cuadrado porque entonces queremos poder animar a esta señora dentro de él Entonces estuvieron de acuerdo. Bien, y entonces lo que pasa es, esta es la primera diapositiva. Esto fue en realidad una referencia de su versión de aplicación móvil. En realidad no necesitaban este. En realidad cancelaron esta versión. Entonces fuimos con éste solamente. En realidad no trabajamos en este. Esto era solo un marco de estilo. Bien. Entonces aquí están todos los textos que dijo el cliente que la IA va a anotar. Bien. Entonces esta es la razón por la que no pudimos hacer efecto letra por letra, en realidad, porque esto tardará más de 50 segundos en animarse por tantas letras Bien. Entonces, ¿cómo animé esto Solo volvamos a nuestro ilustrador, a nuestro después de hecho lo siento, y veamos cómo animé esto. Bien. Entonces aquí está la comp. En realidad lo hice de tamaño más grande. Como pueden ver, aumenté la altura. Solo volvamos a nuestro ilustrador y verifiquemos la altura aquí. Creo que aquí también son 5 mil . Pero vamos a echar un vistazo. Bien. Entonces, como se puede ver, es de 3,200 píxeles ¿Bien? Así que en realidad lo aumento porque porque quería crear un efecto de desplazamiento, en realidad. Ahora, podría haber borrado este espacio superior también. Pero el cliente realmente necesitaba esto muy rápido. Así que solo estaba buscando crear la animación, y no hubo ningún daño en crear este espacio en blanco, en realidad, porque no había ningún otro objeto complejo o capas. Así que simplemente me fui con él. Pero definitivamente, debería estar arriba aquí. Sí. Bien. Entonces, antes que nada, esta capa anima de la misma manera Bien, no hay diferencia. No se escala porque ya lo hemos hecho, ¿verdad? Entonces, ¿por qué convertirlo en una escala? De nuevo, Porque es solo escribir la respuesta ahora. Entonces bien, entonces, ¿cómo se anima el texto? Vamos a ver eso? Los párrafos se dividen en capas de máscara, ¿de acuerdo? Y entonces lo que pasa es que hay una máscara. Vamos a golpearte en nuestro teclado, y como puedes ver, hay fotogramas clave de posición y hay fotograma clave de opacidad Debido a que todo el propósito de mostrar animaciones de IA o IA usando software de IA, también hay un elemento enorme en la creación de animaciones de IA que debes tener en cuenta siempre, que es que la IA va a reducir el tiempo que te va a llevar la tarea si no usas IA. ¿Bien? Entonces, la IA básicamente te va a ahorrar mucho tiempo. Entonces eso es lo que estamos tratando de enfatizar aquí que produce resultados realmente rápidos. Así que todas las capas son simplemente compensadas como usar este plugin, tan simple como Bien. Y todo esto animado, ¿verdad? Y luego después de eso, lo que pasa es, como puedes ver, escribimos la persona que está usando la IA escribe otra pregunta. ¿Bien? Una pregunta de seguimiento básicamente. Y luego la IA responde a eso también, ¿verdad? Animación bastante simple. Nada demasiado complicado. Volvamos a nuestra comp principal y veamos cómo hice el efecto scroll. Bien, como pueden ver, aquí están los primeros marcos E de posicionamiento. Bien, vamos a desplumar este. Y como pueden ver, aquí está. Bien. Entonces la animación empieza desde aquí, ¿de acuerdo? Y hasta aquí, no se anima en posición. Es solo una clave de opacidad desde el principio. Ahora, a partir de aquí, la posición anima porque el texto está lleno en la pantalla, así que sube y luego lo que pasa es Volvemos al fondo de esta capa porque queremos mostrar que al igual que Whatsapp, la barra de mecanografía está abajo en la pantalla, por lo que debería estar en la parte inferior de la pantalla por aquí hasta que se escriba Bien. Y después de eso, mecanografiando de ello. Bien, lo que pasa es un hecho muy simple que sucede en realidad. Solo volvamos y verifiquemos eso. Bien. Entonces lo que pasa es aquí esta capa de texto sube. Déjame encender esto. Bien. Entonces esta capa sube, y esta capa obtiene la clave de opacidad enmarcada. Vamos a presionarte en nuestro teclado y ver. Como puedes ver, esta capa se va, se desvanece, derecha. Y luego éste se posiciona en la dirección superior. Bien, y eso es todo. No hay animación adicional yendo. Bien, entonces esto es parentado a null, en realidad, y el nulo está aquí En realidad, toda la barra está animada a este nulo, y este nulo realmente anima en la dirección superior para que la persona, icono también se mueva en la dirección superior junto con él Bien. Entonces solo para guardar algunos fotogramas clave, acabo de agregar objeto nulo Entonces después de esa animación, vuelvo a aparecer, y luego se vuelve a animar, y vuelve a escribir todas las respuestas de la misma manera. Volvamos a nuestra comp principal y echemos un vistazo. Bien. Entonces ahora sostiene la animación por aquí por un poco, y luego la animación de posición vuelve a comenzar. Bien. Y simple como eso, la animación se completa y comienza de nuevo. Y eso es todo. Bien, solo lo voy a inresolver y puedes ver toda la animación Bien. Entonces este fue un proyecto muy sencillo. Y ahora quiero mostrarte un poco, similar también, que era el proyecto de otro cliente, en realidad. Bien, entonces esta es la animación que creé. Echemos un vistazo a esto. Bien, entonces eso es todo. Bien, así que básicamente, esto también es para verificar el tamaño del archivo anterior del proyecto anterior. El tamaño final de la animación fue la versión de escritorio, en realidad solo tenía 261 Kb, y eso es todo. Porque usamos esta opción dentro del interior del cuerpo moviendo plug in, la opción glyph, es por eso que el tamaño del archivo era muy pequeño Vamos a abrir ahora este proyecto y déjame mostrarte lo que hice en este y cómo lo creé. Ahora bien, para este, creé el diseño en realidad por mí mismo. Así que sigamos adelante y echemos un vistazo al diseño porque en realidad no es tan desafiante como podrías pensar. Bien, entonces el cliente básicamente en realidad me envió una animación, que no puedo compartir contigo por su privacidad porque no querían que se compartiera en ningún lado que a quien se referían en realidad. Bien, así que básicamente, se trata de una herramienta de IA, que automatiza la generación de leads de ventas Bien, entonces estos eran los colores del cliente que proporcionaban, y estos eran los tipos de letra. Este fue el requerimiento por parte del cliente. Acabo de crear seis rectángulos y copiar y pegar los valores aquí Bien. Y después de eso, lo que hice fue crear estos botones, esta animación de botones. Y estos botones son realmente muy sencillos. Y como puedes ver, los trazos y rellenos están en el botón. Solo hay tipografía. Ahí está este pequeño icono. He tratado de igualar el esquema de color del cliente en realidad para mantener todo alineado con su marca. Y luego la flecha baja. Entonces, básicamente, alguien envía un formulario y luego contacta por favor a través de la campaña activa Es lo primero que realmente sucede es que un formulario se llena y luego se hace el contacto a través de la campaña activa que están usando, y luego ¿lo respondieron o no? ¿Respondieron sí a la pregunta cuatro en forma de empate? Si es un sí, entonces envían un enlace con descuento. Si no, envían un enlace sin el descuento. Y luego en cualquiera de las condiciones, esperan dos días. Y entonces si abren el correo electrónico, si sí o no, cierto, los alertan para que den seguimiento por teléfono y en caso afirmativo, etiqueten con plomo de autoservicio, ¿no? Bien, y luego el cliente solicitó algunos cambios. Además, este es un consejo realmente útil, en realidad, puedes simplemente duplicar el archivo mientras creas las visiones del cliente. Así que el cliente en realidad quería que la caja fuera hecha a mano sintiéndose. Entonces solo agregué algunos puntos de anclaje en la caja y luego solo los ajusté la caja y luego solo los ajusté y solo los hice no un camino recto y solo agregué algunas curvas, y eso es todo. Y luego después de eso, solo lo duplico la misma caja en todas partes. Además, solicitaron que el formulario sea de color azul, bien. Y los otros estaban en rosa. Además, me pidieron que cambiara el color de las flechas, y eso lo hice. Una vez que se aprobó el diseño, también solicitaron que agregara aquí el ícono de ZPR, pero insistieron en que todo debería estar alineado con su marca Bien. Entonces después de eso, aprobaron la versión, y luego lo que hice fue, esta es la retroalimentación en realidad sobre la anterior, ¿verdad? Me dijeron qué cambiar, y luego apliqué el cambio. Bien. Después de eso, lo que hice fue simplemente seguir adelante. Ahora bien, debido a estas partes no fueron porque los guiones no se pueden animar dentro los efectos después o digamos que la cabeza de las flechas cuando importamos el otro archivo, vamos a hacer eso y déjame mostrarte cómo funciona Bien, seleccionaré esto. Voy a entrar en mis efectos posteriores. Voy a abrir una nueva comp, y ahora voy a hacerla de color blanco. Bien. Ahora vamos a golpear Bien, así puedo mostrarte lo que va a pasar si importo este. Bien. Como puede ver, no le sumó la cabeza de la flecha. Así que también necesitábamos eso. Entonces lo que hice fue que simplemente seguí adelante y seleccioné todos estos y luego simplemente entré en objeto y amplié la apariencia. Eso es. Y luego los convierte en las capas de forma para que pueda animar cada elemento sin ningún problema Y estos trazos siguen siendo trazos. Bien. Bien, entonces ahora lo que realmente sucede es, cuando se terminó el diseño, lo traje aquí, y luego creé esta comp de diseño primero. Por favor, asegúrese de ingresar primero el diseño en un com separado antes de animarlo. Entonces duplica la comp, ¿de acuerdo? Y entonces lo que puedes hacer es crear la animación en una comp separada. De esa manera tendrás ese diseño aquí. Digamos que agrego algunos fotogramas clave aquí y allá. Y yo por algún error o algún problema o tal vez un error o simplemente un error, me equivoco el diseño. Así que entonces solo puedo regresar y agarrar el diseño real de aquí. O si la animación se rompe, solo puedo eliminar esta comp y duplicar esta otra vez y comenzar de nuevo la animación. Bien. Entonces esta es la persona que está en la plataforma, y básicamente está atravesando un viaje. Él o ella está pasando por un viaje, derecho, a través de la forma. Entonces y también el cliente quería que la animación tuviera a Zomi en efectos Entonces, ¿cómo creamos eso en realidad? Porque no podemos usar tres D Lers porque esos no son compatibles con archivos tardíos. Entonces, ¿qué hacemos al respecto? Entonces para eso, acabo de crear toda la animación, antes que nada, ¿de acuerdo? Y luego reduje el tamaño de comp, Bien, a solo 500 por 500 pixeles porque esa era la solicitud del cliente. Y entonces lo que hice fue, creé toda esta animación y luego la aparenté a objeto nulo, que es, como pueden ver, animado Aquí, como puedes ver, si una parte no se está animando, hay fotogramas clave en cada instancia, como en posición y en una escala ambos Sea como hicimos un proyecto muy complejo en el curso anterior, posible que sepas que agregar fotogramas clave ficticios es realmente importante para ajustar el tiempo de la animación más adelante Bien. Entonces lo que pasa es, vamos a pasar por eso. Vamos a registrar este nulo. Presionemos nuestro teclado, y vamos a pasar por todas las capas. Voy a presionar, bien. Y como se puede ver, sólo hay dos capas las cuales están siendo animadas, en realidad. El primero es este personaje. Entonces, básicamente, el objetivo de este diseño de ser perfecto es realmente importante porque el diseño es el elemento esencial aquí. En todas las animaciones más probables, diseño es realmente importante. Y en estos casos, porque se trata de una animación de escaparate de producto o animación de introducción a un producto. Entonces en estas animaciones, ese diseño realmente importa mucho. Bien, entonces este pequeño en realidad anima hacia abajo, bien, viene hasta aquí Y entonces aquí se agrega el mismo fotograma clave, ¿de acuerdo? aquí, no hay interpolación entre ellos o si la hay, no lo es realmente no importa realmente porque asusta aquí abajo y porque está detrás de la capa Entonces realmente no importa si cómo se está animando. Bien, entonces lo que pasa es, el yo solo uso el escalado en este nulo y el posicionamiento, y eso es todo. Entonces básicamente estamos pasando por un camino, correcto, y luego solo estamos navegando por nosotros mismos dentro de él. Bien. Así que solo entramos en este foro, y luego la escala disminuye hacia abajo, lo que crea este efecto de zoom out, en realidad, solo estamos usando la escala aquí. No estamos usando nada elegante, pero aun así conseguimos el efecto hecho a la perfección, ¿verdad? La persona entra en la S y entonces y luego lo que pasa es, estos son los mismos fotogramas clave duplicados aquí para que la animación se retenga aquí, y luego después de eso, se vuelve a animar Espera dos días, ¿verdad? Se mueve de aquí a aquí, y luego bajamos de aquí, y luego este tipo vuelve a animar así Y luego volvemos a alejar el zoom, como pueden ver, esto es aquí, escala 100%, y esto ahora es escala del 50%. ¿Bien? Nada muy complejo, muy sencillo. Y ahora esto se arrastra a esta columna. Bien. Y a medida que se arrastra hasta aquí, volvemos a acercarnos Bien. Y como pueden ver, bajamos hasta aquí ahora, y la animación termina aquí, ¿verdad? Perfecto. ¿Bien? No hay problemas realizados con éxito. Bien, así que esto también fue muy compatible, y la fuente se acaba de convertir en los reproductores de compartir usando la misma opción, ¿verdad? Este, el cs. Tan simple como eso, nada muy complejo. Ahora entremos en una animación muy sencilla y otro ejemplo, en realidad. Bien, entonces ahora echamos un vistazo a este proyecto. Ahora, esto fue creado para otro cliente. En esta, el diseño en realidad se proporcionó en Figma, pero hubo algunos pequeños problemas que solucioné, en realidad Convertí el diseño en SVG. Bien. Y entonces lo que hice fue, como ustedes saben, las imágenes se importan de Figma directamente si usamos el AEUXPlugin como usamos en Bien. Y entonces lo que pasa es que la animación es realmente muy sencilla. Hubo algunos problemas en estas líneas, en realidad. Así que los acabo de editar en el SVG. Permítanme abrir el archivo de diseño en realidad. Entonces te puedo mostrar como puedes ver aquí, este es un ejemplo más plano. Permítanme abrir otra. Bien, así como pueden ver en esta, dibujé las referencias. Bien, entonces déjame seguir adelante y apagar esto para poder explicar lo que hice. Bien, entonces estos son los que dibujé. Bien. Este es el diseño proporcionado por el cliente. ¿Bien? Como pueden ver, si lo arrastro aquí solo, puede ver que hay segmentos en la flecha, pero debería ser solo una línea simple. Ahora no puedo animarlo usando partes de recorte porque es un relleno, ¿verdad? No podemos animar un relleno. Entonces por eso lo que hice fue que creé estas capas moradas encima de esto. Básicamente volví las líneas para aplicar mejor flexibilización en las animaciones Lo hice con todas las animaciones que me solicitó el cliente. Yo mismo creé todas las flechas otra vez. Esto esto solo tomó 5 minutos, pero facilitó mucho la animación, y no tuve que hacer máscara en las capas. Acabo de usar el camino de recorte, como pueden ver aquí. Como pueden ver, el final del camino de recorte está animado, en realidad, y no se está animando nada más. Y tenemos un efecto muy sencillo. Y entonces este encabezado también anima usando el final y el inicio tanto en 50 50, para que se anima desde el centro La otra animación es muy sencilla. Hay opacidad en los botones, y hay una escala también. Bien. Y luego solo hay animación de imagen es solo opacidad. Eso es. Obviamente, estas son muchas capas, por lo que puede parecer un poco confuso. Pero si miras el curso anterior, la clase intermedia, entonces te parecerá muy fácil darle seguimiento. Bien, entonces esto es solo una animación a escala, y hubo algunos estándares que seguí a través de las animaciones, que son la animación a escala es diez, 20, 21, 22, 23, 24. Cada animación a escala es de 24 fotogramas, bien, como puedes ver aquí. Y también esta animación, esta también es la animación AirScale Como se puede ver, esto también es de 1 segundo de largo. Bien, entonces tienes que crear algunos estándares cuando estás creando animaciones, múltiples animaciones para el cliente. Tienes que mantener esos estándares y seguirlos en cada animación que crees. Esto te ayudará a entregar resultados consistentes, y puedes simplemente escribirlos en un bloc de notas, en realidad, como qué valor va a ser cuál, la escala va a ser 24 FPS o va a ser fotogramas. Bien. La animación de línea va a ser de sólo 12 fotogramas. Puedes simplemente anotar esto en realidad. Bien. Y esto hará que tu trabajo sea realmente fácil. Bien. Y te recomiendo encarecidamente si estás usando diseños de Figma, entonces no crees todas las animaciones en un solo archivo en realidad, porque las capas pueden llegar a ser demasiado problemáticas o si el cliente problemáticas o si el cliente realmente el diseño que te fue dado, si cada elemento tiene un marco, correcto, como discutimos en una clase anterior, entonces cada elemento se colocará dentro de un marco Entonces solo tendrás que pasar por com, com, com, com comp. Pero ahora ese no es el caso aquí porque solo los pongo dentro del estator. Y entonces lo que hice fue que usé esto y usé sobrecarga y tomé esto en after effects usando straor en lugar de usar Figma. Y luego acabo de exportar esta imagen de avatar de Figma por separado y luego importé esta aquí Bien. Así es como creé esto, y es por eso que utilicé el mismo proyecto de animación para las seis animaciones que hice para el cliente. Las otras animaciones también son muy similares y simples. Entonces no creo que sea necesario pasar por todas ellas. Pero está ese elemento de consistencia, que verás a lo largo de todas las animaciones. Si toco todos ellos uno por uno, no podrás ver la diferencia o no habrá ninguna variación en la animación. Se verá muy similar y tendrá sentido que estos sean todos del mismo cliente o estos sean todos de la misma compañía, y se colocará en la misma página del sitio web. Sí. Entonces estos son algunos pequeños detalles que puedes tener en cuenta mientras animas activos para el cliente Bien, así que eso fue todo para esta clase. Te atraparé en la siguiente. 6. 05.Animating Masks: En esta clase, vamos a aprender a crear el efecto de escritura que puedes ver en la pantalla, y yo creé esto para múltiples proyectos de clientes, como puedes ver, Esto es muy sencillo de crear realmente en after effects, pero es un poco complicado si tienes que crearlo en un JSON Lottie compatible tardíamente Así que comencemos y déjame mostrarte cómo se hace esto en realidad. Entonces, hay múltiples formas de hacer esto en Lottiefiles, particularmente en realidad en Así que vamos a seguir adelante y crear nuestra nueva comp y déjame guiarte a través de eso. Por lo que vamos a crear una composición de 1,900 por 1080 píxeles. Y después de eso, lo que vamos a hacer es solo digamos que nuestro cliente soy yo mismo ahora mismo porque no queremos entrar en detalles de trabajar para un cliente en este momento porque esto es solo un ejemplo para mostrarte cómo se pueden hacer las cosas. Así que vamos a aumentar el tamaño y después de eso, cambiaremos el color también. Y después de eso, vamos a cambiar esto en capas de forma, como ya las hemos comentado , que las capas de forma son compatibles en Lottiefiles Después de eso, iremos a Motion Tools, y vamos a extraer cada capa. Entonces como mencioné que hay múltiples formas de hacer esto. Entonces, una forma sencilla de hacer esto es muy simple, que es que sigamos adelante y busquemos las ventanas, y vamos a ir al panel de efectos y presets Ahora vamos a buscar un efecto de trazo. Vamos a arrastrarlo y soltarlo aquí. Entonces ahora vamos a seleccionar esta capa, y luego vamos a simplemente crear máscara encima de ella. Así es como puedes hacerlo, hacer clic en este botón, y luego vamos a hacer clic en la máscara y luego crear una capa. Después de eso, vamos a crear otra máscara como esta. Ahora bien, esto es solo para mostrarte cuántas formas puedes hacer o lograr estos resultados. Ahora vamos a seleccionar todas las máscaras, y vamos a cambiar su color a rojo para que podamos verla con claridad. Solo aumentemos la dureza del cepillo a 100. Simplemente aumentemos este tamaño. Bien. Después de eso, lo vamos a hacer es acercarnos un poco. Vamos a seguir adelante y animar esto. Y lo vamos a revelar en transparente, ¿verdad? O revelar la imagen. Puedes ver que si quieres revelar esa máscara en transparente, puedes ver que esto está sucediendo. Y una vez que seleccionas la imagen original de revelar, esto es lo que vamos a conseguir. Para que veas que estamos creando un efecto de escritura con bastante facilidad. Puede usar esto para crear un punto de referencia. En primer lugar, crea una guía aproximada para tus tipos de animación. Y luego después de eso, puedes enviar eso a tu cliente. Una vez que lo aprueben, puedes hacerles saber que habrá pequeños errores como este solapamiento, tú esto no debería estar sucediendo. Pero puedes explicarles esto que esto es solo una visión general aproximada de la flexibilización de la animación Puedes usar esta sencilla técnica para crear toda la animación dentro 10 minutos y luego porque la animación de Lottie va a tardar más Así que solo puedes mostrarle esto al cliente y luego obtener su aprobación. Y otra técnica para usar por aquí es que hay otro método, que es déjame mostrarte eso ahora, que será déjame quitar máscaras de la capa. Vamos a seguir adelante y crear una capa de trazo. Ahora, encima de esto, ahora lo que podemos hacer es usar la opción de tapete Alpha. Así que vamos a solo Alpha mat sobre capa, y ahora después de crear el trazo, tienes que ir aquí y agregar trazados de recorte. Ahora lo que vamos a hacer es animar la ruta de recorte. De esta manera, lo que puedes hacer es básicamente hacer que las diferentes partes de la capa de animación tengan una flexibilización diferente Pero en el caso anterior, no podíamos hacer eso. Ahora bien, este es otro método que puedes usar, pero esto también solo es útil para referencias. Esto tampoco se puede renderizar perfectamente en la animación de Lottie Entonces, simplemente eliminemos eso. Ahora veamos qué puede funcionar en realidad en los archivos de Lottie Simplemente hagamos clic en nuestra capa y vamos a crear una máscara de capa de forma como esta. También puedes cambiar el color de la máscara para que puedas diferenciar entre el color de tu capa de forma y el color de tu máscara. Vamos a seguir adelante y crear, crear un fotograma clave, y luego retroceder así. Tan simple como eso. Y ahora ya se puede ver. Ahora bien, este efecto en realidad es compatible con Lottie Ahora, después de eso, lo que puedes hacer es crear otra máscara, dar clic aquí, dibujar una máscara. Después de crear la máscara, lo que tienes que hacer es simplemente animar esta también Vamos a ir hacia atrás fotograma a fotograma porque si animamos palabras de frente realmente en la línea de tiempo, no vamos a poder manejar tantos de estos mangos en realidad, que podemos manejar ahora mismo muy fácilmente porque tenemos que manejar ahora mismo un mango a la vez, pero ese no será el caso si vamos en la dirección hacia adelante Entonces es mejor hacerlo de esta manera. A En el primer fotograma K, lo que tienes que hacer es simplemente quitarte esto de tu forma. De esa manera, el primer cuadro K siempre está limpio. Ahora, digamos que queremos que se complete la primera capa, y luego el resto de la B empieza a animarse Entonces seccionaremos la siguiente máscara y seguiremos adelante y la pondremos aquí así. Y ahora se puede ver que se está animando. Este método funciona muy bien. Ahora he creado múltiples animaciones para proyectos de clientes. Ahora te voy a mostrar cómo los creé. Verás que hay algunas pequeñas brechas y temas como este. Los vamos a cubrir en un curso muy complicado, que será una clase separada. Por lo que discutiremos esto en detalle en una futura clase. Solo sigamos adelante y veamos nuestros otros proyectos. Entonces este es un logotipo de revibe, animación de pantalla de inicio que creé Se puede ver la animación del logo que creé. Entonces como puedes ver, utilizo la misma técnica que acabo de mostrarte. Entonces está esta R, y esto en realidad se está animando de abajo hacia arriba Ahora hay que tener una cosa en mente que cómo te escribirías una R en una copia cuando lo estás escribiendo, ya sabes, imagina que estás escribiendo esto, ya sabes, así. Entonces así es como lo vamos a animar. Entonces primero, la R viene de abajo y luego la segunda línea. Ahora, utilicé una capa separada para esto porque quería tener control separado sobre capas separadas, y puedes ver que básicamente hice la animación de ruta de inversión aquí también en la máscara Y luego después de eso, también está esta tercera capa. Y por cierto, todas las capas tienen todo el camino disponible para eso. puedes eliminar eso si hay más de un camino, pero si hay un camino, lo que puedes hacer es simplemente mantenerlo ahí. recomiendo mucho porque lo que realmente sucede es una vez que lo has animado todo, vamos a deshacer solo la capa Y notarás aquí que hay una pequeña brecha. Ahora lo que realmente sucede es que si eliminé la ruta anterior digamos, todo fue eliminado. No había datos aquí, solo estos datos, entonces en realidad no se podía superponer este fotograma clave en la parte superior de esta capa para solucionar ese problema Entonces hay que tener en cuenta estas pequeñas cosas antes de animar. Ahora, porque lo he hecho varias veces y he hecho más de 100 proyectos como este, es por eso que conozco estas cosas antes de crear la animación. Pero una vez que estés comenzando, tendrás que tener en cuenta estas cosas antes de crear las animaciones. Después de eso, tenemos la animación E. Que es una de dos partes. Entonces esta es la última parte, y luego está esta parte E, que también se hace de la misma manera que escribirías una E. Así que bastante simple de hacer. Nada demasiado complicado por aquí también. Y después de eso, tenemos un sencillo. Después de eso, tenemos IA, que en realidad solo se realiza mediante animación a escala vertical porque no necesitábamos hacer la animación de path por aquí. No era necesario. Entonces tenemos B, y después de eso, tenemos E. T E es en realidad un duplicado de esta E. La E original en realidad está sentada aquí, en realidad. Simplemente usé esto como referencia para poder arrastrar el anterior exactamente donde pertenece. Ya ves que todo encaja perfectamente, ¿verdad? Entonces todo está donde debería estar. Entonces es por eso que tienes que mantener las referencias en tu comp también. Puedes sacarlo después de que se apruebe el proyecto del cliente. También puedes leer la capa final. O si también puedes desactivar la visibilidad de la capa, en realidad no se renderiza, por lo que tampoco aumentará el archivo Lottie Json Por lo que funciona completamente sin problemas. A si le preocupa que si la animación fotograma clave por fotograma clave agrega más datos, en realidad, no lo hace, porque aquí no estamos usando la función de rastreo automático, ¿verdad? aquí no estamos usando la función de rastreo automático, Por eso es sorprendente que una vez que no usemos la función de rastreo automático y si hacemos la animación fotograma por fotograma nosotros mismos, no aumente el tamaño del archivo. Entonces solo sucede cuando estás creando el efecto de rastreo automático, ¿verdad No lo estás haciendo tú mismo cuadro por cuadro. Y además, una cosa a tener en cuenta, que es realmente importante es si quieres ajustar múltiples, como has hecho esta animación fotograma a fotograma, ahora quieres aumentar o ralentizar. Es una velocidad. Usted puede simplemente alt y arrastrar los fotogramas clave para ajustar el exceso de velocidad también. Entonces así es como se crea el efecto de escritura. Ahora, también quería mostrarte algunos ejemplos realmente cruciales porque a veces el vector no siempre es la respuesta. Ahora bien, ¿a qué me refiero con eso? Aquí hay otro proyecto de un cliente, que quiero mostrarles porque esto resalta algo realmente, muy importante. El cliente en realidad compartió este archivo y querían esta animación vectorial, pero yo no usé ese método. Ahora, ¿por qué? Porque si notas en el archivo illustrator, esto es en realidad un pincel. Ahora bien, los pinceles en realidad no se exportan a sabes no como un trazo. Entonces básicamente, tuve que ampliar el archivo. En realidad, el cliente proporcionó el archivo expandido, pero no importa si también proporcionaron un archivo de trazo porque los pinceles realmente no se transfieren a los efectos posteriores utilizando el método de sobrecarga. Simplemente transfieren un derrame cerebral. Y si uso esta capa de forma, lo que en realidad está haciendo es ahora, intenté hacer esto, pero en realidad mi PC se estaba quedando mucho rezagado porque cada elemento de aquí como esta capa, cada capa en realidad se está convirtiendo en una capa separada dentro después de los efectos Entonces esta una capa en realidad está creando 200 capas más. Entonces es por eso que esta no es una solución óptima. Por esa razón, lo que hice fue en realidad cerré todas las capas, y una por una, lo que realmente hice es mantener una capa abierta a la vez, una capa visible, y luego golpeé los turnos de Control A, y luego obtengo esta transparencia PNG 24, archivo fuera de ella, guárdala. Y lo hice con cada capa individual. Y una vez que todo eso se hizo, lo que hice fue que tomé esas capas así, todas estas piezas separadas. Déjame cerrar esto y mostrarte. Yo solo arrastre y suelte esto aquí. Voy a crear una nueva comp. Voy a seleccionar todos estos y luego mostrarte que tenemos todo en la misma ubicación. Después de eso, lo que hice fue bastante sencillo. Sólo apaguemos todas las capas y déjame mostrarte. Acabo de crear una máscara, simplemente así. Y de esta manera, se puede ajustar la velocidad y flexibilización de la misma también con bastante facilidad Entonces solo puedes hacer la flexibilización como quieras, ¿verdad? Entonces depende de ti. Depende completamente de ti cómo quieres manejar la velocidad y la flexibilización Y también, porque el tamaño del lienzo era realmente pequeño, lo cual fue dejarme mostrarle, que era de 400 por 200 pixeles. Entonces el tamaño de la capa en realidad no es enorme. Todo el lienzo está alrededor, como puedes ver, de 200 píxeles de altura solamente. Por lo que esta capa estará alrededor de 50 píxeles solamente, muy probablemente, o incluso menos. Entonces es por eso que los tamaños de archivo fueron realmente óptimos. Entonces usé este enfoque en lugar de usar el otro. Al igual que, no fuimos por el enfoque vectorial aquí, y estamos muy bien. Las animaciones funcionan muy bien, y también el cliente real quería algo que sabes que funcione muy bien. Ese es el objetivo de crear animaciones de Lottie. No tienen que ser rezagados. No pueden ser de tamaños grandes o pesados. Y déjame mostrarte los tamaños finales del archivo ahora mismo que hay 18 KB, son 150, son 150. Es 160 6 kilobytes, y es 140 3 Y déjame mostrarte otras animaciones también para que puedas simplemente echar un vistazo a esas también. Se puede ver que esos se crean también de la misma manera. Así que bastante simplemente hizo lo mismo. En todas las demás animaciones también, ¿verdad? Y entonces solo puedes precomponerlo y también llevarlo a la comp que quieras. Y el cliente no quería la escalabilidad porque iban a ser utilizados como firma en algún lugar de su sitio web Por lo que lo usaron como tamaños muy pequeños. Entonces, como pueden ver, esto se ve realmente encantador. Ahora, hay otra limitación que tenía un proyecto que quiero mostrarles. Déjame mostrarte primero la animación. Échale un vistazo a este. Entonces puedes ver que la sensación del diseño es muy incompleto y en realidad estaban bastante mal hechos Entonces déjame mostrarte lo que quiero decir con eso. Desafortunadamente, no tengo el archivo de diseño, así que déjame mostrarte el diseño dentro de la animación, así como la animación en realidad se está rompiendo por aquí. Entonces déjame mostrarte cómo se arreglan estas cosas y mal que se hizo el diseño, ya que puedes ver que esta mano está sola, pero puedes ver que las piezas están realmente muy rotas. Entonces en estos casos, lo que tienes que hacer es simplemente trabajar con lo que tienes. Realmente no puedes quejarte de ello. Hay que encontrar una solución en torno a estas cosas. Así se puede ver que hay una animación muy minimalista hecha porque solo animé las cosas que le estaban agregando sentido Y también, por el campo del estilo periodístico, quería que se mantuviera un enfoque muy minimalista Entonces está esta animación de aves, que es bastante simple. Solo está la rotación en la capa, y luego solo está el pájaro subiendo y bajando. Eso es. Y luego hay un parpadeo en los ojos También hemos comentado los parpadeos en clase anterior, así que puedes comprobarlo. Y se puede ver que por aquí solo hay colgajo de cogollos. Aparte de eso, simplemente hay un ojo muy simple en esta señora, de la misma manera Solo hay un poquito de momento en las cejas porque también eran capa separada. Y luego aparte de eso, solo hay un poco de momento de mano también en ambas manos. Y luego aparte de eso, solo está este gato que lo está animando la oreja en realidad estaba separada, así que me aseguré de animar algunos detalles en Y luego esta oreja se hizo muy mal porque es parte de la capa de la cabeza. Entonces solo hay un camino. Déjame mostrarte. Se puede ver que en realidad toda la cabeza está impulsada por esto. Entonces por eso mantuve el movimiento minimalista. Si agrego demasiada animación, podría simplemente traer el punto de anclaje hasta aquí y básicamente solo, ya sabes, padre todo a la capa. Pero si tuviera demasiado movimiento, distraería a toda la escena porque no hay mucha animación en todas partes. Entonces solo quería mantener la animación muy minimalista, y le traje la vida al gato con solo animar las orejas porque los gatos tienen la costumbre de hacer esto todo el tiempo Y aparte de eso, sólo hay momento de ojo justo. Eso es. Bastante simple. Entonces, en la otra mitad de la ilustración que te mostré, que es la parte correcta, lo que he hecho es realmente muy sencillo también. Se puede ver que existe este scooter, que al parecer es para anular, que apenas está rebotando como si el motor hubiera arrancado Y luego por otro lado, solo están estas extremidades de cactus que solo están haciendo alguna animación de rotación, bastante simple. Y aparte de eso, solo están estas animaciones de hojas que apenas están siendo balanceadas por el viento en el ambiente. Eso es todo, y solo hay una animación sutil en las nubes, que también son solo bucle pagadero. Entonces todas estas animaciones, ambas animaciones son solo animaciones de bucle peable que tienen los mismos puntos de inicio y finalización Y así el punto de mostrarles todo esto es que a veces no tenemos las soluciones óptimas ni la situación para dar lo que realmente queremos entregar. Y en esos escenarios de caso, solo tenemos que trabajar con lo que tenemos. Ahora bien, no es que no podamos animar estas cosas también. Podemos. Pero la cosa es que podemos lograr algunos resultados realmente geniales usando alfileres de títeres, pero esa no es realmente la solución óptima cuando estás trabajando con Lottiefiles porque los pines de marioneta no funcionan en Lottiefiles algunos resultados realmente geniales usando alfileres de títeres, pero esa no es realmente la solución óptima cuando estás trabajando con Lottiefiles porque los pines de marioneta no funcionan en Lottiefiles. Así que hay que tener en cuenta estas cosas antes de animar o crear cualquier cosa, y debes comunicarlas con tu cliente antes de comenzar el proyecto Entonces eso es básicamente todo. que aprendas algo nuevo en esta clase, y veamos en la siguiente. 7. Conclusión: Orgulloso de todos ustedes por llegar tan lejos a este curso y felicitaciones a todos ustedes por completar la guía de archivos Advanced Lot. Ahora, habrá dos cursos que estarán disponibles muy pronto, y va a haber algún trabajo realmente emocionante en su camino, y podrá ofrecer algunos servicios excelentes después de ver estos cursos. Ahora, ustedes están listos para seguir adelante y crear servicios Late para sus clientes, y les deseo todo lo mejor. Avísame si ustedes necesitan algún tipo de ayuda y si necesitan algún tipo de orientación, realmente contacten conmigo en Instagram si necesitan algún tipo de orientación con respecto a los proyectos de sus clientes, estaré más que ansioso por ayudar. Asegúrate de seguir adelante y enviar algunos trabajos en la clase también y también revisar mi trabajo. Me encantaría saber de ustedes que cómo estoy haciendo estas clases y también conocer qué cosas puedo mejorar en mis clases. Buena suerte a todos ustedes por crear animaciones perfectas para sus clientes, y Bold Bite volverá realmente, muy pronto con nuevos proyectos emocionantes. Muchas gracias. Cuídate. Adiós.