Animación explicativa SaaS: del diseño de la interfaz de usuario al movimiento en After Effects

1. INTRODUCCIÓN: Te emocionas viendo videos explicativos de SAS suaves y te preguntas ¿cómo hacen eso? Hola, soy Valerie, y después crear varios cursos exitosos, estoy súper emocionada de anunciar que mi curso más avanzado hasta ahora finalmente está listo Y esta vez, aprenderás a crear videos explicativos SAS premium desde cero. Después de ver más de 200 explicadores SAS premium, asumí el desafío de construir el curso más completo para crear videos explicativos SAS, desde comprender el guión y construir guiones gráficos hasta preparar la sincronización de archivos Figma con locutores asumí el desafío de construir el curso más completo para crear videos explicativos SAS, desde comprender el guión y construir guiones gráficos hasta preparar la sincronización de archivos Figma con locutores y animar demostraciones dinámicas limpias. No se trata de efectos llamativos, sino de técnicas y flujos de trabajo reales utilizados por los profesionales Va a crear un video explicativo completo de SAS 62nd que se vea profesional, se sienta suave y que realmente represente los estándares de la industria Este no es un curso para principiantes, e incluye 24 lecciones en profundidad. No te preocupes. Estarás completamente comprometido desde el primer segundo, las explicaciones detalladas, ejemplos reales, orientación personal, preguntas de lecciones medias y, por supuesto, las animaciones mismas te mantendrán inspirado y enfocado a lo largo de toda la experiencia. Al final de la maldición, tendrás la confianza para asumir cualquier proyecto, y mejor aún, te irás con un proyecto final de alta calidad orgullosamente podrás mostrar como ejemplo a tus futuros clientes Entonces, si estás listo para llevar tus habilidades de diseño de movimiento al siguiente nivel, continúa, únete al curso hoy y comencemos a aprender a crear videos explicativos SAS como un Pro 2. Bienvenida del curso y configuración de archivos del proyecto: Oye, ahí, y bienvenidos al curso. En este video, quiero guiarte a través algunas notas importantes antes de saltar a las lecciones. Antes que nada, no te olvides de la carpeta del plato principal donde encontrarás todos los activos que usaremos en las lecciones. Otra nota muy importante a mencionar es que de la lección dos a la lección seis, no hay que seguir adelante. Estas lecciones son más sobre explicar algunos pasos iniciales antes de la animación, principalmente sobre la preparación de todos los archivos de diseño antes de la fase de animación. En estas lecciones, te voy a mostrar cómo transferir los diseños de Figma a Illustrator y prepararlos para la animación Entonces, si decides hacerlo junto a mí, por favor guarda tus archivos de Illustrator en la carpeta de IA. Cuando empecemos a animar el proyecto, insisto fuertemente en que uses mis archivos preparados, los cuales puedes encontrar dentro de esta carpeta Así que no importa si guardaste tus propios archivos o no, en cualquier caso, todos usaremos mis archivos dentro de las pantallas para la carpeta AE. Cuando empecemos a animar, guarda tu archivo de proyecto after effects dentro de la carpeta AE, que podrás encontrar en la carpeta principal del curso que descargaste de mí Y una vez que terminemos el proyecto e iniciemos el proceso de renderizado, guardarás tus archivos dentro de la carpeta final, que también encontrarás en la carpeta del plato principal. Y lo último que quiero mencionar es que todos los enlaces para las cosas que voy a mencionar durante el curso se pueden encontrar en el archivo PDF llamado tintas. Dicho esto, comencemos. 3. Configuración e importación del diseño en Figma: Ahí. Entonces primero, comencemos por crear una nueva cuenta en Figma. O si ya tienes una cuenta, solo tienes que iniciar sesión. En caso de que no tengas uno, puedes crearlo con bastante facilidad iniciando sesión con tu cuenta de Gmail. Ahora bien, tal vez veas cosas diferentes a las que tengo aquí, y eso es porque ya tengo algunos proyectos importados para mostrarte algo en un minuto. Por ahora, hagamos clic en el nombre del perfil y descarguemos la versión de escritorio de Figma. No hay diferencia importante entre los dos. Simplemente prefiero usar la aplicación en lugar del navegador. El proceso de instalación es bastante sencillo. Entonces, una vez que hayas terminado, abre la aplicación y ahora iniciemos sesión en la cuenta usando la versión del navegador. Todo bien. Entonces, una vez que estemos listos, repasemos las funciones básicas que necesitas conocer como diseñador de movimiento trabajando con Figma. Primero, podemos cambiar el tema. Tenemos tres opciones principales. En los escenarios, no hay nada que realmente necesitemos saber. Entonces, sigamos adelante. Ahora, quiero que vayas a la sección de plantillas y herramientas. Aquí puedes encontrar una gran cantidad de activos útiles para usar en tus proyectos. A lo mejor en tu caso, estás viendo cosas distintas a las mías, pero eso no importa. Lo que importa es que aquí puedes encontrar diseños que puedes usar en tus proyectos de After Effects. Posteriormente en el curso, aprenderemos el método más sencillo y gratuito para importar estos diseños a After Effects. Puedes filtrar para ver solo los activos gratuitos, y si necesitas diseños de interfaz de usuario específicos, puedes usar la barra de búsqueda para encontrar algo que te guste. Estoy seguro que te sorprenderá descubrir algunos diseños de bastante alta calidad aquí algunos diseños de bastante alta calidad que son totalmente gratuitos. Solo asegúrate de verificar en las descripciones qué diseños se pueden usar con fines de marketing y cuáles son solo para fines de aprendizaje. Todo bien. Voy a devolver todo a la normalidad, y sigamos adelante. Si haces clic aquí, verás los proyectos de equipo en los que estás trabajando. En breve, cubriremos esta sección en profundidad. En borradores, verás los archivos que importaste desde fuera En todos los proyectos, verás los proyectos en los que realmente estás trabajando. Y en la basura, verás todos los archivos borrados, ¿bien? Entonces ahora, si volvemos a los borradores, podemos ver que si queremos crear un nuevo diseño, podemos dar click aquí y hacerlo Pero en nuestro caso, no vamos a crear un diseño desde cero, claro. Como diseñadores de movimiento, generalmente obtenemos un enlace Figma con el diseño del cliente, o recibimos un archivo Figma del En nuestro caso, encontré un diseño Figma súper genial de una plataforma SAS en el sitio web de Invoto elements Este es el nombre del diseñador. Entonces gritarle. Aquí hay muchos paneles diferentes. lo que es un ejemplo perfecto de un proyecto SAS complejo para que podamos practicar. Lo usaremos en el curso como si un cliente nos lo enviara. Así que ahora volvamos a Figma e importemos este diseño para que podamos usarlo. Para ello, primero, hagamos clic en el icono más junto a la sección de borradores, y luego seleccionemos Importar Ahora haz clic en Importar desde computadora y encuentra el FigMafle en nuestra carpeta de activos que descargaste para mí Por último, ingresa al sitio web de CRM, carpeta Kit, selecciona el FigMafle y presiona Abrir Ahora, espere unos segundos hasta que el diseño se suba a la sección de borradores. Genial. Entonces importar un archivo Figma es una forma de obtener el diseño del cliente, pero hay otra vía enlace Figma. Si un cliente comparte su diseño Figma contigo usando tu correo electrónico, verás una notificación aquí en el icono de la campana En cualquier caso, ya sea que haga clic en la notificación o como ahora, importe el archivo Figma, simplemente haga clic en él para abrirlo. Todo bien. Entonces ahora investiguemos este diseño de FigMA. Este diseño es muy complejo, pero es súper organizado. Al explorarlo, ahora veremos las acciones más comunes que necesitas hacer como diseñador de movimiento al prepararte para usar los diseños en After Effects. Entonces, lo primero que quieres hacer como diseñador de movimiento es asegurarte de que no estás trabajando en el proyecto que se puede compartir Esto significa que no quieres interferir con el equipo de diseño de este proyecto. Si recibe el diseño usando un enlace Figma que se puede compartir, entonces verá aquí otros perfiles que podrían ser el equipo de diseño del cliente que trabaja en este En ese caso, lo primero que haría, ya sea que obtuviera el archivo usando un enlace para compartir o simplemente el archivo Figma es duplicar este proyecto De esa manera, tengo el original intacto y no interferiré con el equipo de diseño que lo creó. Para ello, cerremos el proyecto y lo dupliquemos en la sección borrador. Haga clic derecho y seleccione Duplicar. Ahora, para estar seguro de que es el diseño en el que estaré trabajando, agregaré mi nombre al nombre del proyecto. Y para que solo yo pueda meterse con este proyecto, lo trasladaré a los proyectos de mi equipo personal, que encontraré en la sección Todos los proyectos. Ahora podemos ir a nuestros proyectos y abrir el diseño duplicado. Impresionante. Ahora, no verás ningún otro perfil junto a tu perfil en la esquina superior derecha. Genial. Entonces comencemos a explorar este proyecto Figma Como comprenderás, cada proyecto de Figma puede verse diferente de otro, como los proyectos de After Effects, todos se ven diferentes dependiendo de quién los diseñó. Mi objetivo aquí es que te familiarices con el diseño básico de Figma, para que puedas navegar por los proyectos Figma que recibes de un cliente Y este diseño es un gran ejemplo porque como ya dije, es súper complejo e incluye muchos elementos de diseño en su interior. Entonces, antes que nada, en cada proyecto de Figma, habrá una sección de páginas y una sección de capas Básicamente, lo que a nosotros como diseñadores de movimiento debemos importarnos es el panel izquierdo de Figma. No se deje intimidar por el lado derecho. Esta no es una zona que tengamos que tocar o cambiar. La sección de capas cambiará según la página que seleccionemos. Por ahora, tenemos la portada seleccionada, y por lo tanto estamos viendo las capas para esta página específica. Si estás trabajando con un buen cliente, normalmente obtendrás todas las pautas de diseño dentro del archivo Figma. Así que intenta buscarlos primero cuando abras el archivo. No los tengas, no dudes en pedir un PDF u otro archivo con los lineamientos de la compañía si tienen uno. Bien, entonces ahora, como dije antes, la sección de capas cambia. Según el proyecto que estamos seleccionando bajo la sección de páginas. Como pueden ver, cada vez que selecciono un diseño de página diferente, obtengo una estructura de capas diferente. Así es como funciona FIGMA. Otra cosa que debes saber es que puedes mover la línea que separa las páginas en las secciones de capas. Como puede ver, tenemos muchas otras páginas dentro de este archivo SIGMA. La mayoría de las veces, encontrará aquí todos los activos que el equipo de diseño utiliza para crear sus paneles de plataforma SAS y todos los diseños de interfaz de usuario de la plataforma. Entonces, en caso de que no puedas encontrar los diseños reales de SasuiPanel, ya sea pregunte al cliente bajo qué página se encuentra, o simplemente busca una página referente al Al igual que en este ejemplo, podemos verlo si hacemos clic en la página de diseño del sitio web. Así que hagamos clic en él y ajustemos el panel para que podamos ver todas las capas de esta página. Puedes mover la línea, o simplemente puedes hacer clic en el nombre de la página para contraer esta sección. Ahora, podemos ver todos los diseños de panel UI de la plataforma SAS del cliente. Como ya dije, es un proyecto muy complejo con muchos paneles UI, y no todo el tiempo, vas a tener este tipo de proyectos grandes. Pero es una buena oportunidad para que practiquemos en este tipo de proyectos, que puedas estar listo para cualquier archivo Figma más adelante en tu viaje Es un proyecto bien organizado, y si abres las capas de un panel, verás sus subcapas que crean ese panel específico. Así es como se debe estructurar un buen archivo de diseño Figma. Pero debes saber que no importa cuán estructurado esté el proyecto, a veces puedes encontrar pequeños problemas en el diseño. Déjame volver a mi tablero y mostrarte a lo que me refiero. Por ahora, no hagas nada. Solo mira y escucha. Iré a borradores e ingresaré otro kit de UI que descargué de Internet Fácilmente podría ser un diseño que obtuve de un cliente. Entonces aquí, la estructura del diseño es un poco diferente. En las páginas, hay una versión oscura de un diseño de plataforma. Pero lo más importante, si hago zoom en este panel, podemos ver que aquí hay un pequeño error. En ese caso, solo hago doble clic en las capas hasta llegar a la correcta, similar a como lo hacemos en Illustrator. Entonces puedo moverlo, y ahora veo que hay dos objetos que puedo borrar después de eso. Voy a devolver esta forma a su posición original. Genial. Ahora, quiero mostrarles otro ejemplo de un proyecto de diseño Figma Lo que quiero que veas en esta es que a veces puedes conseguir un diseño con diferentes tamaños de panel, como puedes ver aquí. Y además, hay situaciones en las que tendrás un diseño oscuro y otro brillante uno al lado del otro. Te estoy mostrando todo esto, así estarás familiarizado con las diferentes estructuras del proyecto Figma Todo bien. Ahora voy a volver a nuestro diseño, y vamos a trabajar juntos. Primero, quiero que te acostumbres a acercar y a moverte por el diseño Mantenga presionado el control o comando en Mac y desplace la rueda del mouse para acercar y moverse, similar al software de Adobe, mantenga la barra espaciadora y arrastre la pantalla. Como pueden ver, aquí tenemos muchos diseños de paneles, y no vamos a usarlos todos, claro. Usaremos solo los que sean relevantes para nuestro proyecto. Lo que quiero que noten es que incluso en este diseño muy organizado, todavía podemos encontrar algunos pequeños problemas de diseño. Presta atención a esta zona donde vemos la flecha. Aquí, se ve bien. Pero si vamos a otro diseño de panel, podemos ver claramente que esta capa no está en el lugar correcto en la pila de capas. Ya que este error se repite en muchos de los paneles, aquí no lo corregiremos. arreglaremos más adelante en el proceso de importarlo a After Effects. Pero antes de eso, necesitamos saber exactamente qué paneles del diseño usaremos. Eso es lo que vamos a hacer en la siguiente lección. Va a ser una buena. Entonces nos vemos ahí. 4. Lee el guion y planifica el storyboard: Regresa. En esta lección, quiero que no hagas nada, solo mires y aprendas. Ahora, después de abrir el infigma de diseño, necesitamos comenzar a entender qué paneles debemos usar en nuestros proyectos de after effects Y esta debería ser tu próxima preocupación hora de trabajar en un video SAS complejo. El mejor recurso para eso siempre será el guión. Puede ser un guión que obtenemos de un cliente o un guión que creamos nosotros mismos. En cualquier caso, el script es la fuente número uno para investigar a continuación. En nuestro caso, imaginemos que obtuvimos el guión del cliente. Este punto en mi proceso de creación de un video SAS, suelo empezar a crear el storyboard En la mayoría de los casos, es un poco más sencillo de crear que un guion gráfico para un video explicativo regular Eso es porque en muchas de las escenas de los videos SAS, necesitamos mostrar animaciones de grandes títulos y la animación de los paneles de interfaz de usuario del software. En mi opinión, eso es más fácil que idear conceptos visuales complejos como a menudo necesitamos para videos explicativos Primero, entendamos la estructura principal de casi todos los guiones. Ya sea para un SAS o un video explicativo regular. Esto te ayudará en la creación del storyboard. Por lo general, tendremos cuatro partes principales en el guión, la presentación del problema, la introducción de la empresa, cómo la empresa resuelve el problema, el llamado a la acción. Estas son las partes principales del guión, y a partir de aquí, a veces podemos agregar subpartes adicionales entre ellas. Por ejemplo, entre la primera y la segunda parte, podemos sumar puntos adicionales que muestran cómo el problema puede arruinar áreas más específicas en la vida del público, generalmente tres puntos. Y entre la tercera y cuarta parte, podemos agregar beneficios adicionales, también generalmente tres, sobre cómo la compañía puede mejorar la vida del público. Bien. Entonces ahora que tenemos esto, echemos un vistazo a nuestro guión, y te mostraré cómo creé el storyboard primero es lo primero, hay que entender que para crear buenos guiones gráficos, es necesario generar ideas visuales para el texto del script Y para ello, debes ver muchos ejemplos y videos similares al que necesitas crear. Adjuntaré un enlace a una lista de reproducción con algunos videos explicativos geniales de Sas para que puedas comenzar en alguna parte A lo largo del curso, te mostraré cómo utilizo estos videos para generar ideas para muchas de las escenas de nuestro proyecto. Siempre digo que el mejor método de generación de ideas es ver muchas referencias en línea, no sólo cuando estás trabajando en proyectos, sino también en tu tiempo libre. Necesitas entender que si quieres tomarte tu carrera en serio, debes empezar a pensar como un diseñador de movimiento. Y cuando ves muchos videos de diseño en movimiento, lentamente comienzas a memorizar escenas y animaciones que luego podrás usar en tus proyectos De esa manera, cuando lees tu próximo guión o creas uno para ti, ya puedes empezar a imaginar qué escenas encajarán visualmente con el guión Hay formas ilimitadas de presentar un guión visualmente, y este proceso puede cambiar ya sea por usted o por su cliente. Es por ello que crear un storyboard es tan importante. Te da a ti y al cliente una idea clara de qué esperar, y te ahorra mucho tiempo al evitar revisiones innecesarias. Tenga en cuenta que a veces cambiamos ligeramente las ideas durante la fase de animación, pero no demasiado drásticamente Entonces, si sientes que en la fase de animación, quieres cambiar algo que no sienta a perfección con tu idea inicial del guión gráfico, solo asegúrate de que el cambio apenas se note y no sea demasiado complicado Bien. Entonces ahora te guiaré a través de mi proceso de generación de ideas visuales para este guión. Para el texto de apertura, presentando el problema principal, quiero comenzar con una animación de texto simple porque vi que muchos otros videos empiezan así , y está totalmente bien. Para darle un poco más de sabor a la escena, decidí jugar con la palabra múltiplo y enfatizar su significado visualmente dándole una sensación desorganizada y desordenada, creando una animación caótica para los personajes de Terminar con un objeto cursor ayuda al espectador a seguir la siguiente escena. Entonces para el siguiente párrafo, continuando presentando el resultado del problema principal, quiero mostrar muchas tareas y mensajes en la escena antes de que el cursor se mueva hacia abajo, tal vez en un mar oscuro, donde tenemos un formulario de búsqueda estilo sitio web, indicando que el personaje está empezando a buscar ayuda en línea. A continuación, después de presentar los problemas, es momento de la introducción de la plataforma SAS que ayudará a mejorar la situación. Como vi en casi todos los videos de referencia, este es el momento de una bonita animación de logotipo, seguida del panel principal de la plataforma SAS. Siempre que quieras presentar un panel de UI, es una gran idea consultar con el cliente y preguntar qué prefiere mostrar. Esto se aplica a todas las escenas que se presentan los paneles de la interfaz de usuario. En este guión, también tenemos un aspecto divertido que dice que es tan sencillo que hasta un gato puede hacerlo. Por lo que decidí presentar un meme de un gato divertido en esta escena. En este punto, comenzamos a presentar las soluciones para el problema principal. En los videos SAS, esto suele mostrarse demostrando un flujo de trabajo de la plataforma. Se puede presentar en tres métodos principales utilizando gráficos basados en vectores, que es lo que usaremos en este curso. Podemos escalarlos y aún así obtener un resultado premium, pero debemos tener los archivos de diseño originales. Al usar grabaciones de pantalla, esto no requiere archivos de diseño originales, sino que registra la plataforma real. Se puede ahorrar mucho tiempo, pero la calidad del metraje es muy limitada. Usando gráficos representativos, en lugar de mostrar el diseño real, creamos algo que refleja la idea original. Esto es especialmente útil para los clientes que aún no tienen una versión final de su interfaz de usuario o que desean enfocarse solo en una característica específica de su plataforma SAS. Volver al guión. En este punto, después de ver una referencia genial, decidí que antes de saltar a un panel específico, quiero presentar todo a vez en un look dinámico de tres D. Entonces me aseguré con el cliente qué pantallas querían que mostrara, y anoté los nombres de los paneles por mí mismo, así pude encontrarlos fácilmente en el diseño de Figma antes importarlos a efectos posteriores Entonces tenemos una pregunta en el guión. Noté que este patrón se repite, así que decidí que la pregunta se presentaría en el mismo estilo visual y de movimiento. Y una vez más, me aseguré de usar el panel de interfaz de usuario relevante. A continuación, el proceso es prácticamente el mismo que para la escena anterior. Pero esta vez, quería presentar el panel de UI relevante de una manera más interesante. Después de ver un ejemplo genial de una referencia de diseño de UI muy similar, decidí presentarlo de la misma manera que en la referencia. Para el siguiente párrafo, el proceso es el mismo. Solo quiero mencionar que en este punto, al crear el guion gráfico, me estoy señalando a mí mismo qué paneles de UI deberían ser relevantes Y ya sé en mi mente, que en esta escena, puedo agregar algunas animaciones de Zoom in a partes específicas de un panel de UI. Pero si sientes que tu cliente no confía completamente en tu proceso, entonces te sugiero agregar estos fotogramas adicionales al storyboard, también De esa manera, no quedarán preguntas sin respuesta sobre cómo se verá la escena Ahora bien, en este punto, donde tenemos la parte de compartir archivos, es posible que notes que no hay texto que acompañe a esta escena, y ese es otro punto importante que debes saber tratar. Para decidir cuándo agregar texto y cuándo no, lo mejor es consultar con el cliente. A veces quieren que se muestren ciertas frases y otras veces son menos importantes. Así que asegúrate de alinear esta parte con el cliente. Solo pregúntales qué frases del guión quieren que se presenten en el video. Todo bien. Entonces ahora para la parte final, decidí terminar el video con la misma animación de texto con la que empezamos. Eso es porque la palabra luchando también se ajusta a las letras desorganizadas, animación que hicimos para la palabra múltiplo Entonces tenemos que terminar con una escena de llamada a la acción, donde en la mayoría de los casos, presentaremos el logotipo y el sitio web de la compañía o cualquier otra llamada a la acción que solicite el cliente. Por ejemplo, podría ser Met us en LA. Haga clic a continuación para unirse a la lista de espera, etcétera. Entonces con eso, hemos terminado la lección, y estamos listos para finalmente aprender a importar los diseños de Figma a efectos posteriores Eso lo haremos en la siguiente lección. Va a ser una gran. Nos vemos ahí. 5. Importar paneles de UI de Figma a After Effects: Yo vuelvo. En esta lección, vamos a aprender a importar los paneles de la interfaz de Figma a after effects Hay cinco formas principales que conozco para hacer este trabajo. Ya puedes verlos todos en la pantalla. Podemos hacerlo usando extensiones o podemos hacerlo usando las funciones nativas de Figma. La diferencia es que al usar extensiones, la transferencia ocurre directamente de Figma a efectos posteriores Al usar funciones nativas de Figma, primero necesitamos importar el diseño a Illustrator y luego llevarlo a los efectos posteriores Empecemos con la lista de extensiones. No voy a profundizar en cada método porque no quiero que este curso sea superior a 50 horas. En su lugar, adjuntaré enlaces a los mejores tutoriales para cada extensión, ya sea en la carpeta assets o debajo del video en la descripción. El primero es AEUX. Es una extensión gratuita, pero crea muchos problemas durante el proceso de importación, especialmente con capas de texto, efectos y valores de posición en el diseño. El siguiente es Convertify. usarlo con una suscripción mensual, pero también debes tener instalado Adobe XD en tu computadora Entonces tenemos overlord, que actualmente es la mejor opción, según muchos diseñadores de movimiento Es una extensión de pago, y es la forma directa más rápida de importar capas de Figma en after effects sin pasar por Illustrator, que cubriremos en los siguientes métodos Solo debes saber que incluso con overlord, todavía hay algunos problemas que deben ajustarse después de importar las capas de Figma en los efectos posteriores No es 100% perfecto. Dado que la mayoría de mis alumnos son diseñadores de movimiento principiantes sin muchos fondos para invertir en extensiones pagas, decidí en este curso usar el método nativo de la función Figma La primera opción es usar la función de exportación. Sé que hay mucho más que cubrir sobre esta función, pero de nuevo, quiero que empecemos con animación y no perdamos demasiado tiempo explorando FigMA. El objetivo de este curso no es aprender todas las funciones de Figma, sino aprender solo las funciones que necesitamos como diseñadores de movimiento para crear un gran video explicativo SAS Al final de este curso, quiero que se sientan lo suficientemente seguros como para tomar un archivo FigMA de un cliente e incluso sin conocer Figma en profundidad, aún así sean capaces de crear un gran video explicativo SAS Bien. Entonces ahora hablemos del método final. En este curso, utilizaremos este método, que es simplemente copiar las capas Figma como un formato SVG y pegarlas en Allí podemos dividir las capas y organizar el diseño para que se ajuste a nuestras necesidades en los efectos posteriores. Entonces ahora quiero que agarres el ratón y finalmente empieces a trabajar conmigo. Lo primero que tenemos que hacer es abrir Adobe Illustrator. Entonces hagámoslo muy rápido. Ahora, necesitamos crear un nuevo archivo. Así que vamos a hacer clic aquí. Para el tipo de documento, suelo ir por las plantillas web, y aquí podemos elegir la grande que tenga dimensiones de resolución full HD. A continuación, necesitamos pensar en un nombre para este archivo. Y eso es muy importante porque queremos recordar qué panel de UI es. Entonces podemos iniciar el nombre con panel o pantalla uno. Después agrega un sufijo con el nombre del panel en el que estamos trabajando En este caso, según nuestro storyboard, el primer panel que se necesita mostrar es el dashboard Pronto, elegiremos cuál específicamente. Por ahora, escribamos dashboard aquí en el nombre. Entonces podemos dejar toda la configuración tal como está y presionar Crear. Y ahora, antes de seguir adelante, quiero que configuremos el mismo diseño de panel. Así que vamos a Ventana, Espacio de trabajo y configurémoslo en Essentials Classic. En caso de que se haya movido por algunos paneles en este diseño en el pasado, asegúrese de restablecer el diseño. Ahora, vamos a mejorarlo un poco arrastrando la pestaña de capas al área abierta derecha aquí Será mucho más conveniente para nosotros cuando empecemos a trabajar con todas las capas en solo un minuto. Genial. Entonces ahora estamos listos para volver a Figma e importar nuestro primer panel o pantalla En este curso, los llamaré pantallas. Como ya mencioné anteriormente, tenemos que elegir uno de los diseños de pantalla del tablero. Para saber qué pantalla usar, puedes preguntarle al cliente qué prefiere. Por supuesto, esta decisión también se puede tomar más temprano en el proceso mientras se crea el guión gráfico Muy bien, digamos que queremos este. Como pueden ver, cuando hago clic en el nombre de este diseño, InfigMat se llama marco Es como una mesa de trabajo e ilustrador. Cuando hago clic en eso, puedo ver que está seleccionado en la pestaña de capas a la izquierda debajo de la sección del tablero. Puedes abrir las capas y todas las subcapas para ver lo complejo que es este diseño. En nuestro caso, queremos todas las capas relacionadas con este marco. Entonces podemos seleccionar todas las capas manualmente, o simplemente hacer clic en el nombre del marco. Después haz clic derecho, ve a Copiar Pegar Dice y elige SVG. SVG es un formato basado en vectores que se puede abrir fácilmente en Illustrator porque Illustrator es un software basado en vectores. Bien. Así que ahora volvamos a Illustrator y simplemente presionemos Control o Comando en Mac más V para pegar el diseño copiado. Tan simple como eso. Una cosa que debes saber sobre este método es que si tu diseño de Figma tiene efectos como desenfoque, sombra paralela u otras superposiciones complejas, no aparecerán en En ese caso, puedes o recrear los efectos en Illustrator o, en mi opinión, la mejor opción, recrearlos más tarde en after effects También tenga en cuenta que todas las capas de texto ya no son texto editable Ahora son formas. Todos estos temas también se aplican a la mayoría de las extensiones pagadas. Dije, no importa qué método uses, siempre necesitarás ajustar algunas cosas pequeñas en el camino. A lo mejor en el futuro, habrá mejores formas. Bien, volvamos al diseño. En los casos en que el diseño sea más grande o más pequeño que tu lienzo de Illustrator, sugiero que mientras el diseño esté agrupado, asegúrate de que las proporciones restringidas activadas y luego escale el tamaño del mismo manualmente desde aquí. De esa manera, su diseño escalará proporcionalmente y se ajustará correctamente. En nuestro caso, se ajusta perfectamente al lienzo así que estamos listos para pasar a separar las capas. Entonces primero, necesitamos liberar la máscara de recorte para poder desagrupar las capas Luego haga clic en algún lugar afuera para deseleccionar el diseño y volver a seleccionarlo, o simplemente haga clic derecho y desagruparlo Nuestro objetivo es tener todas las capas desagrupadas, para que podamos decidir qué secciones deben permanecer agrupadas y cuáles no A continuación, necesitamos separar todas las capas desagrupadas en capas individuales Para ello, mientras se selecciona la capa principal, abre el menú de capas y selecciona liberar a la secuencia de capas. Ahora podemos ver todas las capas de este diseño. No se deje intimidar por la cantidad de capas. No se quedará así. A continuación, necesitamos moverlos a todos fuera de la capa principal. Para ello, seleccione la primera subcapa, desplácese hacia abajo, mantenga presionada la tecla Mayús y seleccione la última. Ahora, arrástralos todos fuera de la capa principal. Esto nos permitirá preparar el diseño para la animación. Después de eso, podemos eliminar la capa vacía de abajo. Sé que es una capa vacía porque no hay un icono de flecha junto a ella en el lateral. Genial. Nuestro siguiente paso es preparar las capas para la animación. Lo que quiero decir con eso es asegurarnos de agrupar capas que no necesitan permanecer separadas porque no las vamos a animar. Y ¿cómo sabemos lo que vamos a animar y todo eso? Por eso creamos el storyboard. Por ejemplo, en esta escena, no necesitamos animar ninguna de las capas Pero en caso de que un cliente nos lo pida o decidamos que queremos animar algunas de las partes aquí, repasemos el diseño y empecemos a organizarlo mientras planeamos lo que podríamos animar más tarde si Bien, entonces en este punto, primero me aseguro de bloquear la capa de fondo para poder seleccionar fácilmente las otras capas en el diseño. Ahora, voy a tratar de seleccionar los objetos que creo que deberían agruparse porque estoy seguro de que no los voy a animar. Como puede ver, también se están seleccionando algunas otras capas . Estas son formas que se utilizan como máscaras de recorte. Seleccionemos uno. Y aquí podemos ver que está bajo nuestra capa de fondo. Podemos apagarlo, bloquearlo o eliminarlo porque aquí no lo necesitamos. Bien. Entonces ahora comencemos a agrupar los objetos. Estamos seguros que no vamos a animar, empezando por la zona superior, en este caso Sé que en el storyboard, tengo una escena de barra de búsqueda, así que me aseguraré de no agrupar los objetos que crean la barra de búsqueda junto con el resto del área superior Así que vamos a seleccionar todos los objetos aquí, asegurándonos de no seleccionar la barra de búsqueda y luego agruparlos juntos. Ahora, este grupo está en una capa, y se movió hacia arriba en la lista de capas. Vamos a apagarlo por ahora. A continuación, podemos agrupar esta área aquí porque sé que no la animaré y no habrá necesidad de cambios en esta área ni en el diseño ni en la animación Vamos a agruparlos usando el atajo Ctrl o Comando en Mac más G. Podemos encontrar esta capa de grupo aquí Puedes colocarlo debajo de la primera capa de grupo si quieres. Y vamos a apagarlo por ahora, para que podamos enfocarnos en la barra de búsqueda. Para la barra de búsqueda, estoy planeando animar el icono de la lupa y manipular la palabra búsqueda más adelante en la Así que me aseguraré de no agruparlos del todo. Para que esto sea más fácil, apaguemos la capa de búsqueda blanca. Veo que está construida a partir de dos capas, una para el relleno blanco y otra para el trazo gris. Nos ocuparemos de eso en un segundo. Por ahora, vamos a agrupar todas las formas que crean el icono de la lupa Como puede ver, estas formas están en capas separadas, lo cual es innecesario. Podemos tenerlos en una capa. Así que selecciónalos y agruparlos usando el atajo. A continuación, comprobemos si la palabra de búsqueda está en una capa. Lo es. Eso significa que podemos dejarlo como está. Entonces veamos qué pasa con el icono de signo de exclamación Todas las formas están en capas separadas, y no queremos eso. Entonces vamos a agruparlos a todos juntos. Bien, entonces con esto, terminamos con la zona superior Ahora vamos a tratar con el área debajo de ella. Pero antes de eso, ahora podemos traer de vuelta todas las capas apagadas y acercarlas entre sí en el panel de capas. Pero para ser honestos, no tenemos que hacerlo ahora. Desde más tarde, después de que terminemos de agrupar todas las capas necesarias, organizaremos el panel de capas de todos modos, ¿verdad? Y ahora volvamos a agrupar las capas en la sección UI debajo de la barra de búsqueda. Nuevamente, en este caso, necesitamos pensar si queremos animar algo aquí o no Tal vez necesitemos animar la línea aquí o los números. Esta es más o menos la lógica detrás de preparar el diseño para la animación. E incluso si usas extensiones pagas y te saltas el paso de Illustrator, aún necesitarás ajustar algunas capas y pre comps dentro de los efectos posteriores Pero la buena noticia es que es muy poco probable que recibas un diseño tan complejo donde necesitarás animar tantos paneles Lo estamos haciendo en el curso porque quiero que repitas estas acciones para que te acostumbres a ellas lo más rápido posible. Y no te preocupes si crees que necesitas preparar todos los paneles Figma para este curso en Illustrator En la carpeta principal del curso, podrás encontrar todos los archivos de Illustrator ya preparados para la animación. Sólo quiero que practiques esta vez conmigo. Entonces puedes usar mis archivos listos. Bien, volvamos a la lección. Aquí, decidí que quiero que se separen todas las capas porque podría animarlas en el futuro Pero sí quiero asegurarme de que los objetos que crean el icono de flecha estén en una capa. Para ello, bloqueemos la caja blanca para que podamos seleccionar las formas de flecha y agruparlas. Hagamos lo mismo para el resto de las cajas. Genial. Una vez hecho eso, pasemos a la siguiente parte. Primero, bloqueemos la forma blanca para que podamos seleccionar los objetos aquí fácilmente. Ahora vamos a seleccionar el icono del calendario, y como puedes ver, se extiende a través de muchas capas, así que sería mejor si lo agrupamos en una capa. A continuación, asegurémonos de que los botones en su texto también estén agrupados uno por uno. Para esta palabra, podemos dejarla ya que ya está agrupada en una sola capa. Impresionante. Ahora, vamos a tratar con esta parte. Como pueden ver, todas estas capas están agrupadas ahora mismo, pero creo que es una buena idea separar esta pequeña caja porque podríamos animarla en el futuro Entonces primero, liberemos la máscara de recorte de este grupo, luego haga clic en otra parte para Deseleccionar y desagrupar Genial. A continuación, podemos intentar seleccionar la forma de la máscara de recorte y eliminarla. En este punto, podemos acercar y asegurarnos las capas aquí estén separadas de la manera que queramos. Por ejemplo, veo que esta caja está agrupada, pero tal vez necesite animar los números aquí, lo que significa que necesito que los objetos de adentro se separen Esta vez, extendamos aquí las capas agrupadas sin desagrupar la pila y veamos qué pasa A veces podemos cometer estos pequeños errores. Entonces quiero que sepas qué esperar cuando esto suceda. Entonces, mientras se selecciona la capa que contiene este grupo, abramos el menú y hagamos clic en Liberar a Secuencia de Capas. Ahora vamos a sacar todas las capas de la principal. Y como pueden ver, parece que solo sacamos del grupo el pequeño punto púrpura. El resto de la pila sigue agrupada. En ese caso, ya que solo necesito separar la capa numérica, puedo hacer doble clic en esta pila hasta llegar a ella, luego presionar ControlX para cortarla A continuación, haré clic en el pequeño cuadro blanco para ver dónde está en el panel de capas, crearé una nueva capa encima de esta y presionaré Control Shift V para pegarla en el mismo lugar. Bien. Avanzando. Ahora, veamos qué tenemos aquí. Creo que podemos dejar la gráfica tal como está, pero para los nombres del mes a continuación, creo que es mejor agruparlos ya que no creo que vaya a animar esta parte Y también agruparemos el punto rojo con su texto y hagamos lo mismo con el azul. Impresionante. Ahora podemos pasar a la siguiente parte. Veamos qué tenemos aquí en el área de Pie. Veo que aquí tenemos algunas máscaras de recorte. Nos ocuparemos de ellos en un segundo. Primero, seleccionemos la caja blanca y la bloqueemos. Así podremos seleccionar el resto de los objetos en esta parte más fácilmente. Ahora, comencemos a agrupar las partes obvias como las formas de los iconos del calendario , los botones y sus textos. También podemos acercarnos aquí y agrupar los puntos y su texto juntos porque no creo que vamos a animar estas partes Seleccionemos los números aquí y veamos en el panel Capas para asegurarnos el ícono de USD y el número ya están agrupados. Genial. Ahora podemos pasar a tratar con el Pi. Veo que el número aquí está en una capa separada, lo cual es bueno. Pero cuando selecciono el Pie, veo que está agrupado y tiene alguna forma extraña detrás de él. Hagamos clic derecho aquí para ver si es una máscara de recorte. Como podemos ver, no es una máscara de recorte. Vamos a seleccionarlo e intentar moverlo. Veo que es sólo un rectángulo blanco. No lo necesitamos en el archivo, así que vamos a eliminarlo. Genial. Ahora para el Pastel. Veo que todas sus partes están en capas separadas, lo cual es útil si planeas animarlo en after effects Pero en nuestro caso, no voy a hacer eso. Entonces, seleccionémoslos todos. Mantenga presionada la tecla Mayús, haga clic en el número para seleccionarlo y agrupe solo las capas de Pie juntas. Siempre puede verificar encendiendo y desactivando la nueva capa agrupada para confirmar que agrupó los objetos correctos. Se ve genial. Ahora, podemos pasar a ocuparnos de la parte del botón aquí. Primero, cerraré la caja blanca para poder seleccionar el resto de las formas fácilmente. Ahora, vamos a agrupar las formas de iconos de calendario, los botones en las formas de iconos de lupa Por último, seleccionemos la parte inferior para ver qué sucede aquí. Veo que todas las capas ya están agrupadas. En mi caso, no quiero animar ninguna de las capas aquí Entonces lo dejaré como está. Pero en caso de que necesites animar algo aquí, por ejemplo, los botones, tendrías que manejar esta parte de manera diferente Bien. Pasemos ahora a la última parte, que es el panel izquierdo aquí. Si haces zoom en el área de iconos, puedes ver que la forma de cada icono se coloca en una capa separada, que en nuestro caso, es completamente innecesaria. Según el guión gráfico y guión, no tenemos ninguna parte en el video donde necesitamos animar algo en este panel izquierdo, que es el menú principal de esta plataforma SAS Entonces, en ese caso, seleccionemos aquí toda el área, incluyendo la flecha pequeña y el cuadro gris, y luego agruparlos todos juntos. Impresionante. Ahora lo tenemos en una sola capa. Y ahora hemos llegado a la parte final de preparar este archivo para la animación, que es eliminar las capas vacías restantes que tenemos aquí. Se puede identificar claramente una capa vacía por el hecho de que no hay una pequeña flecha a su lado apuntando a la capa. Entonces comencemos a seleccionar todas las capas vacías y eliminarlas del panel de la capa. En algunos casos, mantengo control o comando en Mac para seleccionar las capas vacías una por una. En situaciones en las que tenemos una capa vacía directamente después de una no vacía, es mejor seleccionar todo el rango de capas, y manteniendo el control o comando, deseleccionar las que no están vacías. Puede que este método le resulte más conveniente. Desafortunadamente, no he encontrado un atajo o función que seleccione todas las capas vacías a la vez. Entonces, si intentas encontrar uno usando IA o buscando en línea, asegúrate de que realmente funcione y luego compártelo con el resto de nosotros. Muy bien, parece que borramos todas las capas vacías. Ya podemos desbloquear los bloqueados si queremos. Pero lo más importante, echemos un vistazo al marco general y veamos si necesitamos algún ajuste. Veo que aquí no vemos el nombre del panel , que es Dashboard. Puede que no esté en el orden correcto en la pila de capas. Así que vamos a buscarlo y colocarlo en el lugar correcto. Genial. Todo se ve bien ahora, y estamos listos para guardar el archivo. Si quieres seguirme y preparar todos los diseños a lo largo del curso, ingresa a la carpeta de IA y guarda ahí tu archivo. Pero solo para que lo sepas, puedes saltarte este proceso, y cuando empecemos a animar en after effects, puedes usar mis archivos de Illustrator ya preparados, los cuales puedes encontrar dentro de la carpeta llamada pantallas para AE En mi caso, actuaré como si lo estuviera haciendo por primera vez y guardaré este archivo aquí. Solo tenemos que asegurarnos de que el nombre es correcto y que lo estamos guardando como en el archivo de Adobe Illustrator. Entonces podemos hacer clic en Guardar. Podemos dejar todas las opciones como están y simplemente golpear Bien. Y con esto, hemos terminado de preparar este diseño de interfaz de usuario. Ahora voy a preparar el resto de los paneles de UI para la animación. Como ya te dije, no tienes que hacer esto conmigo porque ya tendrás los archivos de Illustrator listos, pero sí quiero que veas las lecciones porque en cada proceso de preparación para cada panel, podemos aprender algo que también te podría pasar durante este proceso. Bien. Por lo que ahora seguiremos preparando los archivos Figma para animación usando Adobe Illustrator De acuerdo con nuestro guión, el siguiente panel que necesitamos usar es uno de los paneles bajo la sección de proyecto. Entonces digamos después de confirmar con el cliente, sabemos que esta es la pantalla que necesitamos usar en el video. Como hicimos con la pantalla anterior, podemos seleccionar todas las capas manualmente o simplemente seleccionar todo el fotograma haciendo clic en su nombre. Ahora, para copiarlo a Illustrator, necesitamos hacer click derecho, ir a Copiar Pegar Como. Y aquí tienes una pregunta rápida para ti. ¿Qué formato necesitamos para copiarlo? Como queremos tener los objetos en este diseño guardados como archivos vectoriales, necesitamos copiarlos como un formato SVG. Ahora podemos volver a Illustrator. Y si estás siguiendo la lección conmigo, necesitamos crear un nuevo documento. Podemos seleccionar el archivo reciente que usamos y simplemente cambiar su nombre para que coincida con el panel de interfaz de usuario correcto o la pantalla en la que estamos trabajando. Voy a llamar a esto una pantalla dos Proyectos. Una vez que tengamos el nuevo lienzo, ya podemos presionar Control o Comando en Mac V para pegar el diseño Figma. Bien, lo primero que tenemos que hacer es soltar la máscara de recorte A continuación, vamos a desseleccionar el grupo, luego seleccionarlo de nuevo para que podamos hacer clic derecho y desagruparlo Después de eso, mientras se selecciona esta capa principal, abre el menú y elige liberar a capas. Esto separará las capas. Finalmente, seleccionemos la primera capa dentro de este grupo, desplazemos hacia abajo, mantengamos presionada la tecla Mayús y seleccionemos la última para que podamos moverlas todas fuera de la capa principal. Bien. Entonces ahora vemos la forma que se utilizó como máscara de recorte. ¿Cómo sé que esta es la forma? Puedo hacer clic en el círculo pequeño del lado derecho de esta capa, y se seleccionará la forma. Cuando lo muevo, veo que en realidad es solo una forma vacía. Entonces vamos a eliminarlo. Ahora estamos listos para comenzar a agrupar el resto de las capas según nuestras necesidades y efectos posteriores. Primero, podemos seleccionar el fondo gris principal y bloquearlo, para que podamos seleccionar el resto de las capas más fácilmente. Empecemos por la zona superior. Voy a seleccionar esta parte aquí mismo, asegurándome de evitar seleccionar el panel izquierdo con los números en los dos botones en la zona superior porque eso no es parte de la sección de encabezado. Ahora presionaré Control G para agruparlos. Genial. Ahora pasemos al menú de la izquierda que tenemos aquí. Como sé que no quiero animar esta parte, seleccionaré todas las capas y objetos de esta sección y los agruparé Impresionante. Para mayor comodidad, podemos bloquear las capas agrupadas para que podamos seguir seleccionando el resto de los objetos y formas más fácilmente. Pasemos ahora al menú principal de la izquierda. Podemos seleccionar todas las formas aquí, asegurándonos de incluir la flecha pequeña y el rectángulo gris detrás ella, y agruparlas todas juntas. Genial. Ahora pasemos a la parte principal de esta pantalla de interfaz de usuario. Cuando no estoy seguro de lo que está pasando en una sección, muevo algunas formas y capas alrededor para entender qué secciones están agrupadas y cuáles son solo capas separadas. Para comenzar, encontraré la caja blanca y la cerraré para poder continuar con esta sección más fácilmente. Ahora, como puedes ver, toda la sección con las cajas pequeñas agrupa toda la sección con las cajas pequeñas y los iconos. Entonces comencemos tratando con las capas. Lo primero que haré es hacer clic derecho en esta sección y asegurarme de liberar cualquier máscara de recorte si la hay Después de eso, voy a hacer clic en otra parte, luego hacer clic derecho sobre este grupo para desagruparlo. A continuación, me aseguraré de que esta capa esté seleccionada, luego liberaré todas las capas para separar las capas. Finalmente, moveré todas las subcapas separadas fuera de la capa principal. Ahora veo que la forma utilizada para la máscara de recorte permanece aquí, y no la necesito en mi diseño Entonces lo seleccionaré y lo eliminaré. Antes de seguir adelante, quiero mencionar, una vez más, por qué es tan importante mirar constantemente diferentes referencias y ejemplos de videos similares. Como ya estudié muchos ejemplos, cuando miré este panel UI, inmediatamente recordé haber visto un diseño muy similar en uno de los videos de referencia que me dieron la idea animar esta sección la misma manera que vi en la referencia Entonces ahora en Illustrator, mientras preparo este diseño, sé que necesito agrupar cada una de las pequeñas secciones aquí como su propio grupo. De esa manera, en After Effects, me será mucho más fácil animarlos como imaginé a partir de Así que ahora seleccionemos cada sección pequeña y agruparemos todas las formas, texto y capas relacionadas con ella en un solo grupo. Hagamos esto para todas las pequeñas secciones aquí. Impresionante. Ahora podemos pasar a la parte inferior con los números de página. Como sé que no quiero animar esta parte de ninguna manera, seleccionaré todas las formas y capas aquí y las agruparé todas juntas Genial. Ahora, puedo pasar a la parte superior de esta sección. Podemos agrupar todas las formas en esta área. También podemos agrupar el texto y los cuadros de botón para cada botón. Y por último, podemos seleccionar esta larga sección a continuación y agruparla todo junto. Ahora estamos listos para comenzar a eliminar las capas vacías. Si quieres, puedes bloquear las capas no vacías para que destaquen más claramente mientras borras las vacías. Al hacer esto, noté que hay una capa que parece que no tiene nada dentro de ella, pero claramente no está vacía, en ese caso, para entender mejor lo que está pasando aquí, aislaré esta capa manteniendo presionada la Alt y haciendo clic una vez en su icono. Esto apagará todas las demás capas y dejará solo visible esta. Muy bien, entonces veo que es algún tipo de línea que no tiene ningún propósito en el diseño. Si no estoy seguro, puedo volver a encender todas las capas para verificar si es importante para el diseño. Pero si estoy seguro de que no lo necesito, vamos a borrarlo. Ahora, estamos completamente listos para comenzar a seleccionar las capas vacías y eliminarlas esta vez. Usemos el segundo método con las capas no vacías mientras mantenemos el control. Una nota rápida si después seleccionar todas las capas relevantes y hacer clic en Eliminar, recibe un mensaje de advertencia, eso generalmente significa que accidentalmente incluyó una capa que no está vacía. En ese caso, sugiero no borrar todavía, volver sobre su selección, revisar cuidadosamente de nuevo y anular la selección de la capa que contiene elementos de diseño Impresionante. Ahora solo nos quedan las capas relevantes en el archivo. Podemos desbloquearlos todos y guardar el archivo. Una vez más, asegúrate de que el nombre es correcto y que lo estás guardando como archivo de Illustrator. Luego haz clic en Guardar. Con eso, terminamos esta lección, y estamos listos para pasar a la siguiente. Nos vemos ahí. 6. Preparación del panel de IU de proyectos en Illustrator: Estoy de vuelta. Ahora, sigamos preparando el siguiente panel de interfaz de usuario desde nuestro guión gráfico De acuerdo con la secuencia, el siguiente es el panel UI del proyecto. Entonces volvamos al archivo Figma y copiemos el marco que necesitamos De vuelta en Illustrator, vamos a crear un nuevo documento. Me aseguraré de darle a este nuevo archivo el nombre correcto y presionar Crear. Ahora, vamos a pegar el diseño. Como podrás notar, este diseño es un poco más alto que nuestros anteriores, pero eso está totalmente bien. No interfiere con nuestro trabajo. El proceso será más o menos el mismo. Primero soltaré la máscara de recorte, luego desagruparé el diseño Después de eso, separaré todas las capas en capas individuales. Entonces sacaré todas las capas de la capa principal, y después de eso, bloquearé la capa de fondo. Y borra la forma que se utilizó para la máscara de recorte. Ahora, como puedes ver, aquí hay un pequeño error de organización de capas, que en realidad también aparece en el diseño original de Figma Para nosotros en Illustrator, no es un gran problema. Todo lo que tenemos que hacer es seleccionar todas las capas y formas en esta sección, incluyendo la flecha y el pequeño cuadrado gris, y agruparlas. Posteriormente, colocaremos este grupo en el lugar correcto en la pila de capas. Por ahora, sigamos enfocándonos en agrupar las siguientes secciones. Una vez hecho esto, vamos a agrupar el área de encabezado. A continuación, tratemos con la sección principal en este diseño de interfaz de usuario. Primero, seleccionaré el cuadro blanco y lo bloquearé para poder seleccionar fácilmente las capas y formas que quiero agrupar dentro de esta sección. Ahora, comenzaré a agrupar todas las formas y textos relevantes. Después de eso, agruparé todos los botones aquí en un solo grupo ya que no necesito que cada botón esté separado. No creo que los vaya a animar individualmente en after effects Por último, agruparemos aquí también esta área. Y ahora hablemos de esta parte. De acuerdo con nuestro guión gráfico, necesitamos presentar aquí algún tipo de flujo de software de demostración Creo que voy a crear una animación para la casilla de verificación. Es decir, quiero animar un cursor que activará este icono de marca de verificación verde En ese caso, primero eliminaré uno de los iconos de marca de verificación Entonces me aseguraré de que todos los paneles de UI aquí se vean iguales, y separaré la marca de verificación restante y el cuadro verde en sus propias capas para poder animarlos Veo que el icono V negro, y el pequeño cuadro verde ya están separados cada uno en una capa separada. Entonces lo último que voy a hacer es simplemente colorear el trazo verde aquí en gris. Una vez hecho eso, comenzaré a agrupar cada sección aquí una por una. Cada tarea debe estar en su propia capa. Solo asegúrate de no incluir la marca de verificación y la casilla verde en esos grupos Por supuesto, si necesitas agregar las fotos de las personas más tarde, entonces no debes agrupar todo junto. Mantendrías el ícono de Avatar en una capa separada. No te preocupes. Practicaremos eso en las siguientes lecciones. Por ahora, terminemos de agrupar cada cuadro de tareas que tenemos aquí. Genial. Una vez que hayamos terminado con eso, estamos listos para comenzar a eliminar las capas vacías en el panel de capas. Voy a acelerar un poco este proceso por ahora. Todo bien. Así que una vez que hayamos terminado de eliminar todas las capas vacías, podremos mover la capa con el menú de la izquierda un poco más arriba en la pila de capas para que podamos ver todos los detalles del diseño correctamente. Genial. Ahora, todo se ve perfecto. Con eso, podemos seguir adelante y guardar el archivo. Asegúrate de que el nombre sea correcto y luego haz clic en Guardar. Impresionante. Ahora volvamos a Figma y preparemos la siguiente pantalla de UI Según nuestro storyboard, en esta parte, también necesitamos crear una pequeña animación demo donde veamos aparecer un panel emergente en el centro de la pantalla Entonces iré a Figma y buscaré el marco que necesito copiar a Illustrator Digamos que después de confirmar con el cliente, sabemos que esta es la página que necesitamos. Como de costumbre, voy a copiar este marco en formato SVG, y luego en Illustrator, voy a crear un nuevo documento y darle el nombre propio. Ahora, cuando pego el diseño de Figma en mi nuevo lienzo, lo primero que hago es soltar la máscara de recorte No me importa tener una forma grande aquí. Puedo ocuparme de ello más tarde. Lo que es más importante para mí mostrarte es que es muy difícil separar la interfaz de usuario emergente del panel principal. Incluso si desagrupo el diseño, sigue siendo complicado seleccionar solo las capas emergentes porque accidentalmente podría agarrar formas o capas accidentalmente podría agarrar innecesarias que se sientan detrás de él Así que eliminemos todo por un momento, y te mostraré la forma correcta de hacerlo. Cuando tenemos una ventana emergente en la parte superior del mainframe, es mejor seleccionar primero solo el infigma emergente ya sea haciendo clic directamente sobre él o seleccionándolo en el panel Capas de la Después copia solo esta parte a Illustrator primero. Una vez que lo peguemos en Illustrator, podemos moverlo a un lado por ahora. Ahora, de vuelta en Figma, ocultemos el pop up y luego copiemos el marco principal por separado en Illustrator En Illustrator, crea una nueva capa y pega el marco copiado en ella. Asegúrate de alinearlo con el centro del lienzo. De esta manera, podemos preparar fácilmente el panel principal de la interfaz de usuario y luego organizaremos la sección emergente. Bien, mientras se selecciona esta capa principal, abre el menú y elige liberar a capas Por último, seleccionemos la primera capa dentro este grupo y seleccionemos la última para que podamos moverlas todas fuera de la capa principal. Bien, como pueden ver, hay un rectángulo oscuro detrás del pop up. No voy a borrar la forma porque en after effects, puedo animarla con un simple fade in cuando aparece el pop up Para que sea más fácil encontrarla más tarde, cambiaré el nombre de esta capa a sombra. Impresionante. Ahora sigamos adelante y ajustemos la forma grande que tenemos aquí. Impresionante. Bloqueemos la capa de fondo antes de seguir adelante. Ahora, como siempre, el primer paso es eliminar la forma que se utilizó como máscara de recorte Después de eso, estamos listos para comenzar a agrupar el resto de las capas según nuestras necesidades y efectos posteriores. En esta parte, no planeo animar los números. Así que simplemente seleccionaré cada sección y la agruparé todas juntas. Después de eso, podemos agrupar todas estas secciones como una sola. Ahora, tratemos con la sección final en este diseño. Primero, cerraré la caja blanca al fondo. Entonces al igual que hicimos en el diseño anterior, asegurémonos de que todos los paneles de tareas tengan el mismo aspecto, y que el icono V y el cuadro verde estén separados en sus propias capas en caso de que necesitemos animarlos más tarde Impresionante. Ahora, para esta área, podemos agruparlo todo juntos. Y para los tres botones aquí, también los agruparé en un solo grupo ya que no planeo animarlos en efectos posteriores Genial. Ahora, seleccionemos cada sección de tarea y la agruparemos individualmente para que cada tarea se asiente en su propia capa separada. Impresionante. Ahora podemos comenzar a eliminar las capas vacías antes de pasar a trabajar en el panel emergente. Una vez hecho eso, volvamos a encender la capa de sombra y bloqueemos todas las capas que ya organizamos. Ahora podemos mover todas las formas y capas del panel emergente al centro del lienzo y asegurarnos de que se sientan por encima de la capa de sombra. No olvides que el diseño pop up aún no está agrupado. Entonces, si intentas alinearlo directamente al centro, no funcionará. Para solucionar esto, primero selecciona todas las formas pop up y agruparlas. Ahora puedes alinear todo el grupo al centro del lienzo. Una vez que el pop up esté perfectamente alineado, puedes desagruparlo nuevamente y comenzar a separar las capas Y si ves un mensaje de error durante el paso, no te preocupes. Por lo general, significa que seleccionó accidentalmente una capa bloqueada. Simplemente revise su selección y repita el proceso. Todo bien. Entonces ahora podemos empezar a trabajar en este diseño. Primero, puedes seleccionar algunas capas y arrastrarlas ligeramente hacia los lados solo para entender lo que tienes aquí y cómo se construye todo, por ejemplo, no quiero que este cuadro de campo esté sin relleno. Entonces agregaré un relleno blanco a esta forma porque sé que lo estaré animando más adelante en After Effects Ahora, seleccionemos el fondo blanco de este pop up y lo bloqueemos para que podamos seleccionar libremente el resto de las formas y capas. Ahora, estamos listos para comenzar a agrupar las partes relevantes. Voy a mantener el texto dentro este cuadro de campo en una capa separada ya que planeo animarlo más adelante en después de los efectos El icono de subir, por otro lado, se puede agrupar como una sola unidad. A continuación, para las pequeñas secciones de tareas. Los prepararé para animaciones de casillas de verificación. Para ello, agruparé el icono V con el recuadro verde para todas las tareas. Más adelante en después de los efectos, usaré estas capas agrupadas para crear la animación de casilla de verificación Para la barra de progreso, la dejaré agrupada tal como es, porque no pienso animarla Los números aquí también se pueden agrupar. Ahora, tratemos con la sección superior de este pop up. Agruparemos la sección de fecha, la sección de avatar, el icono de salida, los tres puntos y el botón en la parte superior. El siguiente texto ya está agrupado, por lo que no necesitamos tocarlo. Eso significa que ya hemos terminado agrupar todas las secciones relevantes en este pop up. El siguiente paso es eliminar las capas vacías para limpiar todo. Con eso hecho, terminamos de preparar este panel. Por ahora, adelante y guarda el proyecto ahora antes de seguir adelante. En el siguiente paso, nos ocuparemos de otro diseño complicado, y este va a ser súper interesante, así que quédate. Todo bien. Ahora, volvamos a Figma y copiemos el siguiente fotograma Tenemos que prepararnos para la animación. Según nuestro storyboard, esta es la parte donde mostramos los paneles de interfaz de usuario de contactos En este caso, prepararemos el diseño de una manera que nos permita posteriormente agregar imágenes reales de avatar humano. Entonces, si estás siguiendo, busquemos el marco Figma correcto y cópielo en Illustrator Aquí está la sección de contacto. Digamos que después de confirmar con el cliente, sabemos que este es el marco que necesitamos animar. Como de costumbre, copiémoslo como formato SVG, luego volvamos a Illustrator y creamos un nuevo documento, asegurémonos de nombrarlo correctamente y luego peguemos el diseño copiado. Veo que este diseño es un poco más alto que los anteriores, pero eso está totalmente bien. No va a interferir con nuestro flujo de trabajo. Continuaremos con el mismo proceso de separación de las capas. Entonces primero, soltemos la máscara de recorte y luego desagruparemos el diseño Ahora, como hemos decidido que en esta parte, reemplazaremos los íconos de Avatar imágenes humanas reales más adelante en la animación, lo tendremos en cuenta al agrupar y organizar este panel de interfaz de usuario. Por ahora, solo continúa con el mismo proceso de separación de las capas. Y mientras haces eso, quiero recordarte algo importante. Quizás ahora mismo, este proceso se siente abrumador o consume demasiado tiempo. Pero recuerde, probablemente nunca necesitará preparar una cantidad tan grande de paneles de interfaz de usuario en un solo proyecto. Lo estoy haciendo aquí a propósito para que puedas practicar conmigo, y luego en la etapa de animación, tendremos una variedad de diferentes ejemplos de paneles de interfaz de usuario para trabajar. Bien, volvamos a la lección. Por lo que ahora llegamos a la interesante sección. Primero, bloqueemos la caja blanca de esta sección. Podemos agrupar esta parte y los dos botones que tenemos aquí del lado izquierdo. Ahora pasemos a la sección de avatar aquí a continuación. Noté que toda la sección está agrupada. Entonces lo primero que voy a hacer es empezar a desagruparlo todo y separar todas las capas dentro de este grupo para que pueda decidir qué se debe agrupar y demás. Bien, entonces ahora intentemos agrupar toda esta sección. Como puedes ver, tenemos algo interfiriendo, y es la forma que se usó para una máscara de recorte, así que seleccionémosla y eliminémosla del diseño porque no la necesitamos Entonces ahora vamos a seleccionar toda la sección y agruparla toda. Ahora pasemos a todos los cuadros de la interfaz de usuario de Avatar a continuación. Como queremos agregar imágenes reales en lugar de los íconos de avatar, asegurémonos de que no estamos seleccionando aquí las formas que crean el ícono Avatar y agruparemos esta sección. A continuación, podemos desactivar la capa que acabamos de crear para que podamos seleccionar fácilmente todas las formas que crean el icono Avatar y agruparlo. Utilizaremos esta forma más adelante en after effects como una máscara para las imágenes humanas agregaremos en esta sección. Puedes colocar esta capa ahora por encima de la anterior si quieres. Pero lo más importante, sigamos repitiendo este proceso para el resto de los paneles de interfaz de usuario de avatar que tenemos aquí. Primero podemos terminar de agrupar todas las cajas principales y las formas relativas a cada caja. Ahora, en lugar de tratar con los íconos de Avatar, saltemos esta parte por ahora porque será un poco difícil encontrar las capas que necesitamos apagar para ver las formas de los iconos de Avatar. Entonces, antes de hacerlo, terminemos de agrupar el resto de las partes. Y después de eliminar las capas vacías, podemos encontrar fácilmente las formas de avatar y agruparlas según necesitemos. Entonces ahora vamos a agrupar la sección de números de página en un grupo y luego agrupar el botón de la izquierda, también. Ahora, comencemos a eliminar las capas vacías para que podamos navegar un poco más convenientemente por el panel de capas. Podemos hacerlo usando el método de selección inversa. Genial. Así que ahora podemos encontrar las capas de caja en el panel de la capa, y podemos apagarlas todas para que podamos seleccionar las formas del icono Avatar mucho más fácilmente. Ahora, empecemos a agruparlos uno por uno. Una vez hecho esto, coloquemos cada capa de avatar por encima de su sección relativa. Por último, podemos eliminar las capas vacías restantes y después de eso, guardar el archivo en la computadora. Y con eso, hemos terminado esta lección, y estamos listos para pasar a la siguiente donde trataremos con otro marco complicado de figma Va a ser increíble. Te veré en la siguiente. Y antes de comenzar a ver la siguiente lección, no olvides tomarte un descanso de diez minutos para refrescarte antes de continuar. Nos vemos en la siguiente. 7. Estructuración de paneles complejos de UI para animación: Estoy de vuelta. Entonces en esta lección, vamos a trabajar en una parte donde queremos mostrar otra animación demo del software. Pero esta vez, la animación es un poco más compleja. Según el storyboard, necesitamos trabajar en una escena donde veamos la sección de mensajes Entonces primero, vayamos a Figma y encontremos este marco aquí en el proyecto. Aquí está. En nuestro caso, necesitamos mostrar una animación de la lista de mensajería que se transforme en un chat de mensajería personal. Es la sección de conversación. En este punto, trata de entender el flujo de los paneles de la interfaz de usuario tanto como puedas. Mira las diferentes secciones dentro de ambos diseños y mira cuál será la mejor manera de organizar las capas. Esto te dará la idea de qué capas debes dejar como capas separadas y qué capas debes agrupar. Con esta idea en mente, comencemos con el primer fotograma, que es la sección de mensajes. Vamos a copiarlo como SVG de Figma, y luego un Illustrator, crear un nuevo documento Vamos a darle un nombre a este nuevo documento. Ahora, vamos a pegar el diseño de figma aquí. Todo bien. Entonces ahora, como siempre, saquemos todas las capas del diseño agrupado. Ahora, podemos eliminar la forma que se utilizó para la máscara de recorte y bloquear la capa principal de fondo gris aquí para que podamos seleccionar el resto de las formas y capas fácilmente Ya podemos eliminar la capa vacía y la capa que contenía la forma que se utilizó para la máscara de recorte. Genial. Entonces ahora comencemos a agrupar cada sección en este diseño, comenzando por el menú de la izquierda. Ahora podemos agrupar aquí toda esta sección con todas las diferentes pestañas, incluyendo, por supuesto, la caja blanca detrás. M siguiente, vamos a agrupar las formas y las capas del encabezado aquí arriba. Y ahora comencemos a tratar con la sección principal en este diseño, que es la lista de mensajería. Entonces lo primero es lo primero, bloqueemos la caja blanca para que pueda seleccionar el resto de los objetos aquí fácilmente. Ahora, vamos a agrupar esta parte, y luego agruparemos aquí el botón morado. Entonces ahora volvamos a pensar qué objetos aquí necesitan ser agrupados y otras cosas Volvamos al diseño de Figma e intentemos ver qué está pasando en el siguiente panel de UI que necesita venir en este flujo de demostración a partir de lo que entiendo, necesitamos crear una animación de hacer clic en uno de los contactos, y luego debería aparecer un panel de conversación privado de esta persona específica ¿Todo bien? Volver a Illustrator. Primero empezaré asegurándome de que aquí solo tengo una estrella roja. si quiero crear una animación de la estrella roja apareciendo para los demás contactos de la lista. A continuación, veamos qué pasa aquí con la caja detrás del contacto. Veo que la caja no está llena de ningún color. Y como ya sé que en after effects, voy a animar esta caja, cambiando de forma, creo que es mejor llenar todas las cajas de blanco Así que vamos a seleccionarlos uno por uno y asegurarnos de cambiar el color de relleno a blanco. Ahora podemos seleccionarlos todos juntos fácilmente y bloquearlos en el panel de capas. Tenemos que bloquearlos para poder seleccionar el resto de las formas aquí. Sin que estas cajas interfieran, puedes entender fácilmente qué capa se selecciona mirando el pequeño cuadrado en el lado derecho de la capa. Así es como sabes que esta es tu capa seleccionada. No estamos agrupando todo lo que es relevante para cada caja y cada contacto, porque como ya vimos y entendimos, necesitamos crear una animación demo de esta sección. Y en esa animación, el diseño de la caja cambiará. Eso significa que cada objeto que pertenece a cada contacto o bien desaparecerá o cambiará su posición. Por lo tanto, necesitamos que la mayoría de las formas y capas aquí permanezcan separadas porque vamos a animarlas en efectos posteriores. Todo bien. Así que ahora estamos listos para agrupar los objetos en cada sección. Y antes de seguir adelante, echemos otro vistazo al diseño de Figma para que entendamos si necesitamos algún ícono aquí para permanecer en capas separadas Por lo que veo aquí, entiendo que esta parte con los tres iconos en el lado derecho necesita desaparecer cuando ocurra la transición al siguiente panel de UI. Por lo tanto, en Illustrator, podemos agrupar los tres iconos juntos en una capa. Por supuesto, si quieres crear una animación de desaparición para cada uno de los iconos por separado, debes dejar cada icono en su propia capa Pero en nuestro caso, no necesitamos hacer eso. Prefiero hacer que todos desaparezcan a la vez. Una vez que hayamos terminado con eso, sigamos adelante y pensemos en la siguiente sección del diseño. Consideremos el ícono de Avatar aquí. ¿Queremos dejar el ícono de Avatar separado del punto verde o rojo al lado? Vayamos al diseño de Figma y pensemos en ello. Veo aquí que la sección de avatar realmente no cambia, lo que significa que en realidad puedo agrupar las formas que crean el ícono de avatar y el punto al lado en un grupo, así que están en una capa. Por supuesto, en caso de que quieras agregar una imagen de un humano real, debes dejar el ícono de Avatar separado del punto para que luego puedas usar el ícono Avatar como máscara para la imagen que agregas en after effects. En nuestro caso, no quiero agregar fotos aquí, así que agruparemos toda esta sección. Hagamos lo mismo para el resto de las secciones de avatar en el diseño. Todo bien. Entonces con eso, creo que hemos terminado de agrupar todas las capas y objetos necesarios en el diseño, y ya estamos listos para comenzar a eliminar las capas vacías en el panel de capas. Voy a acelerar este proceso por ahora. No noté que durante el proceso, borré la estrella roja por error. Entonces, en ese caso, copiaré una de las estrellas grises, crearé una nueva capa y pegaré la estrella gris aquí en la posición correcta. Aquí tienes un consejo rápido para alinear el objeto en caso de que no quieras crear una nueva guía. Estoy llevando el lienzo a la izquierda donde la segunda estrella toca el área gris del panel izquierdo de Illustrator, y así es como sé dónde se debe colocar la primera estrella gris. Para el color, lo dejaré gris y luego crearé una animación de cambio de color a rojo en after effects si necesito eso. Todo bien. Y con eso, hemos terminado de preparar este diseño. Ahora puede guardar este archivo antes de pasar a lidiar con la siguiente pantalla. Tenemos dos más para ir, así que mantente enfocado. Los dos siguientes serán más rápidos. Bien. Así que ahora vamos a pasar al siguiente panel de interfaz de usuario que necesitamos para prepararnos para la animación. Volvamos a Figma y seleccionemos el marco relevante, que es la sección de conversación Vamos a copiarlo tal cual. Ahora, volvamos a Illustrator y creamos un nuevo documento. Vamos a darle a este documento un nombre apropiado. También podemos llamarlo mensajes, porque todavía pertenece a la sección de mensajería en la que crearemos un flujo de demostración del sistema de mensajería de esta plataforma SAS. Ahora peguemos el diseño que copiamos de Figma y empecemos a trabajar en él. Como siempre, primero, soltemos la máscara de recorte. Entonces necesitamos desagrupar el diseño. Después de eso, vamos a extender todas las capas de este diseño y moverlas fuera de la capa principal. Ya podemos bloquear la capa de fondo gris, y antes de seguir adelante, eliminar las dos capas debajo de ella. Una es una capa vacía y la otra es una capa que contiene la forma utilizada para la máscara de recorte Ahora, comencemos a agrupar las secciones, comenzando por el menú lateral, que no ha cambiado desde la pantalla anterior. A continuación, vamos a agrupar el menú principal aquí en el lado izquierdo. Entonces vamos a agrupar la sección de encabezado. Y ahora comencemos a lidiar con la disección principal en este panel de UI Podemos comenzar por ubicar la caja blanca y luego agruparemos las diferentes secciones dentro de este panel. Todo bien. Y ahora pasemos a tratar aquí la sección principal, que son las casillas de contactos. Pensemos en qué formas deben agruparse y qué no. Dado que la mayoría de las partes de este flujo de demostración ya estaban separadas en el diseño anterior, realidad podemos agrupar todas las formas o capas que sabemos con certeza que no animaremos ni usaremos en los efectos posteriores Por ejemplo, ya que vamos a crear una animación de forma morphing para cada caja de cada contacto, en este diseño, podemos agrupar el icono de Avatar dentro de la caja juntos, solo para usarlo como referencia posteriormente No lo volveremos a animar porque ya lo tenemos preparado en el diseño anterior Entonces ahora seleccionaré la caja y los objetos avatar y los agruparé a todos juntos. Hagámoslo por el resto del diseño. Ahora, para el resto de los objetos dentro de las cajas, quiero dejar cada objeto separado porque sí necesitamos crear algún tipo de animación para ellos más adelante en after effects. Bien. Ahora, tratemos de esta área. Podemos agrupar el botón de fecha. Ahora, acerquemos y pensemos en lo que tenemos que hacer aquí. Mientras tanto, no lo hagas conmigo. Quiero explicar algo muy rápido. primer lugar, en caso de que quieras animar cada icono principal o forma por separado, puedes agrupar las formas de avatar en un grupo, luego agrupar las formas de los mensajes de texto en otro grupo, y finalmente dejar el texto de tiempo en una capa separada Por supuesto, necesitaríamos repetir esto para cada mensaje de esta sección. Pero en mi caso, quiero crear una animación de introducción para toda la sección de mensajes a la vez, así desharé mis acciones. Y ahora puedes hacerlo conmigo. En nuestro caso, voy a agrupar todas estas formas juntas, así que tendremos una capa para cada sección de mensaje. A estas alturas, espero que entiendas que el proceso de agrupación depende completamente de cómo planeas animar tus paneles de UI Bien. Sigamos haciendo esto para las siguientes cuatro secciones de mensajes. Ahora, paremos aquí y pensemos qué queremos hacer con los dos últimos mensajes. Estoy diciendo esto porque creo que puede ser una buena idea crear una animación demo de la mensajería entre dos contactos. Me aseguraré de mantener cada forma aquí en una capa separada porque podría querer crear algunas animaciones más interesantes para esta parte. Agruparé las formas de avatar en una capa, luego dejaré el texto en el cuadro de texto en capas separadas porque podría cambiar el texto más adelante en el proceso de animación. También dejaré el tiempo en una capa separada. Lo mismo va para el último mensaje. Y aquí, estoy seguro de que voy a crear una animación de texto mecanografiado. Entonces voy a mantener el texto en una capa separada. Ahora, vamos a revisar la casilla redondeada detrás de ella. Veo que esta caja redondeada no tiene relleno, así que voy a añadir un relleno blanco, ya que sé que voy a animar la forma en after effects Una vez hecho esto, pasemos a los siguientes tres objetos y agruparlos uno por uno. Entonces cada objeto estará en su propia capa. Genial. Entonces con eso, hemos terminado de preparar este diseño y estamos listos para comenzar a eliminar las capas vacías. Todo bien. Todo se ve bien. Ahora vamos a guardar este archivo. Con eso, hemos terminado este diseño de UI, y estamos listos para pasar al siguiente, donde prepararemos el panel final de UI o la pantalla UI para este proyecto. Genial. Entonces ahora preparemos el panel final de UI para este proyecto. Vamos a Figma y lo encontremos para que podamos copiarlo en Illustrator Según el guión gráfico, en esta parte, necesitamos mostrar un breve flujo de demostración del software donde mostramos la pantalla del navegador de archivos y demostramos el proceso de subir un nuevo documento Como pueden ver, tenemos el panel principal y un pequeño pop up. Al igual que lo hicimos la última vez que tuvimos esta situación. Primero copiemos solo las capas pop up, y después de eso, volveremos y copiaremos la pantalla principal. De esa manera, será mucho más fácil. Para preparar este diseño en Illustrator. Podemos encontrar el grupo principal de este diseño en las capas Figma Vamos a hacer clic derecho sobre él y copiarlo como SVG. Ahora, vayamos a Illustrator y creemos un nuevo documento. Lo llamaremos pantalla ocho navegador de archivos. Genial. Ahora vamos a pegar el diseño aquí. Y por ahora, solo muévelo a un lado. A continuación, vamos a crear una nueva capa y luego volver a Figma para copiar la pantalla principal Podemos apagar el pop up por ahora y luego copiar todo el marco Figma De vuelta en Illustrator, vamos pegarlo en la nueva capa que creamos e iniciemos el proceso de separación de todas las capas antes de comenzar a agruparlas. Ahora, como tenemos una capa de sombra aquí, igual que en el diseño anterior, encontraré esta capa en la pila y la renombraré a sombra, que podamos encontrarla fácilmente después. Bien, podemos desactivar esta capa por ahora, luego bloquear la capa principal de fondo gris, y finalmente eliminar las dos capas debajo de ella ya que no las necesitamos. Genial. Entonces ahora comencemos a agrupar las secciones aquí, comenzando por el menú de la izquierda. Mientras intentaba seleccionar el pequeño rectángulo redondeado gris, noté que aquí hay una línea que realmente no necesitamos para la fase de animación más adelante en los efectos posteriores. Por lo tanto, lo seleccionaré y lo eliminaré del diseño. Todo bien. Así que sigamos adelante y agruparemos esta sección del menú. Ahora podemos colocar el menú principal izquierdo software encima de la capa recién creada, por lo que la flecha pequeña se sentará encima del segundo elemento del menú. Todo bien. Ahora, pasemos a la sección de encabezado. Pero antes de agrupar toda la sección, hagamos una pausa por un segundo y volvamos a Figma para entenderla un poco mejor Ya que queremos crear una animación de popping al agregar un nuevo archivo en este panel de interfaz de usuario, creo que es mejor dejar el botón de cabeza púrpura fuera del grupo Este será el botón que usaremos para crear una animación de clic, y después de eso, aparecerá el panel emergente para subir un nuevo archivo Con eso en mente, volvamos a Illustrator y primero agruparemos todas las formas y capas que pertenecen a este botón morado. Una vez agrupados, desactiva esta capa por ahora para que podamos seleccionar fácilmente el resto de los objetos de encabezado y agruparlos todos juntos. Genial. Ahora podemos colocar el botón morado encima del grupo de encabezado recién creado y luego pasar a trabajar en la sección principal de este panel de interfaz de usuario. Como sé con certeza que voy a querer crear una animación de introducción para cada cuadro de documento dentro de esta sección, comenzaré desagrupando la sección y separando todas las capas De esta manera, puedo decidir qué formas y capas deben agruparse de una manera que se ajuste al proceso de animación. Todo bien. Entonces después de separar las capas, noté que hay una forma que se usó como máscara de recorte Lo localizaré y lo eliminaré, así puedo seleccionar fácilmente el resto de las capas y objetos. Una vez hecho esto, seleccionaré toda la sección y la agruparé correctamente. Genial. Ahora, comencemos a trabajar en la sección de cuadros de documentos a continuación. Cuando no estoy seguro de lo que está pasando en la estructura, suelo mover objetos un poco para ver qué capas ya están agrupadas y cuáles no. Por ejemplo, en este caso, veo que el trazo gris está separado del relleno de caja blanca. En nuestro caso, no necesitamos que se separen. De hecho, también creo que no necesitamos que cada objeto de cada cuadro de documento esté separado. Así puedo agrupar cada sección en una sola capa. Pero como sé, estaré creando una animación de flujo de demostración de subir un nuevo PNG o JPEG vil, me aseguraré de mantener separados los objetos en la sección de la caja de documentos PNG De esa manera, voy a tener más flexibilidad en caso de que quiera hacer algo especial con este o incluso duplicarlo y reemplazar los nombres más adelante. Así que tengámoslo en mente. Pero por ahora, empecemos a agrupar cada sección de cuadro de documento una por una. Como dijimos antes, dejaremos la sección de cuadro de documento PNG desagrupada por ahora y pasaremos a agrupar los restantes. Bien. Estoy seguro de que no necesitaré crear ninguna animación especial para los números de página. Entonces, en este caso, podemos simplemente seleccionar toda la sección y agruparla. Impresionante. Ahora, volvamos y tratemos de la sección de documentos PNG desagrupados Para hacerlo un poco más fácil, podemos comenzar agrupando el trazo gris en el cuadro de relleno blanco y luego bloquear esta capa para que podamos seleccionar con seguridad todos los objetos restantes que forman el icono del documento PNG y agruparlos también. Genial. Ahora pasemos al lado derecho y comprobemos si hay algún otro objeto que podamos agrupar en una capa. Aquí podemos agrupar toda la sección con los iconos de Avatar. En cuanto a las capas de texto, ya están agrupadas correctamente en capas separadas, por lo que no necesitamos tocarlas. Podemos mantenerlos tal como son. Genial. Entonces con eso, hemos terminado de preparar la pantalla. Y ahora podemos pasar a eliminar todas las capas vacías del panel Capas. Impresionante. A continuación, volvamos a encender todas las capas y bloquearlas para que podamos comenzar a trabajar en el panel emergente. No olvides agrupar el propio pop up en caso de que quieras alinearlo rápidamente con el centro del lienzo. Todo bien. Comencemos separando las capas. En caso de que recibas este mensaje, no te preocupes. Probablemente significa que no seleccionaste la capa relevante antes de dividir las capas. Para solucionarlo, deshaga primero la acción. Después desagrupa de nuevo la capa, haz clic para desseleccionarla, volver a seleccionarla y finalmente dividir las capas Por lo que podemos decidir claramente qué formas deben agruparse en esta sección. lo que veo, podemos agrupar el trazo punteado junto con el rectángulo púrpura detrás de él. Y en caso de que queramos crear una animación para este elemento más adelante, siempre podemos usar las propiedades nativas de trazo dentro de after effects. Genial. Ahora, hagamos lo mismo con todas las formas que componen el icono de la carpeta. Para facilitar la selección, alejemos el zoom, busquemos el rectángulo blanco de este pop up y lo bloqueemos. De esa manera, podemos seleccionar con seguridad todas las formas pequeñas que se encuentran actualmente en capas separadas y agruparlas. A continuación, veo que cada línea de texto ya está en una capa separada, así que las dejaremos como están. Ahora veamos el icono X y el texto del archivo de subida. En este caso, podemos agruparlos junto con el rectángulo blanco. Así que vamos a desbloquear el rectángulo, seleccionar todas estas capas, y agruparlas en una. Impresionante. Con eso, hemos terminado de preparar todas las secciones de este panel de interfaz de usuario. Ahora podemos eliminar las capas vacías restantes en el panel y finalmente guardar el proyecto antes de pasar a la siguiente lección. En esa lección, revisaremos todos los diseños preparados y haremos algunas mejoras antes importarlos a los efectos posteriores. Va a ser increíble, así que nos vemos ahí. 8. Perfeccionar el diseño con esquinas redondeadas: Regresa. En esta lección, mejoraremos un poco el aspecto de los diseños. Por ejemplo, podemos comenzar redondeando las esquinas de todos los paneles UI que tenemos para todas las pantallas que preparamos para los efectos posteriores Y como tenemos muchas formas que están agrupadas, es mejor usar la herramienta de selección directa para seleccionar las esquinas y así poder redondearlas. Entonces, seleccionemos esta área, y luego mantengamos la tecla shift y escalemos las esquinas a nuestro alrededor hasta, digamos, 20 píxeles por ahora. Hagámoslo ahora por todos los rincones en este diseño. Podemos seleccionar esta área, luego pasar a la siguiente esquina, mantener el turno y seleccionar el área también. Después de eso, subamos y mientras mantienes pulsada la tecla Shift nuevamente, selecciona esta área, también. Ahora, pongamos la redondez para todas las esquinas seleccionadas a 20 creo que se ve un poco mejor con las esquinas redondeadas Entonces ahora, después de estar satisfechos con el nuevo aspecto, no olvidemos presionar Control o Comando S para guardar el archivo. Genial. Y ahora pasemos a la siguiente pantalla y hagamos lo mismo. Entonces seleccionaré las cuatro esquinas aquí, y luego pongamos la redondez a 20 o tal vez intentemos 30 Creo que 30 se ve mejor. Entonces dejémoslo así. Vamos a guardar la nueva actualización ahora. Y antes de avanzar, volvamos a la primera pantalla y ajustemos las esquinas a 30, también. Quiero mostrarles este proceso porque puede ser un poco complicado las esquinas valoran para áreas donde tenemos una forma con la esquina redondeada, es bastante fácil. Todo lo que tenemos que hacer es hacer clic en la forma usando la herramienta de selección directa y luego hacer clic en la esquina que queremos cambiar, y luego actualizar el valor de la esquina. Podemos hacer lo mismo por esta esquina también. Hagamos lo mismo para la esquina inferior derecha, también. Y ahora, aquí está la parte complicada. En zonas donde tenemos más de una forma juntos, como en esta parte, tenemos la forma blanca de la cabecera y la forma gris del fondo. Tenemos que asegurarnos de actualizar ambas esquinas de ambas formas. Un error común que puede ocurrir es cuando seleccionas las formas y luego haces clic en un punto de esquina sin darte cuenta de que hiciste clic y seleccionaste la esquina de solo la primera forma en línea En ese caso, solo cambia la esquina del rectángulo blanco de la cabecera. Entonces en esos casos, usando la herramienta de selección directa, selecciona ambas formas sin hacer clic en el punto de esquina. En su lugar, vaya directo a ajustar el valor de la esquina. Y, por supuesto, después de actualizar todos los rincones, no olvidemos guardar el archivo. Todo bien. Entonces ahora vayamos a la tercera pantalla y ajustemos ahí la redondez de las esquinas Pero vamos a guardar el archivo ahora y pasar a la siguiente pantalla. Y ahora, antes de pasar a la siguiente pantalla, también quiero ocultar todos los iconos del logotipo en la parte inferior del menú principal. Como toda esta área está agrupada, usemos la herramienta de selección y hagamos doble clic en una de las capas aquí hasta que podamos seleccionarla. No estoy seguro de lo que está pasando en esta zona, así que encontraré la capa de sombra y la apagaré por ahora. Veo que ahora puedo seleccionar el resto de las formas y logotipos. Entonces hagámoslo. Para facilitar esta selección, seleccionemos toda el área, incluida la capa azul detrás, incluida la capa azul detrás, y luego mantengamos presionada la tecla Mayús y hagamos clic en la capa azul para deseleccionarla Y ahora, en lugar de eliminarlos, vamos a apagarlos en el panel de capas. Para ello, podemos abrir el grupo de capas y desactivar las capas seleccionadas. Podemos reconocer las capas seleccionadas por los iconos cuadrados rosados junto a ellas. Todo bien. Eso se ve bien. Y ahora podemos salir del grupo haciendo clic en algún lugar fuera del diseño para deseleccionar las capas seleccionadas Y antes de pasar a la siguiente pantalla, no olvidemos guardar el archivo. Voy a acelerar este proceso porque es más o menos lo mismo que hicimos en la pantalla anterior. Todo bien. Entonces, una vez que hayamos terminado de ajustar el diseño, podemos pasar al siguiente paso donde finalmente comenzaremos a importar los diseños a efectos posteriores. Tenemos algunos activos adicionales aquí en Illustrator que seguramente usaremos en la fase de animación. Por ejemplo, sabemos que tenemos una escena donde necesitamos crear una animación de logotipo para que podamos prepararla ahora mismo. También podemos crear la paleta de colores para este proyecto, que podamos seguirla durante todo el proceso de animación. Así que pongamos manos a la obra y preparemos estos dos muy rápido. Por supuesto, no necesitas hacerlo porque ya tienes la paleta de colores y los archivos del logotipo y la carpeta assets. Es súper importante para mí mostrar este proceso para que cuando trabajes en tu video explicativo, sigas mi proceso Y claro, podríamos preparar estos archivos más tarde después de que ya hayamos comenzado la animación, pero prefiero prepararlos lo antes posible. Entonces primero, comencemos con la preparación de la paleta de colores. Para ello, en realidad podemos verificar en el proyecto FigMA que el cliente compartió con nosotros si hay alguna guía de diseño o activos de su empresa Muchas veces, cuando obtienes un proyecto Figma, también obtendrás estos activos de diseño En nuestro caso, podemos encontrar los colores aquí en la sección de páginas. Ahora, seleccionemos las capas que necesitamos copiar a Illustrator y luego copiarlas como formato SVG. Igual que hicimos para los paneles de UI. Ahora, volvamos a Illustrator y creamos un nuevo documento. Podemos usar la plantilla de archivo reciente y solo asegurarnos de no olvidar nombrar este archivo. Llamémoslo un punto Colores. Ahora podemos pegar las capas de figma y comenzar a prepararlas. Primero, bajaré este grupo hasta que se ajuste a mi documento. A continuación, me aseguraré de que las capas estén agrupadas luego alinear todo este grupo al centro del documento. Por último, solo me aseguraré de nombrar los colores de esta capa porque será mucho más fácil encontrarla más adelante en después de los efectos de esa manera. Una vez hecho esto, guardemos este archivo y pasemos a preparar el logotipo. Para el logo, en realidad podemos encontrarlo en una de las pantallas. Como puedes ver, tenemos un logo completo aquí en la pantalla cinco. Entonces, hagamos doble clic en el logotipo y copiemos las formas relevantes que tenemos aquí. Ahora vamos a crear un nuevo documento, del mismo tamaño y simplemente llamarlo logotipo de un punto. Entonces vamos a pegarlo aquí, agruparlo, y escalar, y alinearlo sin problemas. Todo bien. Y ahora, como sabemos que vamos a crear una animación de logotipo, preparemos este diseño para después de los efectos. Es decir, vamos a extender las capas. Pero primero, solo para que podamos ver lo que estamos haciendo, vamos a crear una nueva capa y dibujar un rectángulo con el tamaño del lienzo. Y ahora llenarlo un color diferente para que podamos ver claramente en qué estamos trabajando. Coloca esta capa debajo del logo. Y si quieres, elige un color más contrastante, para que el logo destaque mejor. Por último, bloqueemos esta capa y comencemos a preparar el logotipo. Todo bien. Entonces primero, desagruparé las capas, luego seleccionaré el texto del logotipo y lo alinearé al centro del lienzo verticalmente Solo para estar seguros, también agruparé el icono, para que también pueda alinearlo verticalmente al lienzo, asegurándome de que todo esté bien alineado. Una vez que todo esté perfectamente alineado, podemos comenzar a desagrupar las formas y separarlas en capas Aquí, necesitamos liberar el camino compuesto. Ahora, arreglemos el extraño problema de llenado aquí muy rápido. Primero, asegúrate de seleccionar todas las capas problemáticas y luego usa la herramienta Creador de formas para arreglarla. cursor sobre el área problemática, mantenga presionada la tecla Alt u Opción en Mac y haga clic en esa área para eliminar el relleno Genial. Entonces ahora comencemos a esparcir todas las letras en capas separadas para que podamos animarlas en after effects individualmente Una vez hecho esto, pongamos un nombre a nuestras capas, que sea más fácil navegar a través de ellas más adelante en los efectos posteriores durante la fase de animación. Todo bien. Y ahora vamos a guardar este archivo. Y con eso, termina la lección. Ahora que tenemos todo preparado para animación en cuanto a elementos de diseño vectorial, estamos listos para finalmente abrir después los efectos y comenzar a importar todo lo que preparamos. Eso lo haremos en la siguiente lección. Va a ser increíble, así que nos vemos ahí. 9. Importar los diseños a After Effects: Regresa. En esta lección, importaremos los diseños en after effects y prepararemos el proyecto para la animación y los efectos posteriores. Antes de hacer eso, quiero tomar la paleta de colores y los archivos del logotipo de la carpeta de IA y pegarlos en la carpeta de activos. En mi opinión, estos son más como activos generales que usaremos en el proyecto en lugar archivos específicos de IA preparados para efectos posteriores. Bien, volvamos a la carpeta de IA. En caso de que no me siguieras preparando los diseños de Figma en Illustrator, no te preocupes Puedes encontrar todos estos diseños en su estado acabado y pulido dentro de las pantallas para carpeta AE, que verás si abres la carpeta assets dentro de la carpeta del plato principal que descargaste de mí. Bien. Con eso hecho, abramos ahora Adobe After Effects juntos. Voy a usar la versión Beta porque esta es la versión más actualizada de After effects que pude obtener mientras grababa este curso. Y quiero usar la última versión ya que hay algunas actualizaciones muy geniales en ella, incluyendo los fotogramas clave de desplazamiento y la función de capas que, por supuesto, practicaremos juntos En caso de que estés usando una versión anterior de After effects, por debajo de la versión 2025, no te preocupes. También mencionaré cómo hacer las cosas que estamos haciendo en la versión más reciente en tu versión también. Bien. Entonces, una vez que abrimos después de los efectos, primero asegurémonos de que estamos todos en la misma página con respecto al diseño del panel. Vamos a Ventana y asegurémonos de que seleccionamos el diseño predeterminado. En caso de que tu diseño predeterminado se vea un poco diferente, restablecerlo porque probablemente cambiaste las posiciones del panel en algún momento del pasado. Si tienes una pantalla pequeña, puedes encontrar este diseño un poco más cómodo porque puedes ver todas las pestañas de la sección derecha aquí, claramente, como la pestaña Efectos y la pestaña de propiedades. Pero si quieres que el foco esté en la línea de tiempo, puedes agarrar el panel de la línea de tiempo y arrastrarlo hasta aquí. Cuando veas una línea gris, suelta el panel, y ahora este panel será más grande, depende de ti hacer lo que se sienta mejor en tu caso. Y claro, en caso de que no veas algunos de los paneles importantes como los paneles de texto, puedes ir a Ventana y agregarlos desde aquí. Por ejemplo, agreguemos la pestaña de párrafo en la pestaña de caracteres. Todo bien. Así que ahora, una vez que hayamos terminado con el diseño, vamos a asegurarnos de que también estamos en la misma página con respecto a las preferencias del sistema. Así que vamos a Editar preferencias y primero vamos a AutoSave y configuremos el guardado automático de 20 minutos a 5 minutos Queremos que los efectos posteriores guarden nuestro proyecto automáticamente en incrementos más cortos porque en este tipo de proyectos, el sistema puede fallar repentinamente Así que queremos estar seguros de que cada 5 minutos después de los efectos guarda automáticamente nuestro proyecto. Ahora vamos a General y asegurémonos marcar la casilla de verificación que centra el punto de anclaje De esta manera, el punto de anclaje de cualquier forma que creamos se centrará automáticamente. Una vez hecho esto, vamos ahora a Media and disk cache y asegurémonos de que la carpeta donde se guarda toda la caché temporal mientras se usa after effects se encuentra en un disco duro de tu computadora que tiene mucho espacio libre. Así que haz clic en Elegir carpeta y asegúrate de que el disco y la carpeta en la que estás guardando la caché tenga mucho espacio libre. De lo contrario, los efectos posteriores pueden funcionar lentamente. Para el tamaño mínimo de caché de disco, puedes dejarlo en 46 GB. Todo bien. Y ahora pasemos a la siguiente configuración que queremos ajustar, que es la memoria y el rendimiento. En este caso, depende mucho de tu computadora. Si ves que tu RAM instalada es menor que la mía, probablemente verás diferentes números aquí. Lo más importante es bajar la RAM reservada para otras aplicaciones. Por lo que la RAM disponible para los efectos posteriores será más grande. Genial. Entonces con eso, hemos terminado ajustar todas las preferencias del sistema necesarias, y ahora estamos listos para comenzar a trabajar. Si notas un pequeño icono en la zona superior derecha de mis efectos posteriores que no tienes, es porque estoy usando la versión Beta, así que no te preocupes por ello. Todo bien. Entonces ahora comencemos a trabajar. Primero, vamos a crear nuestra primera composición. Podemos llamarlo master comp, y asegurémonos de que estamos trabajando en resolución Full HD con 30 fotogramas por segundo. Y ahora por el tiempo, en caso que no estés seguro de qué escribir aquí, quiero darte un consejo rápido. Primero, quiero que vayas a la página web. Puedes encontrar el enlace en la descripción de esta lección o en el documento Links dentro la carpeta assets que descargaste de mí. Bien, entonces lo que queremos hacer es encontrar el guión que obtuvimos del cliente, o tal vez lo creamos nosotros mismos. Después selecciona todo el texto y cópialo. Ahora, todo lo que tenemos que hacer es volver a este sitio web y pegar el texto. Automáticamente contará las palabras. Y como puedes ver aquí abajo, muestra el tiempo que debería tomar leer el texto a una velocidad promedio de lectura. Lo que me encanta hacer es comprobar cuánto tiempo tardará en el modo rápido y en el modo lento. Y esto me da la duración mínima y máxima de tiempo para el proyecto. Entonces ahora, de vuelta en after effects, sé que este proyecto no tardará más de 2 minutos seguro. Genial. Entonces con eso hecho, vayamos a la pestaña Avanzado y fijemos todos los valores exactamente como los configuré. Entonces vayamos al renderer de tres D y asegurarnos de que estamos usando tres D clásicos. Un ajuste final de configuración que quiero hacer antes de comenzar el proyecto es bajar la profundidad de bits de este proyecto Mayor profundidad de bits significa más tonos de color y gradientes más suaves Por ejemplo, elegir una profundidad de bits más alta mejora la calidad de la imagen, pero requiere más potencia de procesamiento y memoria, lo que puede ralentizar significativamente las previsualizaciones en los tiempos de renderizado. Podemos ingresar a la configuración a través configuración del proyecto de archivo y luego ir al color. Aquí está bajo los ajustes de color. También podemos acceder rápidamente haciendo clic en el icono aquí abajo en el panel del proyecto. Establezcamos la profundidad de bits por ahora en ocho bits por canal para que podamos obtener un flujo de trabajo más rápido. Posteriormente, antes de renderizar el proyecto cuando hayamos terminado, podemos escalar esto para obtener una mejor calidad de color, pero por ahora, establecerlo en ocho. Genial. Entonces ahora presionemos Control o Comando S para guardar este proyecto, así se activará la función de guardado automático Y, por supuesto, para que podamos guardar manualmente el proyecto cuando queramos durante el proceso. Entra en la carpeta principal que descargaste para mí, ve a la carpeta AE y guarda aquí dentro el proyecto que estás creando ahora. En su caso, probablemente verá otro archivo aquí, que es el archivo en el que he estado trabajando con la animación terminada. Puedes ignorarlo y simplemente guardar el proyecto que estamos haciendo ahora mismo. Bien. Y ahora comencemos a importar todos los diseños de pantalla de Illustrator que preparamos anteriormente a efectos posteriores. Una regla muy importante que tengo a la hora de trabajar en proyectos complejos y de múltiples escenas es mantener mi proyecto de after effects súper organizado. Con eso en mente, sigamos trabajando y veamos cómo podemos aplicar esta regla en este curso. Entonces ahora, quiero que vayas a la carpeta principal que descargaste de mí e ingreses a la carpeta de IA. Insisto en que uses los archivos de IA. Preparé para este curso y no los archivos que usted mismo guardó. Por favor ingrese las pantallas para carpeta AE y use los archivos dentro de esta carpeta, no los que acaba de guardar. La razón de eso es que quiero mantener un flujo consistente a lo largo las lecciones sin que te detengas en caso de que te hayas perdido algo en el proceso de preparación. Como dije antes, voy a presentar todos los errores que puedan ocurrir el camino durante las lecciones. En esos casos, solo necesitas escuchar y mirar. Pero por ahora, por favor use los archivos AI finalizados que preparé dentro de las pantallas para la carpeta AE. Todo bien. Entonces lo primero que quiero que hagamos es importar todos los archivos AI a after effects como están sin separar las capas. De esa manera, podremos usar estas pantallas posteriormente como capas de referencia. Ahora, vamos a crear una nueva carpeta dentro del panel del proyecto y llamarlo Diseños de pantalla. Arrastre todos los archivos dentro esta carpeta para mantener nuestro proyecto organizado. Genial. Ahora podemos guardar el proyecto y comenzar a importar los diseños con todas las capas separadas a medida que los preparamos en Illustrator. Para ello, necesitamos importarlos uno por uno. Empecemos por la primera pantalla. Ahora, tenemos que elegir importarlo como una composición porque queremos todas las capas que están dentro de este archivo. Y luego, bajo las dimensiones del metraje, tenemos que elegir el tamaño de la capa. Aquí está la diferencia entre tamaño de capa y el tamaño del documento en caso de que no lo sepa. Tamaño del documento. Cada capa será del tamaño completo de la mesa de trabajo original de Illustrator Incluso si el contenido real es pequeño, esto puede hacer que la alineación sea más difícil intacta. Tamaño de capa, los límites de cada capa se basan únicamente en el contenido dentro de esa capa. Esto hace que sea más fácil escalar, animar y alinear elementos individuales con precisión Genial. Así que hagamos clic en Bien, y veamos que ahora tenemos una nueva composición de la pantalla y una nueva carpeta con todas las capas de este archivo de Illustrator. Todo bien. Así que ahora vamos a repetir este proceso e importar el resto de los archivos de Illustrator a nuestro proyecto after effects. Un punto muy importante que quiero que tomen de este curso es que trabajar en proyectos complejos no siempre es un proceso claro y limpio. Durante el flujo de trabajo, siempre encontrarás algún error que cometiste antes o algo que te perdiste. Intentaré mostrarte esto a lo largo del curso y hacer que el curso sea lo más realista posible porque en la vida real, no trabajamos como robots. Cometemos errores, y es importante saber cómo lidiar con ellos. Bien, así que una vez hecho eso, para mantener organizado el panel del proyecto, me encanta hacer clic aquí en tipo Así que cada activo que tengo se ordena de una manera más organizada visualmente. Ahora, para mantener nuestro panel de proyectos organizado, vamos a crear otra carpeta que llamaremos precomps Almacenaremos en esta carpeta todos los precomps que creamos durante el proyecto Los precomps que ya tenemos aquí de los diseños de pantalla, seleccionemos la carpeta precomps, creemos otra carpeta dentro de ella y Después arrastra todos los precomps de los diseños de pantalla a esta carpeta Para mantener nuestro proyecto aún más organizado, asegurémonos de que no haya seleccionado ninguna carpeta y luego creemos una nueva carpeta llamada Screen Designs. Dentro de esta carpeta, arrastre todas las carpetas que contienen las capas de pantalla de cada diseño. Impresionante. El panel del proyecto se ve mucho mejor en este momento. También podemos agregar IA al nombre de esta carpeta. Entonces sabemos que estas son capas de Illustrator. AI significa Adobe Illustrator. De esta manera, podemos diferenciar fácilmente esta carpeta de aquella en la que luego almacenaremos diseños de pantalla aplanados de Illustrator Ah, y acabo de notar que aquí tenía un error gramatical, así que lo corrigí. Y ahora estamos listos para continuar con la lección. En este punto, podemos volver a salvar el proyecto. Otra pequeña cosa que me encanta hacer es colorear mi master comp en un color diferente, así puedo encontrarla fácilmente más tarde cuando necesite renderizar el proyecto final o navegar por el panel del proyecto, tendremos muchos más activos aquí más adelante, así que esto ayuda y hablando de activos, vayamos a la carpeta assets y llevemos algunos de los archivos que usaremos en este proyecto. Por supuesto, eventualmente, usaremos todos los activos que tenemos aquí. Pero por ahora, no necesitamos importar todo. Podemos comenzar con los activos que usaremos muy pronto, por ejemplo, la paleta de colores y el archivo del logotipo. Entonces comencemos con el logo. Ya podemos colocar el PreComp recién creado dentro de la carpeta precomps, pero no dentro de la carpeta PreComps de la pantalla. En cuanto a la carpeta con las capas, encontraremos un lugar para ello más adelante. Muy bien, ahora vamos a traer la paleta de colores. Como no lo necesitamos como capas separadas, este archivo de Illustrator no incluye capas separadas de todos modos. Podemos importarlo como metraje, lo que significa que vendrá como un archivo de Illustrator aplanado Veo que tengo una extraña caja blanca en la parte inferior. Probablemente fueron importados de Figma cuando copié de Figma como formato SVG a Illustrator En su caso, obtendrá mi archivo finalizado, por lo que no verá este problema. Para mí, arreglar esto es muy fácil. Todo lo que necesito hacer es abrir la paleta de colores en Illustrator, seleccionar las formas blancas y eliminarlas. Después presionaré GRLS para guardar el archivo porque cambié la ubicación de este archivo la última vez que lo guardé , tendré que encontrarlo de nuevo Ahora está en la carpeta assets, así que lo seleccionaré y lo guardaré sobre la versión anterior. De vuelta a los efectos posteriores, la paleta de colores se actualizará automáticamente. Genial. Ahora todo se ve bien. Vamos a crear otra carpeta llamada assets y arrastrar todas las carpetas con capas de Illustrator, y el resto de los assets que usaremos en este proyecto dentro de esta carpeta, incluyendo, por supuesto, la paleta de colores. Ahora tenemos todo perfectamente organizado. Vamos a guardar el proyecto, y estamos listos para pasar al siguiente paso donde finalmente comenzaremos a trabajar en el proyecto. Esto va a ser súper divertido. Entonces hagámoslo. Bien, ahora vamos a crear otro activo que definitivamente usaremos en este proyecto Un fondo degradado animado. Podemos usarlo en algunas de las escenas o tal vez incluso en todas ellas a lo largo de este proyecto. Por supuesto, podrías descargar fondos animados ya hechos de sitios web de stock, pero quiero mostrarte la forma más útil crear un fondo degradado animado personalizado directamente dentro de After Effects y también cómo usarlo inteligentemente en el proyecto Verás exactamente a lo que me refiero en tan solo un minuto. El primer paso es crear una nueva esfera. Para ello, mantenga presionada la herramienta rectángulo y seleccione la herramienta Elipse Asegúrese de que el relleno esté configurado blanco y que el trazo esté desactivado. Ahora crea un círculo proporcional manteniendo la tecla shift mientras dibuja. Para mantenernos a todos en la misma página, establece el tamaño de esta forma en 500. Si estás usando una versión anterior de after effects, puedes encontrar esta propiedad debajo las propiedades de la capa. Aquí está. Ahora, seleccionemos esta capa y volvamos a cambiar a la herramienta de selección, para que podamos moverla hacia un lado. A continuación, duplica el círculo y muévalo por aquí. Hagámoslo una vez más así tenemos tres en total. Ahora, selecciona las tres esferas y duplícalas de nuevo. Mueve los duplicados hacia arriba en la pila de capas y alinea aproximadamente todo hacia el centro, solo para que sepas que la cantidad exacta de esferas no es importante Puedes crear tantos como quieras. lo que quiero centrarme es en la técnica principal detrás de esta configuración. Ahora tenemos que empezar a colorear nuestras esferas. Para ello, abramos la carpeta Activos y llevemos el archivo de paleta de colores a la escena. Una vez que esté adentro, bloquea esta capa para que no se mueva y luego comience aplicar colores a las esferas. Una vez que hayas terminado, duplica otra esfera, colócala en algún punto intermedio y cambia su color. Repetimos de nuevo este proceso para construir nuestro gradiente. Genial. Y ahora que tenemos todas nuestras esferas listas, podemos apagar la capa de la paleta de colores y comenzar a hacer esta configuración más interesante ajustando la escala y posición de cada esfera. Intenta hacer que las esferas de esquina un poco más grandes que el resto. El objetivo aquí es tener las esquinas del marco llenas de esferas más grandes, al tiempo que se mantiene el aspecto general aleatorizado tanto como sea posible Impresionante. Ahora, podemos iniciar la fase de animación de este gradiente. Para ello, abramos la propiedad position para una de las esferas y agreguemos una expresión de meneo muy simple Mantenga presionada la tecla Alt u Opción en Mac y haga clic en el cronómetro de posición En el cuadro de expresión, escriba meneo. Dentro de los paréntesis, necesitamos agregar dos valores. Escribamos dos para el primer valor, que controla la velocidad del meneo Cuántas veces por segundo ocurrirá el movimiento. Para el segundo valor, vamos a escribir 30 por ahora. Esto controla la cantidad de movimiento en píxeles en cada dirección. Ahora, vamos a solo esta capa para que podamos ver claramente lo que está pasando. Como puedes ver, con estos ajustes, la esfera básicamente se mantiene cerca de su posición original. Lo que queremos es que las esferas viajen a través de un área más amplia para que el gradiente siga cambiando. Para lograrlo, aumentemos el segundo valor. Intenta configurarlo en 100 y verás la diferencia. Se ve mejor, pero ahora el movimiento se siente un poco demasiado rápido. En ese caso, vamos a ralentizarlo cambiando el primer número a uno. De esta manera, la esfera se moverá más lentamente, pero aún así cubrirá una amplia distancia. Estoy haciendo estos ajustes aquí para que si nunca antes habías usado la expresión meneo, puedas entender claramente cómo funciona Al experimentar con estos valores en este momento, obtendrá una idea mucho más clara de cómo controlar tanto la velocidad el rango del movimiento. Todo bien. Entonces, una vez que estemos contentos con la animación, podemos hacer clic derecho sobre la propiedad position de una esfera y elegir copiar expresión solamente. Después selecciona el resto de las capas y presiona Control V o Comando V en Mac para pegar la expresión. Dado que esta es una expresión de meneo, hará que cada esfera se mueva aleatoriamente Pero aquí está la cosa. Si todas las esferas usan exactamente los mismos valores de meneo, la animación no se sentirá realmente aleatoria Para solucionarlo, seleccionemos todas las demás esferas. Ahora presione la tecla E dos veces para abrir el cuadro de expresión y luego ajustar el segundo valor en la expresión wiggle En lugar de 100, pongámoslo en 150 para estas esferas. De esa manera, algunos viajarán más lejos que otros, dándonos un aspecto aleatorizado mucho más natural Genial. Ahora ya se ve mejor, pero déjame mostrarte un pequeño truco secreto que no mucha gente conoce. Esto hará que tu degradado animado se vea aún más dinámico. Primero, crea un nuevo objeto nulo, luego padre todas las esferas a este nulo. Tenga cuidado de no confundir el látigo principal y vincular el látigo de selección con el tapete de la pista Látigo de Pick. Se ven similares, pero para este paso, necesitamos el látigo de pick parent y link A continuación, animemos la rotación del objeto nulo. En lugar de agregar fotogramas clave manuales, usaremos otra expresión simple pero poderosa Abra la propiedad de rotación del nulo, mantenga presionada la opción Alt y haga clic en el cronómetro, en el tipo de cuadro de expresión Tiempo asterisco 100. Esto significa que el nulo rotará 100 grados cada segundo. Eso es demasiado rápido para nuestro proyecto, pero quería mostrarles cómo funciona. Vamos a ralentizarlo cambiándolo a T asterisco diez. Ahora, todo el grupo de esferas gira suavemente mientras cada esfera individual todavía se mueve independientemente Esta combinación hace que el gradiente se sienta vivo. Ahora vamos a convertir esto en un look de degradado real. Para eso, crea una nueva capa de ajuste. Después ve al panel de efectos y presets y busca Desenfoque rápido de cuadro Arrástrelo a la capa de ajuste y aumente el radio de desenfoque. Vamos a ponerla en 100 por ahora. Repasa la línea de tiempo y observa cómo las esferas superpuestas de colores se mezclan en un hermoso degradado cambiante. Esta es una gran oportunidad para ajustar la escala y posición de las esferas en la escena. Lo que me gusta hacer aquí es pasar por la línea de tiempo, comprobar cómo se ve la animación en diferentes puntos del tiempo, y luego afinar la escala y posición de esferas individuales. Ahora mismo, como probablemente notaste, no tenemos ningún fondo sólido en la escena, lo que hace que el degradado parezca incompleto. Para arreglar eso. Vamos a crear un nuevo sólido blanco y colocarlo debajo de todas las capas. A continuación, active la capa de paleta y busque el efecto de relleno. Aplícalo al sólido y elige uno de los colores más brillantes o más oscuros, el que mejor funcione para ti Esto nos dará un color de fondo para mezclarnos con nuestras esferas animadas. personal, iré con un color púrpura brillante, que creo que se ve muy bien. Al mirar la configuración ahora, noté que la esfera en la zona superior izquierda se siente un poco demasiado oscura, así que la cambiaré a un color más brillante. Vamos a previsualizar de nuevo y ver cómo se ve todo junto. En esta etapa, si no estás satisfecho con el aspecto de tu degradado, intenta mover algunas esferas alrededor. Por ejemplo, siento que esta zona es demasiado brillante, así que arrastraré un poco la esfera Beige hacia abajo. Puedes seguir ajustando las posiciones hasta obtener un aspecto general equilibrado Otro ajuste útil es abrir las expresiones de meneo en las propiedades de posición Si notas que ciertas esferas se mueven demasiado o muy poco, solo modifica sus valores de meneo De esa manera, tendrás un control total sobre lo dinámico o sutil que se siente el movimiento de tu degradado. La idea clave aquí es que esta configuración sea flexible. Puedes seguir refinando colores, escalas, posiciones y ajustes de meneo hasta lograr el aspecto degradado animado con el que estás contento Una vez que estoy contento con la configuración general, creo que podemos mejorar aún más el aspecto del degradado aumentando el radio de desenfoque. Esto combinará los colores más suavemente. Y en mi opinión, el resultado se ve mucho mejor. Ahora que te he mostrado todos los diferentes pasos que puedes dar para refinar tus gradientes, pasaré unos momentos recolorando las esferas hasta encontrar una mirada que realmente me guste En mi caso, quiero que el gradiente se incline más hacia un tono púrpura que amarillento Entonces voy a ajustar los colores de la esfera en consecuencia. Muy bien, ahora estoy satisfecho con el resultado. Antes de continuar, copiemos nombre de los efectos y péguelo en la capa de ajuste. Así que siempre recordaremos para qué se utiliza esta capa de ajuste. En esta etapa, ya que terminamos con el degradado y nos gusta cómo se ve, definitivamente no queremos dejar todas estas capas sentadas dentro de la comp maestra. Vamos a precomponerlos todos en una sola pre comp. Lo llamaremos fondo degradado. Asegúrate de que ambas opciones estén marcadas en el cuadro de diálogo y presiona Bien. Ahora, en el panel Proyecto, arrastre la precomp recién creada a la carpeta PreComps para mantener También volveré a cambiar el color de su etiqueta a la tormenta de arena predeterminada Apareció azul antes porque se creó dentro de la master comp, que había coloreado azul. Bien. Ahora quiero mostrarles algo muy importante a la hora de trabajar en proyectos complejos. Una de las principales preocupaciones en proyectos como este es asegurarse de que los efectos posteriores se ejecuten sin problemas, tanto al previsualizar como al renderizar En nuestro caso, si usas la pre comp original de este fondo degradado animado a lo largo del proyecto, será muy pesado en los efectos posteriores, ralentizando las previsualizaciones y los renders finales En cambio, lo que tenemos que hacer es renderizar esta animación una vez, y luego usar la versión renderizada del degradado donde sea necesario en el proyecto. Déjame mostrarte exactamente cómo hacer eso. Primero, entremos en la pre comp de esta animación. A continuación, estableceremos los ajustes de color en nuestro proyecto al máximo. En este punto, no quiero que hagas nada. Mira y escucha. Quiero mostrarte dos formatos diferentes de alta calidad que puedes usar para renderizar. El primero es extremadamente pesado, así que no recomiendo usarlo realmente, pero te lo mostraré para que entiendas la diferencia entre los formatos. No te preocupes, te avisaré cuando llegue el momento de regresar y seguirme a mi lado mientras renderizamos el segundo formato. Entonces, digamos que sabes que este fondo absolutamente necesita ser renderizado la mayor calidad posible. En ese caso, íbamos al módulo de salida, elegiríamos QuickTime como formato, luego dentro de las opciones de formato bajo Video Codec, seleccionaríamos ya sea animación o una de las resoluciones Apple ProRes Por ahora, vamos con la animación. Ahora, elegiré una ubicación para guardar este renderizado y presionaré el botón de renderizar. Todo bien. El render está hecho. Como puede ver, tardó casi 5 minutos. En tu computadora, puede ser más o menos dependiendo de tu hardware. Pero aquí está la importante comida para llevar. En lugar de usar la pre comp original de esta animación de degradado, ahora usamos el archivo renderizado. Después Effex maneja el metraje de manera mucho más eficiente que una precomp pesada, por lo que tanto las previsualizaciones como los renders finales serán No obstante, como mencioné, este formato es muy pesado. Si no tienes mucho espacio libre en tu computadora, deberías renderizarlo como un archivo MP four de alta calidad en lugar de un archivo MOV. De esta manera, seguirás teniendo una gran calidad, pero con un tamaño de archivo mucho más ligero. Entonces ahora hagámoslo juntos. Puedes volver a After Effects y seguirme a mi lado mientras renderizamos el segundo formato más claro. Entonces, una vez más, abramos la precomp original. Esta vez, cambiaremos la profundidad de color a 16 bits. Ahora presione Control o Comando más M para enviarlo al Render Q. Dentro del módulo de salida, elija h.264 como formato Eso es un expediente MP cuatro. En las opciones de formato, verá la tasa de bits objetivo, que está establecida en 15 megabits por segundo por defecto Puedes aumentar esto a algo más alto como 35 o 45 para una mejor calidad, o si lo prefieres, solo elige una de las plantillas listas para usar que ya establece la tasa de bits para ti. Voy a elegir renderizar esto en mi carpeta de activos, pero deberías renderizarlo en la carpeta separada que te pedí que crearas antes para tus propios archivos. Finalmente, presiona el botón renderizar. Una vez finalizado el renderizado, eliminaré el archivo MOV antiguo y luego importaré la nueva versión MP four del fondo degradado animado a nuestro proyecto. Puedes usar el archivo que acabas de renderizar o el que he incluido en la carpeta Activos. Genial. Ahora, como puedes ver, el archivo MP four es mucho más ligero en tamaño, pero la calidad sigue siendo perfecta para el resto del proyecto. Si lo dejo caer en la línea de tiempo, se ve idéntico al pre comp original. La única diferencia es que ahora los efectos posteriores pueden manejarlo de manera mucho más eficiente, que hará que la previsualización y renderización del proyecto final sea más rápida y fluida Y con eso, terminamos esta lección. Vamos a guardar el proyecto una vez más antes de seguir adelante. En la siguiente lección, crearemos el tablero de video antes de comenzar la animación real. Verás por qué es tan importante tener una placa de video lista. Nos va a ahorrar mucho tiempo y hacer que el proceso de animación sea mucho más fácil. Va a ser increíble. Entonces te veré en la siguiente. Y antes comenzar a ver la siguiente lección, no olvides tomarte un descanso de diez minutos para refrescarte antes de continuar. Nos vemos en la siguiente. 10. Creación del videocapasón para la sincronización de la escena: Regresa, ahora podemos traer de vuelta los ajustes de color a ocho BPC Volveremos a cambiarlo a 16 cuando terminemos esta animación y necesitemos renderizar la versión final. Mientras tanto, en esta lección, vamos a crear el tablero de video, que es un paso muy importante en la creación cualquier video o animación multi-escena. Junto con la voz en off, nos ayudará a determinar cuánto tiempo debe durar cada escena, lo cual será muy útil en la fase de animación, así que sabemos cuántos segundos debe durar cada escena Y para ello, encontremos el storyboard que preparé antes para el proyecto porque usaremos los frames del storyboard para crear el tablero de video Como queremos todas las capas, podemos seleccionar composición retener tamaño de capa, y luego podemos elegir combinar estilos de capa en material de archivo. Lo cual realmente no importa porque no tenemos ningún estilo de capa en estas capas de Photoshop. Bien, podemos colocar la carpeta con las capas dentro de la carpeta assets Y ahora vamos a entrar en el pre comp que obtenemos de importar el storyboard Por ahora, podemos apagar todas las capas aquí excepto la capa de fondo, y podemos bloquearla para que no interfiera con el proceso. Genial. Ahora también importemos la voz en off al proyecto Ya sea que obtenga una voz en off del cliente o la genere usted mismo, no importa Lo que más importa es tener cualquier voz en off que puedas usar al crear la placa de video e iniciar la animación del proyecto real, incluso si es solo una simple voz en off creada con IA o Es muy importante crear una voz en off inicial para que sepas aproximadamente dónde necesita comenzar y terminar cada escena Entonces ahora te voy a mostrar cómo hacerlo completamente gratis. El sitio web que suelo usar, ya sea para una voz en off inicial o una final que realmente usaré en el proyecto se llama vi dot IO Puedes registrarte muy rápidamente usando tu cuenta de Gmail. Voy a iniciar sesión porque ya me registré con mi cuenta de Gmail. En el momento que estoy grabando este curso, esta plataforma te permite crear unos minutos de Voiceover de forma gratuita Quizás para cuando veas esta lección, habrán cambiado su paquete gratuito, y ya no es gratis, pero en cualquier caso, eso no debería ser un problema porque estoy seguro que es súper fácil encontrar herramientas gratuitas que puedan generar dos o 3 minutos de voz en off sin Insisto fuertemente en que crees una voz en off antes de comenzar la animación Te ahorrará muchas revisiones y dolores de cabeza a la larga. Bien. Entonces, una vez que estamos iniciados sesión en el sitio web, es bastante fácil de usar. Haré clic aquí para crear un nuevo proyecto. A continuación, voy a elegir el tamaño de mi pantalla. En mi caso, utilizaré la resolución full HD. Entonces para el color de fondo, elegiré el verde, y eso es porque también crearé subtítulos en este video Cuando el fondo es verde, será mucho más fácil en los efectos posteriores eliminarlo usando uno de los efectos de claves Todo bien. Entonces ahora para crear la voz en off, iré a la sección de audio y seleccionaré la función de texto a voz A continuación, iré al guión y copiaré todos los textos que tengo aquí. Después lo pegaré en el cuadro de texto. Y como pueden ver, hay un límite a la cantidad de texto que puedo usar a la vez. El siguiente paso es elegir la voz adecuada para mi voz en off En esta parte, voy a acelerar las cosas. Todo lo que estoy haciendo es jugar y probar para encontrar cuál será la mejor opción para mi video. Todo bien. Entonces, después de probar todas las voces, finalmente escogí la que más me gustó. Ahora lo seleccionaré y daré clic en Generar. Este proceso podría tardar unos minutos. Todo bien. Entonces la voz en off está lista Simplemente voy a cambiar el nombre de este proyecto, y ahora puedo escuchar lo que tengo. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes. Y antes de que te des cuenta, te estás ahogando en el caos, buscando ayuda Cumplió con un punto. La plataforma que hace que la gestión de proyectos sea tan sencilla. Hasta tu gato podría hacerlo. Con One Point, obtienes una visión general cristalina de todo lo que tu equipo está trabajando. Todos tus proyectos, todas tus tareas, todo en un solo lugar. Como puede notar, a veces escuchamos largas pausas o ninguna pausa en absoluto Ante esta situación, voy a ajustar un poco mi texto. Al cambiar los signos de puntuación en el texto, la IA cambiará ligeramente la versión de la voz en off Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes. Y antes de que te des cuenta, te estás ahogando en el caos, buscando ayuda Cumplió con un punto. La plataforma que hace que la gestión de proyectos sea tan sencilla. Bien, esto suena mejor. Pero decidí cambiar la voz en off a otro artista. Gestionar un gran equipo a través de múltiples proyectos. En ese caso, todo lo que necesito hacer es encontrar al artista que quiero y dar clic en Regenerar. Genial. Entonces una vez que esté contento con la voz en off, lo siguiente que haré es agregar subtítulos de la voz en off en el video Hago esto porque me ayuda más adelante en after effects a entender qué está hablando la escena, aunque no escuche la voz en off Es solo una pequeña cosa que me encanta hacer cuando trabajo en proyectos con voces en off Está bien si no entiendes completamente de lo que estoy hablando. Una vez que realmente empecemos a trabajar en ello en unos minutos, todo se volverá mucho más claro para ti. Aquí del lado izquierdo, puedo ajustar el texto si encuentro algunos errores. Todo bien. Entonces, una vez que esté bien con los subtítulos, bajaré el tamaño de la fuente y volveré a verificar todo una vez más antes de descargarlo Bien, así que estoy listo para descargarla. Para ello, haré clic en Descargar y me aseguraré de que la calidad esté establecida en HD y que los subtítulos quemados estén marcados. Ahora voy a hacer clic en Exportar video y esperar unos minutos. Una vez hecho esto, haré clic en el icono Descargar y elegiré descargarlo como un archivo MP four porque quiero ver los subtítulos. Si no quieres subtítulos en tu voz en off, puedes descargarlos como un archivo MP three y usarlos en tu proyecto. ¿Todo bien? Vamos a arrastrar la voz en off a nuestro proyecto. Ahora llevemos el archivo MP for a nuestra línea de tiempo y comencemos a crear la placa de video. Lo primero que tenemos que hacer es quitar la pantalla verde para que podamos ver los subtítulos y las capas de la placa de video Para ello, vayamos al panel Efectos y busquemos el efecto de luz clave. Ahora, todo lo que tenemos que hacer es seleccionar el cuentagotas del color de la pantalla y hacer clic en el color verde Impresionante. Entonces ahora comencemos a crear la placa de video. Lo primero que me encanta hacer al crear el tablero de video es compensar todos los fotogramas del storyboard, uno tras otro en la línea de tiempo Para hacerlo rápidamente, seleccionemos todas las capas. Y ahora vamos a encuadrar diez y recortar las capas hasta este punto. Ahora, para compensar todas las capas a la vez, es importante que iniciemos la selección desde la primera capa que queremos estar al inicio de la línea de tiempo. En nuestro caso, es la capa número uno. Así que selecciónala, mantén presionada la tecla Mayús y luego selecciona la última capa. Ahora, haga clic derecho, vaya a Asistente de fotogramas clave y seleccione capas de secuencia, y luego simplemente haga clic en Bien. Como puedes ver, ahora todas nuestras capas están compensadas una tras otra, comenzando desde la primera capa que seleccionamos. Ahora bien, a veces el primer desplazamiento no es lo que necesitas porque la duración de cada capa es demasiado corta o demasiado larga. En nuestro caso, diez fotogramas por cada capa son demasiado cortos, así que deshagamos lo que hicimos y repitamos este proceso una vez más, pero esta vez, fijemos la duración de cada capa en 1 segundo de duración. Ahora, podemos comenzar a trabajar en ajustar cada capa de acuerdo con el script. Y como podemos ver las leyendas a continuación, ni siquiera necesitamos escuchar el guión Simplemente podemos seguir el texto para saber qué fotogramas deben mostrarse en cada punto específico en el tiempo. Por eso me encanta agregar leyendas a mis voces en off. En el renderizado final, solo puedo apagar la capa de los subtítulos para que no los vea, pero aún así escucharé la voz Después, entenderás exactamente a lo que me refiero. Ahora centrémonos en ajustar las duraciones de capa de acuerdo con la voz en off Entonces, según la voz en off, entiendo que en este momento, la primera escena debería terminar y la segunda debería comenzar Esto significa que necesitamos ajustar los fotogramas que describen la primera escena hasta este punto en el tiempo. Ahora, podemos seleccionar todos los fotogramas que crean la primera escena y acortar su duración Después de eso, podemos usar la función de capas de secuencia una vez más para que se desplacen una tras otra sin que necesitemos moverlas manualmente. Como comprenderás, necesitaremos usar esta función muchas veces a hora de crear guiones gráficos o cualquier otra animación en la que estemos trabajando Ahora, quiero enseñarte algo importante para convertirte en un diseñador de movimiento más avanzado, creando atajos personalizados para acciones que aún no tienen atajos. Por ejemplo, no tenemos un atajo para esta función. Entonces te voy a mostrar cómo podemos crear un atajo personalizado para ello. Aprovechando esta oportunidad. Quiero enseñarte el proceso de creación de un nuevo atajo. No tienes que hacerlo para esta función. Puedes crear uno para cualquier función que quieras, y yo te mostraré cómo. Primero, vaya a Editar y haga clic en atajos de teclado. Aquí puedes ver que estamos usando el preajuste predeterminado de after effects de atajos. Una vez que creamos un atajo, se mostrará que estás usando uno personalizado en su lugar. A continuación, asegúrate de que el idioma esté configurado en inglés. Ahora, todo lo que tenemos que hacer es escribir la acción en la barra de búsqueda. En nuestro caso, podemos escribir secuencia. Y si nos desplazamos hacia abajo, veremos la función de capas de secuencia debajo de la sección de animación. Para crear un atajo, simplemente haga clic aquí junto al nombre debajo del menú contextual y elija las teclas que desee. Podemos iniciar el atajo con Control o Comando en Mac. Ahora podemos ver todas las claves disponibles que podemos usar coloreadas en gris. Lo que está en morado significa que ya está en uso y no podemos usarlo. Para abrir más teclas disponibles, podemos agregar otra tecla a nuestra nueva combinación de atajos. Por ejemplo, podemos usar la tecla mayúsculas junto con la tecla de control. Ahora, como puede ver, tenemos muchas más claves disponibles para usar. Me encanta usar las claves numéricas porque son más fáciles de recordar. Como puedes ver, el número uno ya está tomado, así que usemos el número dos. Una vez hecho esto, comencemos a seleccionar los fotogramas de la primera escena, comenzando desde la capa uno y luego usemos nuestro atajo recién creado, que es Control Shift dos. Y ahí está. El atajo está funcionando. Así que ahora podemos trabajar con los subtítulos de la voz en off y entender dónde terminar el último fotograma que pertenece a la Bien. Entonces la segunda escena empieza aquí. Así que ahora podemos llevar la capa siete a este punto en el tiempo. Ahora veamos qué tenemos en la siguiente capa. Si leemos los subtítulos, veremos que capa número ocho no debería comenzar justo después de la capa siete De acuerdo con las leyendas, esta escena debería comenzar a partir de este punto en el tiempo Un poco después del séptimo segundo, eso significa que la escena representada en la capa siete debe durar hasta el momento en que comienza la capa ocho. Veamos qué tenemos hasta ahora. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en un. parece que tenemos todo bien Básicamente, al usar este método con los leyendas, no tenemos espacio para errores Todo está súper claro. Sigamos adelante e intentemos practicarlo una vez más. Ahora vamos a seleccionar todas las capas después de la capa ocho y moverlas más tarde en la línea de tiempo. Entonces podemos ver dónde debe comenzar y terminar la siguiente escena. Y antes de que te des cuenta, te estás ahogando en el caos, buscando ayuda reunió para que como entiendas, según la voz en off, cuando escuchamos conocer un punto, necesitamos presentar el logotipo Eso significa que necesitamos comenzar la capa diez un poco antes. Ahora, veamos qué tenemos que hacer antes de que esto suceda. En este punto en el tiempo, vemos, según los leyendas de la voz en off, que se trata de una escena en la que necesitamos presentar la escena de búsqueda Entonces vamos a expandir el comienzo de la capa nueve. Entonces empieza desde aquí. Por último, podemos expandir la capa ocho para terminar en este punto. Genial. Entonces ahora sigamos pasando a las siguientes escenas. Bien, entonces aquí está el momento en la Voz en off, hablando de la plataforma En nuestro storyboard, es la capa donde vemos primera vez el dashboard de la plataforma Eso significa que necesitamos iniciar la capa número 11 a partir de este punto en el tiempo. Movamos todas estas capas a la derecha por ahora y ampliemos la escena anterior hasta este punto en el tiempo. Ahora, podemos traer la capa 11 para comenzar desde aquí. Genial. Entonces ahora veo que según los subtítulos de la voz en off, la escena del gato debería comenzar en este momento Así que ahora voy a tratar de colocar la escena del gato a partir de algún lugar por aquí. Eso significa que podemos ampliar la escena anterior hasta este punto. Bien, espero que estés empezando a entender la idea de crear una placa de video junto con la voz en off y cómo facilita el proceso cuando tenemos leyendas en el camino para Bien, entonces ahora sigamos y continuemos ajustando las capas del storyboard de acuerdo con el timing de la voz En los casos en los que las cosas se complican un poco y no podemos ajustar las capas a la voz en off, lo que me encanta hacer es encontrar una escena donde tenga una animación de texto y alinearla con las leyendas Como puedes ver, tenemos una escena con una animación de texto que dice, N la imagen completa. Así que ahora voy a ignorar todo lo demás y simplemente seguir viendo los subtítulos para encontrar donde empieza esta frase en la voz en off Como pueden ver, comienza en algún lugar por aquí en el segundo 22 o 23. Así que ahora voy a regresar y seleccionar todas las capas a partir de la capa 17 y arrastrarlas para comenzar a partir de ese punto en el tiempo, que fue el final del segundo 22. Ahora, todo lo que necesito hacer es ajustar el tiempo acuerdo a las leyendas para que encaje perfectamente Genial. Ahora, podemos traer la capa 16 aquí a la derecha y la capa 14 aquí a la izquierda y ver qué está pasando en el medio. Sé que por el momento en la voz en off, cuando escuchamos una visión general cristalina, necesitamos presentar ya la pantalla de interfaz de usuario del proyecto Para que podamos iniciar esta capa desde aquí y arrastrarla hacia la derecha. Ahora veamos dónde tenemos que terminar la escena. Sé que mi siguiente fotograma es mostrar la escena de la tarea. Entonces ahora voy a leer las leyendas y ver dónde empieza esta parte en la voz en off Comienza aquí, así que eso significa que la capa 16 necesita comenzar aquí. Y eso significa que la capa 15 necesita terminar aquí. Genial. Así que ahora podemos continuar a las siguientes escenas, y a partir de ahora va a ser súper fácil porque tenemos muchas escenas con animaciones de texto. Eso hace que sea fácil hacer coincidir la voz en off con estas escenas mientras leemos los subtítulos Por ejemplo, para ver dónde debe terminar la escena de preguntas, todo lo que necesitamos hacer es verificar los subtítulos de voz en off, dónde comienza el siguiente texto de la escena Como puedes ver aquí en las leyendas de la voz en off, ya no vemos Eso significa que por ahora podemos acotar 17 en este punto en el tiempo. Ahora, movamos todas las capas a la derecha y veamos dónde comienza la siguiente escena. Presta atención solo a los leyendas de la voz en off. Como puedes ver, vemos el texto que incluye cada proyecto. Eso significa que en este momento, podemos iniciar la siguiente escena y la escena de preguntas exactamente aquí. Ahora, llevemos la capa 18 para comenzar desde aquí. Genial. Y ahora, para saber dónde debe terminar esta escena, todo lo que necesitamos hacer es ver dónde la siguiente escena de texto de pregunta comienza la siguiente escena de texto de pregunta según los subtítulos de voz en off Entonces ahora, enfócate en los subtítulos solo hasta que veas el momento en el que comienza la pregunta Aquí está en el segundo 37. Así que ahora vamos a seleccionar todas las capas de la capa llamada capa 19, que está presentando la escena de preguntas y luego moverlas todas para comenzar desde el segundo 37. Ahora para ver dónde debería terminar la escena de preguntas, siga enfocándose solo en los leyendas de la voz en off para ver dónde termina la voz en off diciendo siga enfocándose solo en los leyendas de la voz en off para ver dónde termina la voz en off diciendo quedarse atrás. Aquí está. Así que expande el fotograma desde el guión gráfico de la escena de preguntas hasta este momento Genial. Con eso hecho, ahora podemos seleccionar el resto de las capas e iniciarlas desde el final de la anterior. Como puedes ver, coincide con los subtítulos de la voz en off y el texto que hay que mostrar en la escena en este momento Impresionante. Así que ahora podemos volver a la escena anterior antes la pregunta y expandir el fotograma hasta el punto en el tiempo donde comienza la escena de la pregunta. Genial. Entonces ahora veo, según mi fotograma de storyboards que la siguiente escena es una escena de preguntas Eso significa que ahora evitaré todo lo demás y solo me enfocaré en los leyendas de la voz en off para ver dónde dice la voz en off Aquí está en el segundo 42. Entonces ahora todo lo que tenemos que hacer es traer todas las capas de la capa 21 para comenzar desde la marca de 42 segundos. Después de eso, podemos extender la capa 20 para terminar en ese punto en el tiempo. Entonces ahora para ver dónde termina la escena de la pregunta, presta atención a los subtítulos del storyboard para ver dónde ya no vemos la pregunta. Aquí está. Entonces movamos todo el resto de las capas para comenzar desde aquí y luego terminar la capa 21 en este punto en el tiempo. Impresionante. Sigamos trabajando. Veo que la siguiente escena está perfectamente alineada con la voz en off Ya que el texto que veo que necesita ser presentado en la escena coincide con los leyendas de la voz en off Ahora sigo enfocándome solo en los subtítulos de voz en off y veo de qué habla la siguiente escena En este caso, estamos hablando del sistema de mensajería. En nuestro caso, el inicio de la escena está bien. Pero ahora tenemos que encontrar dónde termina esta escena. Para ello, centrémonos en cuál debería ser la siguiente escena según el storyboard Como puedes ver, ahora vemos una escena con la pantalla de interfaz de usuario del navegador de archivos en la que una persona puede compartir archivos. Con eso en mente, ahora tenemos que volver atrás y enfocarnos solo en los leyendas de la voz en off y ver dónde comienza la voz en off a enfocarnos solo en los leyendas de la voz en off y ver dónde comienza la voz en off a hablar de esta parte. Aquí está. Como puede ver, la voz en off dice compartir, que significa que la escena del navegador de archivos debería comenzar desde aquí Así que ahora vamos a traer las capas para comenzar desde este punto en el tiempo. Genial. Y ahora volvamos a ocuparnos de la parte anterior. Según el marco del guión gráfico, veo que muestra una escena sobre recordatorio rápido, y veo claramente los leyendas no hablando de esta Así que centrémonos en los subtítulos de la voz en off para ver dónde comienza la voz en off a hablar sobre hablar sobre Aquí está en el segundo 50. Entonces, vamos a traer el marco del storyboard de esta escena para comenzar desde aquí Genial. Entonces ahora podemos expandir la capa 23 para terminar donde comienza la capa 22, y luego expandir la capa 22 para terminar donde comienza la capa 23. Entonces ahora, según el storyboard, veo que la siguiente escena está presentando una pregunta Entonces ahora me centraré en los subtítulos de la voz en off y veré dónde empieza la voz en off Aquí está. Está empezando en algún lugar alrededor de la marca del primer minuto. Eso significa que ahora necesitamos seleccionar las capas a partir de la escena de preguntas y traerlas todas para comenzar desde la marca de 1 minuto. Con eso hecho, ahora podemos expandir la capa 24 para terminar en ese punto en el tiempo. Bien. Entonces ahora vamos a revisar la escena final. Los fotogramas del guión gráfico y los subtítulos de la voz en off parecen coincidir perfectamente, así que no necesitamos hacer Lo único que podemos hacer es en el último storyboard frame en el momento en el que termina la voz en off Bien. Entonces, cuando terminemos con el tiempo, ahora podemos acortar el área de trabajo hasta el final de la voz en off y verificar que todo coincida El guión gráfico enmarca con la voz en off. Entonces echemos un vistazo a lo que tenemos. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos, buscando ayuda. Conocí a One Point. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con One Point, obtienes una visión clara de todo lo que tu equipo está trabajando, todos tus proyectos, todas tus tareas, todo en un solo lugar. Necesito la imagen completa. Cada proyecto incluye tareas detalladas, subtareas y seguimiento del progreso en tiempo real, por lo que nada se desliza por las grietas Quieres ver quién se está quedando atrás, dirígete a la pestaña de tu equipo para ver la actividad de todos de un vistazo. Necesidad de hacer un seguimiento con alguien. Salta al sistema de mensajería integrado donde todas tus conversaciones se organizan por contacto. Envía un recordatorio rápido o comparte una actualización al instante. Y sí, compartir archivos es sencillo. Sube cualquier documento y todo tu equipo tendrá acceso a él de inmediato. Entonces, ¿por qué seguir luchando? Ve a one point.com y haz tu jornada laboral más fácil, a partir Gestionar un equipo grande Genial. Todo se ve perfecto. Y ahora estamos listos para pasar a la siguiente lección donde comenzaremos a animar la primera escena Va a ser súper divertido. Entonces nos vemos ahí. 11. El flujo de trabajo de animación correcto: Regresa. Antes de comenzar a animar las escenas, es importante para mí explicarte el flujo de trabajo correcto Es bastante sencillo de entender. Primero, quiero que trabajes macro. Eso significa que quiero que primero termines de animar las escenas sin entrar demasiado en los detalles de diseño Lo más importante es terminar primero de crear una buena animación que encaje perfectamente con la voz en off Esta es la parte más importante. Sólo cuando tienes eso para todas las escenas, puedes empezar a trabajar micro. Es decir, entra en cada escena y agrega activos de diseño adicionales y comienza a colorear y diseñar las escenas y agregar efectos especiales como desenfoques, brillos y sombras Este método no solo hace que tu proyecto se ejecute más rápido y lo que es más importante, lo prepara para ajustar la animación a la voz en off, sino que también te ahorra mucho tiempo a largo plazo al evitar ajustar el diseño 1 millón Así que recuerda, divide tu flujo de trabajo en dos partes. Primero, trabaja macro en las cosas más importantes y solo entonces comienza a trabajar Micro en ajustar los detalles del diseño. Tenga esto en cuenta a lo largo del curso y preste atención a cómo iremos a animar la siguiente escena antes finalizar el diseño de la anterior ¿Bien? Entonces comenzaremos esta lección creando y animando la primera escena Lo primero que debemos hacer antes animar cualquier escena que incluya voz en off es ver cuál debería ser la duración de En nuestro caso, después de crear el tablero de video, podemos ver claramente cuándo comienza la escena y cuándo debe terminar antes de que comience la siguiente. Como puedes ver, la primera escena termina aquí, por lo que significa que necesitamos que la animación de la escena dure como máximo 4 segundos. Saber cuál es la duración de una escena puede evitar muchos ajustes de tiempo en un futuro cercano. Ese es uno de los beneficios importantes de tener una placa de video. Todo bien. Para comenzar, primero llevemos el archivo Voiceover MP four la carpeta Assets Y ahora presionemos Control o Comando N para crear una nueva composición. Vamos a nombrar a esta escena comp una. Hay muchas maneras de animar esta escena. Y esta vez, quiero darte un consejo rápido para animar escenas donde tengamos un movimiento de movimiento a lado, como lo hacemos en la primera escena Cuando trato con este tipo de escenas, me encanta crear una composición amplia, y después de eso, animar la comp a los lados si es necesario Cubrí esta técnica en mi curso de transición Maestría, en la que aprendimos un montón de formas y técnicas para diferentes tipos de transiciones y videos explicativos Bien, así que para tener una composición amplia, podemos multiplicar el ancho por dos A continuación, por el tiempo que dure, podemos dejarlo a los 2 minutos por ahora. Genial. Entonces ahora tenemos una amplia composición en la que podemos ingresar todo el texto que necesitamos animar en la escena Entonces abramos el guión y copiemos el texto relevante. Back y After Effects, seleccione la herramienta de texto, haga clic una vez para abrir una línea de texto y pegue el texto. Ahora, ajustemos el texto para que se ajuste a las pautas de diseño de la compañía. En nuestro caso, la fuente principal de la compañía es pop ins. En caso de que no estés seguro, siempre puedes pedirle al cliente confirme y te envíe la fuente relevante para que la puedas instalar en tu dispositivo. En nuestro caso, se trata de una fuente gratuita que puedes descargar de Google Fonts. También puedes encontrar la fuente en mis activos. Si no tienes esta fuente instalada en tu dispositivo, por favor guarda el proyecto, ciérrelo e instala la fuente. Sólo después de eso, reabrir el proyecto y seguir trabajando. Bien, volvamos al proyecto. Encontraré la fuente. Ahora restableceré mis propiedades de texto. Vamos a establecer el tamaño de fuente en 100 por ahora. A continuación, asegúrate de que el párrafo esté centrado, y luego puedes alinear la capa con el centro de la comp. Genial. Entonces ahora podemos comenzar a animar la escena Pero antes de eso, eliminemos el punto que tenemos en el texto. En los videos de animación, no es común usar puntos en escenas de animación de texto. Impresionante. Así que ahora podemos ir a la placa de video y volver a comprobar lo que tiene que pasar en la escena Mi enfoque para esta animación será dividir el texto en varias partes y animarlas una tras otra sin preocuparse por el tiempo entre ellas al principio Después de crear la animación para cada parte, moveremos las capas y los fotogramas clave para ajustar el tiempo Bien, volvamos a la escena y empecemos prepararla para la animación. Todo bien. Entonces, lo primero que podemos hacer es usar esta capa como capa de referencia porque necesitamos tener algunas animaciones de tipo de texto diferentes. Y es una buena idea ver dónde debe colocarse cada palabra. Podemos duplicar esta capa ahora y bloquear la referencia. Vamos a traer la opacidad aquí de vuelta a 100. Genial. Entonces ahora, como tenemos que crear diferentes tipos de animaciones para el texto, comencemos a dividir el texto en unas pocas capas separadas para cada parte. Para empezar a hacer eso, primero, vamos a duplicar nuestra capa de texto. Ahora asegurémonos de que en esta capa, solo veamos la primera parte del texto. Seleccionemos el texto de la palabra múltiplo hasta el final de la oración y eliminemos esta parte. Una vez hecho eso antes pasar a dividir el texto nuevamente, ahora llevemos nuestra primera parte de texto a la posición correcta. En este caso, necesitamos mover esta capa hacia la izquierda. Esta será la parte donde usemos animadores de texto para animar este Para el resto del texto, animaremos casi cada palabra por separado. Con eso en mente, seleccionemos esta capa de texto y asegurémonos de eliminar la primera parte del texto, incluida la palabra múltiplo. Ya que posteriormente vamos a animar esta palabra por separado. Bien. Entonces ahora podemos aislar esta capa de texto para enfocarnos en ella. Ahora, vamos a duplicar esta capa. Y esta vez, asegúrate de que en esta capa, solo tenemos la palabra proyectos. Genial. Y luego aislemos esta capa y asegurémonos de tener aquí solo el texto no es fácil. Impresionante. Así que ahora vamos a traer de vuelta todas las capas y organizar la posición de nuestras nuevas partes de texto de acuerdo con la capa de referencia. Bien, en este punto, podemos seleccionar todas las capas y centrar sus puntos de anclaje. Para ello, mantenga presionada Control o comando y haga clic dos veces en la herramienta AnchorPoint Genial. Entonces ahora vamos a tratar con la parte más complicada de esta animación textual, que es la palabra múltiplo. Seleccionemos esta capa, duplicarla, colocarla en el lugar correcto y cambiar el texto a múltiple. Genial. Y ahora etiquetemos esta capa en un color diferente para que podamos diferenciar entre las capas más fácilmente. Ahora, comencemos primero a tratar esta animación ya que es la parte más compleja de esta escena. Para enfocarnos mejor en esta capa, aislémosla y tímimos todas las demás capas además de la capa de referencia. Podemos aislarla también para tener una visión clara de dónde debe terminar la animación final de esta palabra. Bien. Entonces ahora necesitamos dividir todos los caracteres de esta palabra en capas separadas. Hay una herramienta de pago para esto en caso de que quieras hacer este proceso un poco más rápido. Dejaré un enlace para ello en la descripción. Pero en mi caso, no hago este tipo de animaciones con demasiada frecuencia. Entonces no necesito esta herramienta. Estoy bien con hacerlo manualmente. Así que vamos a duplicar esta capa siete veces. Entonces, en total, tendremos ocho capas, cada capa para un carácter de esta palabra. Ahora asegurémonos de que cada capa tenga solo un carácter de esta palabra. Impresionante. Y ahora, usando la herramienta de selección, coloquemos todas las capas en la posición correcta. Genial. Entonces con eso hecho, podemos comenzar a animar las capas Primero, seleccionémoslos todos y luego pasemos al segundo. Cuando no sé cuál debería ser la duración de la animación, suelo crear una animación de 1 segundo. Después de eso, ajusto la duración y el tiempo si es necesario. Bien, entonces ahora presionemos P y creemos un fotograma clave para la propiedad position para todas las capas en este punto en el tiempo, ya que sabemos que al final de su animación, necesitan ser localizadas aquí A continuación, vayamos 15 fotogramas antes en el tiempo y comencemos a extender las capas al azar. Con eso hecho, vayamos al inicio de la animación y coloquemos las capas donde queremos que comiencen. En nuestro caso, hagamos que destaquen desde el centro. Así que llevémoslos a todos aproximadamente a la misma ubicación. Impresionante. Entonces, una vez que hayamos terminado con la animación de posición, sigamos adelante y animemos la rotación Primero, sabemos que al final, todos deberían verse como están en este momento y en medio de esta animación, comenzaremos a rotar cada personaje al azar. Por último, al inicio de esta animación, podemos copiar los últimos fotogramas clave y pegarlos aquí. Bien, está empezando a ponerse un poco más interesante. Entonces ahora hagámoslo aún más interesante agregando una animación a escala. Al final, la escala debería estar como está ahora mismo. En medio de la animación, pongamos la escala a, digamos, 150. Y al principio, ya que queremos crear una animación pop up, pongamos la escala a cero para todas las capas. Genial. Y ahora vamos a asegurarnos de que no se seleccione ninguna capa y le presionemos para ver todos los fotogramas clave que creamos y comenzar a mejorar el movimiento Primero, seleccionémoslos y convertiremos todos los fotogramas clave en fotogramas clave de Easy Ease Entonces vayamos al editor de grafos y asegurémonos de que estamos usando el gráfico de velocidad. Ahora, vamos a acercarnos un poco para que podamos ver lo que estamos haciendo y comenzar a ajustar la velocidad de la animación. Eso es ajustar la velocidad. Quiero que la animación empiece rápido. Así que vamos a seleccionar todos los fotogramas clave del medio y mover sus manejadores hacia la izquierda Ahora quiero que las capas floten un poco en el aire. Es decir, quiero que la animación en el medio sea un poco más lenta. Entonces movamos estos mangos a la derecha. Ahora el movimiento aquí será más lento. Genial. Entonces con eso hecho, salgamos del editor de grafos y sigamos mejorando la animación. En este punto, lo que me encanta hacer es crear un ligero retraso entre las capas. Siempre es una buena idea cuando tienes un montón de capas que hacen prácticamente la misma animación. Bien, así que comencemos seleccionando todas las capas después de la primera y compensándolas por digamos dos fotogramas. Ahora, mantenga el comando del controlador, haga clic en la segunda capa para no seleccionar y mueva este 12 fotogramas Hagámoslo por el resto de las capas. Como pueden ver, se ve mejor. Pero ahora desharé mis acciones y te mostraré cómo puedes retrasar las capas mucho más rápido. También puedes hacerlo si estás usando la versión más actualizada de after effects. Esa es la razón por la que estoy usando la versión Beta. Cuando grabé este curso, esta función solo estaba disponible en la versión Beta. Bien, entonces para hacerlo, primero tenemos que comenzar a seleccionar las capas de la capa con la que queremos que comience el retraso. En nuestro caso, la primera capa que necesitamos seleccionar es la letra M. Entonces podemos sostener Shift y seleccionar la última capa. Ahora, mantén presionada la tecla Ctrl Alt o comanda una opción en Mac. Y como puede ver, el cursor cambia al nuevo icono de función de retardo. Eso significa que ahora podemos arrastrar las capas hacia la derecha y obtener un retraso proporcional. Puedes acercar y colocar el indicador de tiempo en el fotograma uno, luego arrastrar las capas para que la segunda capa se coloque aquí. Así es como se puede saber que el retraso es exactamente de un fotograma. Por supuesto, puedes hacer el retraso que quieras. Pero para esta lección, sigue lo que estoy haciendo. Bien, entonces el retraso se ve bastante genial, y ahora podemos mejorar aún más la animación agregando movimiento pop up adicional. Para ello, vamos a crear un nuevo objeto nulo. Ahora vamos a quedarnos en algún lugar después de que termine la animación. Puedes ver dónde está eso marcando el último fotograma clave de la última capa. En nuestro caso, está en algún lugar por aquí. Después lleva el nulo al centro de la palabra, y después de eso, selecciona todas las capas y las padre al nulo. Entonces ahora, usando este nulo, podemos agregar una animación de escala secundaria a todas las capas que tenemos aquí. Vamos a crear un fotograma clave con el valor actual al principio Después de eso, vayamos a algún punto en medio de la animación y escalemos el nulo para digamos, 120. Vamos a comprobar que no es demasiado. Bien, se ve bien. Ahora vayamos a un punto en el tiempo donde la animación casi termina y fijemos la escala a 80. Y por último, vayamos unos fotogramas después de que la animación esté completamente terminada y devolvamos la escala a 100. Esto creará una animación genial para hacer estallar. Ahora podemos facilitar fácilmente los marcos clave y ver cómo se ve eso. En este punto, me encanta ver la animación algunas veces y ver qué puedo ajustar. En mi opinión, podemos traer el fotograma clave final un poco antes para tener un movimiento más ágil Y también podemos traer el primer fotograma clave para comenzar en, digamos, el fotograma diez Sí, creo que así se ve mucho mejor. Genial. Por lo que ahora podemos seguir animando las siguientes partes de texto de la escena Antes de seguir adelante, podemos etiquetar el nulo con el mismo color que las múltiples capas de texto. De esa manera, sabremos que todas estas capas pertenecen a la misma parte de texto. Todo bien. Y ahora vamos a animar la primera parte del texto. Va a ser mucho más fácil porque lo animaremos usando animadores de texto si no sabes lo que es esto, sugiero encarecidamente que veas mi curso, texto y movimiento en el que cubro el mundo de la animación de texto en After Effects. Bien. Para comenzar, abramos propiedades del texto y agreguemos un nuevo animador Comencemos agregando la propiedad position a nuestro animador de texto Ahora vayamos a nuestro animador recién creado y abramos el selector de rango También podemos abrir el menú Avanzado, que usaremos en un segundo. Genial. Entonces ahora comencemos a configurar nuestro animador Aquí está la propiedad de posición que acabamos de agregar de la lista. Lo primero que tenemos que hacer es establecer el punto de cambio para este animador En nuestro caso, quiero que el texto entre desde abajo. Por lo tanto, mi punto de cambio será en algún lugar por aquí, podemos fijarlo en 90. A continuación, para la forma de nuestro animador, asegurémonos de configurarlo para que aumente, ya que queremos que la animación comience de izquierda a derecha Después de esto, hagamos que el animador mueva cada palabra en lugar de cada personaje Con esto, hemos terminado de configurar el animador. Y ahora, para controlar esta configuración, animaremos la propiedad offset Esto cambia el texto del punto de cambio de nuestro animador a la forma original. Del texto. Eso significa que cuando el desplazamiento está en -100, llevará el texto al punto de cambio que establecemos para la propiedad de posición de nuestro animador Y cuando esté a los 100, el texto estará en su forma original. Bien. Así que ahora, asegúrate de estar al comienzo de la animación y crea un fotograma clave para el desplazamiento en -100 A continuación, vaya al segundo y establezca el desplazamiento en 100. Genial. Y ahora, al usar animadores de texto, no facilitamos fácilmente los fotogramas clave para controlar su velocidad Podemos hacerlo directamente desde aquí. Una buena configuración para una buena relajación es establecer E's alto a 20 y Es bajo a 80 Veamos cómo se ve eso. Se ve bien. Para terminar esta animación, parémonos en el punto en el tiempo, donde la animación está completamente terminada y creamos una nueva máscara para esta capa. De esa manera, no veremos el texto al inicio de la animación. En caso de que aún podamos ver algunas partes del texto al principio, podemos cambiar el punto de cambio en nuestro animador Solo necesitamos ajustar la posición de propiedad que tenemos aquí. Eso se ve mejor. Genial. Entonces ahora podemos pasar a la siguiente parte del texto en esta escena. Podemos animar la palabra proyecto en el mismo estilo de animación que usamos para la primera parte Para ello, vamos a copiar el animador y pegarlo en la capa de texto relevante Podemos traer esta capa hasta aquí para mantener el orden cronológico del texto. Todo bien. Y ahora vamos a presionar CTOLF para pegar el animador. Se ve bien. Antes de continuar, parémonos aquí donde la animación está completamente terminada y creemos una máscara para esta capa también para obtener la misma introducción que el texto anterior. Impresionante. Entonces ahora vamos a tratar con la última parte del texto en la escena. Para que sea un poco más interesante, dividamos este texto en dos capas separadas, una palabra en cada capa, y creemos una animación genial para ambas Entonces podemos compensar estas capas y obtener algunos buenos resultados. Antes de animarlos, centremos sus puntos de anclaje. Todo bien. Y ahora vamos a seleccionarlos a ambos y presionar S para abrir la propiedad de escala. Ahora vamos a crear el primer fotograma clave para ambos. Cuando la escala se establece en cero. A continuación, vayamos al fotograma 15 y pongamos la escala a 100. Y finalmente, movamos los últimos fotogramas clave al fotograma 20. Ahora, pongámonos en el medio en fotograma diez y escalémoslos un poco. Vamos a establecer la escala a 120. Genial. Y ahora vamos a facilitar fácilmente los fotogramas clave y luego ir al editor de gráficos y ajustar los manejadores para que la animación comience rápido, se ralentice en el medio y gane velocidad hacia el final Genial. Y ahora en este punto, después de terminar de animar el texto, antes de seguir adelante, es una buena idea trabajar con la voz en off y verificar si el tiempo se ajusta a la narración Vamos a la placa de video y copiemos la capa de voz en off desde ahí. De vuelta a la escena. Vamos a pegarlo aquí y ver qué tenemos hasta ahora. Podemos desactivar esta capa para ocultar las leyendas. No necesitamos verlas ahora mismo. Centrémonos en escuchar la off y ver la animación Administrar un equipo grande en múltiples administrar un equipo grande a través de múltiples. Bien. Entonces después de escucharlo algunas veces, veo que la palabra múltiplo debería comenzar en este momento. Así que vamos a seleccionar todas las capas relacionadas con esta parte de animación de texto y moverlas para comenzar desde aquí. En este punto, estoy escuchando de nuevo la voz en off y tratando de ajustarla aún más. Se encontró con múltiples proyectos. Cruzo múltiples proyectos. lo que entiendo, nuestra animación de esta parte dura demasiado tiempo. Vamos a acelerar esto. Para ello, abramos todos los fotogramas clave que tenemos para esta parte de animación de texto, y ahora asegurémonos de que los estamos seleccionando todos No te pierdas los fotogramas clave a continuación en caso de que estés trabajando en una pantalla pequeña Bien. Entonces ahora, digamos que la animación comienza en 1 segundo y 15 fotogramas y termina en 2 segundos y 20 fotogramas. Quedémonos aquí y mantengamos presionados Alt u Option en Mac y arrastremos el último fotograma clave que tengamos hasta este punto en el tiempo Antes de ver lo que tenemos, asegurémonos de ajustar la longitud de las capas desde el principio. Ocurrió porque arrastramos los fotogramas clave hacia la izquierda mientras acortamos la duración de Ahora vamos a verlo algunas veces. A través de múltiples proyectos. Cruzan múltiples proyectos. Todo bien. Entonces, una vez hecho eso, tratemos con la primera parte. Envejecer a un equipo grande en todo momento. lo que oigo, creo que podemos ralentizar un poco esta animación . Así que llevemos el último fotograma clave de nuestro animador de texto a 1 segundo y diez fotogramas Administrar un equipo grande a través de múltiples. Eso es mejor. Podemos comenzar la segunda parte incluso antes. Genial. Y ahora vamos a tratar con la siguiente palabra. Equipo a través de múltiples proyectos. Proyecto múltiple. Creo que podemos iniciarlo a partir de 2 segundos y cinco fotogramas. Proyectos. Quizá un poco antes. Bueno, ¿proyectos SiplePjects? Lo es. Eso es mejor. Bien. Entonces ahora tratemos con la última parte del texto mientras nos aseguramos de crear un ligero retraso para las dos últimas palabras. Jex no es fácil. No es fácil. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiados textos. Bien. Espero que mientras trabajas en la escena, te hagas una idea de cómo crear escenas principales basadas en texto. Primero animamos cada parte, luego ajustamos el tiempo de acuerdo con la voz en Este método paso a paso te hará la vida más fácil en lugar de comenzar a trabajar en el momento desde el principio. Bien, todo se ve genial. Y ahora podemos eliminar la capa de voice over y comenzar a trabajar en la transición para la siguiente escena. En nuestro caso, lo que inicia la transición es el signo de exclamación, que necesita aparecer y desaparecer mientras revela el objeto cursor principal que tenemos en el proyecto Todo bien. Entonces primero, vamos a crear el signo de exclamación. Asegúrate de usar la fuente correcta para el tamaño, puedes dejarla en 100. A continuación, llevémosla a la posición correcta y etiquetemos esta capa en un color diferente. Ahora, comencemos a animarlo. En primer lugar, sabemos que esta capa debe entrar en escena aproximadamente en este punto en el tiempo, así que vamos a moverla aquí. Y ahora lo animaremos usando las propiedades de escala y rotación Cree un fotograma clave para la escala y la rotación. Ahora, presione para ver todos los fotogramas clave y asegúrese de que la escala esté establecida en cero en este punto Entonces sigamos adelante y pongamos la escala a 100 por ahora. Ahora vamos a rotar la capa 180 grados para que quede al revés. A continuación, en medio de la animación, escalemos la capa para obtener una buena animación emergente. Impresionante. Y por último, ya que necesitamos crear una transición de esta capa al cursor, podemos establecer la última escala, fotograma clave a cero, por lo que desaparecerá Entonces iniciaremos la animación de esfera desde aquí mismo. Por ahora, vamos a facilitar fácilmente los fotogramas clave de rotación y asegurarnos de que el movimiento comience lento y gane velocidad hacia el final Después de eso, para los fotogramas clave de escala, podemos hacer que la animación comience rápido, disminuya la velocidad en el medio y luego vuelva a acelerar al final Creo que se ve genial. Ahora, estamos listos para trabajar en la última parte de la escena, que está creando la animación de esfera. Esa esfera será nuestro cursor a lo largo de este proyecto. Entonces primero, seleccionemos la herramienta de forma. Asegúrese de que no haya ninguna capa seleccionada y, a continuación, cree una esfera proporcional mientras mantiene presionada la tecla Mayús. Vamos a establecer el tamaño en 60. Y ahora antes de seguir adelante, quiero darte una pequeña propina. Cuando tienes un proyecto que incluye algún tipo de animación de cursor o esfera como objeto principal, te sugiero que lo precompongas y lo mantengas dentro de una precomp La razón de esto es que cuando está dentro de la precomp, será mucho más fácil ajustar el diseño de este objeto o crear una animación única para él si es necesario También será mucho más fácil en caso de que quieras agregar otras capas para que se ajusten a un look específico. Esto lo entenderás mejor en el curso, ya que esto es exactamente lo que vamos a hacer, usaremos nuestra capa de fondo animado para colorear este objeto. Por ahora, volvamos a la escena y comencemos a animar esta capa Primero, vamos a traerlo para comenzar desde aquí. Ahora, vamos a colocarlo en el lugar correcto de la escena. Tenemos que posicionarlo en el mismo lugar. Ya podemos colapsar esta pre comp para obtenerla en plena calidad. Posteriormente hablaremos a fondo sobre la función de colapso. Pero ahora vamos a animar esta capa. Podemos iniciarlo un poco después de la animación del signo de exclamación Donde el signo de exclamación está desapareciendo, podemos usar la escala para crear una animación pop out de 1 segundo de largo Ahora, abramos la propiedad position y creemos una bonita animación de popping Entonces el foco del espectador va a esta parte antes de pasar a la siguiente escena Podemos hacer que esta capa salte arriba antes de caer al final. Genial. Ahora vamos a asegurarnos de que la animación de escala ocurra rápidamente porque queremos que aparezca justo antes de que desaparezca el signo de exclamación Y ahora centrémonos en facilitar los fotogramas clave de posición. Te estoy mostrando este proceso en lugar de decirte los ajustes finales de velocidad porque este es el flujo de trabajo realista. A veces no sabemos qué flexibilización se ajustará a la animación, así que nos ajustamos en el camino y tratamos de entender qué se ve mejor Bien, entonces ahora creo que necesitamos mover la esfera. Cuando ya tengas fotogramas clave de posición en tu capa, no olvides pararte primero en uno de los fotogramas clave Sólo entonces, mientras se seleccionan todos los fotogramas clave de posición, mueve la esfera a donde necesites que esté Es algo súper básico, pero quiero asegurarme de que no cometas errores innecesarios durante el curso. ¿Bien? Creo que la posición es buena, pero siento que la animación a escala necesita comenzar un poco más rápido. Veamos cómo se ve eso. Eso es mejor. Pero la parte final todavía se siente un poco demasiado lenta. Además, como recordarás, según el guión gráfico y la voz en off, esta escena debería terminar en el segundo cuarto, y en este momento estamos casi en el Entonces abramos los fotogramas clave del signo de exclamación y aceleremos la animación Hagamos que dure 20 fotogramas. Hagamos lo mismo para la animación del cursor y luego ajustemos el tiempo. El tiempo se ve bien, pero creo que podemos empujar la esfera un poco más arriba antes de que caiga. En este punto, suelo ver la animación varias veces y hacer ajustes finales, pero asegúrate de no quedar atascado demasiado tiempo en una parte. Nuestro objetivo es primero asegurarnos la animación se vea bien y se ajuste a la voz en off Queremos pasar a las siguientes escenas y terminarlas todas. Después de tener todo listo, podemos tomarnos el tiempo para afinar esos toques finales. Bien, así que una vez que estoy contento con la animación, y sé que coincide con la duración correcta, según el guión gráfico y el guión, podemos recortar la duración innecesaria de esta comp Ahora mismo, la duración es de 2 minutos, pero la escena en realidad termina alrededor del quinto segundo. Lo que normalmente me gusta hacer es quedarme un segundo extra antes de recortar la comp Entonces, parémonos en el segundo seis y acortemos el área de trabajo hasta este punto Genial. Ahora volvamos a la master comp y llevemos la primera escena a la línea de tiempo. En esta etapa, necesitamos agregar animación adicional a esta precomp coincida con lo que está sucediendo en la escena Prefiero hacerlo de esta manera porque no quiero convertir las capas dentro de la precomp a tres D y animarlas con una cámara Podemos hacer eso, y lo haremos, en algunas escenas, pero en muchos casos, podemos crear un gran movimiento en el diseño sin ir tres D. Eso es porque tres escenas D se renderizan mucho más lento que dos D unas, y evitarlas cuando sea posible acelerará nuestro flujo de trabajo. Bien. Con eso en mente, sigamos trabajando. Primero, necesitamos alinear esta pre comp a la izquierda para que podamos comenzar con el inicio del texto dentro. Cuando necesitamos crear un movimiento de paneo lateral, por supuesto, usamos la propiedad position para animarlo. Normalmente comparo el inicio de la animación de posición con el comienzo de la animación de escenas, luego me muevo al punto en que termina la animación de escena y deslice la compilación hacia el otro lado. En este caso, necesitamos alinearlo a la derecha. Eso nos da un sólido punto de partida. Después de eso, podemos facilitar fácilmente los fotogramas clave y previsualizarlos. Por ahora, la animación no coincide perfectamente con lo que sucede en la escena. Para solucionar esto, podemos trabajar en la velocidad de la animación de posición y ajustarla cuando se acelera. Nuestro principal objetivo aquí es llegar al punto donde aparece la palabra múltiplo. Eso sucede en este momento en el tiempo. Así que vamos a ajustar los manejadores del gráfico para que el movimiento se acelere en el momento adecuado, asegurándonos de que esa palabra salga a la vista exactamente cuando sea necesario. Por ahora, se ve bien. Pero noté que el signo de exclamación en la esfera empiezan demasiado tarde. Volvamos a la escena y cambiemos esta parte un poco antes. Estoy viendo la palabra fácil y tratando encontrar el momento en que casi termina su animación. Eso se siente como el momento perfecto para comenzar la parte final. Ahora volvamos a la master comp y veamos cómo se ve eso ahora. Eso se ve mejor ahora. Genial. A continuación, podemos hacer que esta animación sea más interesante agregando una animación a escala cuando aparezca la palabra múltiplo. Ocurre en algún lugar entre el primero y el segundo segundo. Así que vamos a crear el primer fotograma clave aquí, luego pasar al final de la animación pop out y agregar otro fotograma clave en ese momento Ahora, en medio de esta animación, ajustemos la escala. Al principio, intentemos escalar la pre comp a 80. Ahora, ajustemos la velocidad, para que comience rápido, se ralentice y luego vuelva a ganar velocidad hacia el final. Veamos cómo se ve eso. Es agradable, pero creo que se verá aún mejor si escalamos hacia arriba en lugar de bajar. Debido a esta escala, también tendremos que empujar la escena un poco hacia la izquierda en ese mismo momento Como habrás notado, esto crea un nuevo fotograma clave. Veamos cómo juega ahora. En este punto, quiero que la posición se desacelere ligeramente. Para ello, seleccionemos todos los fotogramas clave y presionemos F nine para aplicar Easy Ease por defecto Esto nos dará una breve pausa en movimiento en este punto exacto. Ahora, podemos abrir el editor de grafos y afinar la velocidad al inicio de la animación de posición para agregar un movimiento un poco más interesante. Una vez más, te estoy mostrando el proceso crudo de crear un buen movimiento. No pienses que los diseñadores pro motion crean una animación perfecta en su primer intento. No es verdad. Todos agregamos fotogramas clave , los ajustamos y experimentamos hasta que encontremos algo que se sienta bien Ese es el proceso de animación natural y saludable. Bien, todo se ve genial. Para terminar, creo que podemos terminar la animación de posición un poco antes, ya que ya cambiamos la parte final hacia adelante hace unos minutos. Llevemos el último fotograma clave al segundo cuarto y verifiquemos. Bien, eso se ve perfecto. Antes de pasar a animar la siguiente escena, vamos a colapsar esta pre comp para confirmar que no va a interferir con la animación que acabamos de hacer Nada cambia aquí porque solo estamos usando dos capas D simples sin ningún efecto o tres cámaras D. Pero más adelante en el curso, nos encontraremos con escenas en las que colapsar la pre comp sí marca la diferencia, y profundizaremos en eso en esas lecciones Y con eso, hemos terminado esta lección. Ya estamos listos para pasar a la siguiente donde empezaremos a trabajar en la siguiente escena. Va a ser súper divertido, así que te veré ahí. 12. Creación de la escena 2: animación de esfera que rebota: Regresa. En esta lección, crearemos la segunda escena. Entonces vayamos al tablero de video y veamos qué tiene que pasar exactamente y cuánto tiempo debería durar esta escena. Recuerda, no queremos crear una escena que sea demasiado corta o demasiado larga. Causará un problema a la larga porque tendremos que ajustar los fotogramas clave y el tiempo en caso de que no lo hayamos hecho bien ¿Bien? Entonces en esta escena, necesitamos presentar muchos mensajes y tareas. Y para que esta escena sea interesante, necesitamos crear alguna animación de esfera genial y hinchable Ahora, quiero que entiendas para saber cuál debería ser la duración de la escena. Para calcularlo, necesitamos ver en qué segundo comienza la escena. En nuestro caso, está en algún lugar alrededor segundo cuatro y 15 fotogramas. Ahora necesitamos ver dónde termina la escena en nuestro tablero de video. Es alrededor del segundo siete. Entonces eso significa que la duración de la escena que necesitamos animar debe durar aproximadamente 3 segundos. Todo lo que hice fue calcular cuántos segundos hay del segundo cuatro al segundo siete, son 3 segundos. Por lo que esta escena debería durar 3 segundos. Como tenemos una placa de video muy precisa que encaja perfectamente con la voz en off, ni siquiera necesitamos escuchar la voz en off y contar cuál debería ser la duración de la escena Con eso en mente, comencemos a crear la escena. Primero, necesitamos crear una nueva composición. Vamos a llamarlo escena dos. Asegúrate de ajustar las dimensiones, y después de eso, asegúrate de que sean 30 fotogramas por segundo, y que la duración sea de 2 minutos. Una vez que terminemos la animación, ajustaremos la duración, por supuesto. Genial. Entonces ahora primero necesitamos diseñar la escena y crear esas burbujas de mensaje y cajas de tareas. Por supuesto, podríamos preparar todo en Illustrator e importarlo con el resto de los diseños. Pero en mis cursos, siempre trato de enseñarte a diseñar escenas directamente en after effects. Para mí, es mucho más fácil diseñar escenas y efectos posteriores, y me ahorra mucho tiempo. Además, de esa manera, tengo mucha más flexibilidad, y puedo hacer cualquier personalización y ajustes en tiempo real sin meterme con archivos externos Dicho esto, comencemos a diseñar la primera burbuja de mensajes, y déjame mostrarte cómo hacerlo muy rápido. Primero, necesitamos tener algún texto como mensaje. En caso de que no sepas qué escribir o el cliente no te dijo, puedes ir a GPT y pedirle que escriba algunos mensajes. Eso es exactamente lo que hice. Le expliqué en qué estoy trabajando y le pedí que me generara los mensajes. Guardé este texto como un archivo PDF que puedes encontrar en mi carpeta de activos. Se llama Mensajes Aleatorios. Bien, entonces abramos el PDF y copiemos este mensaje. Volver a After Effects, vamos a pegarlo. Ahora, ajustemos el textil y el tamaño. Asegúrese de que el párrafo esté centrado y finalmente alinee esta capa con el centro de la comp. Genial. Y ahora vamos a crear la burbuja del mensaje para hacerlo de alguna manera así el tamaño de la burbuja del mensaje se ajustará automáticamente a nuestro texto. Busquemos los dos efectos de cuadro de texto D. Ahora, para usarlo, necesitamos hacer doble clic sobre él. Pero si se selecciona la capa, no funcionará. Así que asegúrate de que no haya ninguna capa seleccionada y solo entonces haz doble clic en el efecto. Bien. Y ahora tenemos que asegurarnos de que la caja esté usando nuestra capa de texto como fuente. Movamos el cuadro debajo de la capa de texto. Y ahora podemos cambiar el diseño de la caja. Para hacerlo rápidamente, puedes mantener presionada la tecla Alt u opción y dar click en el trazo varias veces hasta llegar a la opción sin trazo. Ahora hagamos que el relleno sea blanco. Cambiemos el color del texto a negro. Y ahora, como puede ver, podemos agregar más texto, y el cuadro de texto se ajustará en consecuencia. Todo bien. Y ahora diseñemos el cuadro de texto, así se verá como una burbuja de mensaje. Podemos establecer el relleno a 70. A continuación, podemos redondear las esquinas. Vamos a establecerlo en 120. Genial. Entonces ahora como sabemos que necesitaremos más de estas burbujas en la escena, será una buena idea precomponer estas capas Llamemos a dos mensaje uno. número dos representa el número de la escena en la que aparece este mensaje. Genial. Entonces ahora, antes de seguir adelante y duplicar esta comp, ingresémosla y ajustemos las dimensiones No necesitamos que esta comp sea tan grande. Asegúrese de que la vista previa esté verificada y ajuste el ancho y la altura. Genial. Eso es perfecto. Ahora, pasemos al panel del proyecto y dupliquemos esta pre comp, para que podamos hacer cambios dentro del duplicado sin afectar al primero. Abramos el PDF y copiemos otro mensaje. Voy a ir con éste. En caso tu texto se moviera demasiado hacia la derecha, eso significa que tu párrafo de texto no estaba alineado con el centro. Todo bien. Entonces ahora volvamos a escena y traemos aquí el nuevo pre comp. Impresionante. Podemos dejarlo como está por ahora. Ahora comencemos a diseñar el cuadro de tareas que podemos ver en la placa de video. En mi caso, también agregaré un mensaje junto con el icono de casilla de verificación Y para hacerlo rápidamente, en realidad podemos duplicar el último cuadro de mensaje que creamos y ajustar el diseño en su interior. Cambiemos el nombre a la tarea uno. Genial. Ahora entremos en la pre comp y ajustemos el texto y el diseño. Para las tareas, también utilizo GPT para generar algunas tareas aleatorias que pueden ser relevantes para mi proyecto Así que ahora, ve a mi carpeta Activos y abre un archivo PDF llamado Tareas Aleatorias. Vamos a copiar esta. De vuelta en After Effects, reemplacemos el texto actual con el texto de la tarea. Genial. Y ahora vamos a ajustar el diseño del cuadro de texto. Podemos bajar la redondez a, digamos, 35. Y también podemos agregar un trazo gris a este diseño, por lo que será diferente a la burbuja del mensaje. Y ahora necesitamos abrir el menú de relleno y asegurarnos de que tenemos algo de espacio en el lado izquierdo para agregar el ícono de checkbox Tenemos que hacer que el espacio aquí sea más grande. Vamos a escalar un poco el ancho de esta comp. Genial. Entonces ahora pongamos el relleno dejado a 70. Se ve genial. A continuación, usemos uno de los iconos de checkbox que tenemos en nuestros diseños de pantalla. Creo que estaba en la pantalla de tareas. Entonces entrémoslo y copiemos la casilla de verificación verde y el trazo gris de la casilla de verificación, porque podríamos agregar una animación de casilla de verificación una vez que el cursor aterrice en este mensaje cuando creamos la animación de rebote Empecemos con la capa de trazo gris, cópiala y luego vamos a nuestra tarea precomp y pegarla aquí Alinarlo al centro de la comp verticalmente y colocarlo en el lado izquierdo de la caja. Ajustemos la escala para que se ajuste al diseño. 350 se ve bien. Vamos a colapsar esta capa para obtenerla en una alta calidad. Lo voy a mover un poco a la izquierda. Bien. Se ve bien. Ahora, vamos a traer el icono de casilla de verificación verde. Todo bien. Eso se ve perfecto. Ahora vamos a crear otra tarea precomp. Para ello, vamos a duplicar esta pre comp en el panel del proyecto. Ahora, ingresa la nueva precomp y cambia la tarea. Vamos a copiar esta. Genial. A continuación, ajustemos la posición de los iconos. Entonces ahora, para que se vea diferente de los diseños de mensajes, hagamos el texto aquí en negrita. Hagamos lo mismo para la primera tarea. Podemos ajustar un poco la posición de los iconos. Bien, a continuación, creo que será mejor si coloreamos el trazo en negro. Sí, eso se ve mejor. Hagamos lo mismo para la primera tarea, también. Bien. Con eso hecho, podemos cerrar todos estos precomps y volver a la comp de escena Traamos aquí los dos precomps de tareas y encontremos una bonita escala y un lugar para todos los elementos que tenemos Primero podemos bajar un poco los precomps. Por ahora pongamos la báscula a 60. Ya podemos colapsar estos precomps. Y ahora encontremos una posición agradable para los mensajes y las tareas que tenemos aquí. En este punto, solo estoy tratando de llegar a una composición visualmente equilibrada. Así que estoy usando la grilla de acción segura para asegurarme de que todo esté perfectamente equilibrado. Creo que podemos bajar aún más los precomps . Vamos a probar 50. Estoy tratando de colocar los elementos, así tendré suficiente espacio para agregar la animación de esfera hinchable que necesita al final, entrar entre los elementos Todo bien. Creo que estoy bien con la composición. Presionaré la tecla del apóstrofo para apagar la grilla. Y ahora llevemos la precomp del objeto cursor a la escena y comencemos a animarla. Bien. Entonces primero, ya podemos colapsar esta precomp Y si sientes que tu computadora está luchando, puedes bajar la calidad de la vista previa. Ocurre por los mensajes colapsados y las tareas precomps Es difícil para los efectos posteriores presentar precomps basados en expresiones complejas, como los cuadros de texto que tenemos dentro esos cuatro precom en caso de que no te hayas dado cuenta, el efecto de dos cuadros D que estamos usando para ajustarnos automáticamente al texto se configura con expresiones complejas en el configura con expresiones complejas en Esa es una de las razones por las que digo que a veces agregar demasiadas expresiones al proyecto realmente puede ralentizar tu flujo de trabajo. Bien, volvamos al proyecto. Comencemos la animación del cursor desde algún lugar por aquí. Ahora presione P y cree el primer fotograma clave de posición al comienzo de la línea de tiempo Ahora bien, no sé cuánto tiempo necesita ser toda esta animación. Entonces, como siempre, fijemos fotogramas clave cada 1 segundo. Posteriormente, lo ajustaremos. ¿Bien? Entonces ahora trae el cursor aquí abajo, así tocará la tarea precomp Para ver lo que estamos haciendo mejor, podemos colorear el color de fondo precomp predeterminado a algún color gris Bien, ahora vamos a mover 1 segundo y traer el cursor aquí. A continuación, vaya 1 segundo hacia adelante y colóquelo para tocar el primer mensaje precomp Ahora, mantengamos este proceso hasta que tengamos el cursor fuera de escena. Genial. Lo siguiente que me encanta hacer al crear animaciones hinchables es curvar la trayectoria de posición en los puntos donde el objeto necesita flotar en el aire Entonces, usando la herramienta convertir vértice, haga clic una vez en cada punto que tengamos en este camino Genial. Ahora volvamos a la herramienta de selección y ajustemos los mangos de los puntos para obtener una curva mucho mejor. También podemos activar una curva aquí y ajustar el mango para obtener un camino recto. Genial, veamos qué tenemos. Se ve raro por ahora, pero está bien. Veamos qué tenemos que hacer para que se mueva mejor. Primero, facilitemos fácilmente todos los fotogramas clave y veamos cómo se ve eso Como puede ver, ahora tenemos algunas pausas entre los fotogramas clave Eso es mejor, pero aún nos queda algo de trabajo por hacer para realmente hacer ese movimiento hinchable Para eso, tenemos que ir al gráfico de velocidad y primero, asegurarnos de que los puntos donde el cursor toca los precomps sucedan muy Eso significa que tenemos que mover esta manija hacia la derecha. Veamos cómo se ve eso. Se ve mejor, pero ahora también queremos que el cursor se recupere súper rápido. Eso significa que también necesitamos iniciar la animación entrante del segundo fotograma clave súper rápido Y ahora, como pueden ver, obtenemos ese movimiento hinchable. Pero como puede notar, todavía tenemos algunas pausas extrañas cuando el cursor se cierne en el aire No te preocupes por eso. Nos ocuparemos de ello en un segundo. Por ahora, sigamos haciendo que todos los puntos de contacto sean hinchables ajustando las asas. Bien, eso se ve bien. Ahora, tratemos con los momentos de pausa. Primero, hay que entender que está sucediendo porque en este punto en el tiempo, la velocidad es cero, como puede ver en la pequeña caja amarilla. En este punto, la velocidad del movimiento es 81. Aquí está el 223. Aquí son más de mil. Entiendes la idea. Entonces ahora lo que tenemos que hacer es asegurarnos de que la moción en este punto, no sea cero. Para hacer eso, podemos subir el movimiento saliente y tendremos que hacer coincidir el movimiento entrante exactamente a la misma velocidad. Pero hay una manera de controlarlos a ambos a la vez. Para esto, primero necesitamos seleccionarlos ambos y luego presionar Control Shift K o Command Shift K en Mac. De esta manera, abriremos el panel de velocidad del fotograma clave. También podemos abrir este panel fuera del editor de grafos. Para ello, seleccione el fotograma clave, mantenga pulsada la tecla Alt u Opción en Mac, y haga doble clic en él O puede hacer clic derecho y seleccionar Velocidad de fotograma clave. Bien. Entonces ahora volvamos al editor de grafos. Y una vez seleccionado el fotograma clave relevante, presione control shift K o Command Shift K en Mac Y ahora, todo lo que tenemos que hacer es marcar la opción continua. Esto conectará el movimiento entrante y saliente para este fotograma clave, lo que ahora nos permitirá controlar tanto el movimiento entrante como el saliente a la vez Sugiero ajustar la velocidad, no arrastrando el mango, sino moviéndolo directamente haciendo clic en el punto así Así que ahora puedes comprobar tu animación y ajustar la velocidad en consecuencia. Eso se ve mejor. Ahora, hagamos lo mismo para la segunda parte donde el cursor está flotando en el aire Todo bien. Creo que se ve genial. Entonces ahora salgamos del editor de grafos y aceleremos toda la animación. Hagamos que dure 3 segundos y 15 fotogramas. Para ello, selecciona todos los fotogramas clave, mantén presionada la tecla Alt u opción, y arrastra el último a la posición del indicador de tiempo . Veamos cómo se ve eso. Ahora sigamos adelante y hagamos que la escena se vea un poco más interesante agregando una micro animación al mensaje y precomps de tarea cuando el cursor rebota sobre ellos. Ignoremos el tiempo por ahora y primero creamos la micro animación. Para ello, usaremos las propiedades de posición y rotación. Primero, comencemos con la posición. Hagamos que esta animación dure diez fotogramas. En el medio, baje un poco la precomp. Veamos cómo se ve eso. Bien, ahora agreguemos una ligera animación de rotación. Facilitemos fácilmente los fotogramas clave y verifiquemos el movimiento. Se ve genial. Ahora, encontremos el momento perfecto para que este micro movimiento comience. Debería ser correcto cuando el cursor aterrice en este pre com. Eso se ve genial. Ahora hagamos lo mismo para la precom de tareas Esta vez, lo rotaremos en sentido contrario. Ahora, vamos a cronometrar esta animación con el cursor. Genial. Y ahora antes de seguir adelante, etiquetemos el cursor en amarillo. Y hagamos lo mismo en la primera escena, también. Bien. Entonces con eso, hemos terminado la animación principal que tiene que suceder en esta escena. Por ahora, no voy a seguir metiendo con esta comp en términos de diseño o trayendo elementos adicionales a la escena Como ya expliqué antes, trataremos los toques finales más adelante. Por ahora, hay cosas más importantes que hacer, por ejemplo, verificar si se ajusta al tiempo de locución. Entonces, para comprobar esto, primero acortemos la duración de esta escena Podemos terminarlo en el segundo cuarto. Ahora volvamos a la master comp y trabajemos en la transición de la primera escena a la segunda escena que acabamos de terminar de animar Mi objetivo aquí es lograr una buena transición de match cut. Para ello, primero necesitamos encontrar el punto en el tiempo donde el cursor en la primera escena está a punto de salir la pantalla y luego iniciar inmediatamente la segunda escena. Aquí está el punto en el tiempo donde podemos terminar la primera escena. Ahora, vamos a traer la segunda escena para comenzar desde aquí y finalmente recortar la primera escena para que termine exactamente en este momento. Ahora, vamos a revisar esta parte algunas veces para ver si se siente bien. Tenemos que asegurarnos de que ambas composiciones no se superpongan una encima de la otra Creo que se ve genial, pero tengo un problema con el cursor en la segunda escena flotando demasiado despacio en el aire después del primer rebote Así que entremos en escena y ajustemos la velocidad de movimiento en este momento. Genial. Eso se ve mucho mejor ahora. Y con eso, hemos terminado la lección, y estamos listos para pasar a la siguiente donde comenzaremos a crear la siguiente escena y mucho más. Va a ser una divertida. Entonces nos vemos ahí. Y antes de comenzar a ver la siguiente lección, no olvides tomarte un descanso de diez minutos para refrescarte antes de continuar. Nos vemos en la siguiente. 13. Construcción de la escena 3: animación de la barra de búsqueda: Regresa. Comencemos esta lección trabajando en la siguiente escena. Lo primero que debemos hacer antes de hacer eso es ir al tablero de video y verificar qué necesitamos crear en la escena y cómo debe diseñarse y animarse. Además, nosotros, por supuesto, necesitamos comprobar cuál debería ser la duración de la escena. Como puede ver, debería comenzar desde algún lugar alrededor del séptimo segundo, y debería terminar en algún lugar alrededor del segundo 11. Esto significa que la duración de la escena debe ser inferior a 4 segundos en total. Con eso en mente, vamos a crear una nueva composición para esta escena. Podemos llamar a esta escena tres y asegurarnos de que todos los ajustes sean correctos. Para el fondo, podemos cambiarlo de nuevo a negro. Todo bien. Y ahora el primer y principal objeto que necesita estar en la escena es la barra de búsqueda. Si recuerdas, cuando preparamos el panel de IU del dashboard, nos aseguramos de dejar este objeto como una capa separada, así que ahora podemos abrir la pre comp del dashboard y copiar las capas relevantes desde aquí. Para hacerlo un poco más rápido, solo seleccionemos toda el área aquí con los objetos de la barra de búsqueda, luego mantengamos presionada la tecla Mayús y hagamos clic en las capas irrelevantes para desseleccionarlas Asegurémonos de haber seleccionado las capas relevantes. Ahora vamos a copiar las capas seleccionadas. Entonces ve a nuestra nueva composición y pegarlas aquí. Genial. Entonces ahora veamos qué tenemos aquí. Como puede ver, después de pegar las capas, no se organizan en el orden correcto en el panel de capas Por si no lo sabes, en los efectos posteriores, la selección juega un papel importante en esta parte. La primera capa que selecciones aparecerá en la parte superior del panel Capas. Así es como seleccionamos las capas de la precomp del dashboard, y por eso vemos este resultado aquí ahora mismo Para arreglar esto rápidamente, podemos seleccionar la capa inferior porque esta es la capa que queremos estar por encima. A continuación, mantenga pulsada la tecla Mayús y seleccione la capa superior. Ahora presiona Control o Comando X para cortarlos y luego presiona Control V para pegarlos de nuevo aquí. Es un truco rápido para reorganizar tus capas rápidamente sin hacerlo manualmente una por una. Todo bien. Y ahora comencemos a ajustar la escena. Primero, podemos deshacernos de este icono porque aquí no lo necesitamos. A continuación, asegurémonos de que nuestros objetos estén perfectamente alineados en el centro de la comp. Para ello, podemos abrir la cuadrícula de acción segura y luego seleccionar todas las capas y alinearlas perfectamente en el centro. Se ve genial. A continuación, también podemos eliminar la capa de búsqueda porque crearemos un botón en el área derecha con un texto de búsqueda dentro en unos minutos. Sigamos comprobando si aquí nos perdimos algo porque veo que tenemos tres capas en el panel de capas, pero solo veo dos objetos en la escena. En este punto, podemos encender y apagar capas para entender lo que está sucediendo. Como puedes ver, tengo una capa de trazo que forma parte del cuadro de búsqueda. En nuestro caso, realmente no lo necesito, así que podemos eliminarlo ahora mismo. Todo bien. Y ahora, antes de comenzar a animar la escena, escalemos los objetos que tenemos aquí muy rápido Para ello, será una buena idea padre el icono de búsqueda a la caja principal, entonces podremos alinearlo al centro de la comp para asegurarnos de que esté perfectamente centrado. Ahora podemos escalar la capa de caja, y el icono escalará junto con ella. Se ve bien. Entonces ahora ya podemos colapsar las capas para tenerlas en la mejor calidad y seguir diseñando esta escena. Ya que sabemos que vamos a añadir aquí una frase que diga, necesito ayuda. Seleccionemos la herramienta de texto y la escribamos aquí porque pronto la animaremos. Voy a cambiar el color del texto a blanco, que pueda ver lo que estoy haciendo y pongamos el peso a regular. Bien. Eso se ve bien. Ahora, volvamos a poner el texto negro y colocarlo dentro del cuadro de búsqueda. Podemos escalar un poco el tamaño de la fuente. 35 se ve bien. Genial. Entonces ahora estamos listos para comenzar a animar la escena Lo primero que podemos animar es la animación de mecanografía para el Y para hacerlo, usaremos un efecto incorporado que podemos encontrar en el panel de efectos y presets Puede escribir máquina de escribir en el cuadro de búsqueda y luego usar el efecto de consola de máquina de escribir del cursor parpadeante Para usarlo, asegúrese de que la capa de texto esté seleccionada, y luego haga doble clic en el efecto para aplicarla a la capa de texto seleccionada. Bien. Entonces ahora, como pueden ver, el texto empieza a animarse desde su centro, que no es lo que queríamos Necesitamos el texto para iniciar la animación de la máquina de escribir desde la izquierda, y está sucediendo porque el párrafo del texto estaba alineado al centro. En este caso, ajustemos el párrafo a la izquierda y ajustemos la posición de la capa. Y ahora la animación se verá como debería. Ahora vamos a presionar sobre la capa. Y como puedes ver aquí, vemos los dos fotogramas clave que crean la animación de tipo El fotograma clave está comenzando desde este punto en el tiempo porque cuando aplicamos este efecto, estábamos parados en este punto en el tiempo Entonces, por si antes de aplicar el efecto, no estabas al comienzo de la animación, mueve los fotogramas clave para comenzar desde el inicio de la línea de tiempo Bien. Entonces ahora hagamos que esta animación dure 1 segundo. Como puedes ver, tenemos esta bonita animación de mecanografía y un pequeño cursor parpadeante a su lado que sigue parpadeando sin cesar Puedes jugar con las diferentes propiedades de este efecto, si quieres. Pero en mi caso, lo dejaré como está, y seguiré adelante. Bien. Entonces ahora no quiero que el texto apenas empiece a aparecer en la animación. Quiero crear un aspecto un poco más realista al cuadro de búsqueda. Y para ello, quiero tener el texto de búsqueda que borramos antes. Déjame mostrarte a lo que me refiero. Volvamos al tablero, pre comp, y copiemos la capa de búsqueda desde allí, y luego pegarla en nuestra escena. Coloca esta capa en la posición correcta y ajusta la escala de la misma a 150 porque este es el valor de escala que establecemos para las otras capas en esta escena. Ahora coloquemos esta capa debajo la capa de texto y la apadreemos al cuadro de búsqueda blanco. Acerquemos un poco para que podamos ver lo que estamos haciendo y coloquemos un poco el texto ahí a la izquierda. Ahora comencemos la capa de texto 1 segundo después del inicio de la línea de tiempo. Genial. Y ahora recortemos la capa de búsqueda para terminar en la segunda. Asegurémonos de recortar este marco, también. Y ahora, si tenemos una vista previa de lo que tenemos, se verá más como un cuadro de búsqueda realista que todos sabemos que existe en Internet. En este punto, puedes, por supuesto, cambiar el texto o ajustarlo si quieres. No afectará a la animación de mecanografía. Bien. Y ahora sigamos adelante y creamos el botón de búsqueda que necesita estar en el lado derecho del cuadro de búsqueda. Y hay una manera muy fácil y rápida de hacer. Permítanme cerrar todas las capas la carpeta en el panel del proyecto antes de seguir adelante. Bien, entonces ahora para crear el botón, podemos duplicar el mensaje que creamos anteriormente. Cambiemos ahora el nombre a tres botones uno. El número tres representa la escena donde debería aparecer este botón. Ahora, ingresemos a esta precomp y primero cambiemos el texto para buscar Después de eso, pongamos el texto negrita y ajustemos el ancho de la composición. 450 se ve bien. Ahora encontremos el color correcto con el que se debe llenar la caja de botones. Para ello, vayamos a la precomp del dashboard y abramos la pestaña de caracteres Ahora usemos el cuentagotas para muestrear el color púrpura del botón en el área del encabezado A continuación, abramos la caja de color y copiemos la etiqueta de este color. Y ahora volvamos a nuestro botón pre comp, luego seleccionamos la capa de botones, abrimos el relleno para esta capa, y peguemos la etiqueta que copiamos. Por último, cambiemos el color del texto a blanco. Vamos a guardar el proyecto antes de seguir adelante. Todo bien. Y ahora quiero que creamos una animación de clic para este botón. Por supuesto, podemos crear una animación a escala simple para esto afuera en la escena principal, pero quiero enseñarte cómo con una técnica muy simple, puedes crear una animación de clic mucho más interesante que se usa en muchos videos explicativos SAS Lo primero que quiero señalar antes comenzar la animación de clic es que entiendas que ya que estamos usando los dos efectos de cuadro de texto D, no podemos escalar la capa de botones porque está conectada a través de expresiones a la capa de texto que tenemos en esta comp Por lo tanto, crearemos la animación de escalado para la capa de texto, y el cuadro de botones detrás ella se animará en consecuencia. Si preguntas por qué no estamos creando una forma regular para el botón en lugar de usar el efecto de cuadro de texto dos D, es porque sabemos que más adelante en el proyecto, tendremos otro botón con texto diferente. Por ejemplo, tendremos un botón con el anuncio de texto, y será mucho más fácil usar el efecto de dos cuadros D porque el cuadro se ajustará automáticamente al texto. Todo bien. Con eso en mente, comencemos a crear la animación de clic. Entonces primero, comencemos creando una animación a escala para el texto. Cree el primer fotograma clave con el valor actual al comienzo de la línea de tiempo Ahora vamos a pasar 15 fotogramas o tal vez 20 fotogramas hacia adelante y crear otro fotograma clave con el valor actual Entonces en medio de esta animación, vamos a reducir la capa. Podemos fijarlo a 70. Ahora, vamos a facilitar fácilmente todos los fotogramas clave y Usando el editor de gráficos, mueva los manejadores hacia la izquierda Entonces vamos a tener un movimiento ágil. Creo que es demasiado lento. Salgamos del editor de grafos y hagamos que dure 15 fotogramas en lugar de 20 fotogramas. Así que selecciona todos los fotogramas clave y mientras mantienes presionada la opción Alter, arrastra el último fotograma clave al fotograma 15 Y ahora, hagamos que esta animación de clic sea mucho más interesante. Para esto, primero, seleccionemos la herramienta Elipse. Ahora apaguemos el trazo. Mantenga presionada la tecla Alt u opción y haga clic en el color del trazo para alternar entre las diferentes opciones hasta llegar a la opción del trazo desactivado. Para el color de relleno, escojamos el blanco esta vez. Ahora, crea una esfera simétrica. Vamos a establecer el tamaño en 350. Y finalmente, alinéelo al centro de la comp y cambie el nombre de esta capa para barrer. Pronto, entenderás para qué se utilizará esta capa. Y ahora comencemos a animar esta capa. Primero, usaremos la propiedad de escala. Al comienzo de la animación, establece la escala a cero y crea el primer fotograma clave A continuación, mueve 15 fotogramas hacia adelante y establece la escala a un número mayor, algo así como 110. Ahora, vuelve al inicio de la línea de tiempo y presiona T para abrir la propiedad de opacidad Crea el primer fotograma clave con el valor de 100%. A continuación, vaya al fotograma 15 y establezca el valor en cero. Como puedes ver, ya estamos obteniendo un look interesante. Todo bien. Sigamos adelante. Ahora, vamos a facilitar fácilmente los fotogramas clave y agregarle el movimiento ágil, como hicimos para la animación a escala del texto, y veamos cómo se verá eso Creo que la opacidad desaparece demasiado rápido. Podemos ralentizar un poco esta animación seleccionando los fotogramas clave de la opacidad y presionando F nueve para restablecer la flexibilización de esta Creo que podemos ralentizarlo aún más arrastrando los dos últimos fotogramas clave al fotograma 20 Todo bien. Y ahora vamos a abrir la función track mat y hacer esta capa, usa el canal Alpha de la capa botón. Eso significa que la esfera solo será visible dentro de la forma del botón. Volvamos a encender la capa de forma porque sí necesitamos ver el botón. Todo bien. Y ahora, como puedes ver, junto con la animación de escalado del texto, tenemos una animación click muy interesante. Creo que el barrido es demasiado brillante al principio. Para solucionar esto, abramos fotogramas clave en la capa y cambiemos el valor del primer fotograma clave de opacidad para digamos, 80% en lugar Eso se ve mucho mejor. Bien. Y ahora podemos guardar el proyecto y pasar a agregar este botón a nuestra escena. Vamos a escalar esta pre comp hacia abajo. Podemos establecer la escala a 40, colapsar la precomp y colocarla aquí en el lado derecho. Todo bien. Entonces, una vez hecho eso, ahora necesitamos cronometrar la animación de clic con la animación sucediendo en la escena. Eso significa que el clic debe comenzar después de que termine la animación de escritura. Pero como comprenderán, no podemos simplemente mover esta precomp para comenzar desde aquí, porque de esa manera no la veremos en el inicio de la animación En su lugar, pongámonos en el segundo correcto, luego ingresemos al botón precomp, presionarlo para revelar todos los fotogramas clave y moverlos para comenzar desde este punto en De vuelta a la escena principal, ahora tenemos la animación click comenzando justo a tiempo. Podemos ajustar esto más adelante en caso de que cambiemos algo en la escena. Pero por ahora, dejémoslo como está. También podemos reducir el tamaño de la fuente a 30. Creo que se ve un poco mejor. Todo bien. Entonces ahora guardemos el proyecto y volvamos a la placa de video para ver si necesitamos agregar algo más en esta escena. Como puedes ver, necesitamos crear la animación del cursor que caiga en algún tipo de océano. Por ahora, el Océano Oscuro es solo un activo de diseño que no es esencial para el flujo de la escena. Lo que es más importante es crear la animación del cursor porque necesita sincronizarse con la animación principal que ocurre en esta escena, que es toda la animación de cuadro de búsqueda que creamos anteriormente. Esta es la forma de pensar que quiero que tengas mientras trabajas en proyectos complejos. Como ya mencioné un par de veces en este curso, quiero que siempre termines animar primero los elementos importantes, en lugar de tratar con activos de diseño que no juegan un papel importante en el timing de la animación principal Bien. Entonces con eso dicho, volvamos a nuestra escena y agreguemos el objeto cursor pre comp a ella. Ya podemos colapsar esta pre comp, y comencemos a crear la animación que necesita hacer. Necesitamos crear algún tipo de animación del cursor cayendo, yendo por debajo de la barra de búsqueda, y terminando haciendo clic en el botón. Podemos hacerlo desde el lado derecho o desde el lado izquierdo. Prefiero hacerlo desde el lado izquierdo. Entonces comencemos la animación del cursor desde algún lugar por aquí. Al comienzo de la animación, cree el fotograma clave de primera posición Ahora movamos 1 segundo, alejemos un poco y bajemos el cursor aquí del lado izquierdo. Nuevamente, avancemos otro segundo y llevemos la esfera a algún lugar por aquí debajo del cuadro de búsqueda. Podemos traer este punto hasta aquí más adelante. Curvamos a curvar este camino. Por ahora, podemos colocar el cursor en este momento en algún lugar por aquí. Entonces movamos otro segundo hacia adelante y llevemos el cursor a algún lugar alrededor del botón, o podemos colocarlo en el botón. En este punto, realmente no sé cómo va a quedar mi animación exactamente, y eso está perfectamente bien. Pero lo que sí sé es que ahora voy a curvar el camino de la posición. Y por lo tanto, estoy tratando de crear el camino de una manera que después de la curva, obtendré un bonito movimiento para el cursor Si no tienes suficiente experiencia en después de los efectos, esto probablemente te parecerá muy raro. Pero a medida que adquieras experiencia trabajando con trazados, ya sean trazados de posición o trazados creados usando la herramienta Pluma, entenderás cómo estructurarlos para que con la ayuda de los manejadores, obtengas el camino que se ajuste a tu escena. Entonces comencemos a curvar el camino. Para ello, podemos usar la herramienta convertir vértice, o podemos usar el atajo Mantenga el control y alt y haga clic en el punto una vez. Ahora obtenemos los manejadores de curva que podemos ajustar alguna manera para que el cursor se mueva hacia abajo, repita este proceso para el resto de los puntos de esta trayectoria de posición hasta que obtengamos un bonito camino curvilíneo Bien, entonces ahora cuando tengamos la animación del cursor, veo que le tomará al cursor 3 segundos llegar al botón. Eso quiere decir que toda la animación sucede antes de que esté sucediendo demasiado rápido, así que vamos a ajustarla. Primero, podemos hacer que la animación de mecanografía dure un poco más de tiempo desde el segundo uno hasta el segundo tres. A continuación, ingresemos al botón pre comp y movamos todos los fotogramas clave para comenzar en este punto en el tiempo Todo bien. Creo que es bueno por ahora. Así que sigamos trabajando. Primero, podemos etiquetar el cursor pre comp en amarillo como hicimos para los tres comps anteriores De esa manera, podemos distinguirlo fácilmente del resto de las capas. Y ahora, a partir de este momento, vamos a crear una animación de clic para el cursor. En esta situación, podemos simplemente crear una animación a escala, haciendo que la escala del cursor sea cero. Hagamos que esta animación dure diez fotogramas y veamos cómo se ve eso. Bien, creo que se ve bien por ahora, pero creo que podemos facilitar fácilmente la animación de mecanografía para que no comience de manera lineal. Vamos a facilitar fácilmente estos fotogramas clave. Y ahora la animación obtendrá un inicio y un acabado agradable y fácil. Bonito. Eso se ve mejor. Podemos colocar el botón prec debajo la capa de texto para tener una línea de tiempo más organizada Y ahora presionemos P sobre el objeto cursor y comencemos a ajustar la animación de posición que creamos. Mientras estamos haciendo eso, debes entender que, ajustando la animación de posición podríamos necesitar ajustar el resto de la animación en la escena. Seleccionemos todos los fotogramas clave y primero Easy Ease todos ellos. Ahora, hagamos que esta esfera entre en escena rápidamente. De esta manera, obtendremos un agradable movimiento continuo de la escena anterior en una agradable transición de match cut. En este punto, estoy bien con que el cursor detenga porque traerá el foco al texto. Y ahora, en este punto, solo estoy revisando la animación y tratando pensar si el tiempo es bueno, en mi opinión, el texto debería terminar la animación tipo un poco más rápido. En este punto, siempre estoy viendo la animación algunas veces hasta que consigo algo que se siente bien. Entonces, en este punto, podemos mover algunos fotogramas clave y hacer que el tiempo sea un poco mejor. Una cosa importante para recordar es que cuando ajustas algunos fotogramas clave, siempre debes asegurarte ajustar también el resto de los fotogramas clave que se relacionan con esta animación de acuerdo con el nuevo tiempo En nuestro caso, necesito mover la animación de escala para comenzar desde aquí, y luego necesito ingresar la animación del botón y asegurarme de que la animación de clic también se ajuste al tiempo exterior. Bien, creo que ahora se ve un poco mejor. Y antes de seguir adelante, ajustaría el mango de este fotograma clave para que el cursor comenzara a moverse lentamente y luego ganara velocidad hacia el final Genial. Entonces, una vez que hayamos terminado con la animación principal que tiene que suceder en esta escena, podemos pasar para comenzar a trabajar en la transición a la siguiente. En este caso, quiero crear una animación de escalado para el cuadro de búsqueda. Entonces después del clic, cubrirá todo el marco. Esto, podemos convertir la capa de caja de búsqueda blanca en una capa de forma. Haga clic derecho, vaya a crear y seleccione Crear formas a partir de la capa vectorial. Esto nos permitirá cambiar la forma de este objeto de diseño como si lo creáramos usando la herramienta Forma o Pluma. Y como la capa original fue creada dentro de Illustrator, podríamos tener algunas propiedades dentro la capa de forma recién creada que no necesitamos. Entonces, en este punto, siéntase libre investigar cómo se construye esta capa y eliminar las propiedades innecesarias como grupos o rutas de fusión. Con eso hecho, comencemos a trabajar en la animación outtro de la escena para que podamos tener una agradable transición a la siguiente Primero, necesitamos encontrar el punto en el tiempo en que queremos iniciar la animación Otro. En nuestro caso, podemos iniciarlo desde el segundo cuatro, unos fotogramas después de que ocurra la animación de clic. Y como ahora estamos animando la capa shape, vamos a abrir las propiedades de la capa y crear el primer fotograma clave para la ruta de esta A continuación, movamos 1 segundo hacia adelante y luego hagamos doble clic en la forma para seleccionar todos los puntos. Escale esta forma mientras mantiene presionada la tecla Mayús y controle o comanda en Mac para escalarla proporcionalmente Vamos a escalarlo hasta que todo el marco esté cubierto con la forma blanca. Todo bien. Entonces, por ahora, la animación no se ve muy emocionante, así que vamos a mejorarla. Primero, facilitemos fácilmente los marcos clave. Ahora, hagamos que esta animación comience lentamente ajustando el mango en el editor de gráficos a la derecha. Creo que ahora se ve mucho mejor. Con eso hecho? Vamos a guardar el proyecto antes de seguir adelante. Bien. Así que ahora volvamos a nuestro master comp e insertemos la nueva escena en la línea de tiempo. Como se nota, no terminamos completamente la animación atro de la tercera escena. Y eso es porque, como ya dije, es muy importante verificar primero que la voz en off y la animación creamos estén Antes de crear demasiadas escenas y animar demasiadas capas, asegurémonos de llevar la voz en off a la línea de tiempo de Comp maestra y ver toda la animación para verificar si encaja Es mejor atrapar errores y arreglarlos ahora antes de que tengamos demasiadas escenas que se verán afectadas por errores tempranos que podríamos haber cometido. Con eso en mente, veamos qué tenemos. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda. Conocí a One Point. La plataforma que hace gerente de proyecto puede notar que la tercera escena no está sincronizada con la voz en off Entonces, centrémonos en arreglar eso. Primero, tratemos de la transición entre la segunda y la tercera escena. Como puede ver, el cursor en la segunda escena ya está fuera de cuadro en este momento. Y como queremos crear una transición de corte de coincidencia a la tercera escena, es una buena idea cortar esta pre comp justo cuando el cursor se salga de fotograma. Asegúrate de acercar y eliminar el último fotograma también. Todo bien. Entonces ahora vamos a traer la tercera escena para comenzar desde este punto exacto en el tiempo y ver una vez más la animación. Escuchemos la voz en off cuando comience la tercera escena y tratemos de entender lo que necesitamos ajustar Antes de que te des cuenta, te estás ahogando en el caos buscando ayuda Cumplió con un punto. La plataforma que hace que el producto esté bien. Entonces lo primero que noto es que toda la animación tiene que pasar un poco más rápido porque como escuchamos, la siguiente escena ya necesita comenzar en este punto en el tiempo. Entonces entremos en la escena tres y primero, hagamos que la animación de mecanografía más rápida. Terminémoslo en el segundo segundo. A continuación, ajustemos toda la animación que ocurre con el cursor. Eso significa que también necesitamos ajustar la animación de clic dentro. Y no olvides ajustar la animación outtro de la escena Esos son los marcos clave de la caja de forma blanca. ¿Todo bien? Ahora, volvamos a la comp maestra y veamos esta parte una vez más. busca de ayuda. Cumplió con un punto. El plat Ling en busca de ayuda. Met Creo que todavía necesitamos hacer esta animación un poco más rápida y en la escena anterior. Entonces, ingresemos a la precomp y ajustemos los fotogramas clave una vez más. Te estoy mostrando este proceso porque quiero que te acostumbres primero a asegurarte de que las primeras escenas de tu proyecto estén sincronizadas con la voz en off, para que puedas practicar el cronometraje de la animación según ella Es muy importante hacer esto en las primeras etapas antes pasar a animar el resto de las escenas Creo que también podemos hacer que esta parte sea más suave haciendo que este fotograma clave sea continuo y acelerando el movimiento que ocurre en este momento La conclusión es que no quiero que la pausa ocurra aquí. Bien, creo que se ve mejor. Ahora volvamos a la master comp y veamos esta parte una vez más. Y antes de que te des cuenta, te estás ahogando en el caos, buscando ayuda Cumplió con un punto. Ahogarse en el caos, en busca de ayuda Cumplió con un punto. Cumplió con un punto. En busca de ayuda. Bien, creo que, en este momento, la animación de Otro ya necesita comenzar a suceder Entonces entremos en escena y esta vez, movamos solo los últimos fotogramas clave de esta animación a segundos dos y 15 fotogramas. Y, por supuesto, no te olvides la animación de click dentro del botón precomp, ¿verdad? Creo que eso va a funcionar muy bien. Y ahora podemos pasar a seguir trabajando en la animación Otro de esta escena. Primero, recortemos la precomp del objeto cursor justo cuando termine su animación A continuación, vamos a crear una animación de opacidad simple para el botón, que desaparezca justo después de la animación de clic Creo que se ve bien. Hagamos lo mismo con el icono de la lupa Podemos recortar ambas capas en este punto en el tiempo para que la línea de tiempo se mantenga limpia. Ahora, antes de seguir adelante, traeré la capa de búsqueda aquí en la parte superior para mantener mi línea de tiempo organizada. Bien, entonces ahora vamos a tratar con la capa de texto que tenemos aquí Comencemos su animación Otro a partir del segundo dos y 15 fotogramas también. Pero esta vez, para que sea un poco más interesante, vamos a convertir esta capa en una capa de tres D y crear una animación outtro donde el texto vuela hacia la cámara y fuera del marco Entonces, primero, cree un fotograma clave para la propiedad position en este momento A continuación, mover 1 segundo adelante en el tiempo. Puedes usar el menú de tiempo aquí si no quieres arrastrar el indicador de tiempo manualmente. Ahora, mueva el valor de la posición Z hasta que esta capa quede completamente fuera de marco. Creo que esta animación se ve muy bien, y quiero aplicar el mismo tipo de animación al botón y icono de la lupa, también Entonces, primero eliminemos los fotogramas clave de opacidad en estas capas, asegurándonos de comenzar eliminando del último fotograma clave para que el restante mantenga el valor al 100% Después retire el resto de los fotogramas clave, también. Todo bien. Ahora vamos a crear la misma animación outtro en la propiedad position para ambas capas Para mostrarte este proceso porque este es el flujo de trabajo realista de los proyectos de diseño de movimiento. A veces creamos animaciones que parecen estar bien al principio, pero después nos damos cuenta de que una animación diferente se ve mejor. Eso significa que a menudo comprenderá qué funciona mejor solo después de probarlo directamente en los efectos posteriores. Y te lo estoy diciendo porque quiero que te acostumbres a situaciones en las que no sabes exactamente qué hacer. En lugar de adivinar, empieza a probar diferentes animaciones. Pensarlo en tu cabeza no te dará la respuesta. En realidad probar diferentes enfoques lo hará. Todo bien. Entonces después de convertir estas capas a tres D y crear la animación de posición, se puede ver que la capa de botón parece que no se mueve. Esto sucede porque colapsamos esta precomp. Y como mencioné en lecciones anteriores, ahora es un buen momento para hablar un poco a fondo sobre la función de las transformaciones de colapso en los efectos posteriores. Cuando colapsamos una capa o una precomp, after effects nos muestra la información original de esa capa Por ejemplo, al colapsar una capa de Illustrator, after effects usa los datos vectoriales originales, por lo que vemos la capa en calidad vectorial completa sin perder resolución Al colapsar una precomp, after effects presenta la información original desde dentro de esa En nuestro caso, ya que las capas dentro de la precomp no son tres capas D, after effects todavía las ve como dos D. Por eso el botón no se comporta aquí como un objeto tres D. Si descolapsamos la precomp, entonces after effects ignora la información interna y trata la precomp como una sola capa de tres D Pero como sí queremos mantener la más alta calidad para este botón, mantendremos la precomp colapsada Para solucionar el problema, todo lo que tenemos que hacer es ingresar la precomp y convertir todas las capas dentro de ella a tres D también Ahora, incluso con la precomp colapsada, after effects utilizará la información de tres D desde adentro, y el problema está resuelto Bien, ahora, con eso arreglado, ajustemos la animación y el cronometraje del Outro Creo que esta animación puede comenzar en el segundo segundo segundo y 20 fotograma. Siempre es una buena idea agregar un poco de retraso entre las animaciones de diferentes capas. En este caso, el cuadro de búsqueda blanco puede comenzar primero, y luego unos cinco fotogramas después. El resto de las capas siguen. Genial. Ahora podemos recortar esta pre comp para terminar en el segundo cuarto y volver a la master comp para ver cómo funciona todo en conjunto. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda. Cumplió con un punto. Bien, creo que todo se ve genial. Con eso, hemos terminado esta lección y estamos listos para pasar a la siguiente. Va a ser una buena. Nos vemos ahí. 14. Construcción de la escena 4: animación de logotipo: Regresa. En esta lección, empezaremos a trabajar en la siguiente escena. Entonces, como es habitual, lo primero que tenemos que hacer es comprobar cuál debería ser la duración de esta escena. Como puedes ver, la escena debería comenzar desde el segundo 11, y termina en los segundos 17 y 15 fotogramas. Eso significa que la duración de esta escena no debe durar más de 7 segundos. Con eso en mente, creemos una nueva composición y empecemos a trabajar en ella. Podemos llamar a esta escena comps cuatro. Ajustemos las dimensiones. Bien. Y ahora podemos empezar a trabajar en la primera parte de esta escena, que es la animación de logotipos de la compañía. Para ello, abramos la carpeta precomps en el panel del proyecto y arrastremos la precomp del logo a Genial. Y ahora entremos a la precomp y pensemos en una manera de animar este logo La mayoría de las veces, en este tipo de proyectos, la animación del logo no necesita ser muy complicada. Por lo tanto, intenta ver el logo y piensa en la forma más sencilla de animarlo. En nuestro caso, creo que puede ser genial crear alguna animación de rotación para los iconos oscuros del logotipo que salen de la esfera verde detrás de él Y para el texto del logotipo, podemos animarlo de la manera muy común utilizada en este tipo de proyectos, que es crear una animación de trazo revelador Y ahora quiero recordarles algo de lo que hablamos en las lecciones anteriores. Quiero recordarte mi proceso de pensar cuando tengo una animación de logo para crear o cualquier otra tarea de animación que necesite animar Cuando estoy mirando mi pantalla, la divido en varias partes de animación. En este caso, estoy dividiendo la escena en tres partes principales. La animación de iconos triangulares, la animación de esfera verde y la animación de texto. Después de eso, decido en qué parte de la animación comenzar a trabajar primero. Y para ser honestos, esto no es muy importante. Lo más importante es que primero creo la animación para cada parte y solo entonces empiezo a cronometrar las tres partes juntas en mi línea de tiempo. Esta forma de pensar es especialmente buena cuando tenemos que crear una animación de demostración para paneles de interfaz de usuario de software SAS. Con eso en mente, sigamos trabajando, y esta idea poco a poco se volverá más clara para ti durante el proceso. Primero, podemos comenzar por la parte más simple, que es animar los triángulos Para mayor comodidad, podemos apagar todas las demás capas que tenemos aquí en la línea de tiempo, para que podamos enfocarnos solo en los iconos del triángulo. Y como siempre me encanta hacer, etiquetemos estas capas en algún otro color para distinguir esta parte de la animación del resto de las partes que tendremos aquí en un futuro próximo. Bien. Y ahora comencemos a animarlo. Para comenzar, podemos ir al segundo y crear el primer fotograma clave para la propiedad position para todas estas capas Y eso es porque sabemos que esta es la posición que todos necesitan estar al final de la animación. Ahora podemos ir al inicio de la línea de tiempo y crear fotogramas clave en este momento, luego acercar y ajustar la posición para que podamos que salgan del centro Genial. Con eso hecho, pongámonos en medio de la animación en el fotograma 15 y hagamos que los iconos se abran aún más antes de llegar a la posición final. Y porque quiero que todos se muevan la misma distancia, en lugar de moverlos manualmente, podemos usar el eje de posición X como calculadora y sumar al valor actual, digamos, 200 píxeles. Para el triángulo superior, en lugar de agregar 200 píxeles al eje X, necesitamos bajar el eje Y en 200 píxeles. Hagamos lo mismo para el resto de los iconos triangulares. Si no estás seguro, puedes jugar con los valores y entender si necesitas subir el valor en 200 o bajar el valor en 200 para obtener el aspecto que buscamos. Genial. Así que ahora tenemos el comienzo de la animación de rotación de popping que estamos tratando de crear A continuación, vamos a crear una animación de rotación. Para ello, vamos a crear una nueva capa nula. Colóquelo por encima de los triángulos y centre el punto de anclaje del nulo Luego colóquelo en el centro de los iconos del triángulo. A continuación, parémonos en el punto en el tiempo donde la animación ya terminó y los triángulos se colocan en su posición final, y luego padres todos los iconos al nulo, etiquetarlos todos en naranja, y cambiar el nombre a iconos nulos Ahora vayamos al inicio de la animación y hagamos que el nulo rote una rotación completa durante la animación popping. Impresionante. Y ahora usemos el null y agreguemos una animación secundaria de popping usando la propiedad scale Cree el primer fotograma clave aquí, otro fotograma clave en el segundo Y en medio de la animación, escalemos el nulo a, digamos, 120. Alejemos un poco para ver cómo se ve eso. Creo que es demasiado. Vamos a establecer la escala a 110. Genial. Con eso hecho, empecemos a trabajar en mejorar el movimiento. Primero, abramos todos los fotogramas clave que creamos para esta parte de animación y facilitémoslos todos fácilmente Eso vamos a ver cómo se ve eso. Creo que podemos mejorar la animación ajustando los fotogramas clave y creando un movimiento un poco más ágil Pero en lugar de hacerlo usando el editor de grafos, quiero recordarles que cuando tienes un montón de fotogramas clave para el mismo valor en un montón de capas, puedes seleccionarlos todos e ingresar al panel de velocidad de fotogramas clave para ajustar la velocidad usando el porcentaje de influencia para la animación entrante y saliente Vamos a establecerlo en 75% para ambos. En el editor de grafos, parecerá que arrastramos los mangos un poco hacia la izquierda y un poco hacia la derecha Creo que se ve genial. Ahora, pasemos a mejorar el resto de los fotogramas clave En mi opinión, podemos dejar la rotación como está por ahora. Centrémonos en los fotogramas clave de escala. Comencemos ajustando la velocidad al 75% como hicimos para la posición de los íconos y veamos cómo se ve eso. Eso se ve bien, pero quiero que los íconos se cierren un poco más cuando estén todos abiertos. Por lo tanto, restableceré los fotogramas clave de escala presionando F nueve o F y F nueve, si estás usando Mac, y ajustaré la velocidad usando el editor de gráficos, así la animación comienza rápido, se ralentiza por un período más largo en el medio, y luego acelera nuevamente hacia el final Creo que así se ve mucho mejor. Con eso hecho, creo que es una buena idea compensar ligeramente la animación del icono. Pero antes de eso, usemos un truco sencillo para hacer que la animación popping se vea un poco más interesante Para eso, vamos a acercar el último fotograma clave de escala del objeto nulo y moverlo cinco fotogramas hacia adelante. En cambio, en este punto en el tiempo, hagamos que la escala nula baje a, digamos, 85%. Como puedes ver, este sencillo truco le da un toque agradable al movimiento. Genial. Y ahora pasemos a animar la esfera verde Primero, podemos etiquetarlo en un color verde para separarlo visualmente de la parte de animación anterior. Ahora, vamos a crear una bonita animación de escala para ello. Bien, después de crear la animación de popping, ahora estoy tratando de cronometrar esta animación para comenzar un poco después de la animación del icono del triángulo Como dije, siempre es una buena idea compensar un poco las capas. En este punto, estoy tratando de colocarlo en diferentes momentos y ver cómo se siente la animación. También puedo cambiar la velocidad a 85 en lugar de 75 para obtener un movimiento aún más ágil Creo que así se ve mucho mejor. Todo bien. Entonces con eso hecho, pasemos a animar la siguiente parte de la animación del logotipo, que son las letras del logotipo Como dije antes, lo animaremos en un estilo común para este tipo de proyectos, que es una animación de revelación de trazos Practicamos esta técnica en el curso de animación de logotipos, donde creamos cinco tipos diferentes de animaciones de logotipos premium. Entonces, si quieres aprender otras formas animar logotipos en tus proyectos más grandes, te sugiero encarecidamente que veas ese curso. ¿Todo bien? Volviendo al proyecto, revelaremos estas letras usando un efecto de trazo y para usar el efecto de trazo, primero necesitamos crear una máscara en esta capa. La máscara debe seguir la forma de la letra. La forma en que comiences a crear el trazo afectará la animación reveladora en el futuro. Quiero que la revelación comience desde la parte superior y luego vaya al lado izquierdo. Por lo tanto, voy a empezar a crear mi máscara de esa manera. Así que asegúrate de que la capa esté seleccionada, y comencemos a crear el primer punto aquí. El siguiente punto estará aquí, y antes de soltar el clic, arrastremos el mouse hacia abajo para hacer que esta área sea curvilínea Puedes aguantar turno mientras haces eso. Sigamos haciendo eso hasta que lleguemos a la zona superior. En esta zona, no necesitamos arrastrar el ratón. Simplemente haga clic una vez. Lo más importante es asegurarse de no cerrar el camino. Si cierras el camino, será un poco más difícil crear la animación de revelación. Todo bien. Entonces con eso hecho, busquemos el efecto de trazo y lo agreguemos a la capa. Lo primero es lo primero, asegúrate de que todas las máscaras estén revisadas. A continuación, para el estilo de pintura, elija revelar imagen original. Después de eso, aumenta el tamaño del pincel hasta que veas toda la letra. Luego asegúrese de que la dureza del cepillo esté ajustada al 100%. Y ahora para animarlo, usaremos la propiedad final. Al inicio de la animación, vamos a crear el primer fotograma clave con un valor de 0% A continuación, vayamos 1 segundo adelante y fijemos el final al 100%. Podemos apagar el resto de las capas para que podamos enfocarnos en ella. Como puedes ver, el inicio de la revelacion se ve un poco raro porque una gran parte de la carta se está revelando justo al principio Para que se vea un poco más sutil, también podemos animar el tamaño del pincel Al inicio de la animación, establece el tamaño del pincel en cero, al final de la animación, establecerlo el número que elegimos antes, que es 20. Ahora conseguiremos una animación reveladora más agradable. A continuación, facilitemos fácilmente todos los fotogramas clave y usando el editor de gráficos, hagamos que la animación comience rápidamente y disminuya la velocidad hacia el final. Veamos cómo se ve eso. Creo que se ve bien, y la gran noticia es que no necesitamos repetir este proceso para todas las capas. Sólo podemos copiar el efecto y pegarlo en el resto de las letras. Pero sí necesitamos crear las máscaras para cada letra para que el efecto funcione correctamente. Así que sigamos creando la máscara para cada letra que tenemos en la escena para la letra N. Quiero que la animación de revelación comience desde el área superior. Entonces comenzaré a crear la máscara a partir de este punto y luego crearé el segundo punto aquí abajo. Ahora, en lugar de continuar la máscara por el resto de la carta, es mejor comenzar una nueva máscara para esta parte de la carta. Genial. Con eso hecho, pasemos a la siguiente letra. Esta vez, quiero que la animación de revelación comience desde la parte inferior, así que el primer punto que crearé para la máscara será aquí abajo. Entonces subiré y terminaré la máscara según la forma de la letra. Sigamos haciendo eso por el resto de las cartas. Para el punto de la letra I, podemos saltarlo por ahora porque vamos a crear una animación a escala para revelarlo junto con el resto de las letras. Todo bien. Y ahora para la segunda letra N que tenemos aquí, podemos copiar las dos máscaras que ya creamos para la primera y pegarlas en esta para ahorrar algo de tiempo. Muy bien, así que una vez que hayamos terminado crear las máscaras para todas las letras, volvamos a la primera letra y copiemos el efecto de trazo de ella. Entonces seleccionemos el resto de las letras. Asegúrate de que estamos al principio de la línea de tiempo y pega el efecto. Genial. Entonces ahora tenemos todas las letras animadas y podemos seguir adelante. Vamos a colapsar todas las capas de Illustrator que tenemos aquí. Y ahora hagamos que la revelación de las letras sea un poco más interesante porque ahora son demasiado estáticas. Podemos agregarles alguna animación de posición, ya que sabemos que la posición final para estas letras tiene que estar donde están. Ahora mismo, pasaremos al segundo y crearemos un fotograma clave para la posición con el valor actual Ahora, vayamos al inicio de la animación y llevemos todas las letras a la izquierda. Creo que ya es suficiente por ahora. Genial. Entonces, antes de seguir adelante, noté que me olvidé de crear una animación de revelación para el punto de la letra I. Así que hagámoslo muy rápido ahora mismo. Parémonos en el segundo. Luego abre la propiedad scale de esta capa. Ahora, vamos a crear un fotograma clave aquí con el valor actual, luego volvamos al comienzo de la animación y pongamos la escala a cero Para terminar, vamos a facilitar fácilmente los fotogramas clave y crear la misma velocidad que usamos para la animación de trazo revelador para el resto de las letras. Todo bien. Con eso hecho, vamos a traer de vuelta la propiedad position de esta capa para que podamos ver todas las propiedades de posición para todas las letras. Entonces, facilitemos fácilmente todos los fotogramas clave y ajustemos la velocidad para que se ajuste a la animación de revelación Veamos cómo se ve eso juntos. Creo que la moción es buena. Ahora vamos a mejorar la animación compensando las capas de letras Hagamos que la letra T sea la primera en la fila en entrar en escena. Lo haré usando la nueva función. Los bonitos. Dejémoslo como está por ahora y encontremos el momento adecuado para que comience esta parte de animación. Vamos a traer todas las capas de letras para enmarcar cinco y ver cómo se ve eso. Creo que se ve bien, pero en mi opinión, podemos mejorar aún más la animación de introducción para las letras agregando una animación de escalado a todas ellas. Para que sea más fácil, parémonos en el marco cinco. Y mientras se seleccionan todas las capas, presiona la tecla de corchete izquierdo para llevar todas las capas a este punto en el tiempo. Ahora, bloqueemos esta capa porque ya tenemos una animación a escala Todo bien. Entonces ahora vamos a seleccionar el resto de las capas, presionar S y crear el primer fotograma clave con un valor mayor para todas ellas. Tal vez 120. Vamos a probar 150. Eso es demasiado. Creo que 135 debería verse mejor. Todo bien. Ahora vamos a avanzar 1 segundo. Eso es segundo uno y cinco fotogramas y traer la escala de nuevo a 100. Ahora bien, la animación debería verse un poco más interesante. Entonces desbloqueemos la capa. Y luego selecciona todas las capas una vez más para crear un bonito delay El desplazamiento puede ser un poco más grande. En mi opinión, esto se ve bien, y con eso, hemos terminado de animar el logo, y estamos listos para seguir adelante Pero antes de eso, podemos eliminar la capa de fondo que tenemos aquí. Así que ahora volvamos a la escena cuatro comp e intentemos agregar un toque adicional a la animación del logotipo. Primero, vamos a colapsar esta pre comp y luego abrir la propiedad scale para crear una animación de escala adicional para mejorar el logotipo. Intro Acerquemos un poco la línea de tiempo y creemos el primer fotograma clave para la propiedad scale de la pre comp con un valor menor. Creo que 70 deberían funcionar. Después de eso, vamos a avanzar 1 segundo y crear un fotograma clave con el valor de 100 Y finalmente, pongámonos en medio de esta animación y pongamos la escala a un valor superior. Podemos fijarlo en 110. Ahora, vamos a facilitar fácilmente los fotogramas clave y establecer la velocidad en, digamos, 85% Veamos cómo se ve todo junto. Creo que se ve genial. Todo bien. Así que ahora volvamos al storyboard y veamos qué más necesitamos animar a Como puedes ver, finalmente estamos llegando a animar nuestro primer panel de interfaz de usuario en el proyecto Así que volvamos a la escena y busquemos la compilación de este panel de interfaz de usuario o pantalla de interfaz de usuario en nuestra carpeta Screens dentro de la carpeta PreComps En nuestro caso, necesitamos usar la pantalla del tablero. Vamos a arrastrarlo a la escena y comencemos a trabajar en esta parte de animación. Todo bien. Entonces, antes que nada, podemos apagar por ahora la precomp del logo, para que podamos enfocarnos solo en la pantalla Según nuestro storyboard, sabemos que esta pantalla necesita ser presentada en un ligero ángulo Y como probablemente puedas adivinar, podemos lograr este ángulo convirtiendo esta precomp en una capa de tres D. Ahora vamos a abrir la propiedad de rotación y ajustar el eje de rotación hasta obtener el ángulo que estamos buscando. Dado que es posible que queramos acercar diferentes áreas dentro de este panel de interfaz de usuario, es una buena idea colapsar esta precomp para mantenerla en la más alta calidad Pero como puede ver, una vez que hacemos eso, la precomp aparece en su ángulo original de dos D. Entonces aquí tienes una pregunta para ti. ¿Cómo podemos solucionar este problema? Para solucionar esto, necesitamos ingresar la precomp y convertir todas las capas dentro de ella en tres capas D. Primero, podemos seleccionar todas las capas, colapsarlas para mantener su calidad y luego convertirlas todas en tres capas D. Una vez hecho eso, podemos volver a la escena principal y ver que todo funciona perfectamente bien. Genial. Así que ahora entremos a la precomp del dashboard y sigamos preparando toda esta pantalla de UI para la animación Lo primero en lo que debemos enfocarnos ahora es en precomponer las capas que pertenecen a cada sección de esta pantalla de UI Para comenzar, podemos bloquear las capas que sabemos con certeza que no tocaremos. Empecemos por bloquear la capa principal de fondo gris. A continuación, bloqueemos el menú principal en el lado izquierdo. Genial. Ahora podemos comenzar a precomponer las capas de cada sección, comenzando por el área de encabezado Así que vamos a seleccionar todas las capas de esta área y precomponerlas. Ya que usamos la función precomponer, mientras seleccionamos uno de los precomps dentro de la carpeta Screens, el nuevo precomp se colocará automáticamente colocará Estoy señalando esto porque ayuda a mantener organizado el panel del proyecto. Posteriormente, cuando busquemos esta precomp y la veamos dentro de la carpeta Screens, sabrás por qué está ahí Bien, volvamos a la precomp. Ahora tenemos que darle un nombre. Para mantener las cosas organizadas, comencemos el nombre con S uno, representando la pantalla uno. Entonces agreguemos encabezado. Np siguiente, después de precomponer las capas relevantes, necesitamos colapsar la precomp y convertirla en una capa de tres D. Finalmente, necesitamos asegurarnos de que el punto de anclaje esté perfectamente centrado para esta precomp Para ello, podemos mantener presionados Control o Comando en Mac y hacer doble clic en la herramienta de punto de anclaje mientras se selecciona la precomp Y ahora antes de seguir adelante, podemos bloquear esta precomp Genial. Entonces ahora vamos a tratar con la siguiente sección, que son las tres casillas debajo de la cabecera. Digamos que queremos crear alguna animación para cada una de estas tres secciones. En ese caso, es una buena idea precomponer las capas que pertenecen a cada sección individualmente Para nombrar, una vez más, comenzaremos con S uno, y luego podremos agregar algo como panel uno Una vez hecho esto, colapsamos la precomp y la convertimos en una capa de tres D. Finalmente, necesitamos asegurarnos de que el punto de anclaje esté perfectamente centrado para esta precomp. Genial, genial. Sigamos haciendo esto para el resto de las secciones. Otro truco para facilitar el proceso de selección es apagar temporalmente los precomps recién creados Por supuesto, no tienes que seguir estos pasos en este orden exacto. Primero se pueden precomponer todas las capas relevantes y sólo después de eso ajustar los puntos de anclaje para cada una No necesariamente es necesario hacerlo inmediatamente después de precomponer Muy bien, entonces ahora que todas las capas han sido precompuestas, puedo convertir todas las precomps en tres capas D, colapsarlas, y luego ajustar el punto de anclaje para cada 11 después de la Una vez hecho esto, tendremos una configuración muy organizada para animar cada sección de esta pantalla de interfaz De esta manera, puede ingresar fácilmente cualquier precomp y animar los objetos dentro de ella por separado del resto de las capas Esta es la forma correcta de manejar paneles de interfaz de usuario complejos con muchas secciones diferentes y muchas capas pertenecientes a cada sección. En nuestro caso, no estoy seguro de que vamos a animar cada sección de esta pantalla Podría dejarle eso como tarea al final del curso. No quiero pasar demasiado tiempo animando secciones pequeñas Prefiero enfocarme conceptos más importantes que son relevantes para proyectos como este. Bien, así que antes de concluir esta lección, asegurémonos de que nuestro panel de proyectos esté limpio y organizado. Como puede ver, ya estamos creando muchos pre comps y activos nuevos, y tendremos aún más en las próximas lecciones Eso es totalmente normal. Esto sucede también en proyectos del mundo real. Por eso es tan importante mantener todo limpio y organizado para que puedas navegar fácilmente por tu proyecto. Como mencioné anteriormente, los precomps que creamos dentro la pantalla se colocaron automáticamente en la carpeta Screens, ya que se seleccionó uno de los precomps dentro de esa carpeta cuando precomponíamos Pero no quiero que la sección precomps esté dentro de la carpeta Pantallas Entonces seleccionaré la carpeta precomps y crearé una nueva carpeta dentro de ella llamada paneles, luego moveré todos los precomps de sección que creamos en este proyecto Ya, se ve mucho mejor. Los precomps que no son precomps de sección, podemos colocarlos directamente dentro También arrastremos ahí la precomp de la placa de video. Y para los master comp en los precomps de escena principal, los mantendremos afuera para que sean de fácil acceso Bien, ahora, todo está muy bien organizado. Salvemos el proyecto. Y con eso, terminamos esta lección. Guarda tu proyecto una vez más antes de pasar al siguiente, donde seguiremos trabajando en la escena. Va a ser increíble. Nos vemos ahí. 15. Escena continua 4: transición al logotipo y al tablero de control: Regresa. En esta lección, seguiremos trabajando en la escena cuatro. Cerremos todas las pre comps que no vamos a usar primero También podemos cerrar el tablero pre comp porque aquí no vamos a animar nada. Todo bien. Y ahora podemos volver a la animación del logo y empezar a trabajar en la intro de esta escena Primero, volveré al tablero de video para recordarme cuál debería ser la duración de esta escena. Veo que debería comenzar alrededor del segundo 11 y terminar en algún lugar alrededor del segundo 15 y 20 fotogramas. Eso significa que tengo 4 segundos y 20 fotogramas para presentar la animación del logotipo y la pantalla del tablero antes de pasar a la siguiente parte donde vemos gato y la escena de las pantallas divisorias. Entonces con eso en mente, volvamos a la escena cuatro comp y primero movamos el tablero pre comp en algún lugar por aquí. Y ahora, hasta ese punto, animemos el logo pre comp para que se reduzca y subamos para que podamos tener algo de espacio para entrar al dashboard Primero, comencemos con la animación a escala. Entonces digamos que después de la introducción del logo, iremos 1 segundo hacia adelante, y luego el logo bajará a digamos 80 o tal vez 75% Y ahora vamos al segundo número uno y creamos una animación de posición. Voy a crear el primer fotograma clave aquí. Podemos presionar para ver todos los fotogramas clave que tenemos aquí. Entonces iré al segundo segundo y traeré el logo en algún lugar del marco. Genial. Así que ahora vamos a seleccionar los nuevos fotogramas clave que creamos y facilitarlos fácilmente Ahora vamos al Editor de gráficos de velocidad y primero ajustemos la velocidad del fotograma clave de escala anterior tal como estaba La velocidad en ese punto cambió porque facilitamos fácilmente el fotograma clave Entonces, cuando hacemos eso, es importante verificar la velocidad a través de toda la animación. Todo bien. Entonces ahora hagamos este movimiento, comencemos despacio y ganemos velocidad hacia el final. Veamos cómo se ve eso. Eso se ve bien por ahora. Sigamos trabajando en la siguiente parte, que es crear la animación de introducción para la precomp del dashboard que puede comenzar también desde la segunda Entonces primero, vamos a traerlo aquí y ahora abrir la propiedad de rotación para que la rotación X vuelva a cero. Y ahora, como sé que después quiero agregar algo de profundidad de campo para esta parte, voy a crear una nueva cámara en la escena. Podemos usar la cámara de un nodo. Y para el tamaño de la lente, escojamos 35 MM porque nos dará el Bien Y ahora abramos las opciones de cámara y asegurémonos de que la profundidad de campo esté apagada por ahora. No queremos trabajar cuando está encendido porque puede ralentizar la computadora. Como mencioné anteriormente, sólo después de que terminemos de animar la animación esencial, comenzaremos a agregar los toques finales a nuestro proyecto, ¿verdad? Ahora antes de seguir adelante, etiquetemos la precomp del logotipo en algún otro color Y ahora comencemos a trabajar en la animación de introducción para el dashboard Entonces primero, podemos comenzar animando la posición. Y como sabemos que la precomp debe colocarse justo aquí al final del anim, podemos ir al segundo dos y crear el primer fotograma clave A continuación, volvamos al segundo y arrastremos el pre comp hacia abajo fuera del marco. En este punto en el tiempo, también podemos acercarlo un poco más a la cámara para conseguir un movimiento un poco más interesante. Bien, así que una vez que hayamos terminado de animar la posición, agreguemos ahora una animación de rotación Primero, intentemos ver cuál debería ser la rotación al final de la animación de introducción Vamos a establecer el eje X en -25 por ahora. Antes de seguir adelante con la animación de rotación, creo que podemos bajar el tablero en el último fotograma clave Y ahora veo que los logos son demasiado grandes. Entonces, abramos los fotogramas clave de la precomp del logotipo y ajustemos la escala y la posición si es necesario Entonces ahora tenemos mucho más espacio para el tablero, y con eso, podemos volver a animarlo En este punto en el tiempo, quiero que el tablero se coloque en algún lugar por aquí. Y ahora para la rotación, quiero que empiece a entrar en escena cuando la rotación X sea -90 Entonces crearé un fotograma clave en el segundo con este valor. A continuación, iré al segundo segundo y estableceré el valor en -25. Genial. Entonces ahora podemos comenzar a trabajar en mejorar la animación y tratar de ver cómo se verá el movimiento si ajustamos la velocidad de la animación de posición y rotación de alguna manera, así comenzará lento, ganará velocidad, y luego disminuirá la velocidad hacia el final. Veamos cómo se ve eso en conjunto. Creo que la animación es demasiado rápida. Así que vayamos al segundo tres y llevemos los últimos fotogramas clave del logotipo y las pre comps del dashboard a este punto en el tiempo Veamos eso una vez más. Bien. Creo que se ve mucho mejor, pero en mi opinión, la velocidad de ambas pre comps al final debería ser exactamente la misma Entonces, seleccionemos todos los últimos fotogramas clave y presionemos F nine para restablecer la flexibilización Y ahora vayamos al editor de grafos y hagamos que el arranque de movimiento sea lento. Gana velocidad en el medio y disminuye la velocidad hacia el final. No olvidemos el marco clave de escala anterior de la precomp del logo Lo volveré a decir. Este es un proceso realista de animación. Siempre tratamos de ver cómo se verá la animación con diferentes velocidades y diferentes tiempos hasta conseguir algo que nos guste. Genial. Entonces con eso hecho, volvamos al tablero de video y veamos qué tenemos que hacer a continuación. Como puedes ver, necesitamos preparar esta escena para la intro del gato Entonces con eso en mente, volvamos a la escena y sigamos trabajando en ello. Primero, comencemos por crear la animación outtro para el logotipo Parémonos en el segundo cuarto y saquemos el logotipo del marco. Una vez que hayamos terminado con eso, vayamos al editor de gráficos y ajustemos la velocidad para obtener un movimiento un poco más suave. Sí, creo que se ve bien. Y ahora podemos seguir trabajando en ajustar la posición del tablero pre comp. Entonces, una vez más, asegurémonos de que estamos parados en el segundo cuarto y primero pongamos el valor de rotación X a cero. Después de eso, ajuste el valor de la posición. En este punto, podemos usar la cuadrícula de acción segura para ver que estamos moviendo la pre comp al lugar correcto. Asegurémonos de que la pantalla esté perfectamente centrada en el marco. Como puedes ver, está centrada verticalmente, perfectamente, pero horizontalmente, no está centrada. Esto nos puede pasar todo el tiempo. A veces nos olvidamos alinear los objetos en la escena, pero no es ningún problema solucionarlo. Todo lo que tenemos que hacer es asegurarnos de que estamos parados exactamente en uno de los fotogramas clave de posición para esta precomp Luego haga clic en el valor de posición para seleccionar todos los fotogramas clave y ajustar los valores de posición hasta que obtengamos la precomp centrada exactamente en el Si hace esto cuando no está colocado en uno de los fotogramas clave de posición, creará un fotograma clave innecesario Todo bien. Entonces ahora creo que todo se ve bien. Podemos presionarlo en el tablero pre comp para ver los fotogramas clave de una manera más conveniente y ajustar la velocidad de este movimiento para que se ajuste al movimiento pre comp del logotipo Presta atención a la gráfica de rotación. Como puede ver, me perdí ajustar su velocidad, así que me aseguraré de seleccionar la propiedad de rotación y ajustar la velocidad para que se ajuste a mi movimiento. Veamos cómo se ve eso. Creo que el tablero al final de la animación está demasiado cerca de la cámara, así que me pararé en el último fotograma clave y ajustaré el eje de posición de esta precomp Sí, creo que se ve un poco mejor. Ahora, volvamos al tablero de video y recordemos qué hacer a continuación. Bien. Entonces ahora necesitamos comenzar la animación intro del gato Y antes de hacer eso, volvamos a nuestra escena y guardemos el proyecto para salvar todos los avances que hicimos hasta ahora. Una vez que hayamos terminado con eso, para encontrar el regalo divertido, abre la carpeta de activos que descargaste para mí, y la verás ahí. Y antes de arrastrarlo al proyecto, quiero mostrarte de dónde obtuve este regalo Hay un sitio web llamado Giffi donde puedes descargar cualquier tipo de memes y regalos divertidos que puedas usar en tus proyectos Dejaré el enlace para este sitio web en el archivo PDF llamado tintas que puedes encontrar en la carpeta Mis Activos. Entonces todo lo que hice fue buscar CAT en el cuadro de búsqueda, y luego comencé a pensar en qué regalo encajaría mejor para mi proyecto. Decidí ir con éste, así que le hice clic. Entonces noté que este GIF específico no se estaba reproduciendo en un bucle. Y para mi sorpresa, cuando miré los regalos similares debajo de él, encontré el mismo , pero jugando en un bucle perfecto hacia atrás y hacia adelante. Entonces hice clic en él y lo descargué a mi computadora. Todo bien. Entonces ahora vamos a arrastrar este Jif a nuestro proyecto. Y ahora para tener este GIF dentro de una precomp, vamos a arrastrarlo al icono de precomp aquí abajo en el panel del proyecto De esa manera, se creará automáticamente una nueva precomp con esta capa Genial. Y ahora presionemos Control o Comando K para ingresar a esta configuración de comps y ajustar su tamaño Como puede ver, el tamaño PreComp se crea automáticamente acuerdo con el tamaño de la capa Escalemos el ancho y la altura a 500. Impresionante. Y ahora vamos a escalar la capa para que se ajuste al nuevo tamaño de comp. Genial. A continuación, hagamos que este metraje se vea un poco mejor. Primero, podemos aplicar la faja de tonalidad, efecto de saturación y escalar la saturación Después de eso, podemos agregar el efecto de curvas y hacer que el metraje sea un poco más de contraste. Y ahora, como escalamos la capa, perdió algo de calidad. Para asegurarnos de que estamos obteniendo la mejor calidad aquí, podemos activar la función de calidad y muestreo. Genial. Entonces ahora, una vez hecho eso, tratemos de la duración de este GF. Como puedes ver, por ahora, la duración original es de 2 segundos y cinco fotogramas. Entonces primero, necesitamos ampliar la duración de la comp. Hagamos que dure 10 segundos. Genial. Pero ahora, como pueden ver, nuestro Jif termina a 2 segundos y cinco fotogramas En nuestro caso, necesitamos que dure un poco más. Hay una manera rápida de extender la duración de un video en bucle en After Effects Para ello, primero, seleccionemos esta capa en el panel del proyecto. Una vez hecho esto, derecha, da clic en él y vaya a Interpretar material de archivo. Después haga clic en Principal. Y ahora, como tenemos un video en bucle, podemos hacer que el loop se reproduzca más de una vez Vamos a ponerla en diez. Genial. Y ahora todo lo que tenemos que hacer es extender la capa. Y como puedes ver, el video sigue reproduciéndose, vamos a extender la capa hasta el final de la línea de tiempo. Impresionante. Con eso hecho, volvamos a nuestra escena, y antes de traer esta pre comp a ella, ajustemos el nombre. Vamos a llamarlo Regalo de gato. También movamos el regalo a la carpeta Activos. Bien, ahora, trae la pre comp a escena, y sigamos trabajando en ello. Primero, busquemos una buena posición para ello. Según el tablero de video, debería estar en algún lugar por aquí. A continuación, agreguemos esquinas redondeadas para esta pre comp para que se ajuste a nuestro aspecto general de escena. Para ello, ingresa la precomp y ahora asegúrate de que no haya ninguna capa seleccionada Después selecciona la herramienta rectángulo y haz doble clic sobre ella. Esto creará un rectángulo que se ajusta perfectamente al tamaño com. A continuación, asegúrate de que esta forma tenga un relleno y que el trazo esté desactivado. Entonces vamos a redondear sus esquinas. Ahora cambiemos el nombre de esta capa para enmascarar, y ahora vamos a hacer la capa GIF, usar el canal Alfa de esta forma. Eso hará que el regalo sea visible solo dentro de los límites de la forma. De esa manera podemos obtener bonitas esquinas redondeadas para el regalo, que luego podremos ajustar si es necesario. Prefiero este método en lugar de crear una máscara en la capa gif que no se puede personalizar. Bien. Y ahora, antes de seguir adelante, ajustemos un poco la saturación porque es demasiado fuerte, en mi opinión. También ajustaré un poco las curvas. Bien. Y ahora necesitamos crear una animación de introducción para este regalo. Pero antes de hacerlo, quiero volver al tablero de video y comprobar cuánto tiempo debe durar esta parte. Por lo que comienza en los segundos 15 y 20 fotogramas, y termina en los segundos 17 y 15 fotogramas. Eso significa que toda esta parte no necesita durar más de 2 segundos. Así que volvamos al regalo del gato y creemos una animación de introducción simple usando la propiedad scale Y para que se vea un poco más interesante, también podemos crear una animación a escala para la máscara. Genial. Entonces, una vez que tengamos la intro, vayamos 1 segundo adelante y creemos una animación Otro para ello Podemos copiar los fotogramas clave de animación de introducción, pegarlos aquí y luego revertir los Ahora, vamos a facilitar fácilmente los fotogramas clave. Y en el editor de grafos, hacer que la introducción suceda rápido y el outtro comience lento Veamos cómo se ve eso. Bien. Entonces una vez que tengamos la animación intro y Outro, como recordarás, toda esta parte no debería durar más de 2 segundos Entonces, parémonos en este momento y llevemos los dos últimos fotogramas clave para comenzar desde aquí. Y antes de hacer eso, acabo notar al mirar la caja de tiempo que la velocidad de fotogramas de esta pre comp no es de 30 fotogramas por segundo. Esto sucedió porque creamos esta pre comp usando el método automático arrastrando el activo al ícono de pre comp en el panel del proyecto El pre comp se crea de acuerdo con la información del archivo que arrastraste Es importante saberlo, así que decidí mostrarles este proceso. Arreglemos eso muy rápido. Ingrese los ajustes de comp y establezca la velocidad de fotogramas en 30. ¿Bien? Entonces, una vez hecho eso, comencemos la animación outtro desde el segundo uno y 15 fotogramas Pasa la duración de dos segundos que planeamos, pero está bien. Podemos ver si se ajusta al cronometraje general de la escena, y en caso de que se sienta demasiado largo, podemos ajustarlo más tarde. Por ahora, etiquetemos esta pre comp con un color diferente y encontremos el punto adecuado en el tiempo para que comience. En este punto, solo estoy colocando la pre comp en un lugar en el tiempo que creo que será mejor y luego viendo la animación general. Si no se siente bien, lo arrastraré a otro punto en el tiempo. En nuestro caso, creo que podemos iniciar esta pre comp desde el segundo cuarto. ¿Bien? Creo que ese es un buen punto en el tiempo para que comience esta precomp, pero como pueden ver, el aspecto general de la escena se siente un poco estático Para mejorarlo, podemos crear un ligero zoom in o zoom out para la cámara usando la propiedad position. Así que vayamos al inicio de la animación y creemos ahí el primer fotograma clave A continuación, vayamos a un punto en el tiempo donde definitivamente se terminará la animación y creemos una animación de alejamiento suave. Veamos cómo se ve todo eso en conjunto. Como puede ver, agrega un poco más de movimiento al aspecto general. En caso de que el alejamiento sea apenas perceptible, puede ajustar el último fotograma clave para hacer que la cámara se mueva más hacia atrás Volvamos a ver esta animación. Creo que se ve mucho mejor, pero en mi opinión, podemos comenzar la animación de regalos un poco antes en el tiempo, digamos, desde el segundo tres, porque recuerdo que toda esta escena no debería durar más de 5 segundos. Todo bien. Entonces con eso hecho, podemos guardar el proyecto y pasar a ver cómo se verá esta escena junto con el resto de escenas en el Master Comp. Así que volvamos al Master Comp y llevemos la escena cuatro a la línea de tiempo. En este punto, solo necesitamos encontrar el mejor punto en el tiempo para que comience esta escena. Estoy observando cuidadosamente lo que está pasando en la escena anterior y tratando de iniciar la siguiente en consecuencia. Después de encontrar un buen punto en el tiempo, es una buena idea ver la animación y ver si la transición funciona bien. En mi opinión, se ve bien, así que ahora me aseguraré de volver a ver la animación. Pero esta vez, mientras se escucha la voz en off, para ver si todo está perfectamente sincronizado Esto es muy importante de hacer antes de pasar a animar la siguiente escena. En busca de ayuda. Conocí a One Point. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo con un punto. Bien. Entonces después de ver la animación con el Voiceover, noté que la escena número cuatro debería comenzar un poco antes Comencemos esta pre comp desde el segundo 11 y veamos nuevo mientras escuchamos la Voz en off. Come un punto. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con un punto, Met un punto. La plataforma que hace P. Sí, creo que deberíamos dejarla así. Eso quiere decir que en este momento, escena tres ya debería terminar. Así que entremos a esta pre comp y primero abramos todos los fotogramas clave que tenemos aquí. Ahora, comencemos a acortar la última parte de la animación en unos pocos fotogramas Selecciona todos los fotogramas clave y muévalos diez fotogramas hacia atrás. También podemos traer estos otros fotogramas clave algunos fotogramas hacia atrás. Pero por ahora, dejémoslo como está, y veamos cómo se ve la animación después de ajustar la primera parte de la animación. Se ve bien. Antes de seguir adelante, no olvidemos ajustar la animación de clic para comenzar a partir de este momento. Bien. Y ahora hagamos la animación outtro un poco más rápida al traer los últimos fotogramas clave algunos fotogramas hacia atrás Vamos a llevarlos a la marca de 1 segundo. Genial. Y ahora, después de ajustar la animación, siempre es una buena idea volver a ver el movimiento y ver si se siente bien Tenemos que asegurarnos de que no sea demasiado rápido ni demasiado lento. Creo que la moción está bien. Ahora volvamos al master comp y veamos nuevo la animación con la voz en off busca de ayuda. Cumplió con un punto. busca de ayuda. Cumplió con un punto. La plataforma no Awesome. Entonces, una vez que tengamos el tiempo que se ajuste a la voz en off, ahora podemos ingresar a la escena cuatro y agregarle una capa de fondo Usemos la animación de fondo degradado que creamos para este proyecto. Lo puedes encontrar debajo de la carpeta assets en el panel del proyecto. Ahora, vamos a crear una bonita introducción para este fondo. Mi forma favorita de crear una animación de introducción para una capa de fondo es creando una máscara de elipse y animándola . Déjame mostrarte a lo que me refiero. Primero, asegúrate de que la capa esté seleccionada y luego elige la herramienta Elipse Haga doble clic en la herramienta Elipse para crear una máscara de elipse para esta capa Ahora vamos a hacer doble clic sobre la máscara y ajustarla para que se vea más proporcional. Mantenga el comando del controlador mientras lo hace. Gracias a la cuadrícula de acción segura, puedo ver dónde ajustar la forma de la máscara para obtener el aspecto redondeado. Genial. Entonces, una vez hecho esto, abramos las propiedades de la máscara y animemos la propiedad de expansión de máscara Como puedes ver, crea una forma interesante para la máscara. Me gusta mucho el aspecto de la forma elipse. Todo bien. Así que vamos a establecer el valor de expansión hasta que ya no veamos la capa. No lo pongas más alto de lo necesario. Ahora crea el primer fotograma clave al inicio de la animación Después de eso, mueve 1 segundo hacia adelante y ajusta el valor hasta que veamos toda la capa de fondo. Y una vez más, no empujes el valor más de lo necesario. Todo bien. Así que ahora vamos a facilitar los fotogramas clave y hacer que esta animación comience rápido desde el principio. Veamos cómo se ve eso. Eso se ve genial. Ahora, lo último que podemos hacer aquí es crear un pequeño desplazamiento entre la animación de introducción de fondo y el resto de las partes de animación en esta escena Empecemos los otros precomps a partir del fotograma diez. mejor fotograma cinco y ver como se verá con el retardo de cinco fotogramas primero. Creo que se ve bien. Ahora volvamos al master comp y lo veamos junto con la voz en off. Conoce un punto. La plataforma que hace que la gestión de proyectos sea tan simple me di cuenta de que la precomp CAT debería comenzar en algún lugar alrededor de la marca de los 15 segundos Entonces, movamos el cabezal de reproducción a 15 segundos y diez fotogramas, ingresemos a la escena cuatro y hagamos algunos pequeños ajustes Primero, llevemos la precomp Cat para comenzar desde este punto en el tiempo Genial. Ahora, hagamos que la animación del tablero sea un poco más lenta aquí. Si comienza desde los segundos tres y cinco fotogramas, terminémoslo en los segundos cinco y cinco fotogramas, que tendrán exactamente 2 segundos de duración de animación. Volvamos a ver la animación y asegurarnos de que no se sienta demasiado lenta. Creo que está bien. Ahora, volvamos al master comp y veamos de nuevo con la voz en off para confirmar que todo está perfectamente Conoce un punto. La trama. Forma que hace que la progenigement sea tan simple. Hasta tu gato lo hace. Con un punto, Hazlo con un punto. Impresionante. Creo que todo funciona muy bien. Ahora, podemos pasar a crear la animación Otro, que tiene que suceder alrededor del segundo 17. Por ahora, apaguemos la voz en off para que no nos distraiga al revisar la Trabajaremos en eso en la siguiente lección. Va a ser increíble. Entonces nos vemos ahí. Y antes de comenzar a ver la siguiente lección, no olvides tomarte un descanso de diez minutos para refrescarte antes de continuar. Nos vemos en la siguiente. 16. Creación de escena 5: animación de división de pantallas: Estoy de vuelta. Comencemos esta lección yendo al tablero de video para verificar, cuál es la siguiente escena que necesitamos animar La siguiente escena es la parte donde vemos todas las pantallas de UI, y comienza en los segundos 17 y 15 fotogramas. Ahora veamos dónde termina. Termina en segundos 19 y 15 cuadros. Eso significa que esta animación debería durar 2 segundos. Un recordatorio rápido de que la idea para esta composición de pantallas divididas la obtuve ver un gran video de referencia en YouTube, es un recordatorio de lo genial que es ver muchos otros proyectos para inspirarse. Bien, volvamos a la lección. Otra cosa que podemos aprender de la placa de video es que después de la animación de pantallas divididas, necesitamos ingresar a la pantalla del proyecto. Y con eso en mente, volvamos a nuestra escena y sigamos animando en esta línea de tiempo en lugar de crear una nueva pre comp por razones obvias Como necesitamos continuar con la animación sin dejar de ver la pantalla del tablero para la parte de animación dividida, es mejor seguir trabajando en esta línea de tiempo y no crear una nueva escena. Y antes de seguir adelante, organicemos nuestra línea de tiempo aquí. Primero, podemos recortar el logo pre comp hasta el punto que ya no lo veamos en la escena. Después de eso, podemos hacer lo mismo para el gato pre comp. Entonces, busquemos el punto en el tiempo donde esta animación ya terminó y recortemos esta capa hasta ese punto. Por último, vamos a traer el pre comp aquí para tener un diseño más cronológico en nuestra línea Ahora, parémonos en el punto en el tiempo desde donde pensamos que va a ser un buen momento para comenzar la transición a la siguiente parte de animación, que está presentando todas las pantallas de la interfaz Podemos iniciarlo desde el segundo siete. Con eso hecho, abramos la carpeta precomps y la carpeta Screens dentro de ella para encontrar la pantalla de UI del proyecto que necesita ser presentada en la siguiente escena Y ahora vamos a llevarlo a nuestra línea de tiempo. Y piensa en una manera de organizar la pantalla con el resto de pantallas para la escena de pantalla dividida. Y antes de hacer eso, también abramos la posición de la cámara y llevemos también abramos la posición de la cámara y el último fotograma clave a este punto en tiempo porque a partir de este punto en el tiempo, crearemos una transición para la siguiente parte de animación Todo bien. Y ahora vamos a llevar los proyectos pre comp a la línea de tiempo. A continuación, convertiremos esta capa una capa de tres D y encontremos el lugar para ella en nuestro espacio de tres D. Para ver lo que estamos haciendo mejor, cambiemos la vista a una vista personalizada para que podamos ver el espacio de tres D más claramente. Como puedes ver, el proyecto pre comp ahora se encuentra frente al tablero, que no es lo que necesitamos. Queremos que quede atrás. Y como sabemos que más adelante, agregaremos todo el resto de pantallas. Será una buena idea mantener igual el espacio entre cada pantalla para hacer eso. Primero, veamos el valor de posición de la precomp del dashboard Ahora, vamos a establecer este valor exacto para la precomp del proyecto, por lo que se alineará con la posición del tablero Y ahora usemos el cuadro de valor como calculadora y decidamos cuál debería ser la distancia de la pantalla del proyecto desde la pantalla del tablero. Intentemos moverlo 250 píxeles. Creo que la distancia está bien. Y ahora pasemos para llevar el resto de las pantallas a la escena. Y ahora quiero compartir mis pensamientos contigo. Sé que el resto de pantallas en esta escena necesitan ser presentadas por muy poco tiempo. También sé que si traigo todas las pre comps de las pantallas a la línea de tiempo, los efectos posteriores tendrán dificultad para previsualizar la escena Con eso en mente, creo que será una buena idea más que usar los pre comps de las pantallas para usar los archivos AI de los diseños de estas pantallas que importamos al inicio del proyecto Para los efectos posteriores, es mucho más fácil renderizar un archivo de Illustrator. Que una precomp con un montón de archivos de Illustrator en su interior. No hice eso para la pantalla del proyecto porque sé que esta pantalla debería ser animada en mi siguiente parte de animación. Por lo tanto, traje la pre comp de la pantalla y no su capa aplanada de Illustrator Bien. Entonces con eso en mente, sigamos trabajando, y lo que acabo de explicar será mucho más claro para ustedes ahora. Así que llevemos la siguiente pantalla a la línea de tiempo y ajustemos su posición. Primero, lo convertimos en una capa de tres D. Entonces usemos el valor de posición del eje Z de la última pantalla y le agreguemos 250 píxeles. De esta manera, colocaremos esta pantalla 250 píxeles después de la pantalla anterior. Bien. Ahora pasemos al siguiente. Para hacer este proceso un poco más rápido, en lugar de arrastrar la siguiente pantalla a la línea de tiempo y luego ajustarla, podemos duplicar la última pantalla de la línea de tiempo, seleccionar la inferior y ajustar su valor de posición del eje Z. Después de eso, mientras esta capa está seleccionada en la línea de tiempo, podemos ir al panel del proyecto, seleccionar la siguiente pantalla, mantener pulsada Alt u opción, y arrastrarla encima de la pantalla seleccionada en la línea de tiempo para reemplazarla. Genial. Y ahora vamos a repetir este proceso para el resto de pantallas. Todo bien. Y ahora podemos traer de vuelta la vista a la cámara activa y seguir trabajando en la escena. Lo siguiente que podemos hacer es traer todas las nuevas pantallas en la línea de tiempo para comenzar desde el segundo siete, ya que este es el momento en comenzará esta parte de animación, entonces podemos traer todas las pantallas por encima del tablero pre comp para mantener nuestra línea de tiempo organizada. Todo bien. Y ahora preparemos la pantalla del proyecto para la animación. Lo que quiero decir con eso es que tenemos que asegurarnos de que esta precomp funcione correctamente en caso de que queramos colapsarla Como puede ver, después de colapsar la precomp, vemos la precomp de manera diferente Y es porque aquí tenemos una cámara que ahora está mirando dentro de la precomp y no interactúa con las capas dentro la precomp ya que todas son dos capas D. Entonces para arreglarlo, todo lo que necesitamos hacer es ingresar la precomp y contraer todas las capas y convertirlas en tres capas D. De esta manera, la cámara en la escena principal los verá. Con eso hecho, volvamos a la escena y convertiremos el resto de las pantallas en tres capas D también. También podemos colapsarlos. Genial. Y ahora comencemos a trabajar en la animación de pantallas divididas. Lo primero que podemos hacer es crear un nuevo objeto nulo. Entonces vamos a convertirla a una capa de tres D, colocarla sobre todas las pantallas y cambiarle el nombre a pantallas nulas. Después de eso, necesitamos colocar este nulo en medio de todas las pantallas. Para mayor comodidad, podemos usar la vista personalizada, o para una vista aún mejor, podemos elegir la vista superior. Ya que tenemos ocho pantallas, deberíamos colocar el nulo en algún lugar por aquí para que podamos tener cuatro pantallas antes y cuatro pantallas después de él. Y para saber exactamente dónde colocarlo en el medio, podemos usar el eje de posición Z de la pantalla antes de él. Vamos a copiar este valor de la pantalla y pegarlo al nulo. Luego cambie el eje de posición Z nulos en consecuencia. Si la distancia entre las pantallas es de 250 píxeles, eso significa que necesitamos mover el nulo a mitad de este número. Así que agreguemos 125 píxeles al eje Z actual de nulos. Genial. Y una vez hecho eso, necesitamos padre de todas las capas de pantalla al nulo. Pero antes de eso, dividamos la precomp del dashboard para que podamos tener esta precomp por separado para la primera parte de animación de la escena y una separada para la parte de animación en la que estamos trabajando ahora mismo Impresionante. Y ahora vamos a padre de todas las pantallas al nulo. Todo bien. Y ahora volvamos a la vista de cámara activa y animemos la escena Podemos iniciar el nulo desde aquí. Bien. Y ahora vamos a abrir la propiedad de rotación y encontrar el eje adecuado para que animemos En nuestro caso, animaremos el eje y. Vamos a crear el primer fotograma clave aquí, luego mover 1 segundo hacia adelante y girarlo -69 grados Antes de seguir adelante, podemos abrir los fotogramas clave para esta precomp y eliminar todos los fotogramas clave anteriores Lo hacemos porque crearemos una animación de rotación y posición completamente diferente para esta precomp para lograr el aspecto curvilíneo aspiramos cuando comience la animación dividida Dicho esto, abramos la propiedad de rotación para todas las pantallas y veamos qué eje necesitamos animar Es el eje X. Así que vamos a crear un fotograma clave para todas las capas con el valor actual En este punto en el tiempo, podemos presionarte para que veas solo los fotogramas clave Después de eso, pasemos al segundo y comencemos a ajustar el eje X para cada capa de pantalla para obtener un aspecto curvilíneo proporcional Giremos la pantalla del tablero a 25 grados. Y para la última pantalla, ese es el navegador de archivos, hagamos lo contrario. Ajustarlo a -25 Para la pantalla anterior a ella, podemos establecer la rotación a -20. Para el anterior, podemos establecer la rotación a -15. Para el siguiente menos diez. Como podrán notar, estoy rotando las capas cinco grados para que la curva se vea proporcional. Todo bien. Y ahora para las primeras cuatro pantallas, podemos establecer esta una a cinco. El siguiente lo pondremos en diez. Y para el final, podemos establecer la rotación en 15. Eso se ve bien, y ya casi estamos ahí. Ahora para que se vea mejor, también podemos crear una animación de posición. Entonces, seleccionemos todas las pantallas y pulsemos P. Ahora, cree un fotograma clave al inicio de la animación A continuación, movamos 1 segundo y comencemos a ajustar la posición de cada pantalla para conseguir ese bonito aspecto curvilíneo En este punto, como hay pantallas que son un poco más grandes que las demás, solo estoy tratando de mover cada capa intuitivamente hasta conseguir algo que me guste Bien, creo que por ahora se ve bien. Pasemos a crear la animación de la pantalla del proyecto saliendo de esta lista, ya que esta es la pantalla que necesita mostrarse en la siguiente escena Entonces, en un momento, avanzaremos 1 segundo y ajustaremos la pre comp, posición y rotación de la pantalla del proyecto. Pero antes de hacer eso, hagamos el resto de las pantallas salgan del marco. Y podemos hacer eso usando la capa nula. Entonces, parémonos en el segundo ocho, luego presione P, cree un fotograma clave aquí después de eso, muévase al segundo nueve y baje el nulo del fotograma hasta que no haya pantalla visible en el fotograma Genial. Y ahora vamos a asegurarnos de que estamos dividiendo los proyectos pre comp al segundo ocho, ya que queremos que no se vea afectado por el nulo. Necesitamos animar esta parte por separado para que podamos ingresar a la siguiente parte de animación mucho más convenientemente Asegurémonos de que no esté apadrinado al nulo. Genial. Y ahora podemos animar fácilmente esta capa sin preocuparnos por el movimiento de los nulos Y antes de animarlo, asegurémonos de eliminar los primeros fotogramas clave y solo conservar los últimos para que la precom se quede en su Con eso hecho, ya podemos ir al segundo nueve y animar esta capa Primer lote, asegurémonos de establecer el eje de rotación X en cero. Después de eso, ajustemos el eje de rotación Y hasta que obtengamos la pantalla de la interfaz de usuario orientada hacia la cámara. Genial. Una vez terminado de ajustar la rotación, comencemos a tratar con la posición. Vamos a presionarte dos veces para que podamos ver todos los fotogramas clave. Ahora, abramos la rejilla segura de acción y comencemos a ajustar la posición. Podemos colocarlo en el centro de la comp por ahora. No te preocupes por la colisión que ocurre aquí. Nos ocuparemos de ello en un minuto. Por ahora, centrémonos en encontrar una buena posición para esta pantalla de interfaz de usuario. Si no estás seguro de cómo debería verse la escena, es una buena idea volver a la placa de video y volver a verificar la escena Veo que necesitamos agregar una capa de texto aquí, también. Es importante porque ahora sé que necesito dejar algo de espacio para una capa de texto en la escena. Aprovechemos también esta oportunidad para verificar cuánto tiempo la animación de la parte de la pantalla de la interfaz de usuario del proyecto debe presentar la animación de la parte de la pantalla de la interfaz de usuario del proyecto. Comienza a los 19 segundos y 15 fotogramas y termina en la marca de 24 segundos. Eso significa que tenemos un poco más de 5 segundos para presentar esta parte de animación. Todo bien. Entonces con eso en mente, volvamos a la escena y sigamos trabajando. Entonces ahora, a partir de este punto en el tiempo, tenemos 5 segundos para presentar esta parte de la pantalla de la interfaz de usuario. Llevaremos la pre comp a una posición similar a la referencia de la te hablé cuando hablamos de la creación del storyboard Bien, volvamos a la lección. Vamos 1 segundo hacia adelante y luego abrimos todas las propiedades de rotación. Ahora, intentemos jugar con los diferentes ejes hasta conseguir algo que nos guste. En nuestro caso, veo que también necesitamos animar el eje de rotación Z. Por lo tanto, primero lo primero, vamos a crear un fotograma clave en los segundos nueve, y luego pasar al segundo diez y cambiar el valor Bien. Creo que el ángulo es perfecto. Ahora, llevemos la posición y asegurémonos de acercar la precomp a la cámara En este punto, solo estoy tratando de lograr un ángulo agradable y asegurarme de que la composición esté equilibrada. Así que estoy jugando con todas las propiedades que animé hasta obtener un buen resultado, asegurándome de tener suficiente espacio para la capa de texto que necesita estar en esta parte de animación. Mm. Et a ver cómo se ve eso. Creo que se ve genial. Seleccionemos la pre comp y presionemos para ver solo los fotogramas clave Todo bien. Y ahora abramos el guión y copiemos el texto relevante. Comprobemos eso en la placa de video. En nuestro caso, por ahora solo necesitamos esta parte del guión. Así que vamos a copiarlo y pegarlo en la escena. Ahora ajustemos el texto. Vamos con una versión en negrita de la fuente. A continuación, cambiemos el color a blanco. Y para el tamaño de fuente, ponlo en 40. Finalmente, asegurémonos de que el párrafo esté alineado al centro y luego alinéelo horizontalmente al centro de la comp. Y creo que podemos colocarlo en algún lugar por aquí, ¿verdad? Y ahora vamos a traer el texto por encima la capa nula y traerlo para comenzar desde el segundo nueve. Podemos ajustar un poco la posición. Posteriormente, animaremos todas las capas de texto en nuestras escenas. Por ahora, centrémonos en seguir animando el resto de las partes esenciales de la animación Como recordarás, la parte de animación que presenta la pantalla de interfaz de usuario del proyecto debería durar 5 segundos. Eso significa que ahora necesitamos crear la animación edificante para cada sección en esta pantalla de interfaz Como vimos esta animación se usa mucho en este tipo de proyectos. Entonces aprendamos a hacer eso. Pero antes de eso, acabo de notar que me perdí agregar un fotograma clave de posición a los mensajes a la capa de pantalla Bien, ahora comencemos a crear la animación edificante Encontremos el momento para que comience esta animación. Deberíamos iniciarlo desde el segundo diez. Ahora entremos a los proyectos pre comp. Aquí en esta línea de tiempo, vemos que la animación comenzará desde el segundo tres. Genial. Entonces primero, comencemos bloqueando la capa BG gris. Así podemos seleccionar el resto de las capas fácilmente. También podemos bloquear la capa del menú de la izquierda. Y ahora descubramos qué capas necesitamos animar. En nuestro caso, estas son las capas de las cajas del proyecto. Así que vamos a seleccionarlos todos y etiquetarlos con un color diferente. Podemos encenderlos y apagarlos para asegurarnos de que la selección es correcta. Genial. Ahora, vamos a etiquetarlos en naranja. Ahora, vamos a abrir la posición para todos ellos y crear un fotograma clave en este momento A continuación, vamos a avanzar 1 segundo y crear otro fotograma clave aquí también Entonces vayamos a la mitad de la animación y ajustemos la posición del eje Z para sacarlos a colación. Podemos volver a la escena para ver cómo se ve eso con el ángulo que creamos. Creo que es demasiado. Vamos a bajarlos a todos un poquito. Vamos a comprobarlo una vez más. Sí, creo que se ve mejor. Ahora volvamos a la precomp y ajustemos el movimiento. Hagamos que la animación comience rápido, disminuya la velocidad en el medio y ganemos velocidad hacia el final. Genial. Y ahora vamos a crear un desplazamiento suave entre las capas. Estoy seleccionando cada capa para asegurarme de que todas estén organizadas cronológicamente, una tras otra Sí, parece que el orden en el panel de capas es correcto. Entonces ahora decidamos que el cuadro superior izquierdo iniciará primero la animación. Eso significa que seleccionaremos el resto de los fotogramas clave y los moveremos, digamos, dos fotogramas hacia adelante Podemos hacerlo manualmente manteniendo pulsada la tecla Alt u opción y usando la flecha derecha. O podemos hacerlo usando la nueva función. Desharé mi acción y acercaré un poco para mostrarte cómo. Si desea utilizar la nueva función, entonces debe recordar que el orden de su selección afectará la dirección de desplazamiento. Vamos a mover dos fotogramas hacia adelante. Entonces, si empiezo a seleccionar desde la capa superior, entonces mantén presionado Control y Alt para activar la nueva entidad. El desplazamiento comenzará desde la capa superior. En nuestro caso, queremos que comience por la capa inferior. Por lo tanto, iniciaré la selección desde la capa inferior. Ahora, me estoy asegurando de que los fotogramas clave de la capa llamada capa 353 estén llegando a la posición de los indicadores de tiempo. Eso indicará que el desplazamiento es de dos fotogramas de distancia. Creo que podemos hacer más grande el offset. Genial. Y ahora, antes de seguir adelante, volvamos a la escena para ver cómo se ve eso. Se ve bien, pero creo que toda esta parte de animación es demasiado rápida y dura muy poco tiempo. Sabiendo que esta parte debería durar cuatro o 5 segundos, estoy seguro de que necesitamos hacer esta animación un poco más lenta. Así que volvamos a la precomp de pantalla y desaceleremos la animación Centrémonos en los fotogramas clave de la capa inferior. Por ahora, esta animación tiene una duración de 1 segundo. Comienza en el segundo tres y termina en el segundo cuatro. Eso también aplica al resto de las capas. Todas sus animaciones duran 1 segundo. Entonces ahora vamos al segundo cinco. Después selecciona todos los fotogramas clave y ahora mantén presionada la tecla Alt u opción y arrastra el último fotograma clave para aumentar la distancia entre los fotogramas clave Al hacer eso, preste atención a cuándo el último fotograma clave de la capa inferior, alcanza la marca de cinco segundos Indicará que su animación ahora dura 2 segundos, y como ya puedes entender, se aplica al resto de las capas, también. Así es como ralentizamos la animación para todas las capas de 1 segundo a 2 segundos de duración. Con eso hecho, volvamos a la escena y veamos cómo se ve eso. Y lo más importante, ver que ahora la animación termina en el momento adecuado. La animación termina alrededor del segundo 12, lo cual es genial porque ahora nos quedan un par de segundos para crear la transición para la siguiente parte de animación. Para la siguiente parte de animación, necesitamos crear una animación de clic de cursor en una de las casillas del proyecto, que después de eso nos llevará a la pantalla de la interfaz de usuario del segundo Proyecto. Entonces empecemos a trabajar en esa parte ahora mismo. Entonces primero, entremos a la segunda pantalla del proyecto y tratemos de entender lo que tiene que pasar. Como puedes ver aquí, actualmente estamos dentro un proyecto que se llama sitio web de driblar Entonces eso significa que necesitamos crear una animación de clic para este cuadro de proyecto en la primera pantalla del proyecto. Una vez que entendamos el flujo, podemos ir a la segunda pantalla del proyecto y empezar a pensar en una forma de crear una animación de introducción para ello En nuestro caso, nos enfocaremos en crear algún tipo de animación para estas secciones de tareas. Pero como pueden ver, acabo notar que estas cajas no tienen relleno. Entonces, antes de comenzar a animar, déjame arreglar eso muy rápido En tu caso, ya que estás usando mis archivos finalizados, ya tienes todas las secciones arregladas. Solo quería mostrarte que a veces echamos de menos algo en Illustrator, y está totalmente bien. Entonces para arreglar esto, todo lo que necesito hacer es encontrar ese diseño en Illustrator, seleccionar estas cajas y asegurarme de agregarles un relleno blanco. Voy a acelerar este proceso por ahora. Una vez hecho esto, no me olvido de guardar el archivo. Entonces puedo volver a After Effects y esperar unos segundos hasta que se actualicen los cambios aquí . Todo bien. Y ahora guardaré mi proyecto aquí en after effects también, y podemos seguir trabajando. Entonces en este punto, ya sabemos lo que tenemos que hacer para el resto de la escena. Pero antes de comenzar a crear una animación compleja, es una buena idea volver a la comp maestra y ver la animación que creamos junto con escuchar la voz en off para ver desde qué punto en el tiempo deberíamos comenzar a crear la animación de flujo de demostración Eso hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con un punto, obtienes un cristal claro, um de todo lo que tu equipo está trabajando en todo tu proyecto. Bien, a medida que obtienes una visión clara y cristalina de todo lo que tu equipo está trabajando en todo tu producto. Creo que podemos iniciarlo desde el segundo 22. Eso significa que la animación edificante de las cajas del proyecto ya debería terminar aquí Entonces entremos a la escena y luego ingresemos a los proyectos pre comp para acortar esta parte de animación a la ubicación de los indicadores de tiempo, lo que en esta línea de tiempo, significa que esta animación debe terminar alrededor del segundo cuarto Entonces básicamente, nuestra primera duración de esta animación fue perfecta. Quería mostrarte esta situación porque a veces sentimos que nuestra animación debe verse de cierta manera. Pero lo más importante es hacer que la animación se ajuste a la voz en off, en lugar de simplemente hacer que se vea como nos sentimos Por eso es tan importante siempre a la composición maestra y volver a verificar el proyecto después cada parte de animación que termines de crear. Con un punto, obtienes una visión clara y cristalina de todo lo que tu equipo está trabajando en todos tus Alright Así que ahora la animación se sincroniza con la voz en off, y estamos listos para comenzar a trabajar en la animación de flujo de demostración Eso debería comenzar en algún lugar alrededor del segundo 22. Entremos en escena e iniciemos esta animación desde el punto en el tiempo donde ya han aterrizado todas las cajas. Coloque el indicador de tiempo aquí. Y ahora comencemos a crear el movimiento de clic en el primer cuadro de proyecto. Como sabemos que necesitaremos algunos fotogramas para que ocurra la animación de clic, asegurémonos de que esta precomp permanezca quieta durante un par de fotogramas Para ello, necesitamos crear fotogramas clave para todas las propiedades animadas con el valor actual. Ahora, hagamos que esta precomp se quede por diez fotogramas. Creo que debería ser tiempo suficiente para la animación de clic. Entonces, si estamos en el fotograma 12, pasemos al fotograma 22, lo que hace diez fotogramas en total. Finalmente, vamos a crear otro conjunto de fotogramas clave para todas las propiedades animadas con el valor actual Esta parte será nuestro lugar para crear la animación de click. En caso de que desee ajustar el ángulo o posición de la precomp antes de que comience el flujo de demostración, no olvide actualizar los últimos fotogramas clave consecuencia para mantener ese momento de pausa Vamos a practicarlo ahora mismo. Podemos cambiar el ángulo jugando un poco con los valores de las propiedades animadas hasta crear un ángulo más interesante. Bien. Así que ahora una vez hecho eso, puedes simplemente eliminar estos fotogramas clave y copiar y pegar los nuevos aquí en su lugar Todo bien. Y ahora a partir de este momento, entremos en la precomp del proyecto y busquemos el primer cuadro de proyecto para crear una animación de clic para ello. Aquí está. Abra la propiedad scale y cree un fotograma clave con el valor actual Después mueve diez fotogramas hacia adelante y crea el mismo fotograma clave Ahora pongámonos en medio de esta animación y escalemos la capa. Vamos a probar nuestro 80. Genial. Y ahora vamos a facilitar fácilmente los fotogramas clave y ver cómo se ve eso Intentemos que esta moción sea un poco más ágil. Eso es mejor. Genial. Ahora, volvamos a la escena. Y desde el momento en el que termina la animación de clic, cambiemos el ángulo de esta pre comp a un ángulo diferente que se vea mejor para la siguiente pantalla de UI que debe presentarse después de la animación de clic. Digamos que la animación de ángulo cambiante durará 1 segundo. Entonces usemos esta casilla de tiempo y cambiemos los segundos a 12. De esta manera, el indicador de tiempo saltará hacia adelante exactamente 1 segundo. Genial. En este punto, ajustemos todas las propiedades que animamos para obtener un bonito ángulo frontal. Usando la rejilla de acción segura, es fácil alinear la precomp con el centro Bien, creo que se ve bien. Ahora sabemos que cuando presentamos la siguiente pantalla, también necesitamos cambiar el texto que tenemos aquí en la escena. Entonces dividamos la capa de texto desde el inicio de la transición, luego abramos el script para copiar el texto relevante. Hagamos doble clic en la capa de texto y peguemos el nuevo texto. Genial. Entonces ahora hemos preparado nuestra transición. Y antes de seguir adelante, comprobemos si se sincroniza perfectamente con la voz en off También podemos confirmar que se hunde comprobando que el texto está cambiando en el momento adecuado. Vista previa de todo lo que tu equipo está trabajando, todos tus proyectos, todas tus tareas, todo todo en un solo lugar. Bien, creo que todo se ve genial. Y ahora estamos listos para volver a la escena y comenzar a trabajar en la creación de la animación de introducción para la pantalla de interfaz de usuario del segundo proyecto La transformación debe comenzar a ocurrir justo después de la animación de clic. En este caso, crearemos la animación de introducción de la siguiente pantalla dentro de la pre comp del proyecto Primero crea una animación de salida para todas las secciones de esta pantalla, y después de eso, crearemos una animación de introducción para la siguiente Luego cronometraremos estas dos partes de animación juntas para crear una transición suave. Y finalmente, tendremos esa animación de flujo de demostración para esta pantalla de interfaz de usuario. Continuaremos con eso en la siguiente lección. Va a ser increíble. Entonces nos vemos ahí. 17. Creación de la animación outro para la pantalla de proyectos: Regresa. Comenzaremos esta lección trabajando en la animación Otro para la pantalla del proyecto. Eso tiene que comenzar a suceder justo después de la animación de clic. Así que nos quedaremos aquí y empezaremos a pensar en una manera de sacar todas las capas para que podamos empezar a traer las capas de la siguiente pantalla. Bien. Entonces, con eso en mente, comencemos a crear una animación outtro para la sección principal en esta pantalla de interfaz Para hacerlo de la manera más conveniente, podemos utilizar la caja blanca de esta sección. Déjame mostrarte a lo que me refiero. Primero, vamos a colorearlo en un color diferente para que podamos encontrarlo rápidamente. A continuación, podemos seleccionar todos los objetos y capas que se relacionan con esta sección y los padres a la caja blanca principal. Una vez hecho esto, podemos crear una animación outtro solo para esta capa Entonces podemos pasar a crear una animación outtro para el resto de las secciones Dicho esto, abramos la posición para el cuadro blanco principal de esta sección y creemos una animación de outtro simple para ello hacia el lado derecho Hagamos que esta animación termine en el segundo cinco. A continuación, vayamos al punto donde inicia esta animación y creamos una animación outtro para el menú grande de la izquierda Podemos sacar esto del marco hacia el lado izquierdo. Genial. Y ahora vamos a crear una animación outtro para el encabezado Antes de hacer eso, me di cuenta de que el encabezado no se ve bien. Me encantaría que empezara por el lado izquierdo y no se recortara como es ahora Así es como obtuve el diseño de Figma. Pero aquí en after effects, lo voy a cambiar para que se ajuste a mi animación. En tu caso, no lo ves porque estás usando mis archivos de Illustrator finalizados. Entonces ya tienes arreglado este problema. Para arreglarlo, solo fui a este diseño en Illustrator y ajusté la forma al lado izquierdo. Una vez hecho esto, guardé el proyecto para poder obtener la versión actualizada y después de los efectos. Por último, actualicé la posición de la capa que se estropeó por el cambio de diseño que hice en Illustrator. Todo bien. Y ahora, una vez que lo arreglé, después de comprobar cómo debería verse la siguiente pantalla, entendí que la sección de encabezado no está cambiando, así que no necesito crear una animación tro para ello. Entonces ahora antes de ingresar a las siguientes capas, asegurémonos de que estas capas sean visibles solo dentro de los límites del cuadro gris principal para esta pantalla. Creo que se verá mejor en lugar de simplemente dejar las capas saliendo como están ahora mismo. Empecemos a tratar primero con el menú. Tenemos que hacer es hacer esta capa, usar el Alfa de la caja gris. Así que arrastra el látigo pick de la función track mat de la capa de menú a la capa de cuadro gris, que es la última capa en nuestro panel de capas Por último, vuelve a encender esta capa. Impresionante. Ahora, hagamos lo mismo para la caja blanca de la sección principal. Genial. Y ahora vamos a repetir este proceso. Para el resto de las capas, queremos que nos enmascaren. Por alguna razón, cuando intenté hacer este proceso para un montón de capas, a la vez, no funcionó. Entonces, si eso te pasa, no te preocupes. Solo asegúrate de hacerlo uno por uno. Como puedes ver ahora, eso está funcionando. También podemos hacerlo por dos capas a la vez. Todo bien. Una vez que hayamos terminado con eso, volvamos a la escena y veamos cómo se ve eso. Como puedes ver, como tenemos una animación de algunas de las capas subiendo, no las vemos porque ahora están enmascaradas por la capa principal de fondo gris Cuando estás en la situación, todo lo que necesitas hacer es ingresar la pre comp con las capas enmascaradas y encontrar el punto en el tiempo donde la animación ascendente haya terminado por completo Podemos quedarnos en este punto en el tiempo, que es donde comienza la animación outtro , y a partir de este punto, podemos seleccionar todas las capas que no queremos que se enmascaren en la parte de animación anterior y dividirlas Ahora podemos colocar la capa duplicada aquí arriba. Finalmente, necesitamos seleccionar las capas que no necesitamos, enmascarar y desactivar la función Track Mat para ellas Entonces ahora obtenemos estas cajas de proyecto no enmascaradas por ninguna capa en el momento en el que están saliendo. Y luego los tenemos enmascarados para la parte de animación outtro Así es como lidias con este tipo de situaciones. Todo bien. Y ahora podemos entrar en la siguiente pantalla e intentar entender qué capas y objetos se deben presentar después de la animación de clic. Tenemos que asegurarnos de ingresar a estas dos secciones. Empecemos con el menú grande del lado izquierdo. Primero, tenemos que copiarlo. Entonces volvamos a la primera pantalla del proyecto y nos paremos en el punto en el tiempo donde necesitamos las nuevas capas para entrar en escena. En nuestro caso, es desde el inicio de la animación Otro. Todo bien. Entonces ahora vamos a pegar aquí el menú copiado y colocarlo por encima de todas las capas. Ahora podemos traer esta capa para comenzar desde este punto en el tiempo. Y ahora vamos a asegurarnos de que esta capa esté enmascarada. Podemos colocarlo debajo del encabezado. Bien, entonces ahora haz que use el Alfa de la caja gris para enmascarar esta capa. Genial. Y ahora podemos comenzar a crear una animación de introducción para este menú Podemos crear un fotograma clave aquí porque sabemos que esta es la posición en la que debe estar después de la introducción Ahora podemos ir al inicio de nuestra animación y mover esta capa hacia la izquierda. Una vez hecho esto, podemos retrasar la animación de introducción desde la animación outtro del menú anterior Todo bien. Y ahora volvamos a la segunda pantalla de proyectos y copiemos el resto de las capas. Seleccionemos estas cuatro capas, copiarlas y pegarlas en la primera precomp de proyectos Vamos a traerlos para que comiencen desde este punto en el tiempo, también. Este es el punto donde comenzará la introducción de la pantalla del segundo proyecto Genial. Volvamos a pasar a la segunda pantalla, y esta vez copiar la caja blanca. Ahora, haga clic en esta capa y pegue el cuadro blanco para que quede por encima de la seleccionada. Con eso hecho, vamos a crear una animación de introducción para esta nueva sección Crearemos una introducción diferente para el resto de las capas que necesiten aparecer en la sección Pero todas estas capas las podemos animar juntas. Etiquetemos la caja blanca y apadreemos estas cuatro capas a ella. Antes de animarlo, asegurémonos de colocar esta sección en el lugar correcto Como puedes entender, deberíamos bajarlo un poco. Así que selecciona la capa de caja blanca y bájala un poco. Todo bien. Y ahora abre la posición de esta capa. podemos abrir la posición del nuevo menú para ver dónde termina. Entonces, al final de la animación de introducción, crearemos un fotograma clave con el valor de posición actual Y al inicio, decidamos que esta sección entrará a la pantalla desde la parte inferior. Puedes comprobar cómo se ve eso con la animación outtro de la sección anterior Creo que se ve genial, y podemos salvar el proyecto y seguir adelante. Ahora vamos a crear una animación de introducción para el resto de las capas que necesitan estar en esta sección Así que vamos a seleccionar todas las listas de tareas aquí. De vuelta en los primeros proyectos pre comp, asegurémonos de seleccionar esta capa para que las capas pegadas estén por encima de ella. Genial. Ahora vamos a etiquetarlos en naranja y traerlos para comenzar desde aquí. Genial. Ahora vamos a hacer zoom un poco y bajarlos para que se ajusten al diseño original de esta sección. Se puede comprobar cómo debería quedar eso en los segundos proyectos, precomp Bien. Y ahora comencemos a crear una intro para todas estas capas Al final de la intro, deben colocarse aquí. Y al principio, bajémoslos. Podemos colocarlos en algún lugar por aquí. Y ahora, para que esto sea un poco más interesante, hagamos que comiencen en la segunda marca de cinco. Quiero crear un ligero retraso para estas capas a partir del resto de las secciones. Bien, por ahora, se ve bien. Sigamos adelante. En este punto, no me importa que la parte inferior de la caja blanca esté fuera de la pantalla. Me encanta cómo se ve, pero sí quiero enmascarar las capas de tareas para que puedan ser visibles solo dentro de los límites de la caja blanca. Para esto, primero, asegúrate de saber, que es la capa de caja blanca. Es éste. Ahora necesitamos seleccionar las capas de tareas y hacerlas usar el canal Alfa de la capa de caja blanca. Por último, no olvides volver a poner la capa de la caja blanca. Hazlo para el resto de las capas de tareas. Todo bien. Con eso hecho, puede ser una buena idea volver al master comp y ver si todo se ve bien. Como puedes ver, nos está pasando algo muy raro . Así que volvamos a nuestros proyectos pre comp y arreglemos eso. Dado que toda esta escena está en tres espacios D, necesitamos asegurarnos de que todas las nuevas capas dentro esta pre comp también sean tres capas D. Entonces ahora, cuando revisemos la escena principal o veamos esta parte de animación en la master comp, todo quedará genial. Entonces ahora es un buen momento para guardar todo el progreso y ver la animación con la voz en off para ver si el tiempo está Tu gato podría hacerlo. Con un punto, obtienes una visión clara y cristalina de todo lo que tu equipo está trabajando en todos tus proyectos, todas tus tareas, todo en un solo lugar. Necesito el pleno pide, todo en un solo lugar. Bien. Entonces ahora entiendo que en este momento, toda esta animación de flujo de demostración debería terminar en el segundo 27 Mark. Eso significa que tengo unos segundos para crear el resto de la animación de este flujo de demostración. Ahora, entremos a la escena pre comp. En esta línea de tiempo, el flujo de animación demo debería terminar en la segunda marca de 16. Diciéndote esto, para que entiendas que los códigos de tiempo pueden ser diferentes en cada pre comp, y eso es porque la pre comp en la que estamos trabajando en la línea de tiempo comienza en el segundo 11 en la comp maestra. Y dentro de esta pre comp, empezamos a animar desde la segunda marca cero Por lo tanto, aquí vemos un código de tiempo diferente. Nuestro punto final en la línea de tiempo dentro de esta pre comp es la marca de 16 segundos, no la marca de 27 segundos, como en la comp anterior donde se ubica la escena para pre comp y a partir de la segunda 11. Entonces, cuando ingresemos a la precomp del proyecto, el código de tiempo de finalización volverá a ser diferente. Aquí está en la segunda marca de nueve. Eso es porque la animación aquí comienza desde la segunda marca cero, y no desde la segunda marca de siete, ya que la precomp del proyecto comienza en la escena cuatro precomp Así que no pienses que estás cometiendo un error. Yo en el master comp, el timing muestra algo diferente desde dentro de tu escena precomp, confía en la posición del indicador de tiempo Por eso es importante colocar el indicador de tiempo en el momento correcto en la comp maestra y luego no moverlo cuando ingreses a los precomps Esto es muy importante de entender, especialmente en este tipo de proyectos, ya que la creación de animaciones de flujo de demostración se puede estructurar a partir más de una pre comp que no inicia desde el mismo punto en el tiempo. Bien, volvamos al proyecto. Ahora alejemos el zoom, y teniendo en cuenta que la animación debería terminar en la segunda marca de nueve en esta línea de tiempo, comencemos a trabajar en la siguiente parte de animación en este flujo de demostración. Esta vez, parémonos en el punto en el tiempo donde termina la introducción de las capas de tareas y llevemos el termina la introducción de las capas de tareas y llevemos ícono de casilla de verificación verde para que podamos comenzar a crear la animación de casilla Como puedes ver, tenemos dos capas creando el diseño de checkbox Por lo tanto, asegúrate de seleccionarlos ambos y luego pegarlos en la primera precomp de proyectos Ahora vamos a traerlo para comenzar desde aquí y colorearlo en verde. Y ahora necesitamos cronometrar la animación de introducción de la casilla de verificación junto con las capas Podemos iniciar la animación checkbox justo después de la introducción de las capas de tareas Entonces, quedemos aquí por ahora. Y ahora, como sé que voy a necesitar tener un par de casillas de verificación en la escena, preferiré precomponer estas dos capas y crear la animación dentro, para poder duplicar fácilmente la precomp y extenderla por toda esta Podemos llamarlo tarea hecha o casilla de verificación. Solo asegurémonos de sacar la nueva precomp de la carpeta de la pantalla Aparece aquí porque cuando creamos esta precomp, uno de los precomps dentro de esta carpeta Todo bien. Y ahora vamos a etiquetarlo en verde e ingresarlo. Y ahora antes de comenzar a animar, ajustemos el código de tiempo de inicio de precomp para comenzar desde cero No está en cero porque cuando precomponíamos las capas, estábamos en la segunda marca de cinco. Todo bien. Y ahora como los íconos son demasiado pequeños, escalemos estas capas. Podemos establecer la escala a 300, genial. Y ahora vamos a colocarlo en el centro de la comp. Podemos usar la herramienta de alineación, asegúrese de establecer la alineación a la composición. Creo que podemos establecer la escala en 500. Eso es mejor. Por último, vamos a colapsar las capas. Impresionante. Y ahora antes de animarlo, convertiremos las capas en tres capas D. Como sabemos que necesitan ser presentados en una escena de tres D, y luego vamos a presentados en una escena de tres D, ajustar el tamaño de la comp para que se ajuste a las capas en la comp, dejar algo de espacio libre para que podamos crear alguna animación de popping agradable Todo bien. Y ahora vamos al inicio de la línea de tiempo y creamos una animación de popping de diez fotogramas de duración para las dos capas Creo que podemos hacerlo escalar más en medio de la animación. Se ve mejor. Ahora podemos retrasar tres fotogramas el icono V para hacerlo un poco más interesante. Creo que es demasiado. Vamos a llevarlo un fotograma hacia atrás. Veamos cómo se ve eso ahora. Genial. Creo que se ve increíble. Y ahora podemos volver a la escena y cronometrar esta animación con el resto de la escena. Primero, podemos colapsar la precomp y convertirla en una capa de tres D. Ahora, parémonos en el punto donde terminó la animación y ajustemos el tamaño de la precompilación para que se ajuste a la casilla de verificación de la tarea Podemos establecer la escala a 30. Y ahora vamos a moverlo al lugar correcto. Presionemos Cutrel o Command Shift H para ocultar las guías de capa para que podamos ver lo que estamos haciendo Genial. Y ahora vamos a tiempo esta animación con la escena. Podemos iniciar la animación de checkbox desde aquí. Genial. Y ahora vamos a guardar el proyecto antes de seguir adelante. Ahora podemos cerrar todos los precom no relevantes y comenzar a ajustar el movimiento en cada parte de animación de esta animación de flujo de demostración Como puede notar, hasta ahora, no facilitamos fácilmente ninguno de los fotogramas clave Cuando se trabaja en escenas largas que incluyen algunas partes de animación, es mejor enfocarse primero en crear la animación inicial y asegurarse el tiempo sea bueno en lugar finalizar cada fotograma clave que creamos para las capas de la Ten en cuenta este método cuando estés trabajando en after effects. Ahora, volvamos a la escena principal y comencemos a ajustar primero todos los fotogramas clave que creamos ahí. Asegúrate de que no haya ninguna capa seleccionada y presiona para ver todos los fotogramas clave que tenemos aquí Ahora, comencemos a trabajar en la primera parte de la animación, que es cuando comienza la animación dividida. Primero tratemos del movimiento principal que ocurre aquí, que es la rotación del nulo que gira todas las pantallas. Asegurémonos de ajustar la velocidad de los fotogramas clave de rotación al 75% En el editor de grafos, se ve así. Veamos ahora algunas veces la animación y veamos cómo se siente eso. Creo que podemos hacer que la velocidad 85% para conseguir un movimiento un poco más ágil Bien, creo que se ve mejor. Ahora, vamos a tratar con el movimiento de bajar. Quiero que esta capa empiece a subir rápido y desacelerar hacia el final. Como puedes ver, esto crea una colisión de la pantalla del proyecto con la pantalla detrás de ella. Entonces, seleccionemos el primer movimiento de la pantalla de proyectos pre comp y asegurémonos de que comience lento y gane velocidad hacia el final, lo opuesto al movimiento descendente del nulo. Esto creará una mejor sincronización de velocidad entre las dos animaciones. Ahora podemos hacer que la pantalla del proyecto se mueva más rápido en medio de la animación, si queremos, ajustando la velocidad de salida. Mientras lo hago, me aseguro de verificar el tiempo para que las comps no colisionen Genial. Entonces veo eso ajustando la velocidad de esa manera. Se puede ajustar a la animación. Entonces, en este punto, podemos seleccionar todos los fotogramas clave de la pantalla del proyecto y facilitarlos todos fácilmente y luego crear la misma velocidad para toda la animación. Antes de seguir adelante, comprobemos que no tenemos esa colisión ocurriendo. Bien, creo que todo se ve genial. Y ahora podemos pasar a lidiar con la siguiente parte de animación, que es la animación del resto de pantallas. Primero, seleccionemos todos los fotogramas clave, los facilitemos, y luego en el editor de grafos, asegurémonos de tener una velocidad similar a la que creamos para la animación nula, que en nuestro caso, que en nuestro caso, el porcentaje de influencia debería estar alrededor del 85% tanto para la velocidad entrante como para la de salida Veamos cómo se ve todo junto. El movimiento de bajar se ve un poco raro, en mi opinión. Entonces, ajustemos la velocidad de esta animación de manera similar a como lo hicimos para el resto de la animación. Me encanta cómo se siente la moción en este momento, pero como pueden ver, volvimos el problema de la colisión. Entonces, en ese caso, podemos quedarnos aquí en medio de la animación de la pre comp del proyecto y asegurarnos de mover la capa sobre su eje de posición Z. Mi objetivo es llevar esta capa un poco más lejos de la capa detrás de ella. También podemos sacarlo a colación un poco. Y ahora acerquemos el zoom y verifiquemos si tenemos que volver a ocurrir esa colisión. Todo bien. Veo que todo se ve bien, y ya estamos listos para seguir adelante. En este punto, entremos la pre comp de pantalla del proyecto y abramos todos los fotogramas clave en todas las capas para ver qué podemos ajustar aquí Entonces, en este caso, ya nos ocupamos la animación de los cuadros del proyecto, pero podemos eliminar los fotogramas clave anteriores en la segunda parte de las capas de los cuadros de tareas Todo bien. Y ahora vamos a ir y venir en la línea de tiempo para ver si todo sigue bien después de eliminar estos fotogramas clave No deberíamos tener ningún problema, pero aún así vale la pena comprobarlo. Todo bien. Y ahora tratemos con los fotogramas clave que aún no hemos ajustado. Podemos comenzar por flexibilizar los fotogramas clave de esta capa. Para ver qué capas estamos seleccionando, recuperemos las guías de capas usando Alright Y ahora vamos a facilitar fácilmente estos fotogramas clave y luego establecer la velocidad en 85% Eso se ve bien, pero creo que la animación outtro de esta sección está sucediendo demasiado rápido. Así que hagamos que dure un poco más para que la animación sea más lenta. En nuestro caso, podemos estar en los segundos cinco y cinco fotogramas y traer el último fotograma clave El movimiento todavía se siente súper rápido, en mi opinión. Entonces hagamos que esta animación dure exactamente 1 segundo. Entonces, si la animación comienza a los 4 segundos y 22 fotogramas, pasemos a 5 segundos y 22 fotogramas y traemos aquí el último fotograma clave Veamos cómo se ve eso ahora. Apenas puedo ver algo porque las otras capas ya están entrando en escena. En ese caso, aislemos solo la capa de caja blanca para enfocarnos en su movimiento. Bien. Creo que ahora se ve mucho mejor. Con eso hecho, ajustemos duración de la animación de introducción para todas las capas que deben ingresar a la escena después de la primera parte de animación Dado que hicimos la animación outtro de la sección anterior pasado 1 segundo, eso significa que también necesitamos hacer la animación de introducción de la nueva sección dure 1 Entonces, parémonos, nuevamente, en los segundos cinco y 22 fotogramas y traemos aquí el último fotograma clave de esta capa A continuación, tenemos que hacer lo mismo para el resto de las animaciones. Para estas dos capas, ambas comienzan en el segundo cuatro y 25 fotogramas, lo que significa que tenemos que ir al segundo cinco y 25 fotogramas y mover los últimos fotogramas clave aquí También hagamos que la introducción de la lista de tareas dure por 1 segundo Y, por supuesto, no olvidemos iniciar la animación de checkbox desde aquí también Genial. Una vez hecho esto, comencemos a facilitar los fotogramas clave Comenzando con los fotogramas clave de posición para estas tres capas, establezca la velocidad en 85% Eso se ve bien. Ahora, hagamos lo mismo con las capas de tareas. Perfecto. Como sabemos que toda esta parte de la animación debería terminar alrededor del segundo nueve, podemos ver que tenemos mucho tiempo para llegar a ese punto. Así que hagamos un buen desplazamiento entre las capas de tareas para llenar el espacio libre. No agregue demasiado retraso entre las capas porque todavía necesitamos unos segundos para la animación de casilla de verificación verde Dicho esto, llevemos esta precomp para comenzar una vez que la última capa de tarea termine su animación Bien, ahora vamos a duplicar esta precomp y colocar la nueva casilla de verificación debajo de la segunda tarea Para que sea más interesante, comencemos este en el segundo siete. Todo bien. Una vez que hayamos ajustado los fotogramas clave, volvamos a la compilación maestra y previsualicemos la animación con la voz en off para asegurarnos todo se hunda perfectamente. Al podría hacerlo. Con un punto, obtienes una visión clara y cristalina de todo lo que tu equipo está trabajando. Todos tus proyectos, todas tus tareas. Todos. Con un punto, obtienes una visión clara y cristalina de todo lo que tu equipo está trabajando, todos tus proyectos, todas tus tareas, todo en un solo lugar. Necesito la imagen completa. que la siguiente escena debería comenzar aquí. Entonces, para evitar tener un fotograma estático, volvamos a la escena y agreguemos otra animación de checkbox verde para la tercera tarea, solo para llenar el espacio vacío Asegúrese de que tenga el mismo retraso que la segunda casilla de verificación. Genial. Ahora que hemos terminado de crear la parte más compleja, que es la animación de flujo de demostración, podemos volver a la escena y agregar algunos movimientos de cámara interesantes para que coincidan con la animación de flujo de demostración. Pero en lugar de animar la propia cámara, animemos la precomp de pantalla del proyecto porque no quiero interferir con la animación de cámara existente Y también quiero mostrarte una manera más fácil de crear movimientos como cámara sin realmente animar la cámara Dicho esto, comencemos. Primero, como la precomp ya tiene fotogramas clave, crearemos un nuevo objeto nulo y padre la precomp De esa manera, tendremos una capa limpia con la que trabajar. Entonces, crea un nuevo objeto nulo y llévalo por debajo de la capa de la cámara. Comencemos este nulo en la marca de 12 segundos y renombrémoslo a nulo pantalla dos. Muévete. Ya que controlará el movimiento de la precomp nombrada escena dos proyectos Ahora, convierta el nulo a una capa de tres D y colóquelo en la misma posición que la precomp de la pantalla del proyecto Se pueden copiar los valores de la precomp al nulo. Si cambias a la Vista personalizada uno, verás que el nulo se coloca exactamente donde está la precomp Perfecto. Ahora podemos padre de la precomp al nulo Antes de hacer eso, movamos estas dos capas aquí arriba y cerremos la capa de la cámara. Genial. Ahora, padre la segunda parte de los proyectos precomp al nulo Con eso hecho, ahora podemos controlar esta precomp usando el nulo sin interferir con los fotogramas clave que ya están en la precomp Todo bien. Vamos a crear un ángulo interesante. Primero, cree un fotograma clave para la rotación X en los segundos 12 y 22 fotogramas Después mueve 1 segundo hacia adelante y gira la precomp a alrededor de 25 grados. A continuación, volver al inicio de esta animación. Presione P para revelar la propiedad position y crear un fotograma clave con el valor actual Mueva 1 segundo hacia adelante y acerque el nulo a la cámara. Una vez hecho esto, facilita los fotogramas clave y ajusta la velocidad en el editor de gráficos a alrededor del 85% para el movimiento entrante y saliente Genial. Ahora, veamos cómo se ve eso. Creo que se ve genial, pero en mi opinión, deberíamos comenzar esta moción un poco antes. Digamos a partir del segundo 12 y diez fotogramas. Abramos los fotogramas clave de la precomp y cronometremos la animación nula para que comience desde la mitad de la animación precomp Bien, creo que ya estamos bien. Pero como habrás notado, podemos ver la siguiente sección en la parte inferior. Ingresemos a la precomp y arreglemos eso. Primero, abra los fotogramas clave de la caja blanca principal y párese en el primer fotograma clave Sólo entonces baje la capa un poco más. Ahora, vuelve a la escena y revisa. Eso se ve mejor. Creo que también podemos retrasar ligeramente la animación de casillas de verificación Posteriormente agregaremos una animación de cursor a esta escena. Y me gustaría tener algunos fotogramas libres para crear ya sea una animación de introducción para el cursor o posiblemente una animación de Zoom en la tarea con la casilla de verificación Dicho esto, entremos a la precomp y movamos los tres precomps de checkbox para comenzar desde los segundos siete Perfecto. Ahora, volvamos a la escena y en ese momento exacto, acerquemos aún más el nulo a la cámara para que podamos ver de cerca las tres primeras tareas. También podemos jugar con la rotación para obtener un ángulo más interesante. Simplemente no te olvides del texto anterior. Trate de no llevar la pantalla de la interfaz de usuario demasiado lejos en esa área. Genial. Ahora ajustemos la velocidad a alrededor del 85% para esta animación también. Cuando hagas eso, asegúrate de ajustar ambas propiedades. En este caso, echo de menos la rotación. Así que voy a facilitar fácilmente los fotogramas clave nuevamente para restablecer la flexibilización y luego ajustarla correctamente Una vez hecho eso, veamos qué tenemos. Uh, se ve genial. Para agregar algo de movimiento suave a la escena, podemos pararnos un poco después de la escena, debemos terminar y acercar ligeramente la cámara a la pantalla de la interfaz de usuario. Ese es un gran ejemplo de por qué es mejor usar un objeto nulo para ángulos complejos en lugar de luchar directamente con la cámara. Siempre puedes quedarte con la cámara para movimientos más simples. Creo que podemos acercarlo aún más. Volvamos a ver. Bien, creo que se ve genial. Ahora volvamos a la comp maestra y la previsualicemos con la voz en off Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas pide, demasiadas. Antes de que te des cuenta, estás gimiendo de costo buscando Met one point Punto. La plataforma que hace que la gestión de proyectos sea tan simple que incluso tu gato podría hacerlo. Con un punto, obtienes un Crist Sí. Todo proyecta. Todas tus tareas en un solo lugar. El cuadro completo? Perfecto. Parece que todo está sincronizado. Entonces encontremos el punto en el tiempo para iniciar la animación outtro para toda la escena A partir de la locución, parece que esto debería comenzar alrededor del segundo 27. Quedémonos aquí, luego entremos en escena, y te mostraré cómo crear una animación de outtro simple que transición perfecta a la siguiente escena con un corte de fósforo Primero, necesitamos ajustar el último fotograma clave de la cámara para que termine aquí Ahora, mueve 1 segundo hacia adelante y empuja la cámara hacia atrás. Et escala el panel para mayor comodidad. Ahora, ve al inicio del Outro y abre los fotogramas clave nulos, también Crear fotogramas clave con los valores actuales para ambas propiedades, ya que no queremos que cambien hasta este punto Luego mueve 1 segundo hacia adelante y ajusta el nulo para que la pantalla de la interfaz de usuario se alinee muy bien con el centro Podemos empujar la cámara aún más atrás y levantarla ligeramente. Genial. Ya casi estamos ahí. Desde que movimos la cámara hacia atrás. Ahora podemos ver algunas de las capas de animación anteriores. Para solucionarlo, todo lo que necesitamos hacer es encontrar el punto en la línea de tiempo donde estamos 100% seguros de que esas capas ya no son necesarias. En este caso, es cuando nuestro primer nulo termina su animación. También podemos recortar este nulo hasta el final de su animación. Ese es el lugar perfecto para recortar el resto de las pantallas que fueron criadas a este nulo Así que selecciónalos todos y presiona Alt soporte derecho para recortar. Impresionante. Con eso hecho, volvamos a nuestra animación outtro En este punto, podemos comenzar a ajustar el movimiento. Primero, selecciona el objeto nulo y presiona U para asegurarnos de que no nos perdimos ningún fotograma clave. Genial. Ahora, selecciona todos los fotogramas clave y presiona F nueve o F y F nueve si estás en una Mac A continuación, abra el editor de gráficos de velocidad y ajuste la velocidad más cerca del 95%. Estamos haciendo esto porque queremos crear esa transición de corte coincidente. Y para que funcione, el movimiento necesita alcanzar un pico muy rápido. Ahora, párate en el punto la gráfica donde el movimiento es más rápido. Después vuelve a la comp maestra y recorta la precomp hasta este punto exacto De esta manera, la siguiente escena que crearemos continuaremos sin problemas el movimiento. Más sobre eso en la siguiente lección. Por ahora, volvamos a la escena y ajustemos su duración. No lo recorte demasiado cerca del final del movimiento outtro. En cambio, mueve 1 segundo hacia adelante y recorta la línea de tiempo hasta ese punto. Genial. Una vez hecho esto, ingresa a la pantalla pre comp. Sólo para verificar dos veces, no nos perdimos nada. Aquí todo se ve bien y no necesitamos recortar esta línea de tiempo. Entonces, sigamos adelante. Ahora podemos limpiar un poco las cosas, cerrar los precom innecesarios, luego volver a la master comp para prepararnos para animar la Antes de concluir, organicemos también el proyecto moviendo la precomp de tarea realizada a la carpeta precomps Haz lo mismo con la precomp Cat Jeff. Una vez hecho eso, guarda el proyecto. Y con eso, hemos terminado esta lección. Y al siguiente completaremos la transición de corte de coincidencia y comenzaremos a construir la siguiente animación de flujo de demostración. Va a ser una buena. Entonces nos vemos ahí. 18. Construcción de la plantilla de animación del título: Regresa. Comencemos la lección yendo al videoboard y comprobando qué es lo siguiente que tenemos que hacer Como puedes ver, ahora necesitamos crear la animación Title. Esta animación de título va a aparecer en las siguientes escenas lo largo del proyecto cada vez con un texto diferente. Como pueden ver, también lo tenemos aquí. Todas las preguntas del guión se presentarán de manera similar. En la última parte, esta animación de título va a ser como nuestra primera animación de título en la apertura de este video. Bien, entonces ahora después de que sepamos que vamos a tener un par de animaciones del mismo título, podemos estructurarlo de alguna manera, así será fácil para nosotros duplicarlo y simplemente cambiar el texto Con eso en mente, vamos a crear una nueva composición para la primera animación de título. Vamos a llamarlo Título principal uno. Asegúrate de cambiar la resolución a Full HD y comprueba que el resto de los ajustes estén bien. Genial. Entonces ahora seleccionemos la herramienta de texto y vayamos al guión para copiar el texto para la primera animación del título. En nuestro caso, es esta pregunta. Volver al proyecto. Pegar el texto y ajustarlo. Primero, asegúrate de centrar el párrafo. Y ahora veamos qué tamaño puede funcionar bien aquí. Creo que 150 es genial. A continuación, elija el peso en negrita para la fuente, y luego alineemos la capa con el centro de la com. Por último, podemos centrar el punto de anclaje. Para ello, mantenga presionado el comando del controlador y haga doble clic en la herramienta AnchorPoint Genial. Y ahora volvamos a cambiar a la herramienta de selección y hacer que esta composición sea un poco más interesante. Primero, podemos traer la animación de fondo degradado que creamos al inicio del proyecto. Y ahora quiero mostrarte algunos trucos básicos que puedes hacer para que el degradado se vea un poco diferente al resto de escenas de este proyecto. Puede ser una buena idea porque podemos decidir que el fondo de las animaciones del título se verá un poco diferente al resto del proyecto para hacerlo un poco más interesante. Derecha. Entonces, el primer truco que me encanta hacer cuando tengo animaciones de degradado es agregar el efecto de invertir. Ahora, puedo cambiar los canales aquí para obtener algunas variaciones interesantes para el gradiente. Todo bien. Por ahora, digamos que vamos con luminancia. Si acercamos el zoom, podemos ver los píxeles que hacen que el degradado se vea de baja calidad. Para solucionar esto, podemos agregar el efecto Fast booxplur. Y luego asegúrate de establecer el radio de desenfoque en algún número alto. Creo que 20 es suficiente en nuestro caso. A continuación, para mejorar el aspecto, también podemos agregar el efecto de matiz y saturación y subir la saturación maestra a algún número más alto para obtener una apariencia interesante para el degradado. Como puedes ver, crea bonitas partes de contraste en el degradado. Y ahora, si quieres cambiar el color del degradado, puedes jugar con la propiedad master hue. Pero si quieres tener un control completo de los nuevos colores, puedes agregar el efecto toner. Ahora vamos a eliminar el efecto invertido para que podamos ver qué podemos hacer con el efecto toner con nuestros colores originales. Todo bien. Entonces primero, para tener el control de más tonos en nuestro degradado, podemos cambiar los tonos a Pento Ahora tenemos cinco tipos de color que podemos controlar. Entonces ahora podemos llevar la paleta de colores a la comp y comenzar a ajustar los diferentes tonos que ahora tenemos. Digamos que quiero que este degradado se vea más morado, así que empezaré a escoger los colores morados. Te estoy mostrando estos trucos porque quiero que sepas que puedes tener un control completo de los colores de tu fondo degradado, ya sea que lo renderices tú mismo o descargues alguna animación de degradado de Internet. A veces nos encanta el movimiento del degradado, pero no los tenemos en los colores precisos que necesitan para adaptarse a la paleta de nuestro cliente. Entonces ahora ya sabes cómo puedes ajustar cualquier gradiente para que se ajuste a las necesidades de tu proyecto. Todo bien. Entonces con eso explicado, eliminemos el efecto toner y sigamos ajustando un poco más nuestro fondo degradado. Si aún puedes ver los píxeles, puedes escalar el radio de desenfoque. Y también saber que el orden de los efectos también puede afectar el aspecto del degradado. Como puede ver, tener el efecto de desenfoque bajo el efecto de matiz hace que el degradado se vea un poco mejor. Bien, entonces ahora cuando estamos bien con el aspecto de la comp del título, podemos empezar a animarlo Hay infinitas formas de hacerlo, pero quiero mostrar cómo puedes hacer que tu proyecto se vea bien, incluso con una animación muy simple. Primero, abramos la escala para ambas capas. Ahora pongamos la báscula a 200. Podemos establecer la capa de texto en 400 para obtener un movimiento un poco más interesante. Ahora, cree un fotograma clave al comienzo de la línea de tiempo. A continuación, vayamos 1 segundo adelante y llevemos la báscula de nuevo a 100 para ambos. El texto parece demasiado grande. Vamos a establecer la escala a 90. A continuación, facilitemos fácilmente los fotogramas clave y fijemos la velocidad para ambos en alrededor del 95% El objetivo es crear un movimiento súper ágil. Veamos cómo se ve eso. Todo bien. Eso se ve bien por ahora. Entonces ahora creamos la intro para el título Ahora vamos a crear el Outro. Pero antes de eso, vayamos al videoboard y verifiquemos cuánto tiempo debería durar esta animación Comienza en los segundos 27 y 15 cuadros, y ahora veamos dónde termina en los segundos 29 y diez fotogramas. Eso significa que tenemos un poco más 2 segundos para esta animación. Así que ahora volvemos al título comp. Vamos a crear una breve pausa para la animación para que el espectador pueda leer el texto. Hagamos que la pausa dure diez fotogramas. Entonces ahora vamos a crear un fotograma clave con los mismos valores aquí. Entonces movamos 1 segundo hacia adelante y copiemos aquí los primeros fotogramas clave Ahora, tenemos que asegurarnos de que la moción sea similar a la intro Como puedes ver, no lo es. Así que vamos a facilitar fácilmente los fotogramas clave de salida para restablecer la velocidad y luego ajustarla para que sea Veamos cómo se ve eso. Creo que no hay tiempo suficiente para leer el texto. Hagamos que la pausa dure cinco fotogramas más. Este será el punto en el que terminaremos la animación para conseguir una bonita transición de match cut que pueda caber en casi todas las escenas. Todo bien. Y ahora agreguemos un pequeño detalle a la animación para acercar el foco del espectador a la palabra importante de este texto. En mi caso, quiero agregar una bonita animación de trazo debajo de la palabra. Déjame mostrarte a lo que me refiero. Primero, asegúrese de que no haya capas seleccionadas. A continuación, seleccione la herramienta Pluma. Ahora, asegúrate de desactivar el color de relleno y activar el color del trazo. Para el color del trazo, llevemos la paleta de colores a la comp y decidamos usar algún color brillante para que esté en alto contraste con el fondo para que podamos verlo claramente. Bien. Ahora, eliminemos la paleta de colores y creemos una línea debajo de la palabra completa para el ancho del trazo. Podemos dejarlo en 20. Ahora vamos a crear un punto adicional en el camino y sacarlo a colación. Entonces vamos a curvarlo y ajustar los mangos para obtener una bonita línea redondeada. Vamos a bajarlo un poco. Genial. Ahora cambiemos el nombre a trazo y comencemos a animarlo. Y lo haremos usando el efecto de ruta de recorte. Por ahora, vamos a estar en el segundo y crear un fotograma clave para la propiedad final Si desea que su trazo se mueva desde la otra dirección, puede abrir las propiedades del trazo y cambiar la dirección del trazado. Todo bien. Lo traeré de vuelta a como estuvo. Y ahora vamos a animarlo. En este punto en el tiempo, establezca la propiedad final en cero. Ahora pasemos al final del momento de pausa y llevemos el valor final a 100. Genial. Y ahora pongamos de pie cinco fotogramas después del inicio de la animación y creemos un fotograma clave para la propiedad start con el valor de cero A continuación, coloque cinco fotogramas después del final de la animación y establezca el valor inicial en 100. Ahora, tenemos una bonita animación de trazos. Hagamos que el trazo sea visible un poco más, y podemos hacerlo jugando con la velocidad de las dos animaciones. Primero, seleccionemos los fotogramas clave finales y hagamos que esta animación comience rápidamente Después de eso, hagamos que los fotogramas clave de inicio comiencen lentos. De esta manera, ajustamos el tiempo entre estas dos animaciones para hacer que el trazo sea visible por unos fotogramas más antes de que desaparezca. Genial. Así que ahora, una vez que hayamos terminado con la animación inicial de la animación del título, agreguemos un movimiento adicional de alejamiento suave a la escena para que no se vea estática. Déjame mostrarte cómo hacerlo rápidamente. Primero, vamos a crear una nueva capa de ajuste por encima de todas las capas. A continuación, le agreguemos el efecto de transformación. Ahora, vayamos al comienzo de la línea de tiempo y fijemos la escala en 120 y creemos un fotograma clave aquí Ahora, vayamos a un punto en el tiempo donde estamos seguros de que la animación ya debería terminar. En nuestro caso, podemos situarnos en la marca de tres segundos y ahora establecer la escala a 100. Entonces ahora si revisas la animación, verás que obtenemos un bonito suave movimiento de alejamiento, y la animación se siente mejor porque incluso en el momento de pausa, la escena se mueve. ¿Bien? Entonces con eso hecho, hemos terminado de crear la animación del título. Podemos activar la función de calidad y muestreo para obtener la mayor calidad para el gradiente MP. Para archivo tenemos aquí. Pasemos ahora al segundo cuatro y recortemos la comp a este punto en el tiempo. Volvamos a la master comp y traemos aquí la precomp del título Y ahora para obtener una transición genial de match cut, recortemos la precomp del título desde el punto en el tiempo donde la animación de introducción es súper rápida Para saber dónde está, seguro, podemos ingresar a la precomp y encontrar el punto en el tiempo donde la animación de una de las capas está a máxima velocidad En nuestro caso, está aquí en el fotograma 15. Podemos mover un fotograma hacia atrás y luego volver a la comp maestra y recortar la precomp hasta este punto en el tiempo Ahora bien, si ves la animación entre la última escena y el título, verás que tenemos una transición de match cut super cool. Genial. Entonces ahora vamos a recortar este pre cont desde el final, también en el punto en el tiempo donde los outtros a máxima velocidad para conseguir una transición de corte a la siguiente escena Impresionante. Entonces con eso hecho, ya estamos listos para comenzar a trabajar en la siguiente escena. Antes de hacer eso, te sugiero que guardes el proyecto para asegurar el progreso que has logrado hasta ahora. Todo bien. Y ahora volvamos al videoboard y veamos cuál es la siguiente escena que necesitamos crear Bien, entonces ahora, como puedes ver, necesitamos trabajar en la pantalla principal de la interfaz de usuario de la tarea. Por lo que vemos en el storyboard, podemos ver claramente que necesitaremos crear una breve animación de flujo de demostración Estoy hablando de crear una animación de introducción para el pop up que vemos aquí Para entenderlo mejor, abramos esta precomp de pantalla de interfaz de usuario y veamos qué tenemos ahí Bien, entonces aquí podemos ver el pop up presentando las subtareas para la tarea principal, que en este caso, es diseñar el nuevo dashboard. Lo sé porque lo puedo ver en el título de este pop up. Genial. Entonces, con eso en mente, vamos a crear una nueva comp para la nueva escena en la que crearemos esta animación de flujo de demostración. Llamemos a esta escena pre comp cinco. Asegúrate de que la configuración sea correcta y presiona Bien. Genial. Entonces aquí está la nueva escena pre comp. Y ahora vamos a arrastrar la pantalla de la interfaz de usuario de tareas pre comp a la línea de tiempo de la nueva composición de escena. Posteriormente, agregaremos aquí el texto y la animación del cursor. Pero por ahora, centrémonos en crear la animación de flujo de demostración. Lo primero que podemos hacer es seleccionar todas las capas aquí y colapsarlas. No estoy planeando animar la escena en un espacio de tres D, así que no voy a convertir las capas en tres capas D. Bien. Y ahora seleccionemos todas las capas relacionadas con el diseño pop up y precompongamos Ya que tenemos esta capa de sombra, es más fácil entender qué capas seleccionar, comenzando por esta y todo el resto de las capas anteriores. Puedes desactivar y activar la capa seleccionada para asegurarte de que la has acertado. Todo bien. Y ahora vamos a precomponerlos todos. Podemos llamar a esta pantalla precomp para pop up. Genial. Entonces ahora vamos a colapsar la precomp y asegurarnos de que el punto de anclaje esté en el centro. Impresionante. Y ahora apaguemos también el pop up en la capa de sombra, y comencemos a preparar el resto del diseño para la animación. En este punto, necesitamos entender qué capas debemos precomponer y demás. Y, por supuesto, todo depende de qué animación queramos crear aquí. En nuestro caso, lo más importante que hay que saber es que necesitamos crear una animación de clic para esta tarea, ya que el pop up que tenemos en el diseño se relaciona con ella. Pero antes de hacer eso, me aseguraré de que las cajas de tareas tengan un relleno blanco. Olvidé hacerlo en la fase de preparación en Illustrator. Pero está totalmente bien. Como ya dije, esto nos puede pasar a todos. Y es importante para mí mostrarte un flujo de trabajo realista. En tu caso, no necesitas hacer nada porque ya tienes mis archivos de Illustrator finalizados. Entonces aceleraré un poco este proceso, porque todo lo que estoy haciendo es simplemente encontrar las capas relevantes y asegurarme de establecer un color de relleno en blanco. Genial. Y ahora, después de guardar el archivo, volveré al proyecto y esperaré hasta que se actualice. Impresionante. Así que una vez que tenga todo actualizado, guardaré el proyecto, y podrás seguir adelante. Volvamos al videoboard y comprobemos cuántos segundos debería durar la escena Nos ayudará a entender dónde terminar la escena y cuánto tiempo debe durar la parte de animación y debe durar. Por lo que la escena comienza en los segundos 29 y 15 fotogramas, y termina en los segundos 38 y 28 fotogramas. Esto significa que tenemos un poco más de 7 segundos para presentar todas las animaciones que ocurren aquí. Entonces con eso en mente, ahora podemos colapsar la pre comp y comenzar a trabajar en la intro de esta pantalla Prefiero terminar primero la introducción, así que sé con certeza por dónde empezar la animación de flujo de demostración que tiene que venir después de la introducción Es mejor que crear primero el flujo de demostración y luego ajustar los fotogramas clave después de crear la introducción Genial. Entonces, como tenemos una animación Zoom in rápida sucediendo en el outtro de la animación del título, podemos crear una animación Zoom in rápida para la introducción de esta escena para obtener un corte de partido genial Transición. Así que vamos a crear una animación a escala para esta pre comp, a partir de una escala de 50. Y luego después de 1 segundo, no pongas la escala a 100 porque necesitamos algo de espacio para el texto, podemos establecerlo en 80. Genial. Con eso en mente, también creemos una animación de posición. Quiero que la pantalla esté aquí abajo. Podemos usar la cuadrícula de acción segura para asegurarnos de que no la estamos moviendo demasiado hacia abajo. ¿Todo bien? Ahora vamos a ajustar la velocidad, así tendremos este movimiento súper rápido en medio de la animación. Este será el punto en el que iniciaremos esta precomp. Ahora vamos a la Master Comp y traemos aquí la nueva escena. Ahora, entremos en escena y parémonos en el punto más rápido. Por último, volvamos al Master Comp y recortemos esta pre comp hasta este punto en el tiempo. Y ahora todo lo que tenemos que hacer es colocar la escena para comenzar justo después la animación del título y comprobar cómo se ve todo junto. Impresionante. Creo que el corte de cerilla funciona perfectamente. Ahora podemos entrar en escena y comenzar a animar la animación de flujo de demostración, comenzando justo después de la introducción Ingresemos a las tareas pre comp y comencemos a trabajar. Bien, así que lo que podemos hacer aquí es crear una bonita animación emergente para todas las tareas en la sección principal Entonces, a partir de este punto en el tiempo, crearemos un fotograma clave para la propiedad scale con el valor actual como siempre para tener todo organizado Etiquetemos estas capas en un color diferente. A continuación, vamos a mover 1 segundo y crear otro fotograma clave aquí Entonces, en medio de esta animación, vamos a escalarlos a todos. 120 se ve bien. Genial. Y ahora antes de ajustar los fotogramas clave, primero terminemos de animar y cronometrar toda la Entonces ahora, después de la animación emergente, quiero agregar una animación de casilla para algunas de las primeras tareas Y como tengo una animación de casilla de verificación lista en una precomp separada, ahora podemos eliminar estas capas de aquí Posteriormente, agregaremos la casilla de verificación pre comp que hemos preparado anteriormente Por ahora, vamos a crear la animación de clic para la tercera tarea. Pero en lugar de animar esta capa, usaremos un objeto nulo Y es porque el punto de anclaje en esta capa está centrado, y no quiero cambiarlo ni meterse con los fotogramas clave que ya tengo en esta capa. Déjame mostrarte a lo que me refiero. Así que ahora vamos a crear un nuevo objeto nulo y crear una pequeña configuración para la animación de clic. Trae el nulo para que esté en el área desde la que quieres que se active la animación de clic. Podemos cambiar el nombre el nombre de la capa que va a ser parentada a ella. En nuestro caso, es la capa con el número 100, así podemos llamarla nula 100. Una vez hecho esto, vamos a padre de la capa relevante a la nula. Y ahora a partir del segundo segundo, es decir, después de la animación emergente, vamos a crear una animación de escala descendente para el nulo Hagamos que dure 15 fotogramas. Bien. Así que ahora, una vez que tengamos la animación click, podremos recortar esta capa para comenzar y terminar de acuerdo a los fotogramas clave Posteriormente, podemos mover este nulo hacia atrás o hacia adelante en tiempo en caso de que queramos que la animación de clic ocurra en un punto diferente en el tiempo. Bien. Entonces con eso hecho, sigamos trabajando en la siguiente parte de animación, que es la introducción del pop up de sub tarea Primero, después de la animación de clic, debería aparecer la capa de sombra. Así que vamos a traerlo aquí. Y ahora vamos a crear un fundido largo de 1 segundo en animación usando la propiedad opacity Si la animación comienza en los segundos dos y 15 fotogramas, debe terminar en los segundos tres y 15 fotogramas. Bien. Y ahora, para que esto sea un poco más interesante, agreguemos también una bonita animación de desenfoque. Para esto, primero, vamos a crear una nueva capa de ajuste. Coloquémosla encima de la capa de sombra y moverla para comenzar desde donde comienza la sombra. A continuación, necesitamos hacer que esta capa de ajuste visible solo dentro de los límites de la forma principal de esta pantalla de interfaz de usuario porque no queremos que los activos fuera de esta área sean borrosos Solo necesitamos que el área de la pantalla esté borrosa. Entonces para hacerlo, simplemente podemos hacer la capa de ajuste, usar el Alfa de la caja principal. No olvides volver a la capa de caja de esa manera enmascaramos la capa de ajuste Bien. Así que ahora agreguemos el efecto de desenfoque de cuadro rápido a la capa de ajuste y creemos una animación para el radio de desenfoque. Si encendemos el fondo transparente, veremos que el desenfoque está cubriendo solo los límites de la pantalla de la interfaz de usuario, que es lo que queremos. Eso significa que en caso de que agreguemos algunos activos nuevos detrás de la capa de ajuste, solo desdibujará las partes detrás los límites de la forma de la pantalla de la interfaz de usuario. Bien. Voy a borrar la forma y vamos a animar el desenfoque Primero, podemos cambiar el nombre de la capa de ajuste para desenfocar. Ahora, establecemos el radio de desenfoque en cero en este punto en el tiempo y creemos fotogramas clave A continuación, movamos 1 segundo hacia adelante y pongamos el desenfoque a un número mayor. A lo mejor diez. Creo que eso es demasiado. Vamos a probar cinco. Sí, eso es mejor. Genial. Así que ahora, una vez que hayamos hecho eso, vamos a traer la precomp pop up aquí y crear una simple animación emergente para ello usando la propiedad scale Genial. Creo que se ve bien, y ahora podemos seguir adelante. Después de la animación emergente, necesitamos agregar una animación de casilla de verificación dentro de la precompilación emergente. Como ya tenemos una precomp animada lista preparada para ello, podemos hacerlo en un minuto Por ahora, centrémonos en mejorar el movimiento de los fotogramas clave que creamos aquí Pero antes de hacer eso, acabo de notar que la capa de ajuste no llega a la parte inferior de esta sección. Para solucionar este problema, rápidamente, podemos usar el canal Alfa de la caja principal de esta pantalla de UI para enmascararlo. Genial. Entonces ahora no vemos la parte inferior de la caja blanca de esta sección, y podemos pasar a mejorar el movimiento. Primero, comencemos con las capas de tareas. Hagámoslos explotar rápidamente desde el inicio de la animación. Noté que me perdí la primera tarea, que es la capa inferior aquí en el panel de capas. Déjame ajustar el movimiento aquí muy rápido. Es un buen ejemplo para estar siempre seguro que estás obteniendo todos los fotogramas clave que querías ajustar Bien. Con eso hecho, estoy contento con el movimiento, y ahora para que se vea un poco más interesante, voy a crear un desplazamiento de un fotograma entre los fotogramas clave para crear un buen retraso Veamos cómo se ve eso. Creo que podemos hacer más grande el retraso. Digamos, dos fotogramas compensados. Para esto, me colocaré dos fotogramas después de la primera tarea, fotogramas clave, y luego me aseguraré de que la segunda tarea comience a moverse a partir de ese punto, esta vez, usaré la nueva función de desplazamiento Así que me aseguraré de no seleccionar los fotogramas clave de la capa superior seleccionaré de la capa inferior porque quiero que el desplazamiento esté en la dirección a la derecha. Bien. Creo que se ve genial. Ahora vamos a ajustar la introducción para la siguiente parte, acuerdo con la animación de capas de tareas Con eso hecho, comencemos ahora a ajustar la siguiente parte de animación que tenemos aquí, comenzando con la animación de clic. Ahora vamos a ajustar la sombra y la animación de desenfoque. Hagamos que empiece rápidamente. Ahora vamos a tratar con la animación pop up. Podemos establecer la velocidad de los fotogramas clave de escala en 85% y ver cómo se ve eso Creo que se ve genial, y podemos pasar a la siguiente parte de animación, que comienza justo después de la animación pop up. Entonces, parémonos aquí e ingresemos a la precomp para agregar la animación de casilla de verificación que necesita estar Primero lo primero, vamos a acercar el zoom para que podamos ver qué estamos haciendo mejor. Y ahora en lugar de animar cada una de las casillas de verificación aquí, usaremos nuestra animación lista que preparamos antes Así que vamos a encontrarlo en la carpeta precomps y arrástrelo a la Ahora vamos a colapsar la precomp y escalarla. Podemos establecer la escala a 20. Ahora, coloquemos esta precomp al lado de la cuarta subtarea. Creo que podemos escalarlo un poco. Veamos cómo se ve eso. Pongamos la escala a 25. Genial. Así que ahora encontremos el momento adecuado para que comience esta animación. Esto tiene que suceder justo después de la animación pop up. Entonces, parémonos aquí y entremos en la precomp pop up. Ahora, mueve la animación de casilla de verificación para comenzar desde aquí. Impresionante. Y ahora vamos a duplicarlo y comenzar los nuevos 115 frames después. Ahora podemos etiquetar los pre comps en verde y finalmente traer el nuevo para la sexta sub tarea No creo que necesitemos crear más que eso, ya casi llegamos al límite de duración que necesitamos para ello. Con eso en mente, vayamos al master comp y veamos la animación mientras escuchamos la off para verificar si todo está perfectamente sincronizado antes de crear un Otro para Claro. Cada proyecto incluye tareas detalladas, subtareas y seguimiento del progreso en tiempo real, por lo que nada se desliza por las grietas Quiero ver quien bien, creo que se ve genial. Y ahora podemos empezar a pensar en el outtro de esta escena, que tiene que suceder en algún lugar alrededor de la marca de los 37 segundos Cuando volvemos a la escena, podemos ver que todavía tenemos mucho tiempo hasta llegar a ese punto. Ahora mismo, la animación que creamos se siente un poco aburrida. Así que aprovechemos esta oportunidad para agregar algunos movimientos agradables de acercamiento y alejamiento para que la escena se sienta más dinámica. También quiero cambiar la animación emergente que creamos para las cajas de tareas un poco más tarde en la línea de tiempo, ya que tenemos mucho espacio libre hasta que termine la escena Bien. Entonces con eso dicho, parémonos en la marca de los dos segundos en la línea de tiempo de la escena y llevemos la animación emergente de las capas de tareas para comenzar desde aquí Veo que me perdí crear un retraso entre la primera y las dos capas inferiores, así que moveré los fotogramas clave de la capa inferior , un fotograma hacia adelante Todo bien. Ahora seleccionemos todos los fotogramas clave de las capas de tareas e iniciemos esta parte de animación desde la marca de dos segundos Genial. Y ahora vamos a seleccionar la siguiente parte de animación y ajustar el tiempo en consecuencia. Pensándolo bien, comencemos esta animación parte 1 segundo después porque quiero dejar algo de espacio libre para una Zoom in o una animación de cursor en este momento. Una vez hecho esto, volvamos a la escena, parémonos en el segundo segundo, y comencemos a ajustar las propiedades de escala y posición hasta que consigamos algo que se vea bien. Mi objetivo aquí es crear un agradable Zoom en animación donde la sección de la lista de tareas aparecerá más cerca. El foco del espectador debe estar en esa zona en este momento. Solo estoy experimentando con diferentes valores para la escala y reposicionando la precomp, por lo que la lista de tareas se sienta más en Podemos activar la rejilla de acción segura para asegurarnos de que tenemos una composición equilibrada. Creo que se ve bien, pero la posición inicial de la precomp se puede ajustar un poco Vamos a moverlo ligeramente hacia arriba así creamos una diferencia mayor entre la primera y la segunda posición. No te preocupes por el texto que debería estar en la zona superior. Podemos colocar ese texto en la parte inferior en su lugar. Ahora, pongámonos de pie en el segundo fotograma clave y ajustemos el tamaño y la posición de la precomp nuevamente el tamaño y la posición de la precomp para que la animación Zoom in sea más notable Asegurémonos también de que la sección de la lista de tareas esté perfectamente alineada con el centro. Utilice las guías de rejilla seguras para la acción para verificar la alineación. En este punto de la línea de tiempo, los cuadros de tareas deben estar centrados exactamente de acuerdo con las guías. Un recordatorio rápido, este debería ser tu flujo de trabajo principal cuando trabajas en este tipo de proyectos. Primero, crea la animación esencial, luego mejora el movimiento. Después de eso, comprueba la sincronización de la animación con la voz en off. Y por último, agrega movimientos de estilo cámara en la escena para hacerla más interesante. Bien, ahora volvamos a la comp maestra y encontremos una escena con una capa de texto en su interior para que podamos copiarla y reutilizarla aquí Pega la capa de texto en la línea de tiempo y tráela desde el comienzo de la animación. Coloca esta capa debajo pantalla de la interfaz de usuario en algún lugar por aquí. Por último, vayamos al guión y copiemos el texto que necesita aparecer en esta escena. Copiaremos primero la primera parte de la oración. Ahora encontremos el lugar perfecto para el texto. Genial. Ahora, vamos a crear un ángulo agradable para la pantalla de la interfaz de usuario durante la parte donde aparece el panel emergente de la interfaz de usuario. Podemos comenzar a cambiar el ángulo desde el momento en que termina la animación de la lista de tareas y ver cómo se ve eso. Primero, crear fotogramas clave para ambas propiedades, escala y posición con sus valores actuales porque no queremos que la pantalla de la interfaz de usuario se mueva antes de este punto Eso nos da un momento de pausa. Hagamos que esta pausa sea más corta, por ejemplo, coloquemos los fotogramas clave en la marca de cuatro segundos Una vez hecho eso, decidamos dónde debe terminar el cambio de ángulo. Puede terminar justo antes de la animación de clic. Así que pasemos a ese punto de tiempo y ajustemos los fotogramas clave de escala y posición de la precomp Colócala para que aún tengamos algo de espacio para agregar la segunda parte del texto después Ahora podemos dividir la capa de texto en este momento y copiar la segunda parte del texto del guión. De vuelta al proyecto, peguemos el texto en la nueva capa de texto y lo movamos hacia arriba. Genial. Ahora vamos a expandir esta capa y encontrar un buen punto en el tiempo para crear otra animación de ángulo cambiante. Esta vez, crearemos una animación Zoom in en el área de subtareas dentro del panel de interfaz de usuario emergente Para hacer eso, seguiremos poniendo en escena sincronizado con la animación que ocurre dentro de la precompilación de la pantalla de la interfaz Hasta este momento, podemos mantener una pausa en la escena. Así que vamos a crear fotogramas clave con los valores actuales para ambas propiedades Luego mueve 1 segundo hacia adelante y crea una animación Zoom in ajustando las propiedades de escala y posición. Todo bien. Creo que se ve bien. Ahora podemos mejorar el movimiento todos los fotogramas clave que tenemos aquí Haremos esto usando el panel de velocidad de fotogramas clave. Un recordatorio rápido. No se pueden ajustar diferentes propiedades juntas usando el panel de velocidad. Entonces primero, hágalo para la propiedad position y luego repita el proceso para la propiedad scale. Vamos a establecer ambos a 85% de velocidad. Veamos qué tenemos. Se ve genial, pero creo que la animación de checkbox dentro del pop up debería comenzar un poco más tarde en la línea de tiempo Empecemos justo después de que termine la animación Zoom in. Así que quédate aquí, luego ingresa la precomp pop up y mueve los dos precomps a este punto Impresionante. Con eso hecho, volvamos al master comp y comprobemos la animación contra la voz en off Preste atención a cómo el VO indica dónde debe terminar esta escena. Imagen. Cada proyecto incluye Incluye tareas detalladas, subtareas y seguimiento del progreso en tiempo real Así que nada se escapa por las grietas. ¿Quieres? Todo se ve genial. Ahora podemos empezar a trabajar en la animación outtro para esta escena porque en este momento, la siguiente escena ya debería comenzar Primero, entremos en escena. Antes de seguir adelante, expandamos la capa de texto muy rápido. Ahora encontremos un buen punto en el tiempo para iniciar la animación outtro Creo que podemos iniciarlo a los 7 segundos y 20 fotogramas. Así que vamos a crear fotogramas clave en ese momento. Después, mueve 1 segundo hacia adelante. En la línea de tiempo y crear una animación de salida simple donde la pre comp se mueve hacia abajo, fuera del marco A continuación, entra en el editor de gráficos y establece la velocidad en 95% para hacer que el movimiento sea un poco más ágil Lo quiero de esta manera porque me estoy preparando para una transición de match cut a la siguiente escena. Pensándolo bien, creo que deberíamos dejar una pausa un poco más larga antes de que se mueva la pantalla de la interfaz de usuario. En mi opinión, el Otro comienza demasiado pronto después de la animación de casilla de verificación Cambiemos la animación outtro para comenzar a los 8 segundos. Genial. Ahora encontremos el punto más rápido en el movimiento Otro y en el cultivo master comp, el pre comp en este momento. Ahora volvamos a entrar en escena y recortar la línea de tiempo 1 segundo después de que termine la animación atro. No me gusta terminar escenas justo en la moción final. Siempre prefiero dejar 1 segundo de tiempo libre por si necesito hacer ajustes más tarde. Bien, con eso hecho, podemos pasar a la siguiente escena, que en nuestro caso, es otra animación de título Para hacerlo rápidamente, dupliquemos la animación del título que ya tenemos en la línea de tiempo y coloquemos justo después de la última escena. Lo bueno es que ya está recortado para adaptarse a la transición de corte de partido Pero si ingresamos esta precomp y cambiamos el texto, también actualizará el texto en la primera animación de título, ya que es la misma precomp, y eso no es lo que queremos arreglar Necesitamos duplicar la pre comp en el panel del proyecto. Después reemplazaremos la vieja pre comp en la línea de tiempo por esta nueva. Genial. Ahora ingresa la nueva precomp de título y cambia el texto dentro Como puede ver, el texto es más largo que el primero. Para solucionarlo, vamos a reducir el tamaño de la fuente. Alrededor de 100 se ve bien. Una vez hecho esto, no olvides agregar el trazo debajo de la palabra importante en el texto. En mi caso, lo colocaré aquí. Genial. Ahora reemplace la vieja pre comp en la línea de tiempo con esta nueva. De esta manera, mantenemos el recorte de la animación del título anterior pero con nuevo texto en su interior Y así, tenemos otra transición perfecta de corte a juego. Ahora estamos listos para pasar a la siguiente lección y comenzar a construir la siguiente escena. Pero antes de eso, arreglemos un último detalle. Si no te has dado cuenta, no tenemos los iconos de casilla de verificación que necesitan estar en la lista principal de tareas No necesitan ser animados. Entonces ingresemos a la pre comp pop up y copiemos la capa de icono de casilla de verificación desde ahí Ahora, vuelve a la pantalla de la interfaz de usuario de tareas pre comp y pega la capa en. Antes de pegar, asegúrate de estar en el punto en el tiempo donde todas las capas estén en su estado estático En nuestro caso, eso es al inicio de la animación. Bien, ahora coloca el ícono dentro de la primera tarea de la lista. Una vez hecho esto, duplicarlo y colocarlo en la segunda tarea. Perfecto. Ahora, como las tareas mismas tienen una animación emergente, queremos que las casillas de verificación se muevan con Así que asegúrate de formar cada casilla de verificación a su capa de tareas correspondiente Obtenga una vista previa de la animación para asegurarse de que funciona. Si una casilla de verificación no se mueve correctamente, probablemente la criaste a la capa incorrecta, simplemente la vuelves a ser padre a la correcta Haga lo mismo para el segundo icono de casilla de verificación. Bien, con eso hecho, hemos terminado esta lección Ahora puedes guardar el proyecto y cerrar todos los pre comps para mantener las cosas limpias. Deja solo el videoboard y el master comp abiertos. Y ahora estamos listos para pasar a la siguiente lección. Nos vemos ahí. Y antes comenzar a ver la siguiente lección, no olvides tomarte un descanso de diez minutos para refrescarte antes de continuar. Nos vemos en la siguiente. 19. Animación de la pantalla de la interfaz de usuario de contactos en 3D: Regresa. En esta lección, comenzaremos a trabajar en la pantalla de interfaz de usuario de contactos. Entonces lo primero es lo primero, veamos cuál debe ser la duración de la escena. Comienza en los segundos 38 y 28 cuadros, y termina en los segundos 42 y 18 cuadros. Eso significa que tenemos aproximadamente 4 segundos y algunos fotogramas para animar la escena Con eso en mente, ahora vamos a crear una nueva comp y llamarla escena seis. Asegúrate de que los ajustes sean correctos y pulsa. Bien. Genial. Y ahora llevemos la pantalla de interfaz de usuario de contactos a la nueva escena. Quiero animar la escena, similar a esta referencia. Eso significa que seguramente necesitaremos usar el espacio de tres D. Con eso en mente, ingresemos a la pre comp y primero seleccionemos todas las capas aquí y contrayéndolas, y justo después de eso, convertirlas todas en tres capas D. Genial. Y ahora comencemos a preparar esta pantalla de UI para la animación. Lo que quiero decir con eso es que podemos precomponer las capas relacionadas con cada sección Será mucho más fácil para nosotros a la larga. Entonces primero, podemos bloquear las capas que sabemos con certeza que no vamos a precomponer Ahora, vamos a seleccionar todas las capas de la sección principal y precomponerlas. Presta atención a que no estoy seleccionando las casillas de contacto. Eso es porque quiero que permanezcan afuera, así puedo animarlos sin meterse con capas que no van a ser Genial. Y ahora también vamos a seleccionar estas tres capas que pertenecen a la sección principal y cortarlas desde aquí, luego pegarlas dentro de la precomp Genial. Ahora volvamos a la escena principal y precompongamos las capas de la sección superior Ahora, tratemos con la acción de los contactos. Dado que hay un par de capas que pertenecen a cada caja de contacto, necesitamos seleccionar todas las capas relacionadas con esa caja de contacto y precomponerla Vamos a llamarlo pantalla cinco contacto uno. Podemos copiar el nombre y luego seguir precomponiendo el resto de las secciones de contacto y pegar el nombre para la Simplemente no olvides ajustar el número. Hagámoslo para el resto de los contactos. Impresionante. Con eso hecho, volvamos a encender todos los precomps, colapsarlos y convertirlos todos en tres capas D. Por último, centremos el punto de anclaje para todos ellos. Puede hacer clic en una precomp para asegurarse de que el punto de anclaje esté centrado Bien. Todo se ve genial, y ahora podemos guardar el proyecto antes de seguir adelante. Aprovechemos también esta oportunidad para organizar nuestro panel de proyectos. Abramos la carpeta Pantallas y arrastremos todos los precomps que creamos para esta escena en la anterior Dentro de la carpeta Pantallas, solo deben quedar los pre cooms de la pantalla principal de la interfaz Nada más. Para todos los demás pre com, podemos arrastrarlos dentro de la carpeta principal de precomps Genial. Y ahora estamos listos para comenzar a animar la escena Lo primero que podemos hacer es crear una animación de introducción para esta escena Como estamos tratando con tres capas D, podemos crear una nueva cámara de 35 MM en la escena y usarla para crear una agradable animación Zoom in para la introducción Al inicio de la animación, moveré la cámara hacia atrás. Eso es suficiente. Ahora, movamos 1 segundo hacia adelante y acerquemos la cámara a la pantalla de la interfaz de usuario. Tenga en cuenta que necesitamos ahorrar algo de espacio en el área superior del marco para agregar el texto que necesita estar en esta escena. Para mayor comodidad, podemos abrir la cuadrícula de acción segura del título y jugar con los valores de posición. Bien, creo que se ve bien. Ahora, parémonos en el segundo y comencemos a crear la animación de poppping out para los precomps de contactos Primero, necesitamos abrir la propiedad position y crear el primer fotograma clave aquí A continuación, vamos a avanzar 1 segundo y crear el mismo fotograma clave aquí también Después de eso, pongámonos en medio de la animación y acerquemos todos los precomps a la cámara Asegúrate de no establecer el valor manualmente una vez para todos los precomps, ya que ajustará también el resto de los ejes de posición, que no es lo que queremos Por lo tanto, asegúrese de ajustar el valor arrastrando el eje Z. Ahora movamos los precomps a la izquierda. Entonces cuando salgan, se colocarán en el centro de la comp. Sigue ajustando los valores de posición hasta que estén un poco más cerca de la cámara y bien centrados horizontalmente en el marco. Todo bien. Creo que se ve bien. Parémonos al comienzo de esta animación y ahora abramos la propiedad rotation para crear un bonito efecto de rotación durante la animación. En nuestro caso, utilizaremos el eje de rotación Y. Entonces primero, vamos a crear el primer fotograma clave con el valor de cero en este momento Entonces pasemos al segundo segundo y creemos aquí el mismo fotograma clave Ahora pongámonos en medio de la animación y comencemos a ajustar la rotación para cada uno de los precomps En este punto, solo estoy tratando de rotar cada precomp mientras mantengo un cambio de rotación similar a través de todas ellas. Eso significa que podemos establecer la rotación para la precomp superior en 30 Para el siguiente, ponlo en 20. El siguiente serán diez. El siguiente, podemos salir a cero. El siguiente será menos diez. Después de eso -20, y el final -30. La rotación se ve bien, pero como puedes ver, la precomp inferior se recorta en la parte inferior de la Entonces, estando parados en la mitad de la animación, ajustemos la posición para todos los precomps y moverlos un poco hacia arriba Impresionante. Así que ahora, una vez que hayamos creado la animación inicial, podemos seleccionar todos los fotogramas clave y facilitarlos fácilmente, luego ajustar su movimiento en el editor de gráficos Quiero que el movimiento comience rápido, luego disminuya la velocidad en el medio y gane velocidad hacia el final. Veamos cómo se ve eso. Todo bien. Creo que se ve genial. Pero en mi opinión, la animación es demasiado rápida por ahora. Así que volvamos a la línea de tiempo. Párese en los segundos tres, luego seleccione todos los fotogramas clave, mantenga pulsada la tecla Alt u opción y arrástralos desde el último fotograma clave hasta la posición del indicador de tiempo. Todo bien. Entonces ahora la velocidad es genial, y podemos crear un bonito desplazamiento entre los precomps para que se vea un poco más interesante Esta vez, usaré la nueva función de efectos posteriores para compensar fotogramas clave Entonces primero, escalemos este panel para que podamos ver todos los fotogramas clave Ahora, asegúrese de seleccionar los fotogramas clave de la capa desde la que desea que comience el desplazamiento En nuestro caso, quiero que la primera precomp superior inicie primero el movimiento Por eso seleccionaré todos los fotogramas clave de la capa inferior en el panel de capas en la composición Es la primera precomp superior, así que no te confundas. Bien. Y ahora voy a mover, digamos, dos fotogramas después de los primeros fotogramas clave y luego mantendré Alt y controlaré y moveré los fotogramas clave hasta que vea los siguientes fotogramas clave de precomp llegando a la posición del indicador Veamos cómo se ve eso. Bien, creo que se ve genial. Y ahora, después de que termine esta parte de animación, podemos pararnos en este momento y crear la animación atro para esta escena. Así que vamos a crear el primer fotograma clave para la posición de la cámara aquí, luego movamos 1 segundo hacia adelante Eso significa que tenemos que quedarnos en segundos cuatro y diez o 12 fotogramas. Ahora podemos llevar la cámara hacia atrás manualmente, o simplemente podemos copiar el fotograma clave de la cámara de primera posición y pegarlo aquí Impresionante. Y ahora vamos a establecer la velocidad para esta animación en 95% para que podamos crear una buena transición de corte de partido. Bien, creo que todo se ve bien. Lo único que necesitamos agregar aquí es una capa de texto que debería presentarse en esta escena. Para ello, entremos en una de nuestras escenas donde ya tenemos una capa de texto y la copiemos desde ahí para que podamos pegarla en nuestra nueva escena. Ahora entremos a la escena seis y peguemos aquí la capa de texto. Expande esta capa e iniciarla desde el inicio de la línea de tiempo. Después de eso, podemos ir al tablero de video para ver cuál debería ser el texto en esta escena. Bien, aquí está el texto. Entonces ahora vamos al guión y copiemos el texto relevante. Genial. Entonces ahora, una vez que lo hayamos hecho, agreguemos un movimiento de cámara secundario a la escena para que no se vea tan estática como lo es ahora mismo. Para ello, ingresemos a la precomp de contactos y creemos un nuevo objeto nulo que usaremos para crear el movimiento secundario de la cámara Primero, necesitamos convertirlo a una capa de tres DD. Ahora, asegurémonos de que el objeto nulo esté colocado en el centro de la comp, levémoslo hasta que se alinee con el punto central de la cuadrícula de acción segura Todo bien. Y ahora vamos a padre de la cámara a nuestro nulo y cambiemos el nombre del nulo a cámara nula. Genial. Así que ahora vamos al inicio de la línea de tiempo y creamos un fotograma clave de primera posición para el nulo Ahora vamos a pararnos en el punto en el tiempo donde ya terminó la escena corta, que en nuestro caso, es el segundo cinco. Ahora ajustemos el eje de posición Z para el nulo para que se mueva un poco más cerca de la pantalla de la interfaz de usuario. Pongámoslo a 600 y veamos cómo se ve eso. Creo que está demasiado cerca. Entonces, parémonos en el último fotograma clave y cambiémoslo a 400 Todavía podemos ver el contacto inferior recortado en la zona inferior del marco Para solucionarlo, podemos cronometrar el movimiento secundario de la cámara a la animación de los precomps de contacto Eso significa que podemos pararnos en medio de su animación apareciendo y ajustar la animación de la cámara secundaria en este momento Podemos sacar el nulo un poco. Veamos cómo se ve eso. Bien, creo que se ve bien, pero podríamos cubrir el texto en la escena principal después de crear esta animación Entonces volvamos a la comp de escena principal y veamos qué tenemos aquí. Sí, como pensaba, estamos cubriendo el texto, que no es lo que queremos. Entonces intentemos arreglarlo. Primero, podemos sacar un poco el texto y ver cómo se ve eso ahora. Veo que la pantalla de UI está casi tocando el texto, pero por ahora, dejémoslo como está, porque lo más importante es que podamos ver el texto con claridad. Entonces ahora, antes de adentrarnos demasiado en los detalles, primero comprobemos que la animación que creamos se está sincronizando con una voz en off, que por ahora es lo más importante a tratar antes de ajustar el Así que volvamos al master comp y llevemos la nueva escena a la línea de tiempo. Ahora asegurémonos de que la transición de corte de cerillas funcione correctamente. Para ello, necesitamos ingresar a la escena y luego a la precomp de pantalla de UI Ahora necesitamos pararnos en el punto en el tiempo donde la animación de introducción esté a máxima velocidad, que está en el fotograma 15 de esta línea de tiempo Ahora podemos volver a la comp maestra y recortar la pre comp a la posición de los indicadores de tiempo. Genial. Y ahora hagamos lo mismo para la animación outtro. Encontremos el momento en la animación outtro sea la más rápida Quedémonos aquí con el indicador de tiempo. Ahora volvamos a la comp maestra y recortemos la pre comp a la posición de los indicadores de tiempo. Impresionante. Con eso hecho, centrémonos ahora en ver la animación mientras escuchamos la voz en off para ver si tenemos todo sincronizado perfectamente Detrás, solo dirígete a la pestaña de tu equipo para ver la actividad de todos de un vistazo. Necesidad de caer Bien. Creo que la animación de Otro tiene que suceder más tarde. Debería ser en este momento. Entonces, parémonos aquí, luego extendamos la pre comp a la posición de los indicadores de tiempo. Después de eso, lleguemos a la animación Otro y asegurémonos de que comience a partir de este punto en el tiempo. Podemos hacer la animación outtro, comenzar desde el segundo cuarto exactamente solo para mantener una línea de tiempo más organizada Unos pocos fotogramas no afectarán demasiado la precisión del hundimiento Genial. Así que ahora vamos a encontrar el nuevo punto en el tiempo más rápido para la animación outtro, que está en algún lugar por aquí Ahora, vuelve a la comp maestra y ajusta la duración de la escena en consecuencia. Impresionante. Y con eso hecho, ya podemos entrar en escena y terminarla en el segundo seis, que es 1 segundo después de que termine la animación outtro. Genial. Entonces ahora, una vez que tengamos el derecho de hundimiento, podemos pasar unos minutos ajustando el aspecto de la escena, especialmente en el momento en el que pantalla de la interfaz de usuario casi cubre el texto Entonces primero, entremos a la pantalla de contacto pre comp y ajustemos el movimiento secundario de la cámara que tenemos aquí. Podemos comenzar ajustando el último fotograma clave. Vamos a establecerlo en 300, así la cámara estará un poco más lejos de la pantalla. Lo más importante es que sepas qué ajustar en caso de que tengas una situación similar en tus proyectos futuros. Solo llevaré el fotograma clave de posición de la cámara original final al segundo cinco Entonces tendremos una animación de outtro completa de 1 segundo. Ahora, será mucho más fácil pararse a mitad de la animación, que es a 4 segundos y 15 fotogramas. Entonces volvamos a la comp maestra y asegurémonos de que obtuvimos la pre comp en el punto correcto. Impresionante. Entonces ahora hemos terminado animar la escena de la pantalla de contactos Y ahora volvamos al tablero de video y veamos qué debemos hacer a continuación. Como puedes ver, tenemos otra animación de título que necesita comenzar después de la escena de contacto. Entonces volvamos al master comp y repitamos el mismo proceso que hicimos en la lección anterior. Primero duplica uno de los pre comps de animación de título en la línea de tiempo, y luego duplicarlo en el panel del proyecto para cambiar el texto sin afectar al anterior Voy a acelerar este proceso, y tú puedes seguir adelante. Y para terminar, claro, reemplazaremos entre los dos. Veamos cómo se ve eso. Bien, y con eso, hemos terminado esta lección. Ahora estamos listos para pasar a la siguiente donde comenzaremos a crear la escena más compleja de este proyecto. Va a ser súper interesante, así que te veré en la siguiente. 20. Creación de una animación de flujo de demostración compleja: Estoy de vuelta. En esta lección, comenzaremos a trabajar en la animación de flujo de demostración más compleja que tenemos en el proyecto. Tendremos que presentar la pantalla principal de mensajes transformándose en la sección de conversación privada Te enseñaré uno de los mejores métodos para lidiar con este tipo de situaciones donde tenemos muchas capas que necesitan estar transformándose en otras capas. Entonces comencemos. Primero lo primero, como solemos hacer, tenemos que comenzar por verificar cuál será la duración de la escena. En este caso, la escena inicia en el segundo 44, y termina en el segundo 50. Eso significa que en total, tenemos aproximadamente 6 segundos para animar toda la animación del flujo de demostración Con eso en mente, volvamos al master comp y cerremos todos los precomps relevantes que tenemos en el panel de composición. Genial. Y ahora, lo primero que tenemos que hacer antes de animar la escena es entender profundamente lo que tenemos que hacer en la animación de flujo de demostración Eso significa que tenemos que hacernos algunas preguntas importantes. Como ¿qué capas en cada pantalla de UI deberían aparecer o desaparecer? Qué capas se pueden transformar y qué capas deben salir del marco, qué capas deben presentarse en ambas pantallas y demás. Para responder a todas estas preguntas, es mejor abrir las dos pantallas de la interfaz de usuario y comenzar a investigar. En nuestro caso, la mayor parte de la acción será en la sección principal de la pantalla de mensajes. Necesitamos transformar los cuadros de chat en la lista para ser presentados en su segunda forma de diseño como se muestra en la escena de los segundos mensajes También podemos ver que el menú de la izquierda y el encabezado no cambian. Debemos tenerlo en cuenta. Nuestro enfoque principal estará aquí en la sección principal. Entonces ahora, una vez que entendamos lo que necesitamos hacer más o menos, podemos comenzar por crear una nueva composición que podamos llamar escena siete y comenzar a prepararla para la animación. Dentro de esa comp, intentaremos combinar las dos pantallas de la interfaz que necesitamos para crear la animación de flujo de demostración, que son mensajes y mensajes a precomps Empecemos por crear una nueva comp. Antes de seguir adelante, arrastremos rápidamente la nueva compilación fuera de esta carpeta. Y ahora llevemos la primera pantalla de UI a la línea de tiempo. Genial. Con eso hecho, quiero enseñarte el principal proceso de pensar cuando necesitas crear una transición para un montón de capas entre dos escenas. Ingresemos a la precomp y empecemos a trabajar, y te lo explicaré poco a poco paso a paso Lo primero que debes verificar es si esta escena estará animada en un espacio de tres D o no, porque si lo es, es mejor convertir todas las capas en tres capas D ahora antes de seguir adelante. En nuestro caso, no lo animaremos en un espacio de tres D, así que mantengámoslos como dos capas D. Después de eso, podemos pasar al siguiente paso, que es precomponer las capas Como tenemos una gran cantidad de capas aquí, necesitamos pensar en qué capas podemos precomponer juntas para tener una línea de tiempo más limpia Nuestro caso, como ya vimos antes, sabemos que el menú de la izquierda en el encabezado no cambiará para ambas pantallas. Eso significa que podemos seleccionarlos en el primer mensaje es pre comp y precomponerlos juntos. Aquí están las capas que podemos precomponer primero. Pero antes de eso, no olvidemos colapsar todas las capas en este punto, así que no necesitamos hacerlo más tarde después de tenerlas en precomps separados, tomará más tiempo, por lo que podemos ahorrar tiempo colapsando todas las Todo bien. Entonces ahora vamos a seleccionar las capas que ya podemos precomponer, incluyendo el cuadro gris principal de esta pantalla de UI Podemos llamarlo pantalla seis panel uno. Busquemos la precomp recién creada en el panel del proyecto y asegurémonos de que esté afuera y no dentro de alguna carpeta Queremos alcanzarlo rápidamente por ahora. Bien. Y ahora vamos a colapsar la precomp en la línea de tiempo y llevarla por debajo de todas las capas Ahora podemos bloquearlo y antes de seguir adelante, guardar el proyecto. Impresionante. Y ahora veamos si necesitamos precomponer otra pila de capas juntas o no Para ello, podemos encontrar el archivo Illustrator de la siguiente pantalla de UI desde la carpeta assets de esta pantalla de UI y hacer doble clic sobre él para abrirlo en el panel de vista previa secundario. De esta manera, ahora podemos revisar ambas pantallas y comenzar a pensar y planificar la animación de flujo de demostración. Como puedes entender, la animación de flujo de demostración en esta escena necesita mostrar la animación de clic en uno de los chats, y luego justo después , necesitamos presentar el panel de conversación que mostrará el chat de este contacto. Pero ahora probablemente estés pensando en cómo vamos a crear esta transición. Tener tantas capas dentro de ambos comps. ¿De qué es lo que necesitamos para empezar? Para responder a todas estas dudas, es necesario comenzar a pensar con una mentalidad muy simplificada Es necesario dividir todos los activos de diseño aquí en diferentes partes de animación, similares a lo que ya hicimos en el curso. En este caso, como tenemos muchas capas, empecemos a pensar en cómo puede ser la separación. Por ejemplo, primero me enfocaré en la primera pantalla de mensajes y encontraré un activo de diseño que deba cambiarse para la segunda pantalla. En este caso, comencemos con los íconos estelares. Esta puede ser la parte de animación con la que trataremos primero. En este punto, no necesitamos preocuparnos el tiempo y la duración de cada parte de la animación. Tampoco tenemos que preocuparnos por asegurarnos de que se sincronice con la voz en off Por ahora, solo nos estamos enfocando en crear la animación de flujo de demostración. Significa que ahora necesitamos crear un outtro y una animación de introducción para todas las capas que tenemos en ambas pantallas de interfaz de usuario con las que estamos tratando Todo bien. Entonces ahora solo estoy mirando la primera y la segunda pantalla para entender qué animación de transición puedo hacer para esta parte de animación. En la primera pantalla, aparecen en el lado izquierdo de la caja, y en la segunda pantalla, aparecen en el lado derecho. Entonces, para hacerme la vida más fácil, puedo crear una animación de outtro simple, usando la propiedad scale para hacer desaparecer las estrellas en la primera pantalla, y puedo crear una introducción para las estrellas en la segunda pantalla usando también la propiedad scale Entonces, por ahora, no te preocupes por nada más. Centrémonos solo en esta parte. Así que cerremos la segunda vista previa y comencemos seleccionando todas las capas de iconos estelares que tenemos en la escena. Genial. Y ahora, así están todos colocados en la misma área en la pila de capas. Vamos a mover uno de ellos hacia arriba en el panel de capas. Una vez hecho esto, ahora podemos etiquetarlos en un color diferente. Genial. Y ahora podemos acercar la línea de tiempo y comenzar a crear la animación outtro desde el inicio de la línea de tiempo Abramos la propiedad de escala y decidamos que la animación durará 1 segundo. Posteriormente podremos ajustar todas las partes de animación que creamos para que se ajusten a la voz en off. Por ahora, centrémonos en crear esas partes de animación para la animación de flujo de demostración. Bien. Y ahora, para que esta animación sea un poco más interesante, hagamos que las estrellas sean un poco más grandes en medio de la animación para obtener ese movimiento hinchable Genial. Así que ahora, una vez que hayamos terminado de crear el outtro para las estrellas, vamos a seleccionarlas todas y llevarlas por encima de todas las capas Colocaremos cada parte de animación por encima la anterior para obtener una línea de tiempo limpia y organizada. Pronto, ya verás a lo que me refiero. Impresionante. Ahora podemos comprobar la animación una vez más. Creo que deberíamos escalarlos más en medio de la animación. Son súper pequeños, así que quiero que el espectador los note antes de que desaparezcan. Creo que podemos establecer la escala en 200. Sí, eso se ve mejor. Impresionante. Entonces ahora terminamos con la primera parte de animación, y estamos listos para decidir cuál debería ser la siguiente. Para ello, siempre puedes volver a ver la segunda pantalla de UI y entender mejor qué hacer. Tal vez podamos tratar el texto aquí, o podemos decidir tratar con todos los íconos aquí en el lado derecho. En cualquier caso, para que sea más fácil seleccionar las capas, seleccionemos la caja blanca de esta sección y bloqueemos la misma. Ahora vamos a seleccionar todos los iconos del lado derecho. Como puedes ver, también seleccionamos las pequeñas cajas blancas de cada chat. Así que mantengamos a Shift y deseleccionémoslos. Genial. Y ahora vamos a traer todas las capas seleccionadas por encima de todas las capas en el panel Capas. A continuación, etiquetémoslos en un color diferente. Bien. Y ahora vamos a asegurarnos de se seleccione ninguna capa y golpeemos para cerrar todas las capas anteriores. Con eso hecho, vamos a crear una animación Otro para todos los íconos que acabamos de etiquetar del segundo justo después del Otro de las estrellas. Usemos la propiedad de escala esta vez, también. Bien. Creo que se ve bien, y podemos pasar a la siguiente parte. Ahora tratemos con el texto en la escena. Como puede ver, el nombre del contacto no está cambiando. Es solo cambiar de posición ligeramente. Pero las otras capas de texto que tenemos aquí están cambiando completamente. Con eso en mente, vamos a crear una animación outtro para todas las capas de texto, excepto los nombres Nos ocuparemos de esos más adelante. Es mejor terminar con las partes de animación más simples y después de eso, empezar a pensar en las más complejas. Todo bien. Dicho esto, volvamos al proyecto y seleccionemos toda esta área. Ahora, deseleccionemos las cajas blancas. Genial. A continuación, vamos a subir todas las capas en las capas, panel y etiquetarlas en un color diferente. Y ahora vamos a crear una animación Otro para el Todo desde el segundo tres justo después de los íconos Outro Esta vez, usemos la opacidad para crear una animación fade out para el Outro Impresionante. Y ahora vamos a cerrar todas las capas, guardar el proyecto, y pasar a la siguiente parte de animación. Para mantener organizada la línea de tiempo, comencemos la siguiente parte de animación en segundo tres justo después de la animación de texto de desvanecimiento Y esta vez, centrémonos en crear la animación morphing para las cajas de chat Tenemos que hacer que todos se vean como lo hacen en la siguiente pantalla de UI. Déjame mostrarte el mejor enfoque para lidiar con este tipo de situaciones en las que quieres crear una animación morph para los paneles de interfaz de usuario en lugar de simplemente crear animaciones outtro e intro usando escala Todo bien. Entonces, lo primero que podemos hacer es crear una nueva capa de forma que usaremos en lugar de las capas de Illustrator de la caja. Es mejor porque tendremos mucha libertad para cambiar la forma de esta forma más adelante. Así que vamos a asegurarnos de que no haya ninguna capa seleccionada. Amplíe un poco, luego seleccione la herramienta rectángulo y cree una nueva forma exactamente del tamaño de la caja blanca. Ahora vamos a abrir las propiedades de la forma y desmarcar las proporciones restringidas, para que podamos ajustar el ancho y la altura por separado. Genial. Y ahora vamos a redondear las esquinas para que coincida con el diseño original. Impresionante. A continuación, agreguemos un trazo gris delgado a esta forma. Para obtener el color exacto, podemos comprobarlo en el diseño original en Illustrator. Así que vamos a encontrar esta pantalla de interfaz de usuario. Aquí está. Podemos utilizar la herramienta de selección directa para seleccionar la forma relevante. Ahora, podemos copiar el código de color de trazo. De vuelta en After Effects, peguemos este código en el color de trazo de nuestra forma. Por último, ajustemos el ancho del trazo. Creo que configurarlo a dos se ve perfecto. Genial. Con eso hecho, ahora cortemos esta capa de esta precomp y la peguemos en la pantalla de la interfaz de usuario de los primeros mensajes Ahora tenemos que empezar a animarlo. Para mayor comodidad, bajemos la opacidad para que podamos ver dónde se debe colocar a lo largo de la animación Vamos a colocarlo aquí por ahora. Ahora vamos a mover el cabezal de reproducción al segundo cuarto porque pronto crearemos allí un fotograma clave para que la forma vea como lo hace ahora mismo Al segundo tres, debería verse como lo hace en esta pantalla de interfaz de usuario. largo y más delgado. Impresionante. Ahora podemos comenzar a crear la animación morphing. Podemos o bien animar la propiedad size o convertir la forma a un camino bezier, lo que nos dará más libertad para cambiar su Pero antes de hacer eso, primero hagamos la forma se vea exactamente como debería en la pantalla de la interfaz de usuario actual antes que se convierta en su forma en la siguiente pantalla Entonces coloquemos esta capa exactamente en medio de la larga caja blanca que tenemos aquí. Para asegurarnos de que esté perfectamente alineado, abramos las reglas, seleccionemos la forma larga y creemos una nueva guía en su posición de punto de anclaje De esta manera, sabemos exactamente dónde debe colocarse nuestra nueva forma. E. Una vez hecho esto, podemos quitar la guía y cerrar a los gobernantes. Todo bien. Entonces ahora usemos la propiedad size para la animación morph Primero, crea un fotograma clave con los valores actuales porque en este punto en el tiempo, la forma debería verse igual que ahora Entonces volvamos al segundo tres y ajustemos el tamaño de la forma para que se ajuste a las dimensiones de la caja larga que tenemos en esta pantalla de UI. Con eso hecho, ahora podemos devolver la opacidad al 100% y seguir ajustando la animación de morphing. A continuación, necesitamos ajustar su posición para el momento en que la forma cambie de forma a cómo debería verse en la siguiente pantalla de UI Para ver dónde exactamente se necesita colocar, usemos como referencia la capa Illustrator de la pantalla de interfaz de usuario del segundo mensaje. Entonces, llevemos eso a la línea de tiempo y bajemos su opacidad para comparar cómo debería verse la siguiente pantalla con la actual Como puedes ver, la segunda pantalla es un poco más alta que la primera. No nos preocupemos por eso por ahora y enfoquémonos sólo en posicionar la forma correctamente. Para evitar confusiones con todas las capas, volvamos a devolver al 100% la opacidad de la siguiente capa de referencia de pantalla y crear guías que coincidan con la ubicación de los cuadros de chat De esta manera, no necesitaremos activar y desactivar la capa de referencia para verificar si todo está alineado. Una vez hecho esto, podemos eliminar la capa de referencia y bloquear las guías para que no interfieran con nuestro flujo de trabajo. Genial. Ahora apaguemos todas las capas que no sean relevantes para esta parte de animación que podamos enfocarnos más claramente en las cajas. Quiero que entiendas que no vamos a animar las capas de caja originales En su lugar, duplicaremos la forma que creamos, pero aún mantendremos las capas de caja en la escena como puntos de referencia. Entonces, por ahora, seleccionémoslos todos y colóquelos juntos en un área. A continuación, podemos etiquetarlos en un color diferente. Por ahora, apaguemos todas las casillas, excepto la primera de la escena para que podamos enfocarnos en su animación morphing Antes de eso, organicemos los activos dentro de las casillas de contacto. También podemos etiquetarlos en un color diferente. Espera, me di cuenta de que hay una capa sentada entre aquí en la pila. Vamos a aislarlo para ver de qué se trata. Veo que es un icono estrella de la primera parte de animación. Por alguna razón, nos olvidamos de moverlo con el resto de las estrellas. Para solucionar esto, seleccionemos todos los activos dentro de las casillas de contacto y moverlos por debajo de la capa estelar. Bueno. Ahora podemos apagarlos y seguir trabajando en la animación de las cajas. Primero, vayamos al punto en el tiempo donde nuestra forma ya ha cambiado su forma. Aquí usaremos la propiedad position para ajustar su ubicación. Vamos a crear los primeros fotogramas clave de posición ahora. Entonces vamos a moverlo al segundo tres porque al inicio de la animación morphing, la forma debería estar aquí Al segundo cuarto, necesitamos moverlo al área que marcamos antes con guías. Bien, eso se ve bien por ahora. Antes de seguir adelante, coloquemos también la capa de caja ancha con el resto y etiquetemos con el mismo color. Ahora, apaguemos todas las capas excepto la forma que creamos. Ahora, vamos a duplicar esta forma. Para saber dónde colocarlo, volveremos a encender todas las capas de caja largas etiquetadas en morado. Bajemos su opacidad a cerca del 30% y luego los bloqueemos, para que sirvan de referencia Ahora, volvamos a nuestra nueva forma duplicada. Colóquese en la primera posición de fotogramas clave, seleccione la propiedad para que ambos fotogramas clave estén activos y ajuste la ubicación de las formas para que coincida con el cuadro de referencia Perfecto. Ahora, pasemos a los segundos fotogramas clave y ajustemos nuevamente para que coincidan con las guías de la siguiente pantalla Impresionante. Ahora tenemos la animación morphing para las dos primeras cajas Repitamos este proceso para el resto de las cajas. Duplica la capa, párate en los fotogramas clave, ajusta ambas posiciones Después retocar el final. Una vez más, duplique la capa, párese en los fotogramas clave. Ajusta ambas posiciones. Después retocar el final. Repitamos este proceso para el resto de las cajas. Ahora, como puede ver, en algún momento, ya no tenemos una guía que indique que se debe colocar otra caja. Eso es porque en la siguiente pantalla de UI, solo hay seis casillas de chat, no nueve, como en la primera. Entonces, para estas cajas extra, vamos a moverlas hacia abajo fuera del marco. Podemos apilarlos pulcramente uno encima del otro. Impresionante. Con eso, hemos terminado preparar la primera parte de la animación de morphing de chatbox Ahora, seleccionemos todas las capas de caja larga que usamos como referencias. En lugar de eliminarlos, vamos a apagarlos y activar la función shi para que no desordenen la línea de tiempo Perfecto. Ahora, podemos volver a encender todas las capas y desactivar las guías que creamos. También movamos todas las nuevas capas de caja por debajo del resto de los elementos para mantener las cosas organizadas. Genial. Ahora pasemos a la siguiente parte de animación relacionada con los cuadros de chat. Primero, abre el segundo mensaje de capa de Illustrator que podamos entender qué capas animar a continuación En este punto, podemos empezar a tratar con los íconos de Avatar. Genial. Ahora, cierra la vista previa y selecciona todas las capas de iconos de Avatar en la escena. Ahora muévalos juntos en el panel de capas y etiquétalos con un nuevo color. Decidamos que estas animaciones de avatar deben comenzar al mismo tiempo que la animación de morphing box en el segundo tres Mueve el cabezal de reproducción a los tres segundos, presiona P y crea un fotograma clave para todas las posiciones de las capas de avatar Después avanzar 1 segundo y ajustar sus posiciones. Para saber exactamente a dónde deben ir, usaremos como referencia la capa Illustrator de la siguiente pantalla. Vamos a traerlo y bajar su opacidad. Ahora, bloqueemos la capa de referencia y seleccionemos todos los iconos de Avatar. A continuación, muévalos a sus posiciones correctas. Ahora, mantenga presionado Control o Comando en Mac y haga clic en esta capa para desseleccionarla, luego baje el resto de las capas para que coincida con el diseño Repita este proceso para el resto de las secciones del chat box. No se sienta abrumado por este proceso. En proyectos reales, normalmente no tratarás con tantas capas y secciones. Estoy usando esta configuración compleja aquí en el curso para que puedas practicar tanto como sea posible. Lo más importante es que aprendas a abordar escenas complejas paso a paso, dividiendo la escena en partes de animación y enfocándote en cada parte una a la vez. Le brinda un sólido punto de partida cuando trabaja en animaciones complejas de flujo de demostración. Todo bien. Ahora, para estas últimas tres capas, coloquémoslas de acuerdo a su casilla relevante. Perfecto. Con eso hecho, podemos pasar a animar las capas de nombre Como es habitual, vamos a seleccionar todas las capas de nombre y etiquetarlas con un color diferente. Ahora, acerque un poco, mueva el indicador de tiempo al segundo tres, el punto donde debería comenzar esta parte de animación y crear un fotograma clave de posición para todos ellos. Mueve 1 segundo hacia adelante y ajusta su posición uno por uno, tal como hicimos con los íconos de Avatar. Genial. Ahora, eso está hecho. Tratemos con el resto de los objetos de diseño en esta sección. Empecemos con este botón morado. En el segundo tres, animaremos su posición desde donde está ahora hasta donde necesita estar en la segunda pantalla de mensajes Etiquetarlo en un color diferente para mayor claridad. Abra la propiedad position, cree un fotograma clave en los segundos tres, luego mueva 1 segundo hacia adelante y baje un poco Perfecto. A continuación, manejemos este otro objeto de diseño. Ya está presente en la primera pantalla, así que lo único que tenemos que hacer es animar su posición también Etiquetarlo en rojo para mantenerse organizado. Nuevamente, cree fotogramas clave de posición en los tres segundos, luego avance y ajuste su ubicación. Todo bien. Así que ahora hemos terminado de ajustar todos los objetos de diseño que permanecen consistentes entre la primera y la segunda pantalla. A continuación, nos ocuparemos de los nuevos objetos de diseño que sólo aparecen en la segunda pantalla. Ejemplo, necesitamos agregar los mensajes de texto dentro de cada cuadro de chat. Ya he preparado algunas líneas de texto que podemos usar. Antes de seguir adelante, bloqueemos y aislemos la capa de referencia para que sepamos exactamente dónde colocar el texto. Ahora vamos a crear el primer mensaje de texto. Ve a la carpeta assets que descargaste de mí y abre el archivo PDF llamado Random Messages two. Copia el primer mensaje. Todo bien. De vuelta en After Effects, pegarlo aquí. Pero en lugar de mantenerlo como una sola línea de texto, eliminemos esa capa y creemos un cuadro de texto. De esta manera, ajustar los mensajes multilínea será mucho más fácil. Genial. Ahora, abre las propiedades del texto y ajusta la configuración de la fuente. Primero, restablece el líder. Para el tamaño de fuente, vamos a establecerlo en 14. A continuación, muévalo a su lugar. Ahora, antes de animarlo, dupliquemos este cuadro de texto para el resto de las secciones del cuadro de chat para que podamos reemplazar fácilmente el texto posteriormente Ahora reemplace cada texto duplicado con los mensajes del archivo PDF. Por cierto, generé todos estos mensajes con Chat GPT. Le expliqué que estoy trabajando en un video explicativo SAS para una empresa CRM, y creó mensajes de chat aleatorios para que los usemos en esta demo Fresco. Todo bien. Con eso hecho, guardemos el proyecto antes de seguir adelante. Ahora, mueva el cabezal de reproducción al segundo cuarto y alinee todas las capas de texto para comenzar desde aquí Para la animación de introducción, usemos la propiedad opacity para crear un efecto de desvanecimiento simple para todos ellos Todo bien. Y ahora cambiemos el color de todas las capas de texto a negro. Genial. Y ahora vamos a traer de vuelta todas las capas para que sean visibles y sigamos adelante. Veo que la posición de mis capas de texto no está alineada con el nombre, así que las seleccionaré todas y las moveré un poco hacia la derecha. Bien, eso se ve mejor. Ahora abramos el diseño del segundo diseño de mensaje y veamos qué podemos hacer a continuación. Acabo de notar que el color del texto en realidad no es negro. Es un gris oscuro. Vamos a ajustarlo rápidamente. Seleccione todas las capas de texto. Después con la muestra de la herramienta cuentagotas, el color gris oscuro de los iconos Avatar en el diseño Sí, eso combina perfectamente con el estilo original. Ahora, vamos a previsualizarlo con el resto de la animación. Un recordatorio rápido. Todavía no necesitas preocuparte demasiado por el tiempo. Por ahora, apenas estamos terminando la animación inicial. Más tarde, refinaremos el tiempo para que coincida con la duración general de la escena y la voz en off Ahora pasemos a los siguientes objetos de diseño. Para ver qué viene después, vuelve a encender la capa de referencia y marca el área de la derecha de las casillas de chat. Aquí podemos comenzar a animar los íconos estelares con una bonita animación de introducción Entonces con eso dicho, apaguemos la capa de referencia, luego vayamos a la pre comp principal de la pantalla de la interfaz de usuario de los segundos mensajes y copiemos todos los íconos estrella que tenemos ahí. Ahora, regresa a la pantalla de primeros mensajes donde está sucediendo nuestra animación de flujo de demostración y pegarlos aquí. Asegúrate de pegar las capas sobre todas las demás capas en esta línea de tiempo. A continuación, etiquetarlos en un color diferente para su organización. Vamos a llevarlos para comenzar en el segundo cinco y usar la propiedad scale para crear una bonita animación de introducción de reventar para las estrellas Genial. Ahora, al segundo seis, animemos el siguiente objeto de diseño Los iconos del tiempo, selecciónalos todos, cópialos y pegarlos en nuestra escena. Establezca su punto de partida en el segundo seis. Esta vez, usemos la opacidad para un desvanecido suave en la animación No olvides etiquetar estas capas con un color diferente y luego guardar el proyecto antes de continuar. Después de verificar la reproducción, creo que se ve mejor si los iconos de tiempo aparecen junto con los íconos de estrellas. Así que vamos a moverlos de nuevo al segundo cinco. Impresionante. Ahora, volvamos a la segunda pantalla de mensajes y veamos qué sigue. Después de terminar la animación de flujo de demostración para el menú de la izquierda en las secciones de chat de contactos, ahora podemos tratar con la sección de chat principal. Comencemos con algunos objetos de diseño simples. Selecciona estas cuatro capas, cópialas y pégalas en nuestra escena, comenzando en el segundo cinco. Etiquétalos en un nuevo color. Para su animación de introducción, usemos la propiedad scale Para agregar variedad para la capa de texto, usaremos en su lugar una animación de fundido con opacidad Perfecto. Ahora vamos a escalar las otras tres capas. Una vez hecho eso, sigamos adelante. De vuelta en la segunda pantalla, copia las siguientes tres capas, iniciarlas a las cinco segundas también. Para estas dos capas, vamos a animar con opacidad fade in. Y para el tercero, usa una animación a escala. Observe cómo no estoy copiando todo a la vez desde la segunda pantalla. En cambio, estoy tratando con cada sección una por una. Este es el mejor enfoque para animaciones complejas de flujo de demostración. Mantiene todo estructurado y manejable. Ahora que hemos terminado las partes más fáciles, pasemos a la sección final. El área de conversación. Lo dividiremos en dos partes, las burbujas de mensaje superior y las dos últimas burbujas de mensaje. Los dos últimos requieren una introducción un poco más compleja ya que allí planeé una conversación personalizada Por ahora, selecciona todas las capas de las burbujas superiores, cópialas y pegarlas en la línea de tiempo principal en el segundo seis. Genial. Ahora, etiquétalos en verde. A continuación, vuelve a la segunda pantalla y copia las capas para las dos últimas burbujas de mensaje. Pégalos en la línea de tiempo, comenzando también en el segundo seis. Acerque y verifique el orden de las capas cuidadosamente. Es importante que todo esté apilado correctamente, ajústelo según sea necesario. Genial. Ahora, para su introducción, vamos a animarlos deslizándose desde la parte inferior del marco Pero primero, asegúrate de padre de todos los elementos de burbuja a su capa de iconos de avatar. Perfecto. Ahora, haz lo mismo para la segunda burbuja. Genial. Ahora, etiquete cada parte en un color diferente para mantenerse organizado. Ahora, como queremos que la escena se vea como el estado final de la interfaz de usuario después de la introducción, vamos a estar en el segundo siete y crear fotogramas clave de posición para los dos iconos de Avatar en todas sus capas de burbujas de mensajes relacionadas Después regresa al segundo seis y arrastra todas estas capas hacia abajo para que se animen desde fuera del marco Lo dejaremos así por ahora. En tanto, preparemos también la parte de animación final de la escena, las capas del cuadro de búsqueda en la parte inferior, copiarlas, pegarlas en la línea de tiempo e iniciarlas a los siete segundos. Para su introducción, utilizaremos la misma técnica, deslizándolos desde la parte inferior del marco Perfecto. En este punto, hemos construido la animación inicial para todas las secciones de la interfaz de usuario. Ahora, vamos a comprobar todo contra la referencia. Genial. Ahora, corta la capa de referencia de su lugar, pegarla sobre todas las capas para un fácil acceso, etiquétala en un color diferente y enciéndala. Como puede ver, necesitamos ajustar el tamaño de la pantalla principal de la interfaz de usuario para que coincida perfectamente con el diseño original. Para ello, abramos los gobernantes y creemos lineamientos. Primero, uno para indicar el tamaño general de la pantalla. Y luego dos más para marcar la parte superior e inferior de la sección de conversación principal. Cierra a los gobernantes. Y ahora comencemos a ajustar la parte más importante, la propia sección de conversación. Lo primero es lo primero, ubicemos la capa de la caja blanca en esta sección dentro del panel de capas. Aquí está. Ahora, la mejor manera de ajustar su tamaño es convertir esta capa de Illustrator una forma con un camino más ocupado Esto nos permitirá animar el camino de la forma directamente Una vez hecho esto, podemos apagar la capa original y tímirla para que no abarrote el panel de capas También etiquetemos la nueva forma en un color diferente para mayor claridad. Antes de animar, abramos la capa de forma y verifiquemos si hay propiedades innecesarias en su interior Puedo ver algunos caminos irrelevantes aquí. Entonces primero, eliminemos este grupo, luego también eliminemos la propiedad merge paths. Genial. Ahora abre la ruta y crea fotogramas clave al comienzo de la línea de tiempo Posteriormente cronometraremos adecuadamente esta animación con el resto de la escena. Por ahora, movamos 1 segundo hacia adelante y seleccionemos la parte inferior de la ruta. Después arrástralo hacia abajo a alge con la pauta que creamos antes. Perfecto. Ahora, hagamos lo mismo para la parte superior del camino. Con eso hecho, ahora necesitamos ajustar el tamaño de la pantalla principal de la interfaz de usuario. Para ahorrar algo de tiempo, en lugar de cambiar el tamaño de todo, decidiremos mantener visible solo la sección de conversación principal. El resto de las secciones de la interfaz de usuario pueden desvanecerse. Esto no sólo nos ahorra tiempo sino que también llama la atención de los espectadores sobre la parte más importante de la escena. Verás a lo que me refiero en un momento. Así que vayamos al inicio de la línea de tiempo y creemos una simple animación de desvanecimiento para el panel uno pre comp. Ahora, eso está completo. Volvamos a encender la capa de referencia para verificar si nos perdimos algo. Noté que todavía tenemos un paso más antes de seguir adelante, creando una animación de cambio de color para el trazo del cuadro de chat. Apaguemos nuevamente la capa de referencia y para mayor comodidad, apaguemos también las guías. Ahora, pasa el cursor sobre las capas de forma en la línea de tiempo. Observe cuidadosamente el panel de vista previa. Cuando pasas el cursor sobre una capa de forma, verás que sus guías de capas aparecen en azul Por cierto, son azules porque esta capa está etiquetada en azul. Aquí está la capa de forma correcta. Vamos a seleccionarlo y presionar U para revelar los fotogramas clave. Párese al comienzo de la animación, abra las propiedades de trazo desde el menú de capas y cree fotogramas clave para el color del trazo En este punto, deja el color tal como está. Ahora te presionamos de nuevo, así solo vemos los fotogramas clave. Muévase al segundo cuarto y cambie el color del trazo a púrpura. Podemos muestrear el morado directamente desde el icono del botón para mantener la consistencia con el diseño. Perfecto. ¿Con eso hecho? Salvemos el proyecto. Eso concluye esta lección. En la siguiente, seguiremos trabajando en esta compleja animación de flujo de demostración. Se va a poner aún más interesante. Entonces nos vemos en la siguiente lección. 21. Ajustes de tiempo y animación de interacción con clics: Regresa. Comenzaremos esta lección ajustando el tiempo de la animación. Y como crearemos una animación de introducción para la escena antes de que comience la animación de flujo de demostración, podemos mover todas las capas animadas 2 segundos hacia adelante. De esa manera tendremos algo de tiempo para la animación intro para la escena. Todo bien. Y ahora vamos a seleccionar todas las capas de la primera pantalla de UI y extenderlas para que podamos verlas al inicio de la línea de tiempo. Genial. Ahora, vamos a abrir estos fotogramas clave pre comp y moverlos para comenzar desde el segundo segundo, también Ya que a partir de este punto en el tiempo, la animación de clic tiene que suceder, y haremos la transición a la siguiente pantalla de interfaz de usuario. Bien. Y ahora vamos a crear esa animación de clic. Como recordarás, necesitamos hacerlo para este cuadro de chat de contacto. Y ahora para crear la animación de clic. Vamos a crear un nuevo objeto nulo en la escena. Asegúrate de que esté por encima de esta capa de forma. Vamos a copiar el nombre de esta capa de forma y pegarlo a la nula para que sepamos de qué capa de forma va a ser responsable. Podemos etiquetar el nulo en azul. Entonces sabemos que pertenece a esta parte de animación. Todo bien. Y ahora asegurémonos de que el punto de anclaje del nulo esté colocado en el centro de este ícono de avatar. Y después de eso, vamos a padre de la capa de forma relevante a la nula. Ahora, crearemos una animación de clic animando la escala del nulo En este punto en el tiempo, la animación de clic ya debería terminar. Así que vamos a crear el primer fotograma clave aquí. Ahora vamos a mover diez fotogramas hacia atrás y crear un fotograma clave aquí también Por último, pongámonos en medio de la animación y escalemos el nulo. Creo que podemos ponerla a 70, ¿verdad? Y ahora, como pueden ver, también necesitamos que el resto de los objetos de diseño de este chat box se reduzcan a escala, también. Por lo tanto, seleccionemos todas las capas relevantes y decidamos padre de ellas ya sea a la capa nula o a la capa de forma. Vamos con la capa de forma. Vamos a comprobarlo. Noté que me perdí la crianza de los hijos del ícono del avatar. Así que vamos a encontrarlo muy rápido y apadrearlo a la capa de forma también. Todo bien. Entonces con eso, terminamos de crear la animación de clic, y ahora podemos recortar el nulo para que se ajuste a la animación. No necesitamos que esta capa esté al final de la línea de tiempo. Impresionante. Y con eso hecho, ahora podemos pasar al siguiente paso, que es ajustar el movimiento. Es decir, facilitaremos fácilmente todos los fotogramas clave que creamos hasta ahora e intentaremos que el movimiento se vea un poco más interesante Primero, escalemos el panel de la línea para que podamos ver tantas capas como podamos. Ahora comencemos con el ajuste de la animación de clic. Primero, facilitemos fácilmente los fotogramas clave y luego hagamos que el movimiento comience rápidamente al principio y disminuya la velocidad hacia el final Creo que podemos hacer este tipo de movimiento para el resto de la animación. En mi opinión, se ve bien. Todo bien. Una vez hecho esto, asegurémonos de que no se seleccione ninguna capa y presione T para abrir los fotogramas clave de opacidad que creamos en la escena, ajustaremos cada propiedad a Por ahora, tratemos con todos los fotogramas clave de opacidad. Así que asegúrate de seleccionarlos todos, y luego vamos a facilitarlos fácilmente y hacer el movimiento como para la animación de clic. Impresionante. Eso se ve bien. Ahora, presionemos U para cerrar todas las capas y luego presionemos S para tratar con los fotogramas clave de escala Asegurémonos de seleccionar todos los fotogramas clave que tenemos en la línea de tiempo Ahora vamos a aliviarlos y ajustar el movimiento en el editor de grafos. Trabajo. Mientras veía la animación, noté que una de las capas de iconos estelares está etiquetada en el color equivocado. Así que me aseguraré de encontrar esta capa y la etiquetaré en el color correcto. Este necesita ser etiquetado en rosa. Todo bien. Con eso hecho, cerremos ahora todas las capas y abramos los fotogramas clave de posición Seleccionemos todos los fotogramas clave de posición que tenemos aquí y ajustemos el movimiento Impresionante. Ahora, una vez que terminemos de ajustar todos los fotogramas clave, cerremos todas las capas y luego presionemos para ver todos los fotogramas clave para todas las propiedades que animamos, acaso nos perdimos ajustar alguna propiedad en el proceso Siempre es una buena idea revisarse dos veces antes de pasar al siguiente paso. Como puedes ver, tenemos la animación de tamaño que creamos para las capas de forma aquí abajo. Entonces, ajustemos estos fotogramas clave, también. Para ver solo los fotogramas clave de tamaño, podemos seleccionar solo las capas de forma y luego escribir size en la barra de búsqueda en el panel Capas Genial. Así que ahora vamos a seleccionar todos los fotogramas clave de ruta y ajustar el movimiento como para el resto de la escena Como desmarcamos la proporción restringida para los valores de tamaño, necesitamos ajustar los dos valores uno por uno. Genial. A continuación, podemos ajustar los fotogramas clave de color. Pero antes de eso, acabo de notar que me perdí ajustar los fotogramas clave de tamaño de esta capa. Entonces déjame hacerlo muy rápido. Bien, entonces ahora vamos a ajustar los fotogramas clave de color. Impresionante con eso hecho. Ahora podemos guardar el proyecto, y también podemos cerrar la barra de búsqueda antes de pasar al siguiente paso. Echemos un vistazo a todos los fotogramas clave última vez para ver si nos perdemos algo Veo que me perdí los fotogramas clave de ruta de esta capa de forma Si también lo hiciste, ajustemos la animación aquí rápidamente. Es importante para mí mostrarte cuando tienes muchas capas y fotogramas clave, es una buena idea revisarte algunas veces antes de seguir adelante Bien, así que ahora terminamos completamente de ajustar todos los fotogramas clave, y ahora estamos listos para ver cómo se ve todo junto Así que ajustemos el tamaño del panel de capa y veamos toda la animación que creamos desde el inicio de esta escena. Noté que el ícono de avatar del segundo chat box se mueve muy raro. Entonces, centrémonos en esa parte e intentemos solucionar este pequeño problema. Lo primero es lo primero, acerquemos y tratemos de entender cuándo comienza exactamente el problema. Esto está sucediendo en la parte de animación de clic. Entonces, veamos dónde está nuestra animación de clic en la línea de tiempo. En nuestro caso, lo que desencadena la animación de clic es el nulo. Eso quiere decir que el icono del avatar probablemente no esté engendrado al nulo A lo mejor está criado a otra capa. Creo que lo criamos a la capa de forma blanca, en este caso Es muy importante pararse en el punto en el tiempo antes ocurra la animación de clic y solo entonces encontrar la capa de iconos de avatar y pararla al nulo. Veamos qué tenemos. Bien, eso se ve bien. Ahora también vamos a padre el resto de los objetos de diseño relacionados con el cuadro de chat a la nula en lugar de a la capa de forma. Impresionante. Entonces ahora, todo se ve perfecto, y podemos guardar el proyecto antes de seguir adelante. En el siguiente paso, será una buena idea comenzar a trabajar en el timing de la animación morphing que está sucediendo en esta animación de flujo de demostración Podemos desactivar esta pre comp por ahora para enfocarnos en la animación de flujo de demostración. Por ahora, nos hemos estado enfocando en crear la animación inicial. Entonces mejoramos el movimiento, y ahora podemos ajustar el tiempo de las capas. Algunas de las secciones pueden comenzar antes y algunas de ellas un poco más tarde. Para entender qué hacer, suelo retroceder y avanzar en la línea de tiempo para ver qué partes de animación en el flujo de demostración se pueden ajustar para mejorar la transición. Por ejemplo, creo que las capas de texto pueden desaparecer un poco antes en la línea de tiempo. Podemos iniciar la animación fade out desde el punto en el tiempo donde el resto de los iconos empiezan a disminuir. Entonces hagámoslo ahora mismo. Para ello, primero necesitamos abrir todos los fotogramas clave de todas las capas Ahora, encontremos un punto en el tiempo donde debería terminar la animación de texto. Creo que puede terminar justo antes de las capas de forma morphing animación o tal vez incluso antes Por ahora, parémonos aquí y encontremos las capas de texto. Aquí están. Son todas las capas con la animación de opacidad Así que vamos a seleccionar todos los fotogramas clave de opacidad en estas capas y moverlos antes en la Podemos moverlos a todos para comenzar desde el punto en el tiempo donde la animación Otro del icono comienza aquí en el segundo tres. Genial. Y ahora vamos a revisar esta animación y ver qué podemos ajustar a continuación. lo que siento, creo que podemos iniciar el outtro de los íconos en el texto incluso antes Empecemos toda esta parte de animación a partir de los segundos dos y 15 fotogramas, que se encuentra en medio de la animación Otro de las estrellas. Así que selecciona todos estos fotogramas clave y muévalos para comenzar desde los segundos dos y 15 fotogramas Veamos cómo se ve eso. Creo que se ve mucho mejor. Con eso hecho, sigamos revisando la animación y veamos qué parte de animación podemos ajustar a continuación. En este caso, creo que podemos iniciar la animación morphing de las formas justo después del Otro de los iconos y la parte de animación de texto, que está en los segundos tres y 15 fotogramas Así que ahora seleccionemos todos los fotogramas clave para la siguiente parte de animación, que son los íconos de avatar, los nombres y los fotogramas clave de forma y moverlos a los segundos tres y 15 fotogramas. Veamos cómo se ve eso. Genial. En mi opinión, se ve bien. Ahora, vamos a encontrar el punto en el tiempo donde podemos iniciar la animación de introducción de las capas de la segunda pantalla de UI En este caso, podemos iniciarlo desde el segundo cuarto, que está en medio de la animación morphing Entonces, parémonos aquí y luego desplazémonos hacia arriba en la línea de tiempo y seleccionemos todas las capas de la segunda pantalla de la interfaz de usuario. Por último, llevémoslos para que comiencen desde el segundo cuarto. Veamos ahora cómo se ve eso. Impresionante. Ahora podemos pasar a ajustar la siguiente parte de animación. Esta vez, podemos enfocarnos en todas las capas que necesitan ingresar a la escena después de las capas de texto de la segunda pantalla de UI. Creo que podemos pararnos en medio de la animación de texto, que es de los segundos cuatro y 15 fotogramas. Así que vamos a seleccionar todas estas capas y traerlas para comenzar desde aquí. Veamos ahora cómo se ve eso. Se ve bien. Pasemos ahora para comprobar la siguiente parte de la animación. Esta vez, centrémonos en las capas principales de la sección de conversación. En mi opinión, todos necesitan comenzar antes también. Creo que podemos comenzar esta parte de animación desde los segundos cuatro y 15 fotogramas también. Bien, creo que se ve mejor. Ahora vamos a traer la última parte de animación para comenzar desde el segundo cuatro y 15 fotogramas también por ahora. Comprobemos esta parte algunas veces para ver cómo se siente eso. En mi opinión, podemos iniciar la última parte de animación de toda la sección de conversación junto con las capas de texto a partir del segundo cuarto. Entonces, seleccionemos todas las capas de pantalla de la segunda interfaz excepto las capas de texto y luego llevémoslas todas al segundo cuarto. Te estoy mostrando este proceso para que entiendas que nunca sabemos con certeza el momento perfecto. Siempre debemos revisar la animación y ver si hay un buen flujo en el movimiento. En este caso, estoy contento con los resultados. Así que pasemos ahora para que esta animación se vea un poco más interesante, y podemos hacerlo creando un ligero retraso para las capas de la última parte de la animación. Esa es la sección de conversación. Me encantaría ver cómo quedará si iniciamos la intro desde la primera burbuja hasta la última, una tras otra. Entonces hagámoslo ahora mismo. Primero, para tener una línea de tiempo organizada, voy a cambiar el orden de las capas de burbuja de chat. No tenemos que hacer eso, pero prefiero tener las capas organizadas de esta manera. Por lo que la burbuja de mensaje superior estará abajo en el panel de capas. La segunda burbuja de chat estará por encima de ella y así sucesivamente. Todo bien. Entonces una vez que tenga todas las capas organizadas, puedo seleccionarlas todas excepto esta, ya que entrará primero en la escena, luego comenzará a crear un offset de un fotograma. No olvides que estas cuatro capas pertenecen a una burbuja de mensaje, así que asegúrate de moverlas como una unidad. Lo mismo para la última burbuja de mensajes. Dejemos aquí por ahora la última parte de la animación. Primero quiero ver cómo se ve eso. Vamos a verlo algunas veces para ver cómo se siente eso. Creo que el offset es genial, pero me di cuenta de que la caja blanca principal de esta sección está creciendo demasiado tarde. Eso significa que faltamos ajustar su cronometraje. Entonces hagámoslo muy rápido. Primero, necesitamos encontrar esa capa. Aquí está. Ahora, necesitamos iniciar la animación de ruta desde el punto en el tiempo donde los cuadros de chat comienzan a transformarse para ajustarse al diseño de la segunda pantalla de la interfaz En nuestro caso, es a partir del segundo tres y 15 fotogramas. Veamos cómo se ve eso. Genial. Y ahora podemos volver a la última parte de animación donde vemos la introducción de las capas del cuadro de búsqueda y crear un bonito desplazamiento allí también Para comenzar, podemos seleccionar todas las capas relacionadas con esta parte de animación y abrir sus fotogramas clave Una vez hecho eso, decidamos ahora qué capas deben ingresar primero a la escena. Quiero que estas dos capas comiencen primero, así que las traeré aquí en la pila de capas. Para el botón, quiero que entre último. Entonces lo traeré aquí por encima de todas las capas. A continuación, para el icono de tintas, creo que debería entrar en escena antes que el ícono de Smiley Bien. Entonces ahora comencemos a crear el offset. Quiero que estos dos entren al mismo tiempo. Entonces quiero que el icono de Enlace entre a la escena seguido del resto. Veamos qué tenemos. H Creo que podemos iniciar esta parte de animación Un poco después de la parte de burbujas de mensaje. Comencemos esta parte de animación a partir del segundo cuatro y 15 fotogramas. Genial. Entonces ahora comencemos a trabajar en la siguiente parte de animación, que es la animación de chat que planeo crear aquí. Y luego trabajaremos en el outtro de toda esta escena que debería suceder después de una animación de clic en el botón Enviar Y en lugar de animar esta capa, podemos usar el botón pre comp que creamos anteriormente en el que ya tenemos lista la animación click Entonces primero, encontremos la precomp relevante. Aquí está. Dentro de la carpeta precomps. En caso de que quieras encontrarlo rápidamente, puedes usar la barra de búsqueda para encontrarlo. Ese es uno de los beneficios de etiquetar tus precomps. Todo bien. Entonces ahora, una vez que encontramos la precomp, necesitamos duplicarla desde el panel del proyecto Ahora necesitamos ajustar el nombre según el número de la escena en la que estamos trabajando. En este caso, es la escena siete. Genial. Y ahora selecciona la capa de botones de la línea de tiempo y arrastra la nueva precomp sobre ella mientras mantienes presionada Alt u Opción para reemplazarla Con eso hecho, ahora ajustemos la escala de la precomp para que se ajuste al diseño Vamos a establecer la escala a 30. Ahora, vamos a colapsar la precomp y encontrar el punto en el tiempo correcto donde queremos que ocurra la animación de clic Ya que necesitamos crear la animación de chat antes de la animación de clic, debemos dejarnos unos segundos libres para ello, y por ahora, iniciar la animación de clic desde, digamos, el segundo ocho. Entonces entremos el botón precomp y movamos los fotogramas clave a este punto en Impresionante. Y ahora cambiemos el texto aquí para enviar antes de seguir adelante. Una vez hecho esto, volvamos a la escena de la pantalla y guardemos el proyecto para asegurar todos los procesos realizados hasta ahora. Genial. Y ahora comencemos a trabajar en la animación de chat que puede comenzar desde el segundo siete por ahora. Primero, necesitamos agregar una animación de escritura de texto aquí. Para ello, podemos utilizar la animación de texto mecanografiado que creamos al inicio del proyecto. Aquí está. Vamos a copiar esta capa de texto. Ahora volvamos a la escena y la peguemos por encima de todas las capas. Ahora usemos la tecla de corchete izquierdo para llevar esta capa a la posición del indicador de tiempo. ¿Todo bien? También podemos abrir los fotogramas clave y eliminar los fotogramas clave de posición en él Genial. A continuación, parémonos en el punto en el tiempo donde se termina la animación y ajustemos la posición y la ubicación de esta capa de texto. Bien. Eso se ve bastante bien. Ahora, parémonos al inicio de esta animación y recortemos el tipo de tu capa de chat hasta este punto en el tiempo. Impresionante. Así que ahora tenemos una buena introducción para la animación de mensajes de escritura Una vez hecho eso, ahora podemos ajustar el mensaje de acuerdo a lo que queremos que sea la conversación. En este caso. Ya que el mensaje anterior estaba pidiendo un diseño de interfaz de usuario, hagamos que nuestro mensaje diga, te enviaré un enlace con una buena referencia. Posteriormente, también cambiaremos el texto dentro las dos últimas burbujas de mensaje para que se ajuste al tema de la conversación. Entonces ahora este mensaje será enviado, y luego necesitamos tener algunos fotogramas para que el cursor vuele a la ubicación del botón y luego haga clic en él. Podemos iniciar la animación click desde aquí. Ingresemos el botón, pre comp y ajustemos el tiempo de los fotogramas clave Impresionante. Entonces ahora en el momento en el que comenzará la animación de clic, el texto puede desaparecer y luego reaparecer dentro de una burbuja en la sección de conversación anterior Eso quiere decir que a partir de este momento, necesitamos crear una burbuja de mensaje verde con el último mensaje que acabamos de crear. Para esto, primero, primero, seleccionemos todas las capas relacionadas con la última burbuja de mensaje verde y luego dupliquelas. Coloquemos las nuevas capas aquí arriba para que las tengamos en una pila. A continuación, precompongamos estas capas. Podemos llamar a esta pantalla cinco burbuja uno. Impresionante. Ahora, coloquemos esta precomp debajo del botón e ingresemos para ajustar el texto en su interior Primero, eliminemos todos los fotogramas clave que tenemos en todas las capas aquí Ahora, presiona S en la última capa y escala un poco. Las capas son demasiado pequeñas para que pueda trabajar con ellas. Podemos establecer la escala a 300. Después de eso, abramos la rejilla de acción segura y coloquemos las capas en el centro del marco. Genial. Ahora necesitamos esta burbuja para mostrar el texto para el que creamos una animación de mecanografía en la escena de la pantalla. Así que volvamos y hagamos doble clic en la capa de texto que tenemos aquí para copiar el texto. Volver a la precomp. Vamos a crear una nueva capa de texto y pegar el texto. Ahora vamos a escalar la fuente a, digamos, 42 y crear la burbuja de mensaje para ello. No quiero que me sigas por ahora porque tengo dos formas de hacerlo. Te mostraré el primer camino, pero usaremos el segundo camino. Entonces, cuando empecemos por la segunda vía, te avisaré cuándo volver a la acción. Por ahora, solo quiero que veas como puedes crear una burbuja de mensaje personalizada usando los dos cuadros de texto D que ya usamos en el curso Para comenzar, agregaré el cuadro de texto a la escena y me aseguraré que afecte a la capa de texto que tengo aquí. A continuación, ajustaré los colores y lo colocaré debajo de la capa de texto para que podamos ver el texto. Hasta ahora, estas son cosas que ya hicimos. Pero ahora quiero mostrarte qué propiedades necesitas ajustar para conseguir esa forma inusual que tenemos en el diseño original. Presta atención a las esquinas de la burbuja de mensaje verde en el diseño original. No todas son igualmente redondeadas. Entonces, por si acaso en tus futuros proyectos, necesitas crear una forma única. Puede abrir el menú de esquinas redondeadas y jugar con las propiedades dentro del menú habilitar por esquina. Como puede ver, estoy tratando de marcar y desmarcar las diferentes casillas de verificación aquí hasta que obtenga la combinación de configuración correcta En este caso, desmarcando solo la parte inferior derecha redondeada. Fue la configuración correcta. Entonces todo lo que tengo que hacer es decidir cuál debe ser la cantidad de redondez. Bien, entonces ahora voy a borrar el cuadro de texto que creé, y lo haremos juntos usando el segundo método, que es más sencillo de crear, pero menos automatizado En este caso, estoy bien con ello. Utilizaré la capa original y convertiré en una forma con un trazado Bezier. Ahora podemos tímido la capa original. Bien. Y ahora vamos a abrir la nueva capa de forma y eliminar las propiedades irrelevantes dentro, como el grupo que tenemos aquí y las rutas de fusión Una vez hecho esto, coloquemos el texto en la posición correcta. Y luego usando la herramienta Pluma, seleccione uno de los puntos del trazado. Ahora podemos volver a la herramienta de selección y seleccionar todos los puntos del lado izquierdo. Entonces vamos a arrastrarlos hasta que consigamos el camino para que se ajuste a la longitud del texto. Podemos eliminar esta capa mostrando el texto original. Bien. Y ahora vamos a seleccionar todas las capas que tenemos aquí y colocarlas en el centro del marco. Eso se ve bien, pero creo que ahora podemos abrir los ajustes de composición y ajustar el tamaño de la comp para que se ajuste al tamaño de la burbuja del mensaje. Pongamos la altura a 300, y luego el ancho a, digamos, 1,000. Con eso hecho, volvamos ahora a la compilación de pantalla y creemos una animación de introducción para la nueva precomp creemos una animación de introducción de burbujas de mensajes Primero, llevemos esta pre comp para comenzar desde el segundo ocho. Ahora vamos a ajustar el tamaño de la pre comp para que se ajuste al diseño general. Todo bien. Eso se ve bastante bien. La animación de introducción de esta burbuja de mensaje comenzará a partir del segundo ocho Podemos traer esta precomp por encima de todas las capas. Y ahora antes de comenzar a crear la introducción para esta burbuja de mensajes, reemplacemos esta burbuja de mensajes una nueva que tenga un mensaje diferente en su interior Necesitamos que la conversación se vea un poco más realista. Para hacerlo, primero encontremos nuestra burbuja de mensajes recién creada en el panel del proyecto y luego la dupliquemos desde aquí. Pero antes de eso, podemos arrastrar esta precomp fuera de la carpeta screens No hace falta que esté aquí. Todo bien. Y ahora vamos a duplicar la precomp. Ahora podemos copiar las últimas capas de mensaje para referencia y luego ingresar la nueva burbuja de mensaje, pre comp, y pegarlas aquí. Primero eliminemos la animación que tenemos sobre ellos, luego colóquelos al lado de nuestro diseño de burbujas de mensajes. Y ahora necesitamos ajustar el diseño de la misma para que se vea como en la referencia. Primero, podemos voltear la burbuja del mensaje horizontalmente. Entonces vamos a moverlo a la izquierda. Ahora, movamos el ícono del avatar al lado izquierdo también. Pero antes de eso, unparent las capas, apacientadas a ella para que podamos moverlas sin mover el resto de las W bien. Una vez hecho eso, ajustemos el color de la burbuja. Podemos muestrear el color de la capa de referencia. Genial. Ahora podemos eliminar todas las capas de referencia. Ahora podemos llevar el tiempo al lado izquierdo. Por último, movamos todas las capas al centro del marco. Impresionante. Entonces ahora podemos centrar el punto de anclaje de la burbuja del mensaje, y luego cambiemos el texto que tenemos aquí. Vamos a escribir. No tengo ninguna idea. Ahora, ajustemos el trazado de la forma para que la burbuja se ajuste a la longitud del texto. Bien, vamos a mover las capas al centro por última vez. Genial. Así que ahora volvamos a la precomp de pantalla y reemplacemos la burbuja de mensaje que tenemos aquí por la nueva que creamos Y como queremos guardar la animación de introducción de esta burbuja de mensaje, podemos reemplazar la capa de icono Avatar ya que tiene la animación de posición en ella, y el resto de las capas están parentadas a Así que ahora arrastra la nueva precomp de burbuja de mensaje sobre ella mientras mantienes presionada Alt u Opción en Mac Ahora vamos a ajustar el tamaño. Y después de eso, ajustemos su posición. Primero lo primero, vamos a abrir los fotogramas clave de posición en esta capa Ahora debemos permanecer en uno de los fotogramas clave, luego seleccionar todos los fotogramas clave de posición y sólo entonces ajustar la Creo que la posición se ve bien, pero podemos apagar el tiempo. Crearemos una animación de introducción para ello tal vez en el futuro. Por ahora, apegémonos al diseño original. Todo bien. Entonces ahora, con eso hecho, hemos terminado de preparar toda la configuración para la sección de animación de conversación, y ahora estamos listos para animarla Como comprenderás, nuestro nuevo mensaje verde necesita ingresar a la sección desde la parte inferior, lo que significa que todas las burbujas de mensaje deben subir. Esto será lo primero que debemos tratar. Entonces, por ahora, llevemos la última burbuja de mensajes hacia adelante en la línea de tiempo. Pronto, encontraremos el momento perfecto para ello. Por ahora, centrémonos en mover todos los mensajes hacia arriba, y podemos hacerlo usando un objeto nulo. Primero, vamos a crear un nuevo objeto nulo en la escena. Podemos cambiar el nombre a burbujas nulas. A continuación, vamos a etiquetarlo en verde. Y ahora vamos a colocarlo en un orden conveniente para nosotros en la pila de capas. Lo que quiero decir con eso es que debemos colocarlo por encima de todas las capas que le van a ser criadas No necesitamos ser padres de familia de la última burbuja de mensaje verde para ello. Pero sí necesitamos padre de la última burbuja de mensaje gris al nulo. Por lo tanto, encontremos la precomp de esta burbuja de mensaje y coloquemos el nulo por encima de ella. Podemos cambiar el color de esta precomp a espuma C. Ahora, coloquemos el nulo en algún lugar entre las burbujas de mensaje y luego comencemos a patentar todas las burbujas de mensaje a él. Una vez hecho esto, llevemos el nulo para comenzar desde el segundo ocho y animar su posición para que suba Acabo de notar que me perdí crianza de los hijos de esta burbuja de mensajes. Entonces déjame deshacer mi acción, y vamos a apadrarla al nulo. ¿Bien? Entonces ahora mueve el nulo hacia arriba así tendremos suficiente espacio en la zona inferior para entrar en la nueva burbuja de mensaje que creamos. Vamos a traer esta nueva burbuja para comenzar desde el segundo nueve por ahora. Pronto, crearemos una bonita animación de introducción para ello. Mientras tanto, podemos etiquetarlo en verde. Bien. Y ahora, en este momento, no deberíamos ver el momento de este mensaje. Entonces vamos a entrar en la precomp y apagarla por ahora. Volver a la animación. Sí necesitamos ver aparecer la hora para el mensaje anterior, y podemos crear un bonito fade in de animación para ello a partir del segundo ocho. Entonces, parémonos aquí y luego ingresemos a esta precomp. Ahora, vamos a crear una animación de fade in para la capa de tiempo. Hagamos que esta animación dure por 1 segundo. Bien. Eso se ve bien. Ahora podemos volver a la animación principal y crear una animación de introducción para la última burbuja de mensajes Podemos traer esta precomp para comenzar a partir del segundo ocho. Ahora, presionemos Y para cambiar a la herramienta de punto de anclaje y mover el punto de anclaje de esta precomp a la esquina inferior derecha Mantenga el control o comando en Mac mientras lo hace para ajustarlo exactamente en la esquina. Con eso hecho, empecemos ahora a animarlo. Primero podemos crear una animación a escala. Y como sabemos que la precomp debe verse como lo hace ahora mismo en este momento, vamos a crear un fotograma clave aquí A continuación, le agreguemos también una animación de rotación. Por la misma razón, también crearemos un marco clave de rotación aquí. Ahora retrocedamos 1 segundo y reduzcamos la precomp mientras la rotamos a De esta manera, obtendremos una bonita animación de reventado de rotación Ahora facilitemos fácilmente los fotogramas clave nulos y hagamos que comiencen a moverse rápido al Una vez hecho esto, ajustemos la animación de la burbuja pre comp en consecuencia. Pero antes de eso, hagámoslo un poco más interesante haciéndolo escalar en medio de la animación. De esta manera, el efecto popping será más notorio. Todo bien. Y ahora vamos a seleccionar todos los fotogramas clave y facilitarlos fácilmente. Entonces vayamos al editor gráfico y hagamos que el movimiento se mueva de manera ágil ajustando influencia de la velocidad a alrededor del 80% Creo que se ve bien. Ahora podemos volver a la línea de tiempo. Antes de seguir adelante, comencemos la última burbuja pre comp a partir del segundo nueve, exactamente. Impresionante. Entonces con eso hecho, hemos creado una agradable animación de flujo de demostración de una conversación de chat. En este punto, podemos guardar el proyecto y seguir avanzando al siguiente paso. En este punto, también podemos asegurarnos de que todas nuestras capas y pre composiciones en la línea de tiempo estén colapsadas para que obtengamos la escena en la mejor calidad Genial. Así que ahora voy a guardar el proyecto una vez más. Y vayamos al inicio de la línea de tiempo y veamos toda la animación que creamos hasta ahora. Noté que en el área inferior izquierda de las cajas de avatar, tenemos algunas capas que no pertenecen ahí. Estoy hablando de éste. A lo mejor es una capa que olvidamos eliminar en los pasos anteriores. Busquemos esta capa en la pila de capas e intentemos entender de qué se trata. Ahora veo, es una capa de texto que perteneció a la última burbuja de mensaje gris del diseño original. Reemplazamos estas capas con una precomp que incluye nuestras capas personalizadas en su interior Eso significa que ya no necesitamos esta capa aquí. Lo mismo ocurre con esta capa. Es la capa de tiempo del diseño original. Tampoco necesitamos eso, ya que ya lo tenemos incluido en la precomp Por eso siempre reviso la animación después de cada paso que hago. Y te sugiero que hagas lo mismo. Cuando se trata de muchas capas, siempre es una buena idea comprobarnos a nosotros mismos. Aunque estemos 100% seguros hicimos todo a la perfección. Es mejor para ti encontrar el problema relevante en lugar del hallazgo del cliente. Bien. Entonces ahora, con todo eso dicho, revisemos esta animación juntos en la master comp. Volveremos a esta pre comp más tarde para agregar los toques finales. Por ahora, es importante comprobar cómo se ve junto con la voz en off Salta al sistema de mensajería integrado donde todas tus conversaciones se organizan por contacto. Envía un recordatorio rápido o comparte una actualización al instante. Y sí, compartir archivos es al instante. Y si, compartiendo f instantáneamente. Y si, compartiendo f. y si, compartiendo. Y sí. Bien. Entonces creo que estamos bien con el hundimiento de la animación de flujo de demostración con la voz en off Podríamos ajustarlo un poco más tarde si es necesario. Pero por ahora, quiero seguir animando la escena. Necesitamos crear una intro Otro para la escena. Y también necesitamos crear algunos movimientos de cámara para acercar el foco de los espectadores a las secciones relevantes en la pantalla de la interfaz de usuario. También tendremos que agregar el texto que se debe presentar durante la animación de flujo de demostración. Sólo después de esto comenzaremos a trabajar en la siguiente animación de flujo de demostración que podemos ver aquí en el videoboard Por ahora, centrémonos en crear los movimientos de la cámara y agregar las líneas de texto del guión a la escena. Pero lo primero es lo primero, no olvidemos volver a encender la precomp del panel principal que tenemos en la primera pantalla de UI de esta animación de flujo de demostración Y con eso hecho, ahora podemos ir a la comp de escena principal y comenzar a planear cuáles deberían ser los movimientos de la cámara. Primero, vamos a colapsar esta precomp para que podamos ver todas las capas de colapso dentro en alta calidad aquí también Y ahora antes de animar esta precomp para obtener algunos movimientos agradables de cámara, primero agreguemos el texto que necesita ser la escena Para ello, podemos ir al videoboard y ver eso. Como pueden ver, esta larga escena incluye un texto muy largo. En nuestro caso, podemos dividir el texto en algunas partes, cada una mostrada de acuerdo a lo que está sucediendo en la animación de flujo de demostración. Dicho esto, vayamos al guión y copiemos la primera parte del texto que hay que mostrar en la escena. Ahora, volvamos al proyecto y peguemos el texto. Acabo de notar que primero debemos copiar una capa de texto de otra escena con texto dentro de ella. De esta manera, será más fácil pegar el nuevo texto en la nueva escena. Ingresemos a la escena seis y copiemos la capa de texto desde aquí. Ahora vayamos a la escena siete y peguemos esta capa aquí. Y ahora volvamos al guión y copiemos el texto. Genial. Ahora volvamos al proyecto. Haga doble clic en la capa de texto y pegue el texto copiado del guión. Bien. Y ahora, vamos dividir esta capa de texto en el momento en el que lleguemos a la segunda parte de la animación demo porque aquí agregaremos la segunda parte del texto principal de esta escena desde el guión. Entonces volvamos al guión y copiemos la segunda parte del texto principal, de vuelta al proyecto. Ahora peguemos el texto y expandamos esta capa. Genial. Entonces ahora tenemos el texto para la primera parte de la animación de flujo de demostración y para la segunda parte. Y ahora vamos a pararnos en el punto en el tiempo donde la tercera y última parte está sucediendo la tercera y última parte de la animación demo, que está en el segundo ocho, y dividir la capa de texto en este punto. Entonces vayamos al guión y copiemos la última parte del texto que tenemos en esta escena. Volver al proyecto. Vamos a pegar el texto. Y voy a borrar el punto al final del texto. Bien, así que ahora podemos extender un poco esta capa y guardar el proyecto antes de pasar al siguiente paso. Nuestro siguiente paso será crear la animación de introducción para esta escena y también crear los movimientos de la cámara Para comenzar, primero encontremos la escala correcta y la posición correcta para que la pre comp de la pantalla de la interfaz de usuario esté al comienzo de la animación. Puedes usar la rejilla de acción segura para asegurarte de que estás colocando la precomp en el centro del marco ¿Bien? Entonces creo que estamos bien ahora con la escala y la posición de la precomp Así que ahora vamos a estar en el segundo y crear un fotograma clave para la propiedad scale aquí Ahora, vayamos al inicio de la línea de tiempo y escalemos la precomp, así tendremos una bonita animación de zoom out para la introducción Bien. Y ahora vamos a abrir la propiedad position y crear un fotograma clave con el valor actual Llevemos este fotograma clave al final de la animación de introducción ya que queremos que la precomp se coloque en Y ahora para la primera posición al inicio de la intro, deberíamos ajustar la posición de la precomp para que quede un poco más centrada Entonces en este punto en el tiempo, podemos mover la precomp un poco hacia la derecha Bien. Entonces con eso hecho, hemos creado una bonita animación de introducción A continuación, veamos lo que sucede en la animación de flujo de demostración y tratemos de entender qué ángulos podríamos crear para adaptarse mejor a lo que se muestra en la pantalla de la interfaz durante la animación de flujo de demostración. También hay que pensar en el momento en que deberíamos empezar a cambiar los ángulos. Por ejemplo, en este caso, no quiero que el ángulo cambie hasta que comience la segunda parte de la demo, la animación. Entonces eso significa que hasta el segundo segundo , nada debería cambiar. 22. Construcción de la escena 8: animación de demostración de arrastrar y soltar: Regresa. En esta lección, comenzaremos a trabajar en la siguiente escena. Pero antes de eso, organicemos nuestro panel de proyectos. Coloquemos estos tres pre comps en la carpeta pre comp Todo bien. Y ahora vamos a crear una nueva pre comp para la nueva escena. Podemos llamarlo escena ocho. Asegúrate de que sea Full HD y que el resto de los ajustes sean correctos. Cerremos ahora todas las pre comps que tenemos aquí. Todo bien. Y ahora entremos al videoboard y veamos qué tenemos que hacer En esta escena, crearemos una animación de flujo de demostración de arrastrar y soltar. Empecemos por entender cuál debería ser la duración de la escena. Debe comenzar alrededor del segundo 53, y debe terminar alrededor de 1 minuto y 1 segundo. Eso significa que tenemos alrededor de 8 segundos. Impresionante. Entonces con eso en mente, encontremos la pantalla de UI relevante animaremos en esta escena Genial. Entonces aquí está. Pasemos ahora a la nueva compilación de escena y arrastremos la pantalla de la interfaz de usuario del navegador a ella. Y ahora quiero tomar un enfoque ligeramente diferente del flujo de trabajo de animación que hicimos hasta ahora. Hasta ahora, primero animamos la animación inicial para cada parte, luego creamos la intro y Outro, luego creamos los movimientos de la cámara y luego ajustamos la Esta vez, quiero que no trabajemos en este enfoque paso a paso. Esta vez, quiero guiarte con un enfoque donde trabajemos en todos los pasos juntos. Quiero que experimentes ambos enfoques para que puedas obtener una buena comprensión de lo que funciona mejor para ti. Y además, entonces entiendes que a veces es incluso mejor trabajar en todos los pasos simultáneamente. Bien. Entonces con eso dicho, en lugar de comenzar con la primera parte del flujo de animación, empecemos a trabajar en la introducción de esta escena Para ello, volvamos al master comp y veamos el outtro de la última escena Tenemos una bonita animación de Zoom out. Mi objetivo es crear una transición genial de match cut. Por lo tanto, vamos a crear el mismo movimiento para la introducción de la nueva escena que en la última Entonces podemos cronometrar el movimiento para obtener esa transición de corte suave a juego. Con eso en mente, volvamos a la nueva escena y comencemos a crear la intro Primero, podemos colapsar esta precomp. A continuación, acerquemos la línea de tiempo y utilicemos las propiedades de posición y escala para crear una animación de alejamiento de 1 segundo de largo. Como queremos que la precomp se vea y se coloque donde está ahora mismo, después de la animación de introducción, necesitamos crear un fotograma clave para las propiedades relevantes en la marca de 1 segundo Entonces tenemos que ir al inicio de la línea de tiempo y ajustar la escala y posición para obtener un bonito movimiento de alejamiento. Abramos la rejilla de acción segura para ver el centro del marco. Ahora, encontremos una buena posición para la precomp en este momento No quiero posicionar la escena según el panel pop up porque en este momento, no la vemos. Veremos más adelante en la animación. Entonces entremos en la precomp y apaguemos las capas pop up por ahora Bien, volvamos a la escena principal. Sigamos ajustando la precomp. Estoy tratando de colocar la precomp, así que los cuadros de lista de archivos estarán perfectamente centrados en el marco ¿Bien? Creo que eso está bien. Creo que ya es bastante bueno. Ahora, ajustemos la velocidad de los fotogramas clave para obtener un movimiento agradable y ágil Eso significa que podemos mover los mangos para que veamos la influencia alrededor del 95%. Creo que el movimiento se ve genial, pero tal vez podamos ajustar la posición de la precomp al inicio de la línea de tiempo Será un poco más interesante si la animación Alejar comienza con el nombre de la pantalla de la interfaz de usuario. Me pararé en la primera posición de fotogramas clave y sólo entonces ajustaré la posición de la precomp en este momento. Vamos a colocarlo aquí. Vamos a comprobar cómo se ve eso ahora. Creo que por ahora se ve mejor. Entonces, lo que hicimos ahora es que enfocamos gran parte de nuestro tiempo en ajustar la animación de introducción Pero, ¿es bueno hacer eso? Quiero mostrarte este tipo de flujo de trabajo para que puedas responder esta pregunta por ti mismo. Más adelante en la lección, podrás responderla. Porque durante la animación, podríamos cambiar esta animación de introducción que pasamos tanto tiempo perfeccionando ahora mismo A lo mejor pasar este tiempo en este punto del proceso no fue una buena opción. Más sobre eso más tarde, por ahora sigamos trabajando. Todo bien. Así que ahora entremos a la pantalla de interfaz de usuario del navegador pre comp y comencemos a prepararla para la animación de flujo de demostración. Primero, podemos volver a encender las capas pop up y luego etiquetarlas en un color diferente. A continuación, podemos colapsar todas las capas que tenemos aquí para obtenerlas en la resolución más alta. Una vez hecho esto, comencemos a crear la primera parte de animación para la animación de flujo de demostración. Ahora podemos desactivar las capas pop up, y luego etiquetemos también la capa de sombra en un color diferente. Y ahora intentemos entender cuál debería ser nuestra primera parte de animación. En nuestro caso, necesitamos crear una animación donde agreguemos un archivo adicional a la lista de archivos en la sección principal de esta pantalla de UI. Y antes de que todo esto suceda, necesitamos crear una animación de arrastrar y soltar. La animación de arrastrar y soltar ocurrirá después de que el panel emergente entre en escena. Eso significa que también necesitamos crear algún tipo de animación de clic para activar la introducción del panel emergente En nuestro caso, podemos activar esto creando una animación de clic para el botón de anuncio que tenemos aquí en la sección de encabezado. Genial. Entonces ahora tenemos una idea de las diferentes partes de animación que necesitamos crear aquí. Con eso en mente, entiendo que lo primero que puedo hacer ahora es precomponer las capas del panel emergente en una precomp De esa manera, me será mucho más fácil crear una animación de introducción para ello y cronometrarla con el resto de las capas Además, será mucho más conveniente crear micro animaciones dentro del panel de interfaz de usuario emergente. Mueve el nuevo pre comp fuera de la carpeta de la pantalla antes de pasar genial. Y ahora podemos comenzar a trabajar en la primera parte de animación de este flujo de demostración, que es la animación de clic en el botón Agregar y la introducción del panel emergente Ya que sabemos que la animación intro de la escena termina en la segunda, eso significa que esta parte de animación debe comenzar desde la segunda. Y no antes. Eso significa que podemos mover el pop up y la capa de sombra para comenzar desde el segundo segundo. Y del segundo uno al segundo dos, crearemos una animación de clic en el botón de anuncio en la sección de encabezado. Así que ahora, en lugar de crear primero la animación de clic, sigamos trabajando con nuestro nuevo enfoque de no mantener el flujo de trabajo paso a paso. En lugar de enfocarnos primero en la animación de clic, nos centraremos en el movimiento de la cámara. En nuestro caso, en lugar de animar una cámara, solo seguiremos ajustando la animación de posición y escala Con eso en mente, ahora parémonos en el segundo segundo y posicionemos la pantalla de UI pre comp de una manera para que podamos ver el botón un poco mejor. Necesitamos la atención de los espectadores para enfocarnos en esa área. Bien, entonces ahora en este punto en el tiempo, después del Zoom y la animación, podemos crear la animación de clic para el botón. La animación de clic tendrá una duración de diez fotogramas. Entonces, parémonos aquí y luego ingresemos a la precomp para mover la sincronización del panel emergente para comenzar a partir de este punto en el tiempo, que es segundo dos y diez fotogramas Una vez hecho esto, volvamos al segundo segundo y creamos la animación de clic. Primero seleccionemos la capa de botones y la coloquemos sobre todas las primeras capas de parte de animación. Y ahora en lugar de animar esta capa, podemos usar el botón de animación precomp que usamos anteriormente en el proyecto Una vez encontrado, dupliquemos esta precomp y ajustemos el nombre para que se ajuste a nuestra escena Ahora, mantenga presionada la tecla Alt u Opción en Mac y arrástrela a la capa de botones en la línea de tiempo para reemplazarla con la precomp de botones Después de eso, ajustemos el tamaño de la precomp para que se ajuste al diseño de la pantalla de la interfaz A continuación, entremos el botón precomp y ajustemos el texto. Impresionante. Ahora, tenemos que asegurarnos de que estamos parados en el momento correcto para que ocurra la animación de clic. Después podremos ingresar al botón precomp y arrastrar los fotogramas clave hasta este punto en Bien. Así que ahora tenemos lista la animación de clic, y estamos listos para pasar al panel emergente. Necesitamos el pop up para entrar a la escena justo después de la animación de clic. Empecemos desde los segundos dos y cinco fotogramas. Para la animación de introducción, usemos la propiedad scale para crear un bonito efecto emergente para esta Hagamos que esta animación dure por 1 segundo. Genial. Una vez que hayamos terminado la animación emergente, ahora podemos crear una animación para la capa de sombra. Para ello, podemos utilizar la animación de sombra borrosa que creamos en una de las escenas anteriores Para encontrar en qué escena se encontraba, usaré la barra de búsqueda del panel de proyectos. La sombra para la pantalla ocho no es lo que necesitamos, ya que es la capa que vemos ahora en nuestra escena. Lo que tenemos que comprobar es la sombra de la pantalla cuatro. Bien, da clic en él y elige revelar en composición. De esa manera, After Effects abrirá la comp con esta capa en su interior. Aquí tenemos esa capa ya enemiga. Así que ahora podemos seleccionar la capa de desenfoque y sombra desde aquí y copiarla y pegarla en nuestra nueva escena. Vamos a pegarlo por encima de la capa de sombra que tenemos actualmente y luego presionar la tecla de corchete izquierdo para alinearla aquí. Ahora podemos eliminar la vieja capa de sombra. Genial. Ahora, asegurémonos de que las nuevas capas que trajimos se ajusten al diseño de nuestra pantalla de interfaz de usuario en esta escena. Como puede ver, las dos capas se colocaron en la misma posición que tenían en la escena de la que fueron copiadas. Eso significa que tenemos que ajustarlos un poco. Entonces hagámoslo rápido. Bien, entonces ahora etiquetemos estas dos capas en morado y abramos sus fotogramas clave para verificar que la animación se ajuste a la introducción del panel emergente Veamos cómo se ve eso. Creo que podemos comenzar esta parte de animación un poco más tarde. Arrastremos estas tres capas para comenzar en los segundos dos y diez fotogramas. Bien, eso se ve bien por ahora. Antes de pasar al siguiente paso, guardemos el proyecto para asegurar el progreso que hemos logrado hasta ahora. Genial. Ahora, en lugar de saltar directamente a la siguiente parte de animación, sigamos con nuestro nuevo enfoque y tomemos un tiempo para finalizar y ajustar esta parte de animación Podemos comenzar ajustando el movimiento de la animación pop up. Vamos a establecer la velocidad en 85% y ver cómo se ve eso. Creo que está bien. Ahora, volvamos a la escena principal y ajustemos el ángulo de la cámara en el momento en el que aparece el panel emergente. Ese cambio de ángulo de cámara debería ocurrir en el segundo tres. Entonces, parémonos aquí y ajustemos las propiedades de posición y escala de la precomp de pantalla Por ahora, vamos a copiar los valores anteriores antes del Zoom y la animación y pegarlos aquí. Ahora, nuestro siguiente movimiento de cámara debería ser hacia el lado izquierdo, ya que necesitamos crear la animación de arrastrar y soltar. Eso significa que nos moveremos hacia la izquierda, y el cursor traerá un archivo desde el lado derecho y lo dejará caer en la sección del panel emergente. Con eso en mente, podemos hacer que la escena vea más interesante acercando un poco más en el panel pop up también porque queremos que el espectador le preste atención en este momento Así que juguemos con los valores de escala y posición hasta que obtengamos un bonito look para la escena. Mi objetivo es hacer el panel emergente ubicado en el centro del marco. Bien. Creo que se ve bien, y ahora deberíamos pasar a preparar el siguiente movimiento de cámara. tiempo. Como queremos agregar una animación de arrastrar y soltar, necesitamos mover la precomp hacia la izquierda para que tengamos espacio para agarrar el archivo y soltarlo dentro del panel emergente Decidamos que esta animación tardará 2 segundos en completarse. ¿Por qué? ¿2 segundos? Porque van a pasar muchas cosas en esta parte de la animación, y no quiero que se sienta demasiado rápido. ¿Bien? Entonces, parémonos en el segundo cinco y movamos la precomp hacia la izquierda Entonces tenemos espacio libre en el lado derecho. De esta manera, crearemos la ilusión de que la cámara se mueve hacia la derecha donde se encuentra el archivo antes de tomarlo con el cursor y arrastrarlo y soltarlo dentro del pop un panel. Ahora, vayamos 1 segundo adelante en el tiempo y copiemos y peguemos aquí el fotograma clave de posición anterior porque queremos que la pre comp regrese a su posición anterior Eso quiere decir que en este momento, ya habremos arrastrado el archivo dentro del panel emergente Para que la animación sea un poco más interesante, podemos crear una micro animación dentro del panel emergente. Mi objetivo es crear algún tipo de micro animación que muestre el panel emergente reaccionando al archivo caído. Pronto, ya verás a lo que me refiero. Por ahora, parémonos en este punto en el tiempo e ingresemos a la precomp del navegador Y a partir de este punto exacto en el tiempo, crearemos esa micro animación dentro de la precomp pop up Entonces primero, entrémoslo. Aquí podemos crear una animación emergente para el icono de carpeta que tenemos También podemos crear una agradable animación giratoria para el trazo punteado que tenemos aquí, pero más sobre eso más adelante. Por ahora, centrémonos en el icono de la carpeta. Primero, vamos a crear un fotograma clave para la propiedad scale en este momento con el valor actual A continuación, decidamos que esta animación emergente durará diez fotogramas y creará otro fotograma clave aquí con el mismo valor Ahora vayamos a la mitad de esta animación y escalemos la capa. Podemos fijarlo en 200. Veamos cómo se ve eso. Creo que podemos escalarlo un poco más. Vamos a probar 300. Genial. Eso es mejor. Ahora, ajustemos la velocidad de los fotogramas clave al 85% para obtener un movimiento un poco más interesante Veamos cómo se ve eso ahora. En mi opinión, es súper rápido. Entonces hagamos que esta animación dure exactamente 1 segundo. Eso significa que si comienza a los 3 segundos y 20 fotogramas, necesita terminar en 4 segundos y 20 fotogramas. Vamos a previsualizarlo de nuevo. Ahora, creo que se ve demasiado lento. Entonces hagamos que esta animación dure hasta 4 segundos y diez fotogramas y verifiquemos una vez más. Impresionante. Creo que esta vez lo hicimos bien. Ahora, para que la animación emergente se vea un poco más interesante, parémonos al comienzo de esta animación y coloquemos el punto de anclaje en el área central inferior de la capa Esto hará que el icono de la carpeta aparezca de una manera más dinámica. En mi opinión. Además, ahora el icono de la carpeta no choca con el texto debajo de él. Con eso hecho, pasemos a la siguiente micro animación que podamos crear aquí. Esta vez, hagamos girar el trazo punteado. La forma más fácil de hacerlo es recreando el rectángulo desde cero. Así que vamos a seleccionar la herramienta de rectángulo, asegurarnos de que no se haya seleccionado ninguna capa, y creemos un nuevo rectángulo con aproximadamente el mismo tamaño que el rectángulo original en el diseño. Para el color, cambiémoslo a un color de relleno regular y por ahora, ponlo en gris. Ahora, crea el rectángulo y ajusta su tamaño. Para eso, usemos la propiedad size. Primero, desmarcaré las proporciones restringidas y luego ajustaré los valores por separado. También podemos mover la forma manualmente hasta que se ajuste al diseño original. Impresionante. Ahora, ajustemos las esquinas redondeadas de la forma para que se vea más cerca del diseño original. Genial. Con eso hecho, ahora tratemos con el trazo que necesita estar en esta capa. Para el color, podemos muestrear el morado que vemos en el trazo o en el icono de la carpeta. Para el peso del trazo, podemos establecerlo en dos. A continuación, tenemos que asegurarnos de que este trazo se vea como el diseño original. Eso significa que necesitamos que aparezca como un trazo punteado. Para ello, abre el menú de trazos dentro de la capa y agrega guiones Para rotar el trazo, usaremos la propiedad offset. Pero antes de eso, ajustemos el valor del guión para que coincida con el diseño. Podemos fijarlo a cinco. Veamos ahora si se ve similar al diseño original. Sí, creo que se ve genial. Por ahora, dejemos esta capa apagada para que podamos probar el color gris del diseño original para colorear el relleno de nuestra nueva forma. Bien. El diseño se ve bien, y ahora estamos listos para animarlo. Como dije antes, usaremos la propiedad offset para esto. Pero en lugar de crear manualmente fotogramas clave para la rotación, usemos una simple expresión de tiempo para que gire sin cesar sin Para ello, mantenga pulsada la tecla Alt u Opción en Mac, y haga clic en el cronómetro de la propiedad offset Ahora, dentro del cuadro de expresión escriba T asterisco -100. Con eso hecho, el trazo ahora gira infinitamente hacia la derecha sin que nosotros creamos fotogramas clave manualmente En caso de que se sienta demasiado rápido, se puede bajar el valor dentro de la expresión. Pongámoslo a -50 y veamos cómo se ve eso. Impresionante. Creo que se ve muy bien. Con eso hecho, ahora podemos apagar la capa rectangular original. Y después de eso, podemos shi esta capa en la línea de tiempo ya que ya no la necesitamos. Por último, coloquemos nuestra nueva capa de forma por encima de la última capa. Bien. Y ahora, una vez que hayamos terminado la micro animación dentro del panel pop up, podemos hacer que esta animación se vea aún más interesante agregando una micro animación adicional para el panel pop up exterior en la escena com. Déjame mostrarte a lo que me refiero. Primero, parémonos en el punto en el tiempo donde comienza esta animación. Ahora, volvamos al navegador prec. Una vez aquí, podemos crear una animación de escala adicional para la precomp pop up, a partir de este punto en el tiempo Así que crea el primer fotograma clave aquí. Ahora, necesitamos sincronizar esta animación con la animación que ocurre dentro de la precomp pop up Si no estás seguro de dónde termina, puedes ingresar a la precomp y pararte en el punto en el tiempo donde termine la animación ahí Luego vuelve a la precompilación del navegador, crea otros fotogramas clave en este momento y luego párate en medio de esta animación para reducir la precompilación emergente Ahora podemos ajustar la velocidad a 85 para que coincida con el movimiento dentro de la precomp emergente Y con esto, creamos una animación de reacción bastante genial para el panel de interfaz de usuario emergente. Esto se verá mucho más genial una vez que agreguemos la animación de arrastrar y soltar. Pero por ahora, centrémonos en comenzar la siguiente parte de animación. Cuando necesitamos mostrar la lista principal de archivos con el nuevo archivo que fue arrastrar y soltar, para esto, necesitamos crear una animación outtro para la precomp emergente que ocurre justo después de la animación de escalado Parémonos en los segundos siete y 20 fotogramas y pongamos la escala a cero en este momento. Luego podemos ir al editor de grafos y ajustar el movimiento, para que comience lento y acelere hacia el final. Después de eso, creemos también una animación outtro para el desenfoque en la sombra que tenemos aquí Necesitamos sincronizar esta animación con la animación outtro de la precom pop up Para hacerlo rápidamente, podemos pararnos en este momento, copiar los primeros fotogramas clave de ambas capas y pegarlos aquí. Después haga clic derecho, vaya al Asistente de fotogramas clave y elija fotogramas clave inversos Previsualicemos esta animación algunas veces para ver cómo se siente. Impresionante. Creo que se ve muy bien. Ahora estamos listos para comenzar a animar la siguiente parte, donde agregamos otro archivo a la lista para terminar nuestra animación de flujo de demostración para esta escena Desde que ya sabía quería crear este tipo de animación. Al construir el guión gráfico en Illustrator, mientras preparaba esta pantalla de interfaz de usuario para la animación, me aseguré de tener un diseño de caja de archivo en la lista separado en capas De esta manera, ahora podemos encontrar estas capas en la línea de tiempo, seleccionarlas todas y duplicarlas. Porque sabía que el archivo agregado aquí en la parte de arrastrar y soltar sería un nuevo archivo JPEG o PNG. Me aseguré de que las capas de diseño para este archivo PNG también estuvieran separadas. Así que seleccionemos todas las capas relacionadas con este cuadro de archivo y presionemos Ctrl más D para duplicarlas. Ahora vamos a moverlos hacia arriba para que se sientan en una pila. Una vez hecho esto, precompongamos todas estas capas y llamemos a esta pantalla pre comp ocho panel dos Genial. Ahora usaremos esta precomp como el nuevo cuadro de archivo que aparece en la lista de archivos después de la animación de arrastrar y soltar Pero primero, necesitamos ajustar el diseño dentro de esta precomp Usemos la región de interés para recortar el tamaño de esta comp ya que es demasiado grande en este momento. Una vez hecho esto, ahora vamos a seleccionar todos los elementos dentro y los padres a la capa de caja blanca. De esta manera, podemos seleccionar la capa de caja blanca, alinearla al centro de la comp y asegurarnos de que todo esté perfectamente centrado. Bien. Y ahora vamos a crear una nueva capa de texto con un nombre de archivo diferente. Para tener un flujo agradable y continuo de la escena anterior, podemos nombrar a este archivo punto de referencia JPEG. Esto funciona porque en la escena anterior, la conversación se trataba de enviar una referencia para la tarea que se estaba discutiendo. Después de ajustar el tamaño y la posición del texto, podemos desactivar la capa de texto original. Dejaremos el resto de la información tal como está, y seguiremos adelante. Ahora, volvamos al navegador, UI, una pantalla, colapsemos nuestro nuevo pre comp, y encontremos un buen lugar para ello en la lista. Acerquemos y asegurémonos de que el espaciado entre los cuadros de archivo sea consistente con el resto de la lista. Con eso hecho, comencemos a crear la animación descendente para todos los cuadros de archivo de la lista. Pero antes de hacer eso, tratemos con el cuadro de archivo PNG donde todos los elementos están en capas separadas. Asegurémonos de seleccionar todos los objetos relacionados para este archivo y los padres a la caja blanca principal de este diseño de archivo. Genial. Ahora etiquetemos todas estas capas en naranja, así sabemos que pertenecen a una sección. Después podemos seleccionar todas las capas relacionadas con este archivo, excepto la capa de caja blanca y las shi en la línea de tiempo. De esta manera, será mucho más fácil crear la animación de descenso para los cuadros de archivo de la lista. Y para evitar cualquier interferencia, bloqueemos las capas de desenfoque y sombra. Bueno. Bien, entonces, ahora comencemos a seleccionar todas las capas de caja de archivos. Para este archivo, asegúrese de no seleccionar uno de sus elementos que están en una capa separada. En su lugar, seleccione la casilla blanca de este archivo. Ahora, una vez que se hayan seleccionado las cinco capas, busquemos el momento adecuado para iniciar esta animación. En nuestro caso, puede comenzar justo después de que el embudo pop up termine su animación de introducción, que está en el segundo siete y 20 fotogramas Entonces, mientras estamos aquí, vamos a crear los primeros fotogramas clave para la posición Ahora vamos a avanzar 1 segundo. La línea de tiempo y bajar todas las capas seleccionadas. Necesitamos asegurarnos de que nuestro nuevo pre comp se coloque exactamente donde está el primer cuadro de archivo. Por lo tanto, antes de arrastrar las capas hacia abajo, presionemos Control o Comando R para abrir las reglas y luego crear una guía para que sepamos cuánto necesitamos arrastrar las capas hacia Ahora podemos apagar las reglas y comenzar a arrastrar las capas Genial. Y ahora vamos a facilitar fácilmente los fotogramas clave y ajustar el movimiento en el editor de gráficos Hagamos que el movimiento comience rápido y disminuya la velocidad hacia el final. Veamos cómo se ve eso. Todo bien. Creo que se ve bien por ahora. Ya no necesitamos la guía que creamos, así que vamos a sacarla del marco. Todo bien. Y ahora tratemos con el área superior en la sección de lista porque necesitamos ocultar el nuevo cuadro de archivo en esta área. Para ello, podemos encontrar el degradado blanco que creamos en la escena anterior y luego copiarlo de ahí y pegarlo en nuestra nueva escena. Entonces abramos la escena siete y luego ingresemos los mensajes PreComp Ahora vamos a encontrar esa capa de forma de degradado blanco que creamos aquí y copiarla. De vuelta a la nueva escena antes de pegar la capa, primero tratemos con el orden de la lista de archivos que tenemos aquí Lo que quiero decir con eso es, quiero colocar el nuevo archivo pre comp que creamos en el lugar correcto en la pila de capas. A lo mejor necesitamos colocarlo aquí. No. Entonces, de acuerdo con el orden de las capas, esta es el área del cuadro de archivo inferior en el diseño. Eso significa que necesitamos mover la pre comp para que esté antes de la capa de archivo, que es el primer archivo de la lista en el diseño. En nuestro caso, necesitamos colocarlo aquí. De esa manera, como pueden ver, cuando estoy seleccionando cada capa, tenemos un orden cronológico Estoy haciendo esto porque me será un poco más fácil saber dónde colocar la capa de degradado blanco. En nuestro caso, el degradado blanco debería estar por encima todas las capas de caja de archivo porque necesitábamos ocultar el cuadro de archivo superior. Entonces seleccionaré esta capa para pegar el degradado blanco por encima de ella. Ahora llevemos esta capa al inicio de la línea de tiempo y luego ajustemos su diseño para que se ajuste a nuestra sección de lista. Primero, primero, lo llevaré al centro de la sección de lista, y luego ajustaré el ancho de esta forma. Quedémonos un poco en la vista previa y ajustemos un poco más la posición. Todo bien. Entonces ahora el degradado blanco está ocultando el cuadro superior del archivo, pero también está ocultando otra capa que no necesita ocultarse. Déjame mostrarte a lo que me refiero. Si ahora apagamos el degradado blanco y luego también apagamos el primer cuadro de archivo de la lista, veremos que aquí hay una sección con algo de texto. Esta pequeña sección necesita ser vista. Por lo tanto, necesitamos encontrar esta capa en el panel de capas y luego moverla por encima de la capa de forma de degradado blanco. Genial. Y ahora podemos volver a encender todas las capas. Y como pueden ver, ahora solo tenemos escondida la zona correcta. Con eso hecho, ahora podemos ir y venir en la línea de tiempo y ver cómo se ve esta sección. Creo que se ve genial. Entonces ahora tenemos que hacer lo mismo para la parte inferior de esta sección. Nuestro objetivo ahora es ocultar el cuadro de archivo inferior porque como puedes ver, choca con los elementos de diseño de números de página Entonces primero, podemos duplicar la capa de forma de degradado blanco y luego arrastrarla hacia abajo al lugar correcto. Después podemos hacer click derecho sobre la capa y voltearla verticalmente. Ahora veamos cómo se ve eso durante la animación e intentemos ajustar su posición si es necesario. En mi caso, necesito bajar un poco más la capa. Impresionante. Ahora todo se ve bien, y estamos listos para pasar al siguiente paso. En el siguiente paso, quiero que el movimiento descendente de las cajas de archivos tenga un ligero retraso en la animación. Quiero que el primer cuadro de archivo de la lista comience a moverse primero, y luego el resto de los cuadros de archivo se muevan en consecuencia. Eso significa que ahora necesitamos retrasar todos los fotogramas clave que creamos para la propiedad position para estas capas En este caso, para obtener un buen retraso, vamos a crear un desplazamiento de dos fotogramas entre los fotogramas clave Para crear el retraso, utilizaré la nueva función de desplazamiento de After Effects. Y como quiero que el primer cuadro de archivo la lista se mueva primero, comenzaré a seleccionar los fotogramas clave de la capa inferior porque esta es la primera capa de la sección. Todo bien. Entonces ahora mantendré presionada la tecla Alt y controlaré u opción en comando en Mac y luego arrastraré los fotogramas clave hacia la derecha hasta que vea que la segunda capa está llegando a la posición del indicador de tiempo Veamos cómo se ve eso. Impresionante. Creo que se ve genial. Y ahora vamos a guardar el proyecto antes de seguir adelante. Bien. Entonces ahora volvamos a la comp maestra y veamos qué debemos hacer a continuación. Después de la parte en la animación de flujo de demostración donde arrastramos y soltamos un nuevo archivo y luego vemos este archivo agregado a la lista, ahora deberíamos alejarnos un poco para ver toda la pantalla de la interfaz de usuario con la lista de archivos actualizada, y esa animación Alejar debería comenzar en el segundo siete. Desde el segundo seis hasta el segundo siete, no queremos ningún cambio en los movimientos de la cámara porque este será el momento en que ocurra la animación del archivo de caída de Dragon. Entonces ahora a los siete segundos necesitamos crear fotogramas clave de posición y escala con los valores actuales Sólo entonces pasemos al segundo ocho y creemos la animación Alejar. Para ello, podemos copiar los segundos fotogramas clave en la pantalla y pegarlos al segundo ocho De esta manera, ahora tenemos la pantalla de UI que se muestra completamente en el marco. Ahora, dado que creamos nuevos fotogramas clave y copiamos y pegamos otros fotogramas clave, necesitamos asegurarnos de que el movimiento siga siendo consistente a lo largo de toda la animación Y como pueden ver, tenemos partes donde el movimiento no es consistente. Necesitamos que la velocidad de todos los fotogramas clave esté alrededor del 85% Pero como se puede ver, en algunas partes, este no es el caso. Te estoy mostrando esto porque quiero que veas que ajustar la velocidad de los fotogramas clave antes de terminar la animación inicial es como trabajar dos veces A lo largo de la animación de la escena, creamos fotogramas clave y luego los ajustamos de inmediato cada vez Aquí terminamos la animación, y aún necesitamos ajustar los fotogramas clave Por lo tanto, sugiero primero terminar de crear los fotogramas clave iniciales para toda la escena, dejándolos como fotogramas clave lineales regulares Sólo cuando termines toda la animación, deberías empezar a ajustarlas. Esta es una de las desventajas de trabajar con el enfoque de animar cada parte sin seguir un orden cronológico Entonces, cuando trabajes en tu próximo proyecto, toma la decisión correcta del flujo de trabajo y el enfoque que estás a punto de seguir. Bien. Dicho esto, volvamos al proyecto y comencemos a ajustar el movimiento de la cámara una vez más, pero esta vez para todos los fotogramas clave a la vez, porque sí queremos que el movimiento sea consistente a lo largo de toda la animación Y lo haremos usando el panel de velocidad de fotogramas clave. Como no podemos ajustar diferentes propiedades a vez usando el panel de velocidad de fotogramas clave, primero necesitamos seleccionar todos los fotogramas clave de posición y ajustarlos Vamos a establecer la velocidad en 85%. Entonces hagamos lo mismo con los fotogramas clave de escala. Una vez hecho esto, no olvidemos ajustar los primeros fotogramas clave de esta animación, ya que esta es la animación intro de esta escena Y como queremos tener un buen corte de partido de la escena anterior, debemos ajustar la velocidad de fotogramas clave en esta parte a alrededor del 95% porque queremos que el movimiento aquí sea súper rápido, por lo que la transición de corte de coincidencia funcionará perfectamente Entonces ahora vayamos al master comp y llevemos la nueva escena a la línea de tiempo aquí y trabajemos en la transición de la escena anterior. Pero antes de eso, noté que no recortamos la duración de la escena anterior. Acabamos de recortarlo del master comp. Dicho esto, entremos a la escena siete y recortemos el flujo de trabajo al segundo 11, que es 1 segundo después de la animación outtro Prefiero tener 1 segundo de espacio libre por si necesito hacer algunos pequeños ajustes de tiempo en las escenas. Todo bien. Así que ahora llevemos la escena ocho a la línea de tiempo y asegurémonos de que la transición de corte de partido esté funcionando. Para ello, necesitamos recortar la escena ocho desde el principio hasta el punto más rápido en el tiempo del movimiento de introducción Vamos a traer la escena ocho para comenzar justo después de escena siete y ver cómo se ve la transición. Después de ver la animación algunas veces, no siento que el matchcut se vea bien La razón principal de esto es la posición de nuestros elementos en las dos escenas. En nuestro caso, son las pantallas UI en la escena siete y la pantalla UI en la escena ocho. Veamos qué podemos hacer para esta transición de corte de partido se vea un poco mejor. Primero, intentemos cambiar la escala inicial y la posición de la pantalla de la interfaz de usuario en la escena ocho. Intentemos bajarlo un poco y colocarlo más en el centro, para que el movimiento se sienta más como una animación de alejamiento directo en lugar del movimiento de alejamiento que tenemos ahora mismo. Una vez hecho el ajuste de la posición, asegúrese de que no se cambie la velocidad. ¿Bien? Ahora volvamos a la master comp y veamos cómo se ve eso. Bien, creo que se ve un poco mejor. Volvamos a la escena 81 más tiempo e intentemos reducir un poco más la pre comp al principio, y luego cambiemos los siguientes fotogramas clave de escala a un número menor, tal vez 80 Demasiado pequeño. Intentemos 90. Volvamos a la master comp una vez más y veamos eso unas cuantas veces para sentir cómo se ve. Todavía no me encanta cómo se ve el corte de fósforo. En este caso, podemos cambiar completamente el movimiento del corte de coincidencia de una animación Alejar a una animación panorámica. Déjame mostrarte a lo que me refiero. Primero, tenemos que ocuparnos de la animación Otro en la escena siete. Una vez aquí, parémonos al final Otros clave y eliminemos los fotogramas clave de última posición Ahora asegurémonos en este momento, la escala sigue siendo la misma que en el inicio de la animación outtro Para ello, sólo podemos copiar los fotogramas clave de escala anteriores y pegarlos aquí Genial. Y ahora, en lugar de crear una animación de alejamiento, arrastremos la precomp hacia arriba fuera del marco para obtener un buen movimiento de cámara panorámica hacia abajo No olvidemos comprobar que la velocidad sigue siendo la misma. Todo bien. Entonces ahora una vez hecho eso, vayamos a la escena ocho y aquí, hagamos la pantalla de UI, ingresemos a la escena desde abajo. Esto creará un movimiento panorámico de la cámara. Pero antes de hacer eso, vamos a traer de vuelta la escala pre comp de la animación de introducción a 90 Así que pongamos los fotogramas clave de segunda escala a 90 y luego hagamos lo mismo para el primero Ahora, podemos derribar esta precomp. Pero antes de eso, asegurémonos de que esté perfectamente alineado con el centro del marco. El uso de la herramienta align realmente no la colocará en el centro del fotograma, ya que según After Effects, ya está en el centro de la escena porque mira directamente la posición de la capa de ajuste dentro de esa precomp Y lo mira porque esta precomp está colapsada, que significa que After Effects está leyendo la información interna de las capas dentro de esta precomp 23. Crear el título final y la escena outro: Regresa. En esta lección, comenzaremos a trabajar en las escenas finales de este proyecto. Comenzaremos por crear la escena de animación del título. Para hacerlo más rápido, podemos usar la animación de título similar que creamos al principio del video. Lo duplicaremos y ajustaremos la animación en su interior. Y antes de hacer todo eso, vamos a crear una animación outtro para la escena anterior Entremos a la escena ocho y ahora pasemos a la Segunda nueve. Esta vez podemos hacer que la pantalla de la interfaz de usuario salga del marco por el lado izquierdo. Porque la animación de texto que entrará en escena después de ésta tendrá un movimiento de izquierda a derecha. Pronto, vas a entender lo que quiero decir. Mientras tanto. Asegúrese de establecer la velocidad de los dos últimos fotogramas clave en alrededor del 95% Y después de eso, recortemos la línea de tiempo 1 segundo después de la animación tro. Genial. Y ahora vamos a pararnos en medio de la animación tro y en el master comp recortar la comp hasta este punto en el tiempo. Impresionante. Así que ahora, una vez que hayamos terminado con la escena, comencemos a crear la animación del título para la siguiente escena. Para ello, encontremos el primer título de animación pre comp que creamos. Aquí está. Es la primera escena que creamos. Ahora, como queremos tener la misma animación para nuestra nueva pre comp, primero vamos a duplicar esta pre comp del panel de capas y llevarla al punto correcto en el tiempo. Veamos cómo se ve eso. Bien. Entonces, ¿por qué seguir luchando? Luchando. Entonces, ¿por qué seguir luchando? Ir a un punto. Genial. Y ahora necesitamos hacer algunos cambios en la animación del título para que se ajuste al guión y a la voz en off Por lo tanto, no vamos a hacer los cambios dentro de esta pre comp. Ahora necesitamos encontrar esta pre comp en el panel del proyecto para poder duplicarla desde ahí. Queremos duplicarlo desde el panel Proyecto porque queremos tener una pre comp completamente nueva que podamos hacer cambios dentro sin afectar al primero. Una vez hecho esto, mantengamos ahora la opción Alter y arrastremos la nueva pre comp la original en la línea de tiempo para cambiar entre ellas. De esta manera, guardamos todos los fotogramas clave que creamos en la precomp original, pero ahora tenemos una pre comp completamente nueva Que podamos hacer cambios en su interior sin afectar al original. Todo bien. Entonces ahora, con eso dicho, comencemos cambiando el texto aquí. Para ello, abramos el guión y copiemos el texto relevante. De vuelta al proyecto, pega el texto, y una vez hecho eso, eliminemos la palabra luchando porque esta palabra debe animarse de manera diferente. Lo animaremos como la palabra múltiplo. Y eso lo haremos en un segundo. Por ahora, cambiemos el signo de exclamación que tenemos aquí por un signo de interrogación Impresionante. Y ahora vamos a eliminar las capas de texto no relevantes. Por último, asegurémonos de que la máscara que tenemos en esta capa de texto se ajuste al texto actual. Para ello, primero, eliminemos la máscara actual y luego creemos una nueva. De esta manera, se ajustará automáticamente al texto actual. Genial. Y ahora lo siguiente que podemos hacer es ajustar la posición de la palabra que se divide en varias capas, y podemos hacerlo fácilmente moviendo el objeto nulo ya que todas las letras están parentadas a él Vamos a colocarlo en algún lugar por aquí por ahora. Bien. Y ahora ajustemos las letras para que podamos obtener la palabra relevante para esta escena. En este caso, tiene que estar luchando. Y como sabemos que la palabra luchando tiene más letras que múltiples, será una buena idea desapaciguar las capas de letras del nulo por ahora porque agregaremos capas de letras adicionales en un segundo, que ajustaremos en la animación Todo bien. Entonces ahora vamos a ajustar las letras, hacer doble clic en cada letra y cambiarla en consecuencia. Todo bien. Y ahora duplica la última capa y muévala un fotograma hacia adelante para mantener la animación offset. Después cámbielo a la letra correspondiente. Ahora, vamos a duplicar esta capa y repetir el mismo proceso. Esta vez, cambia la letra a G. Awesome. Y ahora, como tenemos más letras en esta palabra, debemos ajustar la animación de posición para todas ellas. Para hacerlo sin ningún problema, primero llevemos todas las capas para comenzar exactamente desde el mismo punto en el tiempo. Posteriormente los compensaremos una vez más. Por ahora, hagamos que todos los fotogramas clave comiencen desde el mismo punto en el tiempo Yo, será mucho más fácil ajustar su animación de posición. Todo bien. Y ahora vamos a ajustar los fotogramas clave de última posición para las nuevas letras Para ello, debemos estar primero en el último fotograma clave y sólo después ajustar la posición Si no eres capaz de pararte justo en el fotograma clave, como en mi caso, no te preocupes Es solo una pequeña falla de software que ocurre después de reposicionar fotogramas clave muchas veces En este caso, simplemente quédese lo más cerca posible del fotograma clave y mueva la capa Como puede ver, se creó un nuevo fotograma clave actualizado, pero no está alineado con el resto de los fotogramas clave. No te preocupes por ello. Solo asegúrate de no tener dos fotogramas clave de posición para la posición en este momento Por ahora, vamos a crear una nueva guía y enfocarnos en alinear las nuevas letras con el resto del texto. No se preocupe si el fotograma clave no está alineado con los otros fotogramas clave Entonces movamos la nueva letra a la derecha para reorganizar la posición del resto de las letras Básicamente, lo que estamos haciendo ahora es ajustar los fotogramas clave de última posición para las letras Una vez hecho esto, coloquemos el objeto nulo en el centro de esta palabra. Genial. Ahora podemos acercar el primer texto. Y ahora vamos a pararnos en medio de la animación de letras y ajustar su posición en este punto en el tiempo, también. Todo bien. Una vez que hayamos hecho eso, repasemos la animación y verifiquemos si todo está bien, como puedes ver. Durante el proceso de reposición de los fotogramas clave de última posición que creé, fotogramas clave innecesarios, si también te pasó a ti, entonces asegurémonos de eliminar los fotogramas clave antiguos mientras dejamos Genial. Entonces, una vez que hayamos terminado con esto, asegurémonos de que no haya capas seleccionadas y presionemos para cerrarlas todas. Ahora vamos a crear el retraso de un fotograma que tuvimos antes para esta parte de animación. Impresionante. Entonces ahora podemos pararnos en el punto en el tiempo donde todas las letras están en su lugar final y luego seleccionarlas todas y hacerlas padre al nulo. Y ahora también tendremos el movimiento de rebote secundario que creamos para el nulo. Ya podemos deshacernos de la guía. Y ahora vamos a tratar con la animación del signo de interrogación. Primero, podemos retrasar un poco esta animación en la línea de tiempo. Dado que ahora la animación de letras dura un poco más, podemos comenzar la animación del signo de interrogación a partir del segundo segundo. Bien, el tiempo se ve bien, pero ahora necesitamos moverlo para que se coloque al lado del texto. Para ello, podemos crear un nuevo objeto nulo, solo para usarlo como objeto móvil para las dos capas que tenemos aquí. Lo estoy haciendo en vez de mover cada capa una por una. ¿Bien? Creo que podemos colocarlo en algún lugar por aquí. Genial. Tenemos todo posicionado en su lugar. Y ahora antes de seguir adelante, ajustemos el tamaño de esta comp usando la herramienta de región de interés. Puede abrir los ajustes de composición y establecer las dimensiones en números redondeados. No tenemos que hacerlo, pero yo lo prefiero así. Lo más importante es asegurarse de que las capas estén alineadas con el centro de la comp. Como pueden ver en mi caso, tengo todo alineado. En caso de que no tengas eso, puedes usar el método de objeto nulo para padre todas las capas al nulo y moverlo para ajustar la posición de todas las capas a la vez. Todo bien. Y ahora, antes de seguir adelante, hagamos un ajuste final. Veo que la animación aquí comienza desde el segundo uno en diez fotogramas. Seleccionemos todas las capas excepto el primer texto y llevemos esta animación para comenzar desde la segunda. Impresionante. Ahora, estoy seguro que aquí lo tenemos todo hecho. Podríamos mover un poco el primer texto a la derecha, y eso es todo. Ahora volvamos al master comp y veamos qué tenemos, presta atención a la voz en off Nuestro objetivo es asegurarnos de que se sincronice perfectamente con la animación de texto Entonces, ¿por qué seguir luchando? Ve a onepoint.com y haz que tu jornada laboral sea más fácil. Entonces, ¿por qué seguir luchando? Ve a onepoint.com y haz tu trabajo. ¿Por qué seguir luchando? Ir a un punto. Sigue luchando. Ir a un punto. Bien. Entonces después de verlo un par de veces, veo que sí necesitamos ajustar el tiempo. Pero antes de hacer eso, eliminaré el último fotograma clave de posición que tengo aquí. Este pequeño movimiento es irrelevante para este texto. Fue más relevante para la animación de texto anterior. Ahora movamos diez fotogramas hacia atrás e iniciemos la escena a partir de este punto en el tiempo. Impresionante. Entonces ahora eso significa que necesitamos ajustar el tiempo de la animación tro para la escena anterior. Por lo tanto, estando de pie en este punto en el tiempo, entremos en la escena ocho y asegurémonos de que la animación ya termine en este punto en el tiempo. Para ello, necesitamos ingresar a la pantalla de UI pre comp. Y primero lo primero, asegúrate la animación outtro termine en la posición del indicador de tiempo Entonces seleccionaré todos los fotogramas clave de las capas de archivos y me aseguraré de que el último fotograma clave termine aquí Eso significa que ahora también necesitamos reajustar el tiempo de la parte de animación anterior Tiene que terminar en este punto en el tiempo. Entonces, parémonos aquí y luego movamos todos los fotogramas clave de la parte anterior de animación para terminar aquí. Impresionante. Con eso hecho, no nos olvidemos de la micro animación que ocurre dentro de la precomp pop up Tiene que comenzar desde este punto en el tiempo. Entonces entremos en la precomp y movamos aquí los fotogramas clave. ¿Bien? Entonces ahora como cambiamos el tiempo de la parte final de esta animación de flujo de demostración, eso significa que también debemos ajustar el tiempo de los movimientos de la cámara en la escena principal. Necesitamos sincronizar la animación de arrastrar y soltar con la animación outtro del panel emergente dentro de esta precomp Eso significa que la animación de arrastrar y soltar debe terminar en este punto en el tiempo en el que el panel emergente inicia la animación de salida Entonces, parémonos aquí y luego vayamos a la escena principal. Y ahora, asegúrate de ver todos los fotogramas clave que tenemos aquí. Ahora, selecciona todos los fotogramas clave de la parte final y tráelos aquí para que la pantalla de la interfaz ya esté en el centro del marco. Como puedes ver, de esta manera, tenemos todo sincronizado perfectamente, y así es como reajusta el tiempo de tus animaciones de flujo de demostración No hay nada de fantasía ni complicado en eso. Todo lo que necesitamos es un poco de enfoque y comprensión de dónde comienza y termina cada una de nuestras partes de animación . ¿Bien? Entonces ahora antes de volver a la comp maestra y ver la animación una vez más, quiero ajustar la posición final de la capa de archivo. No quiero que oculte los objetos detrás de él. Quiero ver la animación de carpeta morada. Impresionante. Entonces ahora, después de ajustar el tiempo dentro de esta pre comp, pongámonos en medio de la animación outtro Y mientras estamos aquí, volvamos a la master comp y crop scene eight pre comp hasta este punto en el tiempo, vamos a acercarnos y asegurarnos de que no tenemos un espacio vacío entre la escena ocho y la nueve. Bien. Y ahora veamos cómo se ve eso. Una manera. Entonces, ¿por qué sigue luchando? Oye. Entonces, ¿por qué seguir luchando? Pensándolo bien, creo que aquí no tenemos que crear una transición de match cut. Extendamos la escena ocho pre comp para obtener un simple panning a la transición izquierda Creo que se ve mejor en este caso. Podemos ingresar a la escena ocho y ver dónde termina exactamente la animación Otro, y luego recortar la pre comp hasta ese punto en el tiempo en la comp maestra. El cuadro a la transición izquierda se ve mucho mejor. Podemos iniciar la Escena nueve un poco antes. Vamos a moverlo diez fotogramas hacia atrás y ver esta parte algunas veces para ver cómo se siente eso. Entonces, ¿por qué seguir luchando? Luchando. Ir a one point.com Entonces, ¿por qué seguir luchando? Ir a onepoint.com. Entonces, ¿por qué seguir luchando? Ve a onepoint.com y haz tu Bien. Creo que se ve genial. Y ahora quiero asegurarme de que la palabra luchando se colocará en el centro del marco. Para ello, primero podemos abrir la grilla de acción segura. Y ahora vamos a pararnos en el último fotograma clave de posición de esta pre comp y ajustarlo. Por lo que la palabra se posicionará en el centro. Impresionante. Entonces ahora tenemos la letra G casi tocando el techo del marco en este momento. Ingresemos a la precomp y ajustemos la animación de esta carta Primero, seleccionemos esta capa y presionemos para ver todos los fotogramas clave Y ahora intentemos pararnos en medio de esta animación y ajustar la posición de esta capa. No te preocupes si no puedes pararte exactamente sobre los fotogramas clave. Simplemente ajuste la posición, y luego eliminaremos el fotograma clave irrelevante Además, no se preocupe si no puede colocar el nuevo fotograma clave alineado exactamente con el resto de los fotogramas clave Esto no se notará en la animación. Impresionante. Entonces ahora, volvamos a la master comp, y como puedes ver, todo se ve perfectamente bien. Con eso hecho, ahora podemos guardar el proyecto para asegurar los cambios que hicimos hasta ahora. Genial. Entonces ahora sigamos a la siguiente escena. Para ver qué tenemos que hacer a continuación, podemos ir al tablero de video. Bien, entonces ahora necesitamos crear la escena final para este proyecto. Esta es la escena de llamada a la acción que es muy común en este tipo de videos explicativos Por lo general, en esta escena, necesitamos presentar el logo y alguna animación de llamada a la acción como echa un vistazo a nuestro sitio web o haz clic en el siguiente enlace. Por supuesto, necesita ser sincronizado con la voz en off. En nuestro caso, nuestro llamado a la acción es promocionar el sitio web y decirle al espectador que lo visite. Dicho esto, volvamos al master comp y comencemos a preparar la escena. Pero primero, llevemos esta capa de Illustrator a la carpeta Assets. Bien. Y ahora presionemos Catrol o Command N para crear una nueva comp. Podemos llamarlo escena diez. Asegurémonos de que la duración sea de 2 minutos antes de hacer clic en Bien. Por supuesto, más adelante ajustaremos la duración. Impresionante. Entonces ahora comencemos por diseñar la escena. Podemos comenzar con traer el logo a la escena. Para ello, podemos buscar el logo, pre comp que tenemos en el proyecto, y luego llevarlo a la línea de tiempo. Una vez hecho esto, ahora asegurémonos de que el logo se ajuste a la escena y bájelo un poco. Como comprenderá, necesitamos tener algo de espacio para el botón de llamada a la acción que debe estar debajo del logotipo. Impresionante. Y ahora podemos pasar para comenzar a crear el botón de llamada a la acción. Para ello, podemos usar uno de nuestros pre comps de botón que creamos durante el proyecto Duplicemos el último botón pre comp y luego ajustemos el nombre. CTA significa llamado a la acción. Genial. Entonces ahora vamos a llevarlo a la escena y ajustar el diseño y el texto en su interior. Primero lo primero, cambiemos el texto al nombre del sitio web. Una vez hecho esto, ingresemos los ajustes de composición y ajustemos el ancho para que se ajuste al tamaño del botón. Bien. Y ahora vamos a posicionar los dos precomps para que tengamos una composición agradable y equilibrada Podemos bajar el botón y también bajar el logo. Genial. Con eso hecho, podemos comenzar a animar la escena Y la animación principal que hay que pasar aquí es la introducción de la esfera, que es nuestro cursor en el proyecto, haciendo clic en el botón Para ello, busquemos la precomp del cursor en el panel del proyecto y luego arrastremos esta precomp a la escena Y ahora para la animación, podemos iniciar la introducción del cursor desde el área superior de la escena Colóquelo en el centro verticalmente. Bien, ya es suficiente. Y ahora etiquetemos este pre comp en amarillo y comencemos a animarlo. Usaremos la propiedad de posición para esto. Así que vamos a crear el primer fotograma clave al comienzo de la línea de tiempo Y ahora vamos a adelantar 1 segundo y llevar el pre comp aquí al lado derecho de la escena. A continuación, movamos 1 segundo hacia adelante y llevemos la precomp a algún lugar de la zona del botón Podemos alinearlo verticalmente a la comp, y luego acerquemos y coloquemos un poco más abajo. Impresionante. Y ahora vamos a crear la animación click para el cursor, que también será la animación outtro del mismo Para ello, utilizaremos la propiedad de escala. Así que crea un fotograma clave aquí. Entonces movamos 20 fotogramas y pongamos la escala a cero. Genial. Entonces ahora, una vez que hayamos terminado de crear el movimiento inicial, podemos comenzar a ajustarlo. Primero, comencemos ajustando el trazado usando la herramienta Vértice Queremos tener un movimiento agradable y redondeado para ello. Genial. Una vez que ajustamos el camino, ahora tratemos con el movimiento. Primero, facilitemos fácilmente los marcos clave de posición. Y luego en el editor de grafos, hagamos la velocidad de introducción, 95% porque queremos crear un corte de coincidencia a partir de la escena anterior Y ahora, en este momento, hagamos que esta esfera se ralentice moviendo el mango hacia la derecha. No quiero que se detenga por completo en este punto, así que me aseguraré de convertir este fotograma clave en un fotograma clave continuo y luego asegurarme de que la velocidad en esta parte no sea cero. Veamos cómo se ve eso. Genial. Se ve bien. Ahora vamos a tratar con los fotogramas clave de escala. Para llamar la atención del espectador sobre esta área, podemos pararnos en medio de la animación a escala y hacer que el cursor sea un poco más grande para que crezca antes de desaparecer Como puedes ver, llama más la atención al cursor en este momento. Bien. Y ahora vamos a facilitar fácilmente los marcos clave. Y esta vez, usa el editor de grafos para hacer que el cursor crezca rápido, disminuya la velocidad en el medio y gane velocidad hacia el final. Impresionante. Creo que se ve genial, y ahora podemos volver a la línea de tiempo y ver la animación que creamos hasta ahora para ver cómo se siente. Bien. Creo que la animación se ve muy bien. Pero en mi opinión, no necesitamos que la animación del logo ocurra aquí. Quiero que el logo sea estático en la escena. Quiero aprovechar esta oportunidad para mostrarte cómo puedes congelar tus precomps animados. Es muy sencillo. Primero, necesitamos quedarnos en el punto en el tiempo donde el logo ya ha terminado la animación, luego hacer clic derecho sobre la precomp, ir a T y elegir congelar fotograma Genial. Ahora noto que el logo no parece exactamente en el centro del marco, así que vamos a moverlo un poco hacia la izquierda. Eso es mejor. Genial. Y ahora vamos a tratar con el tiempo de la animación de clic dentro de la precomp del botón Por ahora, está sucediendo demasiado pronto. Para esto, parémonos en el punto en el tiempo donde el cursor realiza la animación de clic, luego ingresemos la precompilación del botón y mueva los fotogramas clave aquí. Comprobemos cómo se ve eso. Creo que puede comenzar cinco fotogramas antes, así que ajustemos el tiempo muy rápido. Genial. Y ahora se siente mucho mejor. Por eso siempre sugiero revisar la animación algunas veces para ver cómo se siente el movimiento. Bien, entonces ahora veo que toda la animación se ve y se siente genial. Podemos colapsar el cursor pre comp y pasar al siguiente paso, que es agregar la escena a la comp maestra. Primero, podemos estar en el segundo cinco y recortar esta línea de tiempo hasta este punto en el tiempo. Una vez hecho esto, vayamos a la comp maestra y llevemos la escena final a la línea de tiempo. Genial. Y ahora empecemos a trabajar en la transición. Primero, podemos entrar en la escena final y ver dónde está la mitad de la animación de introducción Aquí está. Vamos a pararnos en este punto en el tiempo y luego en el master comp recortar esta pre comp a la posición del indicador de tiempo. Ahora, vamos a traer esta pre comp para comenzar justo después de la anterior y luego ajustar el final de la pre comp anterior. Como queremos crear un bonito corte de partido, podemos terminar la escena en el punto donde el cursor está a punto de salir de la escena. Ahora traemos aquí la escena final y veamos cómo se ve eso. Podemos recortar algunos fotogramas desde el inicio de la escena final para obtener un movimiento un poco más continuo. Bien, eso se ve bien. Y ahora agreguemos un poco de animación suave de Zoom in para la escena final que no se sienta demasiado estática. Podemos crear el primer fotograma clave aquí. Después de eso. Parémonos en un punto en el tiempo, un poco después de que termine la animación dentro de esta precomp Eso debería ser un poco después de este punto en el tiempo. Creo que deberíamos ampliar un poco la duración de la comp final. Entonces hagámoslo muy rápido. Hagamos que dure 7 segundos. Ahora vamos a expandir todas las capas aquí, y después de eso, volvamos a la comp maestra y expandamos la pre comp. Genial. Así que ahora podemos pararnos a 1 minuto y 8 segundos y escalar un poco el pre comp. Vamos a probar 110. Ahora veamos qué tenemos. Se ve bien, pero no me gusta cómo el cursor está tocando el logo en la escena final. Entonces entrémoslo y ajustemos la trayectoria de posición del cursor. Bien. Creo que está bien. Ahora volvamos a la master comp y veamos cómo se ve eso con el Zoom y la animación. Se ve genial. Y ahora parémonos al final de la animación y presionemos para terminar el área de flujo de trabajo aquí y ahora veamos todo el proyecto desde el principio con la voz en off Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda. Conocí a One Point. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con One Point, obtienes una visión clara de todo lo que tu equipo está trabajando, todos tus proyectos, todas tus tareas, todo en un solo lugar. Necesito la imagen completa. Cada proyecto incluye tareas detalladas, subtareas y seguimiento del progreso en tiempo real, por lo que nada se desliza por las grietas Quieres ver quién se está quedando atrás, dirígete a la pestaña de tu equipo para ver la actividad de todos de un vistazo. Necesidad de dar seguimiento con alguien. Salta al sistema de mensajería integrado donde todas tus conversaciones se organizan por contacto. Envía un recordatorio rápido o comparte una actualización al instante. Y sí, compartir archivos es sencillo. Sube cualquier documento y todo tu equipo tendrá acceso a él de inmediato. Entonces, ¿por qué seguir luchando? Ve a onepoint.com y haz tu jornada laboral más fácil, Gestionar un gran equipo en Mul. Bien, eso se ve muy bien. Y lo más importante, la animación se sincroniza con la voz en off Ahora, una vez que hayamos hecho bien las dos cosas más importantes, estamos listos para pasar al siguiente paso, que es agregar la animación del cursor en cada escena. Va a ser súper divertido, así que te veré en la siguiente. 24. Añadir la animación del cursor: Regresa. En esta lección, comenzaremos a agregar la animación del cursor a la escena relevante. Tenga en cuenta que estamos empezando a agregar la animación del cursor solo después de terminar toda la animación y sincronizarla con la voz en off Y eso es porque ahora estamos seguros que el tiempo de la animación de clic en el proyecto se sincroniza perfectamente con la voz No queremos involucrar la animación del cursor durante la animación inicial porque complicará los ajustes de tiempo en el proceso Como recordarás, ajustamos algunos fotogramas clave de animación de flujo de demostración muchas veces, e imagina si también necesitaríamos ajustar la animación del cursor también Haría que el proceso fuera mucho más lento. Por lo tanto, prefiero imaginar la animación del cursor durante la animación inicial de todo el proyecto, y sólo después de haber terminado y seguro que el tiempo es genial, agregaré la animación del cursor. Todo bien. Entonces con eso dicho, comencemos a trabajar en la primera animación del cursor, que, como ya comprenderá, tiene que suceder en la escena cuatro. En la segunda parte de animación donde vemos por primera vez la pantalla de UI del proyecto. Entonces entremos en esta precomp y luego agreguemos la precomp del cursor que tenemos en el proyecto a esta Etiquetemos esta pre comp en amarillo y comencemos a crear la animación del cursor. Y así podremos ver nuestro cursor un poco mejor en la escena. Podemos agregarle un trazo blanco, solo por ahora. Posteriormente, diseñaremos el cursor como queramos. Por ahora, tenemos que enfocarnos primero en crear la animación. Entonces entraré en el y seleccionaré la capa de forma. Ahora agreguemos un color de trazo y elijamos el negro. Para el ancho, puedes dejarlo en dos, y ahora podemos ver claramente el cursor. Genial. Así que ahora volvamos al master comp y empecemos a animarlo. Desde mi experiencia, descubrí que la mejor manera de hacerlo es usando un método muy sencillo. Déjame mostrarte a lo que me refiero. Todo bien. Entonces primero, no me enfoco en crear la intro o la outtro para el cursor Lo primero en lo que me concentro es en el momento. El tiempo para las animaciones de clic que tenemos en el flujo de demostración, por ejemplo, en este punto en el tiempo, tenemos la animación de clic para el cuadro del proyecto. Podemos ingresar a esta pre comp y encontrar el punto exacto en el tiempo donde está sucediendo. En este caso, está sucediendo en este momento. Entonces ahora, podemos quedarnos aquí y luego volver a la comp maestra. Entonces necesitamos colocar el cursor en la posición lógica y crear un fotograma clave para la propiedad position en este punto en el tiempo Después de eso, no prestes atención a nada más en la escena que no sea donde está sucediendo la animación del segundo clic. Como pueden ver, en nuestro caso, está sucediendo en este momento. Entonces, lo que voy a hacer es llevar el cursor al área donde está sucediendo la animación de clic. Ahora, acerquemos la línea de tiempo y sigamos ajustando la posición del cursor acuerdo con las animaciones de clic que tenemos aquí. El siguiente está pasando aquí. Entonces vamos a traer el cursor aquí. Genial. Y ahora sigamos adelante y veamos dónde está sucediendo la siguiente animación de clic y luego llevemos el cursor ahí. Impresionante. Entonces ahora veo que no hay más animaciones de clic en esta escena, así puedo comenzar a crear la animación atro para el cursor. Y para ello, podemos ir 1 segundo después del último fotograma clave y sacar el cursor del fotograma, como queramos Esta vez, vamos a arrastrarlo hacia el lado izquierdo. Genial. Por ahora, la animación probablemente te parezca muy rara, pero créeme, pronto, todo quedará claro. Por ahora, trate de enfocarme en mi flujo de trabajo. Entonces, primero, creamos los fotogramas clave de posición inicial de acuerdo con la animación de clic Ahora podemos comenzar a ajustar la trayectoria de posición para hacer que el cursor se mueva de una manera más redondeada y natural. Para ello, seleccionemos la herramienta Vértice y tratemos primero de este punto Haga clic aquí una vez, y ahora vamos a curvar el camino. Ahora, cambie a la herramienta de selección. Y ahora vamos a arrastrar este mango un poco hacia arriba. Podemos sostener Alt u opción mientras lo hacemos para asegurarnos de que movemos solo un mango sin afectar al segundo. Bien. Ahora hagamos lo mismo para el segundo mango. Bien, entonces ahora casi hemos terminado de ajustar el camino. Y antes de hacer eso, vamos a crear la animación de introducción para el cursor Para ello, puedes mover 1 segundo hacia atrás desde los fotogramas clave de primera posición y arrastrar el cursor hacia la derecha para que entre a la escena desde el lado derecho. Genial. Ahora podemos terminar de ajustar el punto de curva en esta trayectoria. Curvamos este punto también para que podamos hacer que el cursor entre en la escena con un movimiento un poco más curvilíneo En este punto, por lo general me encanta acercar y comprobar la animación del cursor para ver si se sincroniza con la animación de clic en la escena Noté que el cursor no debería colocarse aquí en este punto en tiempo porque este es el punto donde necesita rebotar en el cuadro de tareas. Eso significa que necesitamos hacer que el cursor esté en algún lugar alrededor de él antes de llegar a este punto para hacer la ilusión del movimiento conmovedor. Así que movamos 1 segundo hacia atrás desde el primer fotograma clave conmovedor y movamos el cursor a algún lugar por aquí Una vez hecho eso, volvamos ahora a la herramienta Vértice y curvemos el nuevo punto, también Ajustemos el asa para conseguir un poco más curvilíneo. Movimiento. Impresionante. Y ahora para este punto, podemos suavizar el movimiento ajustando el primer manejador de puntos, bajarlo y arrastrarlo un poco más hacia la izquierda. Genial. Así que ahora, como puedes ver, tenemos un bonito movimiento redondeado y curvilíneo para la animación del cursor También podemos curvar el último punto y ajustar el mango para obtener un movimiento un poco más redondeado para la animación outtro Bien. Así que ahora, una vez que hayamos terminado de crear la animación inicial, vamos a crear un movimiento de clic para el cursor para que podamos sincronizarlo junto con la animación de clic que creamos para los paneles. Por supuesto, podríamos crear una animación a escala en cada momento. Donde tenemos un panel de interfaz de usuario, haga clic en animación, pero tomaría mucho tiempo. Y en caso de que necesitemos ajustar el tiempo de animación de clic, nos llevaría una eternidad ajustar la animación de clic del cursor. Por lo tanto, quiero enseñarte un truco genial para sincronizar tus clics de cursor con los clics del panel, así no necesitarás cronometrar los dos manualmente. Cuando creé este proyecto, supe que había una manera de activar la animación dentro de una pre comp usando una expresión, pero no sabía exactamente cómo funciona eso, y definitivamente no sabía cuál era la expresión o en qué propiedad aplicarla. En este caso, utilicé el poder de la IA para generar la expresión por lo que ahora quiero enseñarte a hacer eso. Podrías ver mi curso AI for motion, en el que aprendimos a usar hat GPT para llegar a expresiones muy útiles con solo describir lo que queremos lograr No es necesario tener ninguna experiencia con expresiones o entender la codificación. Te sugiero encarecidamente que veas el curso de IA for motion en caso de que quieras subir de nivel tu flujo de trabajo y aprovechar realmente la IA en After Effects. Así que ahora voy a utilizar las mismas técnicas de ese curso para llegar a una buena configuración para automatizar mis animaciones click aquí. Todo bien. Entonces con eso dicho, volvamos a la acción. Primero lo primero, antes de saltar a Chat GPT, vamos a crear la animación de clic para el cursor Parémonos al comienzo de la línea de tiempo y creemos un fotograma clave de escala aquí Ahora digamos que esta animación durará diez fotogramas. Así que crea otro fotograma clave aquí. Entonces, parémonos en medio de los fotogramas clave y escalemos la forma Por último, facilitemos fácilmente los fotogramas clave y ajustemos el movimiento en el editor de gráficos para que el movimiento comience rápido Como puedes ver, de esta manera, creamos una agradable animación de clic para el cursor. Genial. Entonces ahora quiero activar esta animación en mi escena principal. En los puntos relevantes en tiempo donde necesito sincronizarlo con la animación de clic de los paneles de la interfaz de usuario. Pero digamos que no sabemos cómo hacerlo exactamente. Este es el momento perfecto para pasar unos minutos a ver si podemos hacerlo usando una expresión. Lo primero que me encanta hacer es tomar una captura de pantalla de mi escena mientras aseguro de que las capas y sus nombres sean claramente visibles en la captura de pantalla. Entonces me gusta señalar la capa de la que pronto hablaré con Chat GPT No tienes que hacerlo. Todo bien. A continuación, copiemos esta captura de pantalla y luego vayamos a Chat GPT y peguemos la imagen en un nuevo chat También funciona perfectamente con la versión gratuita de Chat GPT Bien. Y ahora apenas empiezo a describir mi situación, comenzando por mencionar qué software uso. Escribo con mal inglés y muchos errores ortográficos y gramaticales solo para que entiendas que no necesitas un inglés perfecto. El objetivo principal es describir la situación y explicar tu objetivo. Es muy importante mencionar los nombres correctos de tus capas a las que te refieres. Bien. Entonces, una vez que hayamos terminado con eso, podemos presionar Enter y dejar que la IA haga lo suyo. Ahora, antes de aplicar la expresión al proyecto, me encanta leer la explicación que brinda Chat GPT En este caso, puedo copiar la expresión y utilizarla. Pero después de leer las notas, noto que la expresión que me dio necesita ser ajustada por dentro. Veo que para activarlo, necesito ajustar algunos valores bajo la línea de texto de duración de clic. Digamos que no tengo idea de lo que eso significa. Solo quiero una expresión simple que active mi animación de clic de cursor que creé dentro del cursor pre comp. Entonces en ese caso, antes de pegar la expresión actual, intentaré explicarle a Chat GPT que quiero una expresión que funcione sin que yo necesite hacer ajustes en el código Entonces ahora tenemos una nueva expresión. Podemos leer la explicación y aplicarla acuerdo a los pasos de orientación que nos dio Chat GPT También puedes encontrar esta expresión en la carpeta assets que descargaste de mí. Así que ve y cópialo en caso la expresión que creaste no funcione después de aplicarla en el proyecto. Pero primero, sí quiero que uses la expresión creaste ahora antes de aplicar la mía. Bien, entonces volvamos ahora al proyecto y apliquemos la expresión. Primero, como sugirió Chat GPT, necesitamos activar la función de remapeado de tiempo para el pre com A continuación, necesitamos crear una expresión para la propiedad time remap Entonces solo pasemos la expresión. Impresionante. Con eso hecho, veamos ahora si funciona. Entonces primero, parémonos en el punto en tiempo donde debería estar la animación del primer clic y luego hagamos el siguiente paso que sugirió Chat GPT En este punto en el tiempo, necesitamos crear un nuevo marcador en la precomp, puedes usar el atajo para hacerlo Bien. Entonces ahora, como puedes ver, la animación de escala que creamos dentro precompilación del cursor ahora está sucediendo aquí sin que movemos los fotogramas clave Eso significa que la expresión está funcionando perfectamente. Así que ahora podemos empezar a crear nuevos marcadores. En cualquier momento queremos que ocurra la animación de clic. Pero antes de eso, podemos ajustar el movimiento de la animación del cursor para que se mueva de una manera más natural y no manera lineal como se mueve ahora mismo. Necesitamos que el cursor haga una pausa para algunos fotogramas en el momento en el que ocurre la animación de clic. Déjame mostrarte a lo que me refiero. Vamos a abrir solo los fotogramas clave de posición y luego seleccionarlos todos y asegurarnos de que la velocidad esté establecida digamos, 85% Al hacer esto, ahora tenemos el movimiento completamente lento en los puntos entre los fotogramas clave Es genial porque ahora el cursor estará casi estático en el momento de la animación del clic del cursor. Bien. Pero ahora hay momentos en los que no queremos que el cursor sea estático. Como en este punto en el tiempo, queremos que siga moviéndose lentamente. Déjame mostrarte cómo lidiar con estos momentos. Primero, debemos asegurarnos seleccionar los fotogramas clave de ese momento específico Y luego usando el panel de velocidad de fotogramas clave, conviértelos en fotogramas clave continuos Ahora podemos acercar y subir un poco estos fotogramas clave, por lo que la velocidad en este momento no será cero Como puedes ver, ahora no se detiene y sigue moviéndose lentamente. Una vez hecho eso, tratemos ahora los momentos en los que tenemos la conmovedora animación sucediendo, como, en este punto en el tiempo. Para hacer la ilusión del movimiento conmovedor, necesitamos acelerar el movimiento del cursor en el momento conmovedor. Y tenemos que hacer que vuelva súper rápido para crear ese movimiento hinchable Veamos cómo se ve eso. Genial. Tenemos un bonito movimiento de toque hinchable Pero ahora, como comprenderá, también necesitamos crear el movimiento conmovedor hinchable para los siguientes fotogramas clave Intentemos ajustar la velocidad de los fotogramas clave para ver si podemos hacerlo bien Arrastremos este asa hacia la derecha. Estoy tratando de hacer que el cursor se mueva súper rápido en estos dos puntos. Como pueden ver, no importa lo que esté haciendo, no se siente bien. El movimiento no siente una animación conmovedora. Entonces déjame mostrarte lo que tenemos que hacer para que esto se vea mejor. Ahora volvamos a la línea de tiempo y primero encontremos el área problemática con la que debemos tratar. Estamos hablando de la animación que ocurre aquí. Ahora vamos a traer estos cuatro fotogramas clave de nuevo a fotogramas clave lineales Mantenga el comando del controlador y haga clic en uno de ellos una vez. Después de eso, pongámonos en medio de estos fotogramas clave y creemos fotogramas clave con el valor actual A continuación, hagamos lo mismo en la segunda animación conmovedora. Por último, movamos cinco fotogramas hacia adelante y creemos un fotograma clave también antes del Outro Por ahora, puede que no entiendas por qué hicimos eso, pero pronto todo estará claro. Por ahora, comencemos a ajustar el movimiento. Seleccione todos los fotogramas clave de la última parte y facilícelos fácilmente. Y ahora vamos al editor de grafos y comencemos a ajustar el movimiento. Recuerda, queremos crear esa animación conmovedora hinchable Así que hagamos que el cursor se mueva rápido antes del momento táctil y rápido después del momento táctil. Genial. Entonces ahora queremos que el cursor se desplace en el aire durante unos fotogramas, y ahí es donde nuestros nuevos fotogramas clave nos resultan útiles porque ahora podemos hacer que este momento dure más tiempo moviendo el mango de este fotograma clave hacia Entonces necesitamos que el cursor tenga ese movimiento de toque hinchable después de eso, para que podamos ajustar la velocidad en este momento, como hicimos para el momento de tocar anterior Impresionante. Entonces ahora hagamos lo mismo para el momento final de tocar también. Una vez hecho esto, veamos cómo se ve eso. Genial. Como puedes ver, ahora obtenemos una animación conmovedora más notoria. Y en mi opinión, se siente mucho mejor que la animación anterior que creamos al principio. Bien. Entonces ahora no quiero que el cursor se detenga por completo antes de salir de escena Entonces seleccionaré este fotograma clave y aseguraré de que sea un fotograma clave continuo, lo que me permitirá subir estos fotogramas clave Ahora bien, la velocidad aquí no estará en cero. También puedo mover el mango hacia la izquierda para hacer que el cursor salga lentamente y gane velocidad hacia el final. En caso de que te guste este movimiento, puedes aplicarlo a los momentos suspendidos en las conmovedoras partes de animación Podemos seleccionar los momentos de flotación a la vez mientras mantenemos presionada la tecla Mayús, y luego usar el atajo para abrir el panel de velocidad de fotogramas clave para ambos Ahora, hagamos que estos fotogramas clave continuos y asegurémonos de sacarlos a colación Bien, me encanta cómo se ve eso. Ahora salgamos del editor gráfico y veamos esta parte de animación, junto con el resto de la escena. Creo que se ve genial. Y con eso, ahora estamos listos para pasar a la siguiente escena donde necesita haber una animación de cursor dentro. Entonces vayamos al master comp y verifíquelo. Bien, la siguiente escena en la que trabajaremos es la escena cinco. Antes de eso, cerremos todas las pre comps abiertas que tenemos aquí Impresionante. Y ahora entremos en escena y tratemos de entender lo que tenemos que hacer aquí. Bien, entonces veo que el cursor debe ingresar a la escena alrededor de este punto en el tiempo, y debemos crear una animación de clic para abrir el panel de subtareas y luego crear otra animación conmovedora para verificar algunas de las subtareas dentro de este panel Con eso en mente, pasemos a la escena anterior donde creamos la animación del cursor y copiemos el cursor pre comp de ahí porque ya tenemos la expresión aplicada en esta precomp Bien, y ahora volvamos a nuestra nueva escena actual, peguemos la precomp del cursor y deshagamos de todos los fotogramas clave en los marcadores que creamos aquí Asegúrese de no eliminar la propiedad de remapa de tiempo. Entonces vayamos al inicio de la línea de tiempo y presionemos la tecla de corchete izquierdo para iniciar esta precomp desde aquí. Todo bien. Y ahora comencemos a animarlo. Lo primero que haremos es encontrar el momento en el tiempo donde la animación del primer clic está sucediendo en la escena. Está sucediendo en algún lugar por aquí en caso no esté seguro de dónde comienza exactamente la animación de clic, puede ingresar a la precomp de interfaz y encontrar cuándo está sucediendo En nuestro caso, está pasando aquí. Entonces, mientras estamos aquí, volvamos a la escena principal y ahora llevemos el cursor aquí y marquemos este punto creando una primera posición fotogramas clave en este momento Genial. Y ahora podemos seguir animando la siguiente animación del cursor o podemos crear la intro para ello Esta vez, vamos a crear la introducción y luego seguir ajustando la animación para que se ajuste a la animación de flujo de demostración ¿Bien? Así que vayamos 1 segundo hacia atrás en el tiempo y saquemos el cursor del fotograma. Vamos a hacerlo. Entra a la escena desde el lado derecho. Fresco. Entonces ahora tenemos una animación de introducción, y la tenemos colocada donde está sucediendo la animación de clic en el flujo de demostración A continuación, movamos 1 segundo hacia adelante y llevemos el cursor a algún lugar aquí porque ahora necesitamos algunos fotogramas para que el panel emergente entre en escena. Impresionante. Y ahora encontremos la siguiente posición que debería estar el cursor. En este caso, necesitamos llevarlo al área de la primera sub tarea en este momento. Así que vamos a arrastrarlo aquí. A continuación, veamos dónde se activa la segunda subtarea, la animación de casilla de verificación, y luego llevemos el cursor para que se coloque junto a ella Impresionante. Entonces ahora, como aprendimos en la escena anterior, podemos pararnos en medio de la conmovedora animación y mover un poco la esfera hacia la izquierda para conseguir que se cierne en el movimiento del aire Impresionante. Entonces, una vez que tengamos todos los momentos de tocar y hacer clic, podemos avanzar 1 segundo y sacar el cursor del fotograma. Bonito. Entonces ahora terminamos de crear el movimiento inicial para el cursor, y nuestro siguiente paso es comenzar a ajustarlo. Podemos comenzar curvando los puntos relevantes, comenzando por los momentos en los que la esfera debería flotar en el aire Entonces podemos redondear el outtro en los puntos de introducción. Ahora, cambiemos a la herramienta de selección y comencemos a ajustar los mangos de los puntos redondeados para obtener un bonito movimiento curvilíneo para el cursor Todo bien. Entonces, una vez hecho eso, busquemos ahora el momento en el que está sucediendo la animación de clic y agreguemos un nuevo marcador para activar la expresión. Impresionante. Entonces ahora terminamos todos los pasos iniciales importantes, y estamos listos para comenzar a mejorar la moción. Seleccionemos todos los fotogramas clave y facilitémoslos fácilmente. Y ahora entremos al editor de grafos y ajustemos la velocidad del movimiento. Nuestro objetivo es hacer que el cursor, en este punto en el tiempo, se ralentice por un periodo de tiempo más largo ya que tenemos la animación click sucediendo aquí. De esta manera, conseguimos que el cursor se mueva súper lento para más fotogramas. Genial. Entonces ahora, en este punto, suelo revisar el resto de la animación en la escena y tratar de entender qué se debe ajustar a continuación. En este caso, sé que necesito crear esa animación conmovedora hinchable para la parte de animación del panel de subtareas Por lo tanto, seleccionemos este fotograma clave y arrastremos el mango izquierdo hacia la derecha, que el cursor sea súper rápido en el momento conmovedor Entonces para crear el movimiento hinchable, necesitamos hacerlo rápido después del punto de contacto, muy similar a lo que hicimos en la escena anterior Bien, ahora hagamos lo mismo para el segundo momento conmovedor. Genial. Entonces ahora, después de revisar esta parte algunas veces, digamos que decidimos hacer el cursor permaneciera en la escena por un periodo de tiempo un poco más largo. No quiero que salga de escena justo después del segundo momento conmovedor. Para ello, pongámonos en el último fotograma clave y cambiemos posición del cursor para colocarlo en algún lugar por aquí Ajustemos la curva para este punto. Genial. Y ahora vamos a mover 1 segundo hacia adelante en el tiempo y sacar el cursor de la escena. Impresionante. Y ahora, antes de seguir adelante, veamos primero cómo se ve la animación que creamos. Bien. Entonces noté que en este momento, el cursor se detiene por completo, y no me encanta. Arreglemos esto convirtiendo este fotograma clave un fotograma clave continuo y acelerando el movimiento en este punto Genial. Entonces ahora tenemos un movimiento un poco mejor. Pero noté que la primera animación conmovedora no se siente bien. Y es porque tenemos una gran cantidad de tiempo entre fotogramas clave antes del punto de contacto y los fotogramas clave del punto de contacto Por lo tanto, podemos encontrar un buen punto en el tiempo antes del punto de contacto y mover un poco el cursor para crear un nuevo fotograma clave aquí Asegúrate de que todavía tienes ese camino redondeado. Bien. Entonces ahora después de hacer eso, podemos ingresar al editor de grafos y tener un poco más de control sobre la animación y la velocidad del primer momento conmovedor. Podemos hacer que el movimiento táctil más rápido arrastrando este mango hacia la derecha. Y ahora vamos a tratar con el fotograma clave intermedio. Primero, debemos asegurarnos tanto el movimiento entrante como el saliente de estos fotogramas clave estén conectados para poder controlarlos a ambos como una sola unidad, y podemos hacerlo convirtiendo este fotograma clave en un fotograma clave continuo Ahora podemos decidir cuál es la velocidad que debe ser en este momento. Veamos qué tenemos. Se ve genial. Ahora tratemos con el movimiento que se cierne entre los momentos conmovedores No quiero que el cursor se detenga por completo en este momento, así que me aseguraré de acelerar tanto el movimiento entrante como el saliente para estos fotogramas clave de una unidad también Impresionante. Eso se siente mucho mejor. Entonces mientras hacía todos estos pasos, traté de mostrarte cómo jugar con los fotogramas clave cuando necesitas el movimiento que se ajuste a tu imaginación Este es el proceso de diseño de movimiento real. También verificamos la animación y ajustamos los fotogramas clave hasta conseguir algo que nos guste Entonces estoy comprobando una vez más la moción. Cada vez que lo veo, noto algo nuevo. Esta vez, no me encanta que la animación se detenga aquí. No se siente bien. Así que me aseguraré de hacer este momento un movimiento más continuo. Todo bien. Entonces con eso dicho, veamos ahora toda la escena desde el principio hasta el final y veamos cómo se ve eso. Se ve genial, pero creo que podemos hacer algunos retoques finales para que se vea mejor Siento que el movimiento de introducción es demasiado rápido. Vamos a traer los primeros fotogramas clave para comenzar 1 segundo antes para que la introducción dure más tiempo, lo que hará que parezca Vamos a verlo una vez más. Noté que el movimiento hinchable es demasiado duro en el segundo momento conmovedor Así que entremos al editor de grafos y lo aliviemos un poco. Bien, eso se ve mejor. Y como el fotograma clave final de la conmovedora animación termina en los segundos siete y diez fotogramas, comencemos el Otro a partir del segundo ocho y diez fotogramas solo para que sea exactamente 1 segundo. Bien, así que con eso, hemos terminado la escena, y estamos listos para pasar a la siguiente Así que volvamos al master comp y encontremos la siguiente escena con la que tenemos que tratar . Todo bien. Entonces veo que tenemos dos escenas con las que trabajar. Escena siete y ocho, las animaciones de cursor en estas dos escenas son un poco más simples que las anteriores. Así que comencemos. Empezaremos con la escena siete. Primero lo primero, entremos a la escena y llevemos el cursor pre comp del anterior Ahora, eliminemos los fotogramas clave de posición que tenemos en él, y luego también eliminemos el marcador que creamos Parémonos al inicio de la línea de tiempo y presionemos la tecla del corchete izquierdo para iniciar esta pre comp desde aquí. Todo bien. Entonces ahora veamos qué tenemos aquí. Veo que la animación del primer clic está sucediendo aquí. Entonces, parémonos en este punto en el tiempo y llevemos el cursor para colocarlo en algún lugar alrededor de la segunda caja de contacto. Ahora, marquemos este punto con los fotogramas clave de posición. Um, antes de pasar a la animación de flujo de demostración, vayamos al comienzo de la línea de tiempo y arrastremos el cursor hacia la derecha fuera del fotograma para crear la animación de introducción para ello Genial. Ahora podemos avanzar 1 segundo y llevar el cursor a algún lugar por aquí para que no interfiera con la transición que ocurre en la animación de flujo de demostración. Todo bien. Y ahora veamos dónde está sucediendo el siguiente clic o si hay algún momento conmovedor a lo largo de la animación. Como puedes ver, el siguiente clic está ocurriendo después de muchos segundos, lo que significa que tenemos mucho tiempo libre que el cursor necesita para hacer algo. En estos casos, me encanta cambiar la posición del cursor cada 1 segundo. Estoy haciendo esto solo para tener una primera idea del movimiento del cursor. Posteriormente, lo ajustaré si es necesario. Entonces hagámoslo ahora. Parémonos ante nuestros últimos fotogramas clave y movamos 1 segundo hacia adelante y acerquemos el cursor un poco más a su momento de clic que debe suceder en el área del botón A continuación, muévete 1 segundo nuevo y tráelo a algún lugar por aquí. Sigamos haciendo eso hasta que lleguemos al botón. Ya que tenemos el texto aquí, me aseguraré de que el cursor no choque con él. Todo bien. Y ahora, después de alcanzar el botón, podemos movernos 1 segundo y sacar el cursor del fotograma hacia abajo para crear la animación outtro para ello Impresionante. Entonces con eso hecho, podemos pasar al siguiente paso. En este punto, lo mejor que podemos hacer es ajustar el trazado, y podemos hacerlo usando la herramienta Vértice Entonces, primero redondeemos todos los puntos relevantes, y después de eso, usando la herramienta de selección, ajustemos los manejadores para tener un trazado agradable y redondeado. Entonces, una vez hecho eso, ahora podemos crear un marcador en el momento en el que está ocurriendo el clic. Tenemos el primer click aquí y tenemos otro para el botón. Voy a ajustar estos puntos muy rápido. Bien. Así que ahora vamos a crear un marcador aquí también. Genial. Así que ahora vamos a seleccionar todos los fotogramas clave y facilitarlos fácilmente. Después de eso, podemos comenzar a ajustar el movimiento. Esta vez, fijemos la velocidad de todos los fotogramas clave en 85% y veamos cómo se ve eso Bien, creo que se ve bien por ahora, pero en mi opinión, la animación outtro no se siente bien Cancelemos la curva del último punto de ruta para que salga en un camino recto y veamos cómo se verá eso. Eso es mucho mejor, pero está pasando demasiado rápido, en mi opinión. Así que vamos a asegurarnos de que la animación outtro dure 2 segundos y no uno Sí, eso es mucho mejor. Impresionante. Así que ahora, una vez que hayamos terminado con toda la animación inicial, intentemos ahora hacer algunos ajustes para que el cursor se mueva de una manera más fluida No me encantan las pausas que ocurren en estas áreas. Lo primero que podemos intentar es eliminar estos fotogramas clave. Entonces ajustemos los mangos de los puntos para crear un camino agradable y curvilíneo. Todo bien. Eso ya se ve un poco mejor. Ahora, seleccionemos estos tres fotogramas clave donde obtuvimos los momentos de pausa y abramos el panel de velocidad de fotogramas clave para convertirlos en fotogramas clave continuos. Una vez hecho esto, vayamos al editor gráfico y asegurémonos de que la velocidad en estos momentos sea superior a cero. En este punto, solo estoy viendo la animación y tratando de ajustar la velocidad de los fotogramas clave para tener un movimiento que me sienta bien En mi opinión, en este momento donde el cursor está flotando sobre el texto, está sucediendo demasiado rápido. Así que vamos a asegurarnos de que esta animación dure un poco más. Veamos la animación unas cuantas veces y veamos qué más podemos mejorar. No me gusta que ocurra la pausa aquí, así que arreglemos eso muy rápido. Bien, eso es mejor. Pero ahora no quiero que el cursor se mueva de manera ágil antes de llegar al botón Entonces voy a ajustar los mangos de esa manera, así la velocidad entre estos dos fotogramas clave no será tan rápida Te estoy mostrando este proceso para que veas mi proceso de pensamiento y como trato con los ajustes en la animación. Bien, con eso hecho Casi terminamos la escena. Lo único que me está molestando es que el cursor toque el texto Para solucionar esto, podemos bajar un poco el texto mientras nos aseguramos de que todavía estamos en pautas de la cuadrícula de acción segura. Impresionante. Eso se ve mejor. Ahora podemos ajustar un poco la ruta, para que el cursor no esté tan cerca de la pantalla de la interfaz de usuario. Genial. Entonces creo que hemos terminado trabajar en escena porque todo se ve genial. Entonces, vamos a guardar el proyecto y pasar a trabajar en el siguiente. Bien, así que para la siguiente escena, podemos hacer que el cursor entre en la escena desde arriba, así tendremos un agradable movimiento continuo desde la escena anterior donde el cursor salió de la escena por la parte inferior Todo bien. Con eso en mente, entremos a la escena ocho y empecemos a trabajar. Primero, llevemos aquí la precomp del cursor. Podemos copiarlo de una de las escenas anteriores. Ahora, deshagamos de los fotogramas clave de posición y de los marcadores que tenemos en él. No olvides llevar la precomp al inicio de la línea de tiempo una vez que termines. Bien. Y ahora comencemos a animarlo. Como es habitual, nos centraremos primero en encontrar la animación del primer clic. Sucede a partir de este momento, aquí tenemos la animación de clic del botón de anuncio. Así que vamos a traer el cursor aquí y crear una posición de fotogramas clave Bien. Y ahora vayamos al inicio de la línea de tiempo y saquemos el cursor hacia arriba de la escena. Y como tenemos mucho tiempo hasta la animación del click, podemos pararnos en el segundo y traer el cursor aquí para que podamos tener una introducción agradable y curvilínea para Impresionante. Y ahora, dado que la siguiente animación de clic o toque está sucediendo más adelante en la línea de tiempo, podemos movernos 1 segundo después los últimos fotogramas clave y mover el cursor a algún lugar por aquí A continuación, necesitamos hacer la ilusión del cursor agarrando el archivo JPG y arrastrándolo y soltándolo en el panel emergente. Para ello, primero, tenemos que asegurarnos sincronizar la animación del cursor con los movimientos de la cámara. En nuestro caso, es la animación de posición para la pantalla UI pre comp. Necesitamos pararnos en el punto en el tiempo donde el movimiento de la cámara panorámica derecha termina el movimiento de la cámara panorámica derecha y llevar el cursor a la ubicación del archivo Genial. Con eso hecho, no te preocupes por el movimiento curvilíneo del archivo Lo haremos más tarde. Por ahora, centrémonos en sincronizar la sincronización de los fotogramas clave Así que ahora, una vez que volvamos al centro, coloquemos el cursor una vez más a la ubicación del archivo. Genial. Y ahora vamos a avanzar 1 segundo y bajemos un poco el cursor para quedarnos aquí unos fotogramas antes de salir de escena Después de eso, podemos movernos otro segundo y sacar el cursor del fotograma, digamos, del lado izquierdo esta vez. Todo bien. Y ahora una vez que hayamos terminado con la animación inicial, seleccionemos la herramienta Vértice y comencemos a ajustar el trazado Primero hagamos clic en este punto. Genial. Y luego para el siguiente punto, lo dejaré como está porque aquí tiene que pasar una animación de clic. A continuación, sigamos adelante y hagamos clic en el tercer punto. Impresionante. Vamos a seguir adelante. Ahora hagamos clic aquí para redondear este punto. Y por ahora, no te preocupes de que no coincida con la animación de archivos, y nuestra ilusión no está funcionando. Nos ocuparemos de esto en un segundo. Por ahora, terminemos de ajustar el resto de los puntos. Voy a hacer clic aquí en el último punto. Y ahora tomemos la herramienta de selección y ajustemos el mango para obtener un bonito movimiento redondeado en este momento. A continuación, volvamos a la parte de arrastre de animación de archivos y veamos qué tenemos que hacer aquí Primero, asegurémonos de que estamos parados en medio de la animación del archivo de arrastre para que podamos tener una idea de dónde debe colocarse el cursor Y ahora necesitamos hacer coincidir la animación del cursor con la animación de archivos. Para ello, todo lo que tenemos que hacer es dar clic en este punto y seleccionar el asa correcta. Ahora cuando lo muevas, mantén presionada opción Alter para moverlo solo sin afectar al lado izquierdo. De esta manera, podemos curvar esta ruta para que se ajuste al movimiento del archivo. Y para saber cómo debe verse exactamente la curva, necesitamos ver la curva de la ruta de la capa de archivo. Así que vamos a darle click para ver su camino. Ahora, vamos a crear una nueva guía para marcar el punto más curvilíneo del camino A continuación, seleccionemos el cursor y ajustemos el asa de una manera para que se ajuste a la guía. Genial. Y ahora para mantener la ilusión más realista, también necesitamos hacer coincidir la velocidad del movimiento del archivo con la velocidad del cursor. Y como la velocidad que establecemos para la animación de archivos es del 85%, deberíamos hacer lo mismo con el cursor, pero lo haremos en un minuto. Por ahora, sigamos enfocándonos en ajustar el camino. Quiero redondear el camino aquí más para obtener un movimiento más curvilíneo Hagamos lo mismo para este punto. También quiero curvar el movimiento de introducción. Todo bien. Entonces ahora con eso hecho, podemos comenzar a ajustar la velocidad. Seleccionemos todos los fotogramas clave y establecemos la velocidad en 85% Todo bien. Y ahora veamos qué tenemos. Se ve bien, pero sí tenemos algunos pequeños retoques que hacer aquí. Pero primero, agre 25. Mejorar las imágenes con efectos y color: Regresa. Entonces ahora, una vez que hayamos terminado de crear la animación, podemos comenzar a agregar algunos toques visuales y efectos agradables para mejorar el video visualmente. Empecemos coloreando el cursor que aparece en muchas de las escenas de nuestro proyecto. Como puedes ver, por ahora, se ve bastante aburrido. Entonces, para comenzar, podemos colorearlo con algunos colores interesantes. Y para ello, utilizaremos la animación de fondo degradado que creamos al inicio del proyecto. Déjame mostrarte a lo que me refiero. Primero, apaguemos el trazo negro. Entonces busquemos el archivo de fondo degradado que renderizamos y lo llevemos a la línea de tiempo. Genial. Y ahora vamos a escalar esta capa hacia abajo, pero no demasiado. La necesitamos para cubrir la esfera que tenemos aquí. Impresionante. Entonces ahora, una vez hecho eso, podemos usar la función track mat para hacer que la capa de fondo use la estera alfa de la esfera. De esta manera, enmascararemos el fondo degradado usando la forma de la esfera. Y ahora tenemos un bonito cursor de color que se ve mucho mejor que un color estático. Impresionante. Con eso hecho, volvamos a la comp maestra e ingresemos a una de las escenas donde tenemos una animación de cursor. Entremos a la escena ocho. Una vez que estemos dentro, quiero que acerques el cursor para verlo de cerca. Genial. Y ahora déjame mostrarte un truco fácil para agregar más profundidad al cursor. Hagamos clic derecho sobre la pre comp del cursor, vamos a Estilos de capa y seleccionemos y agreguemos un efecto de sombra interior. Después de eso, antes de comenzar a ajustar el efecto, será una buena idea colapsar este pre com para asegurarse de que está trabajando en la forma final de esta precom Bien. Y ahora podemos elegir un bonito color brillante para la sombra interior. Vamos con amarillo por ahora. Entonces para que se fusione mejor con los colores del cursor, podemos establecer el modo de fusión a la pantalla. Como pueden ver, eso se ve un poco mejor. Después de eso, podemos llevar la opacidad a 100 y jugar con el ángulo En este caso, quiero que esta sombra interior sea completamente visible en el cursor, no solo desde un ángulo. Para ello, podemos establecer la distancia a cero y luego jugar con la propiedad size. Genial. Como pueden ver, ahora tenemos un poco de un look de tres D para nuestro cursor, y ahora no quiero que hagas nada, escucha. Te avisaré cuando volver a la acción. Y eso es porque quiero mostrarte cómo crear correctamente este efecto para el resto de las escenas con una animación de cursor en su interior. Todo bien. Entonces lo obvio que podemos hacer es copiar los estilos de capa de esta precomp y comenzar a pegarlos en el resto de los precomps del cursor Entonces con eso dicho, después contento con el aspecto del efecto, volveré a la comp maestra y encontraré la siguiente escena con la animación del cursor para pegar el efecto en ella. Veo que lo tengo en la primera escena, así que la ingresaré, después seleccionaré la precomp del cursor y pegaré el efecto Después de eso, iré a la siguiente escena y luego la introduciré para pegar el efecto en la precomp del cursor dentro. Bastante simple. Pero, ¿y si quiero cambiar el aspecto de este efecto? En ese caso, necesitaría ingresar cada precomp y hacerlo manualmente para todos los precomps del cursor en Como comprenderás, tomará mucho tiempo. Sobre todo si tengo más de dos o tres cursores para ajustar Por lo tanto, quiero enseñarte una mejor manera copiar y pegar tus efectos cuando necesites que estén en más de una escena y cuando quieras controlar el efecto para todos ellos desde una capa. Entonces voy a deshacer mi acción y volver a la situación inicial. Ahora, puedes regresar y seguirme conmigo. Todo bien. Entonces en ese caso, lo que voy hacer es primero asegurarme de crear el efecto en la escena donde la precomp del cursor aparece primero en el proyecto Pronto, voy a explicar por qué. Por ahora, cortemos el efecto de esta precomp y luego vayamos a la comp maestra para ver dónde vemos por primera vez el cursor En nuestro caso, está en la primera escena. Entonces entrémoslo y peguemos el efecto en la precomp del cursor. Todo bien. Entonces ahora digamos que acabamos de terminar de crear el efecto, y sabemos que tiene que aparecer en las siguientes escenas del proyecto. Entonces, seleccionemos el efecto. Y ahora en lugar de usar la copia regular, podemos ir a Editar y usar la función copy with relative property links. Genial. Y ahora vayamos a la escena ocho, seleccionemos la precomp del cursor y peguemos el efecto Al usar esta función, ahora tenemos todas las propiedades del efecto aparentadas a las propiedades del efecto que es en nuestro caso, el cursor pre comp de la primera escena Eso significa que ahora si necesito rediseñar el efecto, iré a mi primera escena, ajustaré las propiedades ahí, y se ajustarán automáticamente en el resto de las escenas Como puedes ver, el diseño también cambió en la escena. Incluso si los valores aquí no parecían cambiarse, puede ver claramente que esto sigue funcionando perfectamente. Bien. Así que ahora volvamos a llevar el diseño a la normalidad y luego continuemos pegando el efecto para el resto de las escenas. Vayamos a la escena dos y la peguemos aquí. Si abres las propiedades del efecto, las verás en rojo, y eso significa que todas están parentadas usando expresiones para el efecto en la primera escena Entonces ahora si necesitas rediseñar el aspecto del efecto, es fácil recordar ir a la primera escena y hacer los cambios ahí Por eso prefiero usar esta función de copia única desde la primera escena en la que la capa con el efecto aparece en el proyecto. Todo bien. Entonces ahora, con eso dicho, terminemos de pegar el efecto para el resto de escenas Podemos mover esta precomp a la derecha para obtener el orden cronológico De esta manera, puedo ver donde ya pegué el efecto. Bien, así que una vez que hayamos terminado con eso, guardemos el proyecto para asegurar el progreso que hemos logrado hasta ahora Genial. Y con eso, hemos terminado de ajustar el diseño del cursor. Y ahora aprovechemos esta oportunidad para mejorar el aspecto del botón de Llamado a la Acción que tenemos en la escena final. Te voy a mostrar cómo usando efectos básicos, puedes crear un aspecto bastante impresionante para tus botones o incluso precomps de pantalla completa de la interfaz Primero, vayamos al panel Efectos y Presets, busquemos el efecto de barrido CC Light, y aplicarlo al botón PreComp Por lo general, este efecto se utiliza para crear un bonito barrido brillante para logotipos o capas de texto. Pero en nuestro caso, lo usaremos para crear un efecto de borde fresco y brillante. Déjame mostrarte a lo que me refiero. Primero, alineemos el efecto con el centro del botón. A continuación, cambiemos la forma del efecto a lineal. Después de eso, ajustemos el ancho para que se ajuste a la forma del botón. Creo que 70 se ve bien. Entonces para la suavidad, podemos configurarlo en, digamos diez A continuación, para el color, intenta escoger algunos colores brillantes. Vamos con un color amarillo o naranja brillante. Todo bien. Y ahora puedes jugar con las propiedades de intensidad de borde y grosor hasta obtener el aspecto que te gusta. Una vez hecho esto, podemos ir al inicio de la línea de tiempo y animar la dirección Pero en lugar de crear fotogramas clave, podemos usar una expresión simple para que gire automáticamente Entonces abramos el cuadro de expresión para esta propiedad y dentro escribamos una simple expresión de tiempo. T asterisco 100. Ahora, esta propiedad se animará automáticamente. Veamos cómo se ve eso. Se ve genial, pero prefiero ver solo los bordes brillantes sin ver ningún brillo en el centro del botón. Para ello, podemos establecer la intensidad de barrido a cero. Genial. Después de que estemos contentos con los resultados, ahora podemos guardar el proyecto y pasar al siguiente paso para que este efecto se vea un poco mejor, y para ello, podemos usar el efecto de brillo. Así que vamos a encontrarlo en la pestaña Efectos y aplicarlo a la precomp Ahora, antes de seguir adelante, quiero mencionar que el orden de los efectos en el panel Efectos afectará el aspecto del objeto con el que estamos tratando. Con eso en mente, llevemos el resplandor debajo del barrido y ajustemos algunas propiedades para que se vea un poco más brillante y en este punto, la mejor manera de obtener un aspecto agradable es simplemente cambiando algunas propiedades y valores del efecto hasta que obtengamos algo que nos guste Y eso es porque el aspecto del efecto cambia según el color del botón y los valores del efecto de barrido. No hay valores específicos usando el efecto de brillo que van a encajar todos los colores y todos los diseños. Por lo tanto, te sugiero que juegues con las propiedades y veas lo que más te gusta y qué se ajusta más a tu proyecto. Bien. Así que ahora, una vez que hayamos terminado con el diseño del botón, podremos guardar el proyecto y pasar al siguiente paso. En este punto, podemos volver a la compilación maestra y comenzar a agregar fondos para las escenas sin ningún fondo dentro. Podemos comenzar con la primera escena. Entonces entrémoslo y empecemos a trabajar. Lo primero, primero, veo que tenemos una capa de texto que usamos como referencia que podemos eliminar ahora mismo. Genial. Y ahora, antes de agregar los antecedentes, aprovechemos esta oportunidad y organicemos nuestro panel de proyectos. Veo que hay unos pre comps que podemos mover a la carpeta precomps Bien. Ahora, encontremos el fondo degradado que creamos para el proyecto y lo agreguemos a la escena. Como ya entenderás, esto no será una buena idea porque la capa de fondo es demasiado pequeña para esta gran escena. Si vemos eso en la master comp, podemos ver claramente que no se ve bien. La buena noticia es que podemos resolver este problema simplemente escalando la capa para que se ajuste a las dimensiones de la escena. Y antes de hacer eso, prefiero usar la capa de fondo que tenemos en las escenas de animación del título ya hay algunos efectos sobre ella que hacen que los gradientes se vean un poco mejor que la capa original Así que primero volvamos a la primera escena y eliminemos aquí la capa de fondo. Después de eso, busquemos la primera animación de título e ingresemos esta pre comp para copiar la capa de fondo desde ahí. Una vez hecho esto, volvamos a la primera escena y peguemos la capa. Genial. Y ahora vamos a colocar esta capa debajo todas las capas y alinearla al centro de la comp de esta manera. El efecto se verá mejor cuando lo animemos. Ahora, podemos escalar esta precomp, pero antes de eso, eliminemos aquí todos los fotogramas clave de escala A continuación, escalemos esta precomp hasta que cubra toda la escena No tengas miedo de escalarlo porque tenemos el rápido efecto de desenfoque de Box en esta capa, lo que significa que los gradientes seguirán luciendo bien, aunque lo escalemos Impresionante. Y ahora podemos jugar con la posición de la capa de fondo para ver qué área de color se ve mejor para esta escena. En mi opinión, la parte inferior del fondo degradado se ve muy bien, así que lo dejaré así. Con eso hecho, pasemos a la siguiente escena. Ahora entremos en la escena dos y peguemos aquí también el fondo degradado. Y antes de seguir adelante, quiero que esta escena se vea un poco más oscura ya que esta escena está hablando de algunos problemas, como, muchos mensajes y muchas tareas. Por lo tanto, puede ser una buena idea hacer que esta escena se ajuste al concepto de texto oscureciendo las vibraciones Entonces ahora te voy a mostrar algunas formas en las que podemos hacerlo usando Efectos simples. Para el primer método, no quiero que lo hagas conmigo ya que no lo usaremos. Usaremos el segundo. Entonces, por ahora, solo mira y escucha. Pronto, te avisaré cuándo volver a la acción. Todo bien. Entonces, para el primer método, podemos usar el efecto de invertir y luego jugar con los canales. Como puedes ver, cada opción aquí crea un aspecto muy diferente que podría quedar muy bien con los colores de tu degradado. Puedes combinar este efecto con el ajuste de la propiedad master hue del efecto hue y saturation y ver si puedes conseguir algo que te guste. Bien, voy a borrar el efecto de invertir, y ahora volvamos a trabajar juntos A veces queremos tener un control total sobre los colores en nuestro degradado. Y para ello, podemos usar el efecto tritono. Entonces, primero apliquemos a la capa y luego vayamos al panel del proyecto y llevemos la paleta de colores a la escena para muestrear los colores. Genial. Entonces ahora puedes tener más control sobre los colores. Pero si quieres aún más control, puedes cambiar la propiedad del tono a Pento Y esto te dará el control de la rueda a todo color que tienes en el degradado. Ahora podemos probar los colores más oscuros de la paleta de colores o incluso decidir que queremos que la escena de vibra más oscura sea principalmente con los colores morados que tenemos en la paleta de colores. En este punto, sólo estoy tratando de probar los colores morados y ver qué se verá mejor. También puedes elegir el color que quieras manualmente. Al igual que, estoy escogiendo ahora el color blanco para esa área de color específica y el fondo degradado. Una vez que estemos bien con los resultados, ahora podemos eliminar la paleta de colores, y luego llevemos el fondo degradado debajo de todas las capas. Eso se ve bien. Pero creo que la escena debería sentirse un poco más oscura. Para ello, podemos agregar el efecto de curvas y luego jugar con los canales RGB para hacer que el degradado se vea más oscuro. Como pueden ver, eso se ve muy bien. Entonces ahora vamos al master comp y veamos cómo se ve eso con la escena anterior. En mi opinión, eso se ve genial. Y ahora podemos pasar para agregar este fondo degradado oscuro a la siguiente escena, también. Y para ello, volvamos a la escena dos y copiemos el fondo degradado de aquí. A continuación, vayamos a la escena tres y la peguemos aquí. Ahora llevemos esta capa por debajo de todas las capas aquí. Creo que se ve bien. Genial. Y ahora volvamos al master comp y veamos qué debemos hacer a continuación. Ya tenemos un bonito fondo para la escena cuatro, y creo que aquí no necesitamos cambiar nada. Como puede notar, aquí estamos obteniendo algunos patrones agradables, acuerdo con los fondos degradados que tenemos en diferentes tipos de escenas en el proyecto. Para las escenas de título, tenemos el fondo de gradiente de tono potenciado para las escenas que hablan de temas Tenemos un fondo degradado oscuro. Para las escenas de la pantalla de la interfaz de usuario, tenemos el fondo degradado regular. Este es un buen método a seguir para tus próximos proyectos. Para que sea un poco más interesante, puedes dividir el guión en partes principales y agregar un fondo específico para cada parte como lo estamos haciendo ahora mismo. Dicho esto, sigamos al día con nuestro patrón y agreguemos un fondo regular para la escena cinco, ya que se trata de una escena con una animación de pantalla de interfaz de usuario. Para ello, podemos ingresar a la escena cuatro y copiar el fondo degradado que tenemos ahí. De vuelta en la escena cinco, vamos a pegarlo aquí y colocarlo debajo de todas las capas. Genial. Y ahora, antes de seguir agregando los fondos relevantes para las próximas escenas, aprovechemos esta oportunidad para mejorar el aspecto de esta escena aquí. Déjame mostrarte a lo que me refiero. Ingresemos primero a las tareas pre comp. Lo que no me gusta aquí es cómo se ve la sombra cuando aparece el panel de subtareas. La sombra se ve gris oscuro, que en mi opinión, no encaja con el diseño general que tenemos en el proyecto. Para solucionar esto, todo lo que tenemos que hacer es agregarle el efecto de relleno y luego elegir un color diferente. Vamos con el blanco y veamos cómo se ve eso con el resto de la escena. Se ve bien, pero combina demasiado con el panel de subtareas Quedémonos aquí y luego probemos el color púrpura que tenemos. Como pueden ver, eso se ve mucho mejor. Entonces ahora vamos a copiar el efecto y pegarlo en la otra escena donde tenemos la capa de sombra. No recuerdo dónde estaba. Así que volvamos al master comp y lo encontremos. Aquí está en la escena ocho. Vamos a entrar en la escena, y luego la pantalla de interfaz de usuario pre comp. Una vez aquí, seleccionemos la capa de sombra y peguemos el efecto. Impresionante. Entonces ahora, con eso hecho, volvamos a la comp maestra y sigamos revisando las siguientes escenas donde necesitamos agregar un fondo degradado. Bien, veo a las escenas seis y siete les falta un fondo. Entonces primero, vayamos a la escena cinco y copiemos el fondo degradado de aquí. Entonces vayamos a la escena siete y peguemos la capa. Ahora trae la capa debajo de todas las capas, y veamos cómo se ve eso. Bien, eso se ve genial. Pero no me gusta la animación de disolución de la pantalla principal de la interfaz de usuario. Entonces, aprovechemos esta oportunidad para que se vea mejor. Primero, ingresemos los mensajes pre comp y busquemos la capa relevante. Aquí está. Es el pre comp que tenemos aquí debajo de todas las capas. Y ahora para mejorar la animación de disolución, podemos agregar alguna animación de desenfoque suave durante la disolución. Para ello, primero, abramos los fotogramas clave en esta capa y pongamos aquí al inicio de la animación Luego agreguemos el efecto de desenfoque de cuadro rápido y creemos un fotograma clave para el radio de desenfoque con un valor de cero en este punto en el tiempo A continuación, avancemos un poco hacia el punto en el que la capa aún sea visible y fijemos el desenfoque a un valor más alto. Bien. Y ahora llevemos este fotograma clave al final de la animación Entonces fácil facilitar los fotogramas clave y ver cómo se ve eso. Impresionante. Creo que ahora se ve mucho mejor. Así que volvamos a la comp maestra y encontremos la siguiente escena donde necesitamos agregar un fondo degradado. Bien. La siguiente es la escena ocho. Entrémoslo y agreguemos el fondo degradado aquí. Aparte de eso, no creo que tengamos que hacer ningún ajuste aquí. Volvamos al master comp y veamos cómo se ve esto con la escena anterior. Acabo de notar que la capa de fondo tiene la animación de introducción que creamos para la escena de la que la copiamos En esta escena, no necesitamos esa animación de introducción, así que vamos a eliminarla. Seleccione la capa y pulse para ver los fotogramas clave. Ahora, primero borra los primeros fotogramas clave y luego el segundo De esta manera, la máscara se quedará como se ve después de los segundos fotogramas clave, que es lo que queremos Para ser honestos, podemos eliminar la máscara por completo, pero dejémosla por ahora y luego volvamos al resto de escenas con esta capa de fondo degradado para eliminar ahí la animación de introducción, también Esta es la escena donde sí necesitamos la animación de introducción, así que dejémosla como está Aquí, todo se ve bien. Aquí, también, todo se ve bien. La primera escena también se ve bien. Todo bien. Entonces, una vez hecho eso, vayamos a escena nueve y agreguemos un fondo degradado. Y como esta escena se parece a la primera escena, vayamos a la primera escena y copiemos el fondo degradado que tenemos ahí. Bien, de vuelta en la escena nueve, peguemos la capa aquí y pongamos la escala a 100 Entonces vamos a alinearlo al centro de la comp y llevémoslo por debajo de todas las capas. Genial. Y ahora volvamos al master comp y veamos cómo se ve eso con la escena anterior. Como pueden ver, aquí tenemos una situación extraña con los fondos degradados. Quería mostrarte esta situación para que sepas cómo lidiar con ella. Las escenas ocho y nueve son básicamente una escena continua. Eso es porque decidimos no tener un corte de cerilla entre ellos. Tenemos una panorámica regular hacia el movimiento de la cámara izquierda. Por lo tanto, para solucionar este problema, todo lo que necesitamos hacer es eliminar las capas de fondo de ambas escenas y pegar una en la comp maestra debajo de estas dos escenas. Así que ahora podemos entrar primero en la escena nueve y cortar la capa de fondo desde aquí. Después de eso, vayamos a la escena ocho y eliminemos la capa de fondo de ahí. Una vez hecho esto, vayamos a la comp maestra y peguemos la capa de fondo aquí. A continuación, pongámonos de pie al inicio de la escena ocho y llevemos el fondo degradado para comenzar desde aquí. Por último, coloquemos la capa debajo de las dos escenas y veamos cómo se ve eso? Bien. Eso se ve genial. Pero noté que este trasfondo no se ve bien en la escena final. Eso está pasando porque tenemos el efecto de resplandor en la precomp del botón Por lo general, los objetos resplandecientes se ven mejor en fondos más oscuros. Por lo tanto, en nuestro caso, será una buena idea traer aquí nuestra versión del fondo oscuro que creamos para la segunda y tercera escenas. Entonces hagámoslo ahora mismo. Pasemos a la segunda escena y copiemos el fondo de ahí. De vuelta a la escena final, peguemos la capa y la llevemos por debajo de todas las capas. Como pueden ver, eso ya se ve mucho mejor. Vamos a expandir la capa de fondo, y también podemos cerrar estos precomps Genial. Y ahora volvamos al master comp y veamos cómo se ve eso. Bien, creo que se ve increíble. Y con eso, hemos terminado de ajustar el aspecto y el diseño de las escenas. Veamos ahora la animación desde el principio para ver si nos perdimos algo. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda. Conoce One Point. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con un punto, obtienes una visión clara y cristalina de todo lo que tu equipo está trabajando, todos tus proyectos, todas tus tareas, todo en un solo lugar. Necesito la imagen completa. Cada proyecto incluye tareas detalladas, subtareas y seguimiento del progreso en tiempo real. Entonces nada se desliza por las grietas, las grietas, las grietas Oh. ¿Quieres ver quién se está quedando atrás? Sólo. A tu equipo toca La actividad de Todos en un i de un vistazo. Sí, como siempre, nos perdimos algo. En nuestro caso, necesitamos agregar un fondo degradado en la escena seis. Entonces hagámoslo muy rápido. Vayamos a la escena cinco para copiar el fondo de ahí. Genial. Y ahora vamos a buscar la escena seis e introducirla para pegar la capa. Aquí está. Ahora entremos a la escena y peguemos aquí el fondo degradado. Y volvamos a la comp maestra para seguir revisando la animación. Necesidad de hacer un seguimiento con alguien. Salta al sistema de mensajería integrado donde todas tus conversaciones se organizan por contacto. Envía un recordatorio rápido o comparte una actualización al instante. Y sí, compartir archivos es sencillo. En este momento, noté que el cursor está saliendo de escena demasiado pronto. Está arruinando la transición del corte de cerillas. Entonces entremos en la escena siete y hagamos que el cursor permanezca un poco más antes de salir de la escena Primero, abramos los fotogramas clave de la pantalla de la interfaz de usuario pre comp y los fotogramas clave del cursor para que podamos cronometrarlos entre sí El cursor empieza a salir la escena a partir de este punto en el tiempo, pasemos a digamos, segundo nueve y traemos aquí la esfera Ahora, avancemos 1 segundo hacia adelante y llevemos aquí el último fotograma clave Impresionante. Entonces ahora coincide con la salida de la pantalla de la interfaz de usuario, y lo último que tenemos que hacer es asegurarnos de que no se cambie la velocidad para la animación del cursor Veo que cambió. En este caso, asegurémonos de establecer la velocidad de la animación de salida del cursor en 95% para obtener ese movimiento extremo de snap y Veamos cómo se ve eso. Bien. Creo que debería funcionar. Ahora volvamos a la comp maestra y comprobemos la transición. O comparte una actualización al instante. Y sí, compartir archivos es sencillo. Sube cualquier documento y todo tu equipo tendrá acceso a él de inmediato. Entonces, ¿por qué seguir luchando? Ve a one point.com y haz tu jornada laboral más fácil, a partir Se ve bien, pero ahora noto que el cursor en la escena final está posición demasiado baja cuando golpea el botón. Creo que deberíamos sacarlo a colación un poco en este momento. Entonces entremos en la escena final y luego abramos los fotogramas clave en el cursor pre comp Ahora, parémonos en los fotogramas clave de última posición y ajustemos la posición del cursor en este punto en el tiempo. Tráelo un poco. Podemos colocarlo en el centro del botón. Veamos cómo se ve eso. Impresionante. Creo que ahora se ve mucho mejor. Genial. Y con esto, ahora podemos volver a la master comp y guardar el proyecto antes de pasar al siguiente paso. Esta vez, quiero que mejoremos el aspecto de los paneles que aparecen en el proyecto. Déjame mostrarte a lo que me refiero. Primero, comencemos a tratar con el panel pop up en Scene eight. Una vez que estemos aquí, busquemos el panel emergente, pre comp y agreguemos un efecto de sombra paralela. Ahora, establece la opacidad a 100, luego la distancia a cinco. A continuación, pongamos la suavidad a un número mayor. Creo que 80 se ve bien. Creo que deberíamos poner la distancia a cero. Genial. Y ahora, para que esta sombra se fusione mejor con el diseño, podemos muestrear el color púrpura, y si se ve demasiado brillante, podemos ingresar al panel de color y elegir un color ligeramente más oscuro. Este es un buen truco que siempre uso para hacer que mis sombras se vean mejor en los proyectos. Todo bien. Y ahora, en caso de que tengas muchos paneles a los que necesites aplicar esta sombra, debes copiarla usando la función copy with relative links. En nuestro caso, copiémoslo de manera regular, ya que solo tenemos otro panel pop up en el proyecto al que aplicar este efecto. Copiemos el efecto y luego vayamos al master comp para encontrar esa escena. Aquí es desde la escena cinco. Vamos a enderlo y luego entrar en la pantalla de UI pre comp y pegar el efecto. Se ve genial. Impresionante. Entonces con eso, hemos terminado la primera ronda de agregar toques finales al proyecto, y podemos ir más allá y agregar toques finales adicionales que harán que el proyecto se vea aún mejor. Y podemos comenzar por asegurarnos de que tenemos todas las escenas visibles aquí en la master comp en su mejor calidad. Para ello, necesitamos colapsar los precomps que tenemos en la Como recordarás, ya colapsamos la primera escena pre comp. Entonces ahora pasemos a la segunda escena. Y antes de colapsar la precomp, podemos entrar primero a la escena y comprobar que las capas en los precomps en su interior también están En este caso, lo tenemos todo bien. Entonces volvamos a la comp maestra y colapsemos la precomp de escena. Genial. Y ahora vamos a movernos lentamente en la línea de tiempo para ver que la función de colapso no cambió algo en la animación o el aspecto de esta escena. Todo se ve genial. Y ahora pasemos a la escena tres. Veamos cuidadosamente la animación para ver si hay algún cambio. Se ve genial. Pasemos ahora a la escena cuatro. Como puede notar, después de colapsar esta precomp, sí vemos algunos ligeros cambios, especialmente en el ángulo de la cámara Esto está sucediendo porque dentro de esta escena, tenemos una capa de cámara que no tenemos en la master comp fuera de esta escena, precomp Una vez que colapsamos esta precomp, After Effects ahora está actuando como si todas las tres capas D dentro de esta comp estuvieran en la línea de tiempo master comp Pero ignora la cámara interior porque ahora usa la cámara predeterminada creada automáticamente en After Effects cuando una escena tiene tres capas D. En nuestro caso, son las tres capas D dentro de la escena tres precomp Y como cronológicamente, la master comp es la primera precomp en línea, After Effects usa la cámara de la primera comp en el En nuestro caso, el master comp y no la cámara dentro de la escena tres pre comp. Así es como funciona After Effects. Entonces en este tipo de situaciones, cuando tienes tres capas D y cámaras involucradas en el proyecto, es mejor no colapsar esta precomp específica Está totalmente bien. Seguirás obteniendo tu escena en la mejor calidad. Entonces con eso dicho, pasemos a la siguiente precomp. Bien, definitivamente podemos colapsar las pre comps de animación del título, ya que no hay tres animaciones de capa D o cámaras Pasemos ahora a lidiar con la escena cinco. Podemos colapsar esta pre comp también sin preocuparnos porque no hay tres capas D o cámaras en esa escena. Pero debemos entrar en escena para comprobar que todos los precomps y capas en su interior están colapsados, Veo que nos faltó colapsar el cursor. Entonces hagamos eso muy rápido y luego volvamos a la master comp y comprobemos cómo se ve esta escena después de colapsarla. Um, se ve bien. Ahora podemos seguir adelante y colapsar este título Animación precomp Todo bien. Y ahora pasemos a colapsar la siguiente escena. En este caso, aunque tengamos las tres capas D, animación sucediendo en la escena, todavía tenemos todo bien sin distorsiones de cámara Y eso es porque la animación de tres escenas D no está sucediendo directamente dentro de esta precomp de escena Está sucediendo dentro de la precomp de la pantalla de la interfaz de usuario. Entonces, si colapsamos esta precomp, sí vemos la distorsión de la cámara Y eso es exactamente por las mismas razones que expliqué antes. Ahora, la escena cinco ve las tres capas D dentro de la precomp de la pantalla de la interfaz de usuario, pero usa la cámara predeterminada de esta línea de tiempo de escena Ignora la cámara que tenemos dentro de la interfaz de usuario precomp de pantalla Por lo tanto, no colapsemos aquí esta precomp. Por qué si colapsamos la escena cinco pre comp en la línea de tiempo, no pasará nada. La línea de tiempo Master comp no ve la cámara que está dentro de la línea de tiempo de la pantalla de la interfaz de usuario. Voy a seguir sin colapsarlo. Vamos a seguir adelante. Podemos colapsar esta escena de animación de título. ¿Todo bien? Pasemos ahora a lidiar con la escena siete. Parémonos en el punto en el tiempo donde podamos ver la animación de disolver y luego colapsar esta pre comp para ver si hace algún cambio. Todo se ve bien. Pero antes de seguir adelante, entremos en escena y asegurémonos de que todos los precomps y las capas de aquí estén Bien, ahora volvamos a la comp Master y revisemos el resto de la animación cuidadosamente. Se ve bien. Ahora tratemos con la escena ocho. Vamos a colapsarlo y ver el resto de la animación aquí cuidadosamente para ver si aparecen cambios innecesarios después de colapsarla Todo se ve totalmente bien. Ahora podemos pasar a colapsar la siguiente escena. Vamos a colapsar la escena nueve y ver cómo se ve eso. Se ve bien, y ahora podemos pasar a colapsar la escena final y ver cómo se ve eso. Impresionante. Todo se ve totalmente bien. Ahora, una vez que hayamos terminado, colapsando todas las escenas relevantes, hagamos algunos pequeños cambios y agreguemos algunos detalles finales para que el proyecto se vea mejor Y podemos comenzar escalando el fondo dentro de la escena final. No me gusta el color brillante en la parte inferior. Así que entremos en la escena y escalemos la capa de fondo aquí. Intentemos 120. Creo que ahora se ve mejor. Vayamos a la master comp y veamos cómo se ve eso . Se ve muy bien. Guardemos el proyecto antes de seguir adelante. Bien, entonces ahora en este punto del proyecto, lo que generalmente me encanta hacer es repasar todas las escenas de nuevo una por una y pensar en cosas que pueda agregar o mejorar. Por ejemplo, aquí en la escena tres, creo que el fondo no se ve bien. Ingresemos a esta pre comp y primero intentemos rotar el fondo 180 grados, por lo que el área luminosa estará en la parte superior. De esta manera, obtendremos una mirada más continua a partir de la escena anterior. Ese fue un ejemplo de un pequeño ajuste que podemos hacer para que la animación se vea un poco mejor. Pero también hay otras cosas que son un poco más serias que podemos hacer para que la animación luzca mejor. Por ejemplo, aquí en la segunda escena, toda esta secuencia se siente muy estática, en mi opinión. Podemos mejorar fácilmente esta escena agregando una animación Acercar o Alejar. Déjame mostrarte a lo que me refiero. Parémonos al inicio de esta escena y abramos la propiedad de escala. Ahora, cree un fotograma clave aquí. Ahora abramos la posición y hagamos lo mismo. Ahora vamos a presionarte para ver todos los fotogramas clave y movernos al punto en el tiempo donde el cursor toca el cuadro de tareas y luego escalar esta precomp y posicionarla Entonces parece una animación Zoom in. Genial. Una vez hecho esto, ahora vamos a crear una animación de Alejar en el momento en que el cursor se cierne en el aire Para saber exactamente cuándo sucede eso, podemos ingresar a la escena y abrir los fotogramas clave del cursor Ahora podemos encontrar el momento flotando y mientras estamos aquí, volver a la comp maestra y ajustar la escala y los fotogramas clave de posición para obtener la ilusión de movimiento de la cámara Zoom out O tal vez en lugar de alejar el zoom, podemos crear otra animación de Zoom in Vamos a probar eso. Podemos establecer la escala a 260. Y ahora coloquemos la pre comp para que el cursor quede centrado horizontalmente. Podemos usar la grilla de acción segura para Bien, eso se ve lo suficientemente bien. Después de eso, volvamos a entrar en escena y pararnos en los siguientes fotogramas clave del cursor donde toca la burbuja del mensaje Ahora, volvamos a la comp maestra y creemos una animación de Zoom out. Impresionante. Una vez hecho esto, volvamos ahora a la escena para ver la siguiente parada del cursor. Parémonos en este punto en el tiempo, y luego en la comp maestra, creamos otra animación de Zoom in. También llevemos la pre comp al centro en algún lugar por aquí. Genial. Y ahora, en la última posición del cursor, que es la animación outtro, podemos traer de vuelta la pre comp en la comp maestra a la posición original Quedémonos al final de la escena y luego copiemos los dos primeros fotogramas clave y los peguemos aquí. De esta manera, no vamos a arruinar la transición de match cut que tenemos aquí. Genial. Entonces, una vez que hayamos terminado con la animación inicial, vamos a mejorar el movimiento. Seleccionemos los fotogramas clave de posición y establecemos la velocidad en 85% Hagamos lo mismo para la báscula. Bien, ahora vamos a pararnos aquí y presionar B para iniciar el área de trabajo a partir de este punto en el tiempo y luego ir al final de la escena y presionar N para terminar el área de trabajo en este punto. De esta manera, After Effects renderizará la escena más rápido. Aprovechemos también esta oportunidad para purgar el proyecto. La función de purga borra memoria caché y el espacio en disco para liberar recursos y mejorar Bien, ahora veamos qué tenemos. Espero que aprendas de este proceso que no siempre necesitas usar cámaras en la escena para crear movimientos de cámara. Puedes hacerlo animando la pre comp en tu master comp, como hicimos aquí Bien, creo que se ve genial. Y ahora podemos guardar el proyecto y llevar todo de vuelta a la normalidad antes de seguir adelante. Bien, ahora agreguemos un poco de zoom y animación suaves a la siguiente escena para que se vea menos estática Para ello, todo lo que tenemos que hacer es crear una escala de fotogramas clave al inicio de la escena y luego ir al final de esta precomp y establecer la escala, digamos, a 120 Veamos ahora cómo se ve eso. Se ve genial. Y ahora quiero agregar un pequeño toque final adicional a la escena para que se vea un poco más interesante. Es 26. Toques finales, música y animaciones de texto: Atrás. Entonces, después de tratar la mayoría de los ajustes en la animación y el diseño de las escenas, es el momento de hacer el empuje final y agregar los toques finales restantes para este proyecto, como animar las capas de texto y las escenas, agregar música y mejorar el aspecto de algunas escenas usando activos de diseño adicionales En mi opinión, es el punto más divertido en tiempo donde el proyecto está 95% hecho, y ahora nos estamos divirtiendo haciendo toques finales. Dicho esto, comencemos primero a tratar con todas las capas de texto que tenemos en las escenas de animación de flujo de demostración, comenzando con la escena cuatro. Entonces entremos en escena. Y primero lo primero, encuentra la capa de texto que necesitamos animar. Una vez que lo encontremos, ahorremos algo de tiempo copiando la animación de texto que hicimos para la capa de texto en la primera escena. Como puedes ver, tenemos aquí una bonita animación de texto revelador que creamos, y eso lo hicimos usando un animador, así que abramos la capa y seleccionemos este animador para copiarlo Genial. Una vez hecho eso, volvamos ahora a la escena cuatro y péguela a la capa de texto que tenemos aquí. Primero, párese al inicio de esta capa, y luego pegue el animador De esta manera, la animación de este animador iniciará desde el inicio de la capa de texto Bien. Y ahora vamos a abrir el animador y ajustar el valor de la propiedad de posición que tenemos en el selector de rango Vamos a establecerlo en 80. Impresionante. Y ahora vamos a pararnos en algún lugar después de la animación y crear una nueva máscara para esta capa de texto. Bonito. Entonces ahora hemos creado la animación de revelar texto para esta capa de texto. Ahora abramos los fotogramas clave y asegurémonos de que la animación termine en el segundo diez Y ahora necesitamos crear una animación Outro para este texto Para hacerlo simple, pongámonos en el segundo 11 y utilicemos la propiedad position para sacar esta capa del marco desde la parte superior. Ahora vamos a facilitar los fotogramas clave y hacer que la animación comience a moverse lentamente y gane velocidad hacia el final Impresionante. Y ahora podemos ocuparnos de la segunda capa de texto que tenemos en la escena. Para ello, ya podemos copiar el animador que tenemos en la primera capa de texto y pegarlo en la segunda A continuación, vamos a quedarnos aquí y crear una nueva máscara. Una vez hecho esto, busquemos ahora un buen punto en el tiempo donde podamos crear la animación outtro para esta capa de texto Creo que podemos iniciarlo desde el segundo 16, y es porque la animación de salida de cámara empieza desde aquí Podemos hacer coincidir la animación outtro del texto con él. Así que vamos a crear los fotogramas clave de primera posición para la segunda capa de texto aquí, y luego ir al segundo 17 y sacarlo del fotograma desde la parte superior Por último, ajustemos el movimiento. Y ahora antes de seguir adelante, veamos la animación que creamos. Para hacernos la vida más fácil, aislemos solo las dos capas de texto y verifiquemos la animación. Impresionante. Creo que eso se ve genial, y ahora podemos guardar el proyecto y pasar a lidiar con la siguiente escena, que es la escena cinco. Vamos a traer la escena cinco aquí antes de la escena seis, y ahora pararnos al inicio de la capa de texto y pegar el animador A continuación, pongámonos de pie después la animación esté completa y creemos una nueva máscara. Y ahora necesitamos crear un Outro. Entonces, si la capa de texto termina en los segundos cuatro y diez fotogramas, entonces me pararé en los segundos tres y diez fotogramas y crearé el fotograma clave de primera posición aquí Ahora, vayamos al final de la capa y saquemos esta capa de texto de la escena desde abajo esta vez. Ahora ajustemos el movimiento y veamos cómo se ve eso. Creo que esta vez la moción debería comenzar rápido. Entonces, ajustemos la velocidad de los fotogramas clave. Impresionante. Eso es mejor. Y ahora vamos a tratar con la segunda capa de texto que tenemos aquí. Esta vez, dado que la animación outtro de la escena ocurre a partir del segundo ocho, comencemos la animación outtro de la segunda capa de texto desde aquí también para emparejarla Bien, eso se ve bien, y estamos listos para pasar a la escena seis. Pasemos primero al animador. Ahora, parémonos aquí y usemos el cambio de control de acceso directo para crear la máscara. Creo que la pantalla de la interfaz de usuario está demasiado cerca del texto. Tratemos de arreglarlo. Para ello, necesitamos ingresar a la precomp de contactos, y ahora ya sea podemos ajustar la animación nula o podemos ajustar la animación de la cámara Empecemos por la cámara. Primero, tenemos que situarnos en el marco clave del momento problemático que está aquí. Ahora movamos un poco la cámara hacia atrás. Creo que podemos moverlo aún más. También bajemos un poco. Bien, entonces ahora, estando aquí de pie, volvamos a la escena principal y comencemos a crear la animación outtro para el texto a partir de este momento para que coincida con la animación outtro de la cámara Por último, ajustemos el movimiento y veamos cómo se ve eso. Genial. Entonces ahora vamos a guardar el proyecto y pasar a la escena siete. Aquí podemos hacer algo interesante para la primera capa de texto. Dado que la pantalla de la interfaz de usuario está cubriendo todo el fotograma, podemos llevar la capa de texto debajo ella en el panel de capas y de esa manera, crear una animación reveladora para este texto al comienzo de la escena. Como pueden ver, eso se ve muy bien. Todo bien. Y ahora vamos a crear una animación outtro para este texto. Podemos crear el primer fotograma clave de posición aquí, luego ir 1 segundo hacia atrás y crear el mismo fotograma clave aquí también Ahora podemos volver al segundo fotograma clave y mover el texto fuera del fotograma desde la parte superior Ahora, ajustemos el movimiento y luego pasemos a la siguiente capa de texto. Para esta, sí necesitamos crear la animación de introducción que creamos para el resto de las capas de texto en el proyecto Entonces hagámoslo muy rápido. Todo bien. Y ahora para el Otro, no necesitamos hacer nada ya que la pantalla de UI está cubriendo esta capa de texto. Entonces todo lo que tenemos que hacer ahora es tratar con la última capa de texto. Entonces primero, vamos a crear la animación reveladora para la introducción Una vez hecho esto, ahora vamos a crear el Outro. Eso debería comenzar desde el segundo nueve. Extendamos la capa de texto antes de animar la posición para el Outro Bien. Y ahora vamos a crear la animación Otro para. Impresionante. Entonces ahora pasemos a la escena ocho y veamos si hay alguna capa de texto que necesitamos animar aquí Como puedes ver, aquí no tenemos ninguna capa de texto. Entonces vayamos a la escena nueve para comprobar si hay alguno ahí. Aquí no hay nada. Vayamos a la escena final para asegurarnos de que no haya una capa de texto ahí también. Bien. Entonces con eso hecho, terminamos de crear la animación de texto para las escenas, y podemos guardar el proyecto ahora para asegurar el progreso que logramos. Y ahora, en este punto del proceso, por lo general me encanta volver a revisar mis escenas y ver si hay algún ajuste adicional que pueda hacer, ya sea en la animación o en el diseño de las escenas, por ejemplo, en la escena cinco Noté que la animación pop out puede durar un poco más Quiero que termine justo antes comience la salida de la capa de texto Es porque estoy tratando de que mis escenas siempre se vean en movimiento. Intenta crear el menor número de momentos estáticos que puedas. Este es el secreto para una buena animación de diseño de movimiento. Dicho esto, ingresemos a las tareas pre comp y ahora abramos todos los fotogramas clave de los cuadros de tareas Ahora, parémonos en el segundo cinco. Después selecciona todos los fotogramas clave. A continuación, mantenga presionada la tecla Alt u opción y mueva los últimos fotogramas clave Genial. Y ahora volvamos a la escena principal y veamos cómo se ve eso. Vaya, esa es la escena equivocada. Necesitamos la escena cinco. Bien, veamos cómo se ve la animación ahora. En mi opinión, después de este pequeño cambio, la moción se siente mucho mejor. Con eso hecho, vayamos ahora a la escena cuatro y volvamos a revisar lo que podemos mejorar o agregar aquí En esta escena, me encantaría aumentar la profundidad del efecto de campo que creamos aquí. Parémonos ante estos fotogramas clave y escalemos el nivel de desenfoque a un número mayor. Eso es demasiado. Para ser honesto, no me encanta cómo se ve eso. Vamos a traerlo de vuelta a 300. A lo mejor intentemos aumentar el nivel de desenfoque para la parte final de animación de esta escena donde vemos las tareas. Vamos a probar 300 aquí también. 300 se ve mejor, pero sigo pensando que es demasiado. Vamos a probar 200. Sí, 200 se ve perfecto. Te estoy mostrando este proceso para que también puedas acostumbrarte a hacer algunos ajustes finales en tus proyectos antes de renderizar la animación. Me encanta hacer eso porque siempre hay algo que podemos hacer que pueda mejorar un poco más la animación. Por eso la fase de toques finales es mi favorita. Todo bien. Dicho esto, sigamos ahora y esta vez, intentemos mejorar la escena tres. Veamos qué tenemos aquí. Bien. Creo que lo primero que me encantaría hacer aquí es hacer que la animación de mecanografía dure un poco más. Quedémonos en el segundo segundo y traemos aquí el último fotograma clave Aprovechemos ahora esta oportunidad y vayamos a la escena siete, donde tenemos otra animación de escritura de texto y hacemos que esta animación dure más aquí también. Primero abramos los fotogramas clave en esta capa. Y ahora vamos a estar en los segundos siete y diez fotogramas y mover aquí el último fotograma clave Impresionante. Y ahora, una vez hecho eso, vayamos ahora a la escena dos y veamos qué podemos hacer ahí para mejorar el movimiento o el diseño de esa escena. Bien, así que ahora, dado que el objetivo principal en esta escena es mostrar el caos de tener muchos mensajes y tareas que enfrentar, puede ser una buena idea agregar cuadros de tareas adicionales y burbujas de mensajes para que coincidan con puede ser una buena idea agregar cuadros de tareas adicionales y burbujas de mensajes para que coincidan el concepto de esta escena. Y lo haremos pronto. Antes de eso, me encantaría que el color de fondo de esta escena no fuera oscuro. Quiero que el oscuro sea para la escena tres, así se verá como una especie de océano profundo. Ya que en ese momento, la voz en off dice, Te estás ahogando en el caos Bien, entonces con eso dicho, primero eliminemos las curvas en los efectos de tóner de la capa de fondo. Genial. Y ahora agreguemos cuadros de tareas adicionales y burbujas de mensajes a la escena. Pero en lugar de duplicarlos aquí, quiero mostrarles otro método que podría ser un poco más útil para nosotros en este proyecto De esta manera, podrás aprender un nuevo truco y aplicarlo a tus proyectos si quieres. Todo bien. Entonces primero, presione Catrol o Command end para crear una nueva comp Vamos a llamarlo dos BG. Porque es la escena dos y luego agrega BG al final, ya que será parte del trasfondo de esta escena. Ahora, asegúrate de que las dimensiones estén bien y luego establece la duración en 2 minutos. Bien. Y ahora volvamos a la escena dos y seleccionemos las tareas y los mensajes pre comps que tenemos aquí Ahora cópielos y peguelos en nuestra nueva comp. A continuación, presione y elimine todos los fotogramas clave que tenemos aquí, y ahora comenzaremos a duplicarlos para crear esa sensación de caos Pero antes de eso, debemos asegurarnos de que no colocaremos los nuevos duplicados en estas áreas Donde en la escena principal, tenemos posicionados estos cuatro precomps Para esto, asegurémonos de que no se seleccione ninguna capa y creemos un rectángulo para marcar el área de mensajes. Entonces marquemos también el área de tareas. Una vez hecho esto, ahora podemos bajar la opacidad de la capa de forma y bloquearla para que no interfiera con nosotros. Al hacer eso, ahora sabemos que estas áreas son donde no debemos colocar los nuevos duplicados que vamos a crear en un segundo Entonces primero, podemos sacar los precomps actuales de estas áreas, y luego empecemos a duplicarlos para crear una Voy a acelerar un poco este proceso. Todo bien. Entonces, una vez que hayamos terminado con eso, realmente podemos cancelar la función collapse para todas las pre comps, ya que estamos planeando usar esta comp como parte de la capa de fondo No necesitamos tenerlos todos en súper alta calidad. Estoy haciendo esto para que mi tiempo de renderizado sea un poco más rápido. Bien. Y ahora apaguemos la capa guía que creamos aquí y luego extendamos las capas para que duren hasta el final de la línea de tiempo. Genial. Y ahora agreguemos una nueva capa de ajuste en la escena y le agreguemos el desenfoque rápido de cuadro para hacer borrosa esta composición Se verá mejor en la escena principal de esta manera. Pronto, conseguirás lo que quiero decir con eso. Por ahora, volvamos a la compilación de la escena principal y luego llevemos a esta línea de tiempo la nueva precomp de fondo que acabamos de crear Colócala encima de la capa de fondo degradado. Creo que deberíamos ajustar el desenfoque. Para esto, ingresemos a la precomp y cortemos el efecto de desenfoque de cuadro rápido de la capa de ajuste Podemos eliminar la capa de ajuste aquí. Ahora, volvamos a la escena principal y peguemos el efecto en la precomp De esta manera, nos será más fácil controlar el efecto. Quería mostrarte esto para que sepas que a veces es mejor usar un efecto en la pre comp en lugar de usar capas de ajuste. Y ese fue un gran ejemplo para esta situación. Y ahora para que se mezcla aún más con la escena, podemos elegir un modo de fusión diferente para esta precomp En lugar de elegir el modo de fusión correcto, manualmente, podemos usar el atajo para alternar entre los diferentes modos de fusión. Mantenga presionada la tecla Mayús y presione la tecla más o la tecla menos. Todo bien. Entonces después de verificar todos los modos de fusión, creo que overlay se ve mejor en nuestro caso. Y ahora, si volvemos al master comp para ver cómo se ve eso con el movimiento de cámara que creamos aquí, para esta escena, obtendremos un look súper cool. Tenemos el caos, pero aún así la escena se ve muy equilibrada y limpia. Genial. Así que ahora, una vez que hayamos terminado de ajustar las imágenes en el proyecto y tengamos toda la animación perfectamente sincronizada con la voz en off, ahora podemos pasar al siguiente paso, que es agregar música Para ello, dirígete a la carpeta de activos que descargaste para mí. Y aquí puedes encontrar la música que encontré para este proyecto. Encontré esta pista en la audioteca de YouTube, que es de código abierto. Eso significa que el 99% de las pistas que encontrarás allí son de uso gratuito sin derechos de autor y derechos de autor. Se pueden utilizar con fines comerciales. Cuando busco una pista, suelo filtrar primero la lista por el estado de ánimo adecuado. En este caso, creo que funky encajará con el tempo de mi animación Por supuesto, es una buena idea escoger tres canciones y darle al cliente la opción de elegir. Cuando busco la música adecuada, estoy tratando de encontrar una pista que tenga una especie de sección de acumulación al principio. La música debe comenzar con algún tipo de intro que agregará más interés a la animación Entonces en este punto, solo estoy escuchando todas las pistas que veo en la primera página, y después de encontrar la correcta, es súper importante verificar que tenga el ícono de YouTube. Significa que es de uso gratuito para cualquier propósito sin que necesitemos agregar créditos para el creador de la canción. Sólo entonces puedes descargarla sin preocuparte por las reclamaciones de derechos de autor? Bien, volvamos al proyecto. Ahora arrastremos la pista a nuestra línea de tiempo y veamos si encaja con las vibraciones Pero antes de eso, vayamos al panel de proyectos y organicémoslo un poco. Podemos colocar la pista en la carpeta Assets, y también podemos colocar esta precomp en la carpeta PreComs Genial. Y ahora vamos a escucharlo. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes. Y antes de que te des cuenta, te estás ahogando en el caos. Como habrás notado, el volumen de la pista es demasiado alto. Por lo tanto, necesitamos ajustarlo para que se ajuste a la voz en off. Para ello, presiona la tecla. Ahora podemos ver los niveles de audio. Vamos a ponerlo a -25 y escucharlo una vez más. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda Cumplió con un punto. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con un punto, obtienes un aplauso de cristal. Dash. Bien, eso es mejor. Pero creo que podemos fijarlo a -20, así que la pista será un poco mayor en volumen. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda. Cumplió con un punto. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con un punto, obtienes una visión clara y cristalina de todo lo que tu equipo está trabajando en todos tus proyectos. G. Genial. Eso es perfecto. Con eso hecho, cerremos ahora todos los pre comps que tenemos aquí y justo después de eso, vamos al panel Proyecto para organizarlo antes de renderizar Organizar es súper importante, no solo para ti, sino también para una persona que podría trabajar contigo en este proyecto. A lo mejor trabajarás con otro freelancer o tal vez trabajarás en una empresa con otro colega. De cualquier manera, tener un proyecto bien organizado te posicionará en una muy buena luz profesional. Dicho esto, abramos la carpeta precomp y empecemos a organizarla primero Veamos qué tenemos en la carpeta de pantalla. Aquí todo se ve bien. Veamos qué tenemos en la carpeta de paneles. Aquí, me encantaría ajustar los nombres de los precoms. En lugar de S uno, cambiémoslo a pantalla uno. Y es porque me di cuenta de que todos los demás paneles precomps empiezan con el nombre completo de la pantalla Genial. Y ahora hagamos lo mismo para el resto de los precomps aquí Una vez hecho esto, vayamos ahora a la carpeta precomps y seleccionemos todos los paneles de pantalla y precomps de activos que creamos para poner en De esta manera, en la carpeta de precoms, solo tenemos los precomps generales que usamos Puedes ir más allá y crear una nueva carpeta dentro de la carpeta pre cooms para los títulos principales, pero no tenemos muchos de ellos, así que la guardaré como está Impresionante. Y ahora abramos la carpeta assets y veamos si hay algo que podamos organizar aquí. Bien. Creo que aquí todo se ve bien, y ahora estamos listos para renderizar el proyecto. Y para obtener la mejor calidad en términos de colores para nuestro archivo de renderizado final, podemos ingresar a la configuración del proyecto desde aquí y cambiar la profundidad de bits a 16 o 32 bits. Si usas efectos de brillo en el proyecto, ir con 32 bits puede afectar el aspecto de estas escenas, así que presta atención a ello. Tenga en cuenta que cuantos más bits por canal elija, más lentos serán sus tiempos de renderizado, porque After Effects ahora necesitará renderizar una mayor gama de colores. Bien. Ahora activemos la función de desenfoque de movimiento aquí en la línea de tiempo principal. Para que podamos obtener el desenfoque de movimiento, lo activamos dentro de la precom Y ahora hagamos una última cosa antes de renderizar el proyecto, y es purgarlo. De esta manera, bajaremos el riesgo de errores inesperados de software durante el renderizado. Genial. Con todo eso hecho, ahora vamos a asegurarnos de que estamos seleccionando la composición maestra en el panel del proyecto y luego vamos a la composición y agreguemos esta línea de tiempo a la cola de renderizado. Aquí, optemos por renderizarlo en 40 megabits por segundo, porque nos dará un poco más de calidad para el archivo final Si no lo ve aquí, simplemente haga clic en Módulo de Salida y luego en formato, elija Ht 264. A continuación, vaya a Opciones de formato y establezca la configuración de la tasa de bits como se presenta aquí Todo bien. Y ahora vamos a elegir dónde renderizar el archivo. Lo voy a renderizar en la carpeta de finales. No olvides ajustar el nombre del archivo. Llamémoslo Proyecto SAS Versión 01. Impresionante. Y ahora vamos a presionar ese botón de renderizar y esperar un par de minutos. Voy a acelerar este proceso. Y ahora veamos la animación algunas veces para obtener una visión clara si necesitamos ajustar o arreglar algo. Administrar un equipo grande en múltiples proyectos no es fácil. Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda. Conoce One Point. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con One Point, obtienes una visión clara de todo lo que tu equipo está trabajando, todos tus proyectos, todas tus tareas, todo en un solo lugar. Necesito la imagen completa. Cada proyecto incluye tareas detalladas, subtareas y seguimiento del progreso en tiempo real, por lo que nada se desliza por las grietas Quieres ver quién se está quedando atrás, dirígete a la pestaña de tu equipo para ver la actividad de todos de un vistazo. Necesidad de hacer un seguimiento con alguien. Salta al sistema de mensajería integrado donde todas tus conversaciones se organizan por contacto. Envía un recordatorio rápido o comparte una actualización al instante. Y sí, compartir archivos es sencillo. Sube cualquier documento y todo tu equipo tendrá acceso a él de inmediato. Entonces, ¿por qué seguir luchando? Ve a onepoint.com y haz tu jornada laboral más fácil, Administrar un equipo grande en múltiples proyectos no es fácil. Demasiadas tareas, demasiados mensajes, y antes de que te des cuenta, te estás ahogando en el caos buscando ayuda Conocí a One Point. La plataforma que hace que la gestión de proyectos sea tan simple, incluso tu gato podría hacerlo. Con One Point, obtienes una visión clara de todo lo que tu equipo está trabajando, todos tus proyectos, todas tus tareas, todo en un solo lugar. Necesito la imagen completa. Cada proyecto incluye tareas detalladas, subtareas y seguimiento del progreso en tiempo real, por lo que nada se desliza por las grietas Quieres ver quién se está quedando atrás, dirígete a la pestaña de tu equipo para ver la actividad de todos de un vistazo. Necesidad de hacer un seguimiento con alguien. Salta al sistema de mensajería integrado donde todas tus conversaciones se organizan por contacto. Envía un recordatorio rápido o comparte una actualización al instante. Y sí, compartir archivos es sencillo. Sube cualquier documento y todo tu equipo tendrá acceso a él de inmediato. Así que FUE múltiples proyectos está bien. Entonces después de ver la animación algunas veces, sí tengo un pequeño ajuste que quiero hacer. En la escena final, la animación de introducción del objeto cursor está entrando a la escena desde el centro, y creo que no se ve bien Entonces entremos en la escena y luego ajustemos la posición del cursor al inicio de la escena. Asegúrate de estar parado en los fotogramas clave de primera posición y solo luego moverlo. Vamos a moverlo a la derecha. En caso no estés parado exactamente en los fotogramas clave, podrías crear fotogramas clave adicionales como lo hice en mi Entonces ahora eliminaré el primer fotograma clave y colocaré el nuevo allí en su lugar Veamos cómo se ve eso. Bien, creo que ahora se ve un poco mejor. Ahora volvamos al master comp e ingresemos a la tercera escena porque también noté que hay un momento en el que el cursor se detiene por completo que no me gustó. Sucede aquí después de la animación de introducción. Si ingresamos al editor de grafos, veremos que la velocidad en este momento es cero. Así que arreglemos eso muy rápido convirtiendo este fotograma clave en un fotograma clave continuo y luego acelerando este momento . Creo que ahora es mejor. Vamos a verlo con el resto de la escena. Genial. Creo que ahora se ve increíble. Bien. Entonces ahora, una vez que estemos satisfechos con el movimiento, podemos ir y renderizar la comp maestra una vez más. Pero antes de hacer eso, quiero aprovechar esta oportunidad y mostrarte cómo agregar fotos de perfil realistas de Avatar en el proyecto, ya que no quería perder tiempo en esto para todas las escenas que necesitan una foto de perfil de avatar, me aseguré de tener al menos una escena solo para mostrarte el proceso detrás de ella. Quizás recuerdes que durante el proceso de preparación en Illustrator, cuando preparamos la escena seis, señalé que en esta escena específica, dejaré los iconos del perfil Avatar como capas separadas porque los usaremos más adelante en el proyecto. Entonces ahora eso es exactamente lo que quiero que hagamos. Ahora aprenderemos a agregar fotos de perfil de Avatar reales en el diseño del panel de interfaz de usuario. Abramos la carpeta de activos que descargaste para mí y encontremos los retratos del nombre del archivo PSD. Ahora, quiero mostrarte cómo me encanta preparar mis avatares para la animación. primero es lo primero, me dirijo al sitio web de freepick porque puedes encontrar muchas cosas útiles aquí de forma gratuita Ahora en la barra de búsqueda, buscaré retratos. Entonces me aseguraré de ver solo las opciones gratuitas. Y ahora estoy comprobando qué opciones veo aquí. Entonces elegiré algo que me guste mientras aseguro de que haya muchas otras opciones similares a esta. Es importante porque queremos tener un diseño consistente, mira en nuestro proyecto. ¿Bien? Entonces, en este caso, me encanta esta foto. Entonces voy a darle click. Y luego si quieres, ya puedes prepararlo para animación justo dentro de free pick. Puedes deshacerte del fondo o elegir cualquier otro formato. En mi caso, como sé que voy a necesitar tener muchos de estos prefiero tenerlos listos para la animación en un solo archivo. Podemos usar Photoshop para esto, pero más sobre eso más adelante. Por ahora, solo sigo descargando el resto de los avatares. En este caso, necesito tener siete de ellos en total. Entonces ahora primero crearé una nueva carpeta en la que guardaré todos los avatares que descargué de aquí. Voy a acelerar este proceso por ahora. Todo bien. Así que una vez que termine de descargar todas las imágenes, ahora abriré Photoshop y crearé un nuevo documento. Podemos usar los presets de arte e Ilustración para esto ya que hay un formato cuadrado ya preparado para nosotros. La ventaja de tener todas las imágenes en un solo archivo es que todas serán del mismo tamaño. Eso nos hará la vida más fácil en After Effects cuando necesitemos usarlos. Pronto, verás a lo que me refiero. Bien, entonces ahora voy a traer todas las imágenes dentro. Y luego mientras todos están seleccionados, presionaré Control o Comando T para escalarlos. Una vez hecho eso, ahora voy a verificar que todos estén posicionados en el centro. Esa es también una de las ventajas de traerlos todos en un solo archivo de Photoshop porque si tienes imágenes con diferentes dimensiones, puedes ajustarlas todas para que tengan las mismas dimensiones aquí en este archivo escalando algunas de ellas o moviéndolas de izquierda a derecha si es necesario. Todo bien. Así que ahora, una vez que me aseguré de tener todas las imágenes alineadas, ahora puedo eliminar la capa de fondo y guardar este archivo en mi carpeta assets. Me aseguraré de guardarlo como un archivo PSD y luego presionaré Guardar. Genial. Así que ahora volvamos a nuestro proyecto. Primero, arrastremos el archivo PSD al panel del proyecto. Ahora en Tipo de importación, elegiremos composición retener tamaños de capa, ya que necesitamos todas las capas separadas como en el documento original de Photoshop. Aquí, no importa qué elegir ya que no usamos ningún efecto o estilo de capa en el documento original de Photoshop. Bien, entonces ahora antes de que empecemos a trabajar, llevemos la nueva carpeta que consiste todas las imágenes a la carpeta assets. Ahora vamos a seleccionar los retratos pre comp que se creó automáticamente una vez que insertamos el archivo PSD y dejemos de funcionar por un segundo, porque quiero mencionar algo importante. Como habrás notado, cuando importamos un archivo PSD a After Effects, obtenemos una precomp que contiene las imágenes Y también una carpeta que contiene las imágenes. Ahora, quiero explicar qué pasó exactamente cuando elegimos importar el archivo PSD como una composición con el tamaño de capa de retención. After Effects creó una precomp con las dimensiones del documento cuadrado que creamos en Photoshop Pero las imágenes dentro de esta precomp serán del tamaño de sus dimensiones originales Eso es lo que significa retener el tamaño de la capa. After Effects no recorta las imágenes al formato cuadrado. Por lo tanto, si vas dentro de la precomp, notarás que todas las imágenes no están en formato cuadrado También aparecen de esa manera en la carpeta de las imágenes. Quería mostrarte esto para que puedas entender el verdadero significado detrás de retener el tamaño de la capa. En nuestro caso, eso realmente no importa porque incluso si conseguimos que todas las imágenes no se recorten a un formato cuadrado, aún podemos trabajar con ellas ya que todas son más o menos del mismo tamaño Pero en proyectos donde necesites que sean todos del mismo tamaño, debes importarlos como solo composición. Bien. Aprendiendo eso, arrastremos esta pre comp a la carpeta precomps para mantener un proyecto limpio, y luego abramos la carpeta de retratos que acabamos de arrastrar a la carpeta Assets y comencemos a agregar las imágenes al diseño del panel de la interfaz Como puedes ver, será más fácil esa manera elegir las imágenes de avatar. Bien. Así que ahora seleccionemos todos los precomps de contacto en la línea de tiempo y hagamos doble clic en ellos para abrirlos todos a Genial. Y ahora comencemos con el contacto uno. primero es lo primero, necesitamos encontrar una imagen de un hombre, ya que el nombre que tenemos aquí es el nombre de un hombre. Vamos a usar este. Arrástralo a la línea y luego bájalo para que se ajuste al diseño. Ahora vamos a arrastrarlo al área de iconos de Avatar. Podemos escalarlo un poco más. Genial. Y ahora usaremos la forma de la capa de iconos Avatar como máscara para la imagen, y lo haremos usando la función track Matt. Todo lo que tenemos que hacer es hacer que la imagen use el Alfa de la capa de iconos Avatar. Y ahora, como sabemos que esta precomp está animada en tres espacios D, también necesitamos convertir la imagen a una capa de tres D. Impresionante. Así que ahora podemos acercar y ajustar aún más la posición y la escala si es necesario. Todo bien. Y ahora para repetir este proceso más rápido, copiemos la capa de imagen que tenemos aquí, luego vamos a la siguiente precomp de contacto y peguéela aquí Ahora, ajustemos la posición y luego hagamos que esta capa use la capa de icono Avatar como máscara. Entonces busquemos otra imagen de hombre y cambiemos entre ellas. Entonces, mientras se selecciona la capa de imagen en la línea de tiempo, arrastremos esta imagen encima de ella mientras mantenemos presionada la tecla Alt u opción. Finalmente, ajustemos la posición y la báscula si es necesario. Impresionante. Y ahora vamos a repetir este proceso para el siguiente contacto pre comp. Primero, necesitamos pegar la primera imagen copiada y luego reemplazarla por la nueva, como hicimos hace unos segundos. Bien, así que vamos a repetir este proceso para el resto de los precomps de contacto Voy a acelerar este proceso por ahora. Solo asegúrate de que la imagen se ajuste al Bien, así que una vez que terminemos podremos sostener Comando del Controlador W para cerrar los precomps de contacto Como puedes ver, ahora tenemos una escena genial con las fotos reales de perfil de Avatar. Y ahora ya sabes cómo hacer eso en tus proyectos futuros. Ahora guardemos el proyecto para asegurar el progreso que hemos logrado hasta ahora. Y con eso hecho, hemos terminado de crear todo el video explicativo de SAS Ya estamos listos para renderizar la versión final. Entonces, seleccionemos la comp maestra y luego la enviemos a la cola de renderizado. Mantengamos los mismos ajustes de renderizado y reemplacemos el archivo antiguo por el nuevo. Ahora, esperemos hasta que termine el render. Una vez hecho esto, tendrás un proyecto muy impresionante para exhibir en tu portafolio y compartir con tus futuros clientes. Dicho esto, ahora puedes cerrar Illustrator si está abierto. También podemos cerrar el archivo Figma y los archivos PDF que utilizamos para el proyecto Espero que hayas disfrutado este y hayas aprendido muchas cosas nuevas e interesantes. Lo principal que me encantaría que recordaras de este curso es que crear una pieza de motion design es un proceso de creación paso a paso. Trate de moverse siempre paso a paso y confíe en el proceso. Muchas gracias por ver. Te veré en la siguiente.