Caballería para principiantes: cómo animar interfaces de usuario de software/sitios web/aplicaciones como un profesional

1. Introduccion: Si alguna vez has visto un anuncio de un software o una app o una plataforma SAS como Base 44 Weeks, Canva, Figma, probablemente notes Todas sus animaciones se ven muy suaves, cinematográficas, y cada decisión, cada acción parece intencional Las animaciones hacen que el producto se vea genial. hace clic en un botón y otros elementos de la interfaz de usuario reaccionan a medida que gira la vista, todo tipo de elementos de la interfaz de usuario reaccionan a las interacciones para mostrar lo que el software puede hacer de un vistazo Entonces, ¿cómo hacen eso? ¿Cómo crean estas animaciones? Lo que la mayoría de la gente no se da cuenta es que este tipo de animación no necesita un gran equipo de personas. No requiere Adobe After Effects ni años de experiencia en diseño de movimiento. Requiere conocer la herramienta adecuada y el enfoque correcto que le permitirá crear complejas dos animaciones D muy rápidamente. Y esa es la herramienta que hoy te voy a enseñar. En esta clase, vamos a construir una de esas animaciones desde cero usando una herramienta gratuita de diseño y animación de dos D llamada Caballería Déjame mostrarte lo que vamos a hacer. Para familiarizarte con las herramientas que Cavalry tiene para ofrecer, vamos a comenzar con un simple botón de suscripción Vamos a usar las herramientas de forma nativas de la caballería, y luego vamos a agregar un ícono de notificación, darle una sombra paralela y luego animar un cursor del mouse que recorre un camino curvo y hace clic el botón con una reacción visual que Y luego pasaremos al siguiente nivel donde vamos a diseñar dos tarjetas de interfaz de usuario, una tarjeta de perfil de usuario y una tarjeta de mensaje. Y luego vamos a diseñar un titular de noticias que se parezca a uno de esos títulos de CNBC o Bloomberg que ves en sus documentales, y luego vamos a animar Se trata de un proyecto relativamente simple pero elegante que te presentará algunas de las herramientas más utilizadas en Caballería Cada técnica se basa en la anterior, y al final, tendrás una interfaz de usuario terminada que exhibirás a clientes potenciales y las habilidades para crear animaciones geniales para tu propio sas o producto de software. Mi nombre es Ken, y enseño diseño UI UX. Diseño web y modelado en tres D en Skillshare y YouTube Esto es Caballería para principiantes, la manera práctica. ¿Estás listo? Si estás listo, vamos a meternos en ello. 2. Descripción general de la caballería: Solo para tener una visión general rápida de lo que estamos viendo antes de comenzar. Si ya has usado algún software de edición de video, probablemente ya entiendas la mayor parte de lo que vamos a hablar aquí. Entonces, claro, esta es la mesa de trabajo, y esta es tu escena Aquí es donde vas a agregar elementos y animarlos. Y a medida que añades elementos, van a aparecer aquí en la ventana de escena, y aquí es donde aparecen como capas. Estas son capas. Y esta es la línea de tiempo. Aquí es donde manejas los colores. Entonces, si tienes un objeto seleccionado, puedes cambiar su color aquí mismo. Pero rara vez uso este lado. Yo solo voy a los atributos porque cuando tienes algo seleccionado aquí, sus atributos aparecerán aquí y puedes cambiar muchísimos aspectos. Por ejemplo, podemos ir al color del campo y simplemente hacer clic en este y cambiarlo aquí mismo. Este es el elemento seleccionado. Estos son solo atajos que el equipo de Caballería colocó aquí para las características de uso común, deformadores de uso común y Entonces pensaron en hacerlos accesibles para el usuario aquí mismo. Entonces esos son atajos, y vamos a ver cómo usar algunos de ellos a medida que trabajamos en nuestro proyecto. Por último, ya se dio cuenta que para dibujar estos rectángulos, seleccioné esta herramienta de rectángulo y comencé a dibujar Estas son las diferentes formas que puedes dibujar. Y, por supuesto, en la clase, vamos a ver cómo usar algunas de estas formas para dibujar nuestros componentes de interfaz de usuario. Entonces eso es solo una descripción general rápida de lo que necesita saber sobre la interfaz de usuario. La otra cosa que quiero que veamos es cómo crear una nueva carpeta de proyectos. Entonces voy a cada vez que quieras comenzar un nuevo proyecto, un nuevo proyecto de Caballería, quieres asegurarte de que ese proyecto esté en su propia carpeta para que todo lo que trabajes, todo lo que importas, todo lo que guardes aquí en el proyecto esté contenido en una sola Entonces la manera de hacerlo es ir aquí a este menú desplegable, digamos crear. Voy a ir a mis dos proyectos D, y aquí dentro, voy a crear una nueva carpeta. Yo lo llamaré Nombre del proyecto. A continuación, elija carpeta. Como puedes ver, ya está resaltado aquí. También puedes simplemente hacer doble clic, entrar dentro de él, luego elegir. Entonces ahora esto ha cambiado a nombre de proyecto. Esta es una escena en la carpeta del nombre del proyecto. Si hacemos clic en esto, permítanme cerrar eso. Si lo sobrepasé, dice descripción del proyecto. Se trata de describir cada carpeta que se ha creado dentro de la carpeta que acabamos de crear. Hemos creado una carpeta de escenas, renderiza carpetas. Una carpeta de activos y todas estas otras carpetas. Si cierro eso y digo Control S, Observe ahora, automáticamente va entrar en la carpeta de escenas. Esta es la carpeta de proyectos que acabamos de crear. Si subo, como pueden ver, tenemos una carpeta de escenas. Automáticamente, podemos guardar la escena ahí dentro. Podemos tener varias escenas. Si digo Control N para nuevo, Control N y Control S para guardarlo. Podemos guardar una segunda escena dentro de esta carpeta de proyectos. Así podemos guardar varias escenas si queremos diferentes escenas o precomposiciones para una escena general Para que pueda llamar a este proyecto nombre uno y guardarlo. Ahora tenemos dos escenas en esta carpeta de proyectos. Eso es todo por ahora. Esto fue solo una introducción rápida y descripción general de la interfaz de usuario de caballería y cómo crear una carpeta de proyecto En la siguiente lección, hablemos del punto de pivote, que es muy importante. Nos vemos en breve. 3. Punto de giro: Nosotros para hablar de algo llamado punto de pivote porque es muy importante para la animación, y todavía estamos dentro la carpeta de proyectos de muestra que creamos. Entonces solo estamos viendo un ejemplo. Vamos a crear una nueva carpeta de proyectos en la siguiente lección. Entonces ahora mismo, quiero agregar un rectángulo. Entonces solo voy a seleccionar el rectángulo a y dibujar algo ahí, dibujar otro ahí. Si selecciono la herramienta de selección, como pueden ver, el rectángulo tiene este Gizmo aquí mismo en su centro Si selecciono este, también tiene el Gizmo en su centro a nivel local Pero si selecciono los dos, manteniendo pulsado Mayús y seleccionando los dos, Control G. Ahora, como pueden ver, el punto de pivote está en el medio. Todo bien. Si deshago ese Control Z, si selecciono este rectángulo y lo coloco aquí mismo y selecciono los dos, Control G, notará que el punto de pivote aún está en el centro de la pantalla. Entonces, si tratamos de animar este grupo, tal vez girándolo, va a girar alrededor del centro de la mesa de trabajo, cuando tal vez queremos que gire aquí mismo en el centro de los dos Entonces eso significa que tenemos que tener mucho cuidado sobre dónde colocamos este punto de pivote cuando estamos dibujando o diseñando nuestros elementos de interfaz de usuario. Bien, claro, como puedes ver, cuando tenemos un grupo seleccionado o incluso cualquier forma, hay un atributo pivot. Y puedes moverlo, por ejemplo, si lo muevo en la X, como puedes ver, lo estamos moviendo por ahí. Si selecciono un grupo, también podemos mover su pivote. Y fíjate que son las formas o es el grupo el que se mueve en relación con el punto de pivote. El punto de pivote queda en el centro. Entonces esto nos lleva a la conclusión que quería que tuvieras. Cuando estamos dibujando un elemento UI, te aconsejo que lo dibujes aquí mismo en el centro porque si lo dibujas si diseñas diferentes elementos en la mesa de trabajo y luego los agrupa, el punto de pivote va a ir al centro, y vas a tener que mover manualmente ese grupo al centro, de la misma manera que lo hicimos a este grupo Así que siempre es mejor dibujar ese grupo aquí, solo agrega los elementos que estés creando, y los estarás diseñando relación con el artilugio aquí mismo en el centro Y cuando los agrupas a todos y los muevas, todos se moverán con el artilugio ya en el centro Vamos a ver cómo hacerlo cuando empecemos a dibujar. Así que eso fue solo una visión general rápida de los puntos de pivote, y debemos tenerlo en cuenta. 4. Diseña un botón: Dibujemos un botón. Antes de hacer eso, sigamos adelante y creamos un proyecto completamente nuevo porque ahora este es un proyecto serio. Así que voy a ir aquí a ese menú desplegable, crear, y vamos a subir a la carpeta padre, y voy a crear una nueva carpeta. Llámelo botón. Ingresa y luego elige. Bien, entonces tenemos esta carpeta de botones y está creada todas estas carpetas. Entonces ahora no queremos salvar esto. Yo sólo voy a decir Control N y luego descartarlo porque queremos crear una nueva escena Control N es nueva escena, no nuevo proyecto. Entonces descarta esta escena. Podemos controlar S, y se va a guardar dentro de la carpeta de escenas de la carpeta de botones. Y el nombre es botón punto cv. Entonces ahí vamos. Tenemos una carpeta de botones y una escena de cv de punto de botón. Ahora, quiero cambiar a magnific.com, formalmente llamado FreePeek Hoy en día, lo llaman Magnific y quiero ir a los activos bursátiles Estos son vectores. Quiero buscar suscribirse. Bien, había buscado un bonito botón de suscripción. El color debe ser rojo. Hay uno que me gusta mucho, pero éste. A mí me gusta este, pero sí, sigamos adelante y creemos este. Entonces solo voy a descargar la imagen JPEG, o simplemente puedes tomar una captura de pantalla. Aquí vamos. Ahora, de vuelta en Caballería, voy a hacer doble clic en esto Y ve a la carpeta Descargas, y aquí está el botón que acabamos de descargar. Entonces aquí está. Sólo voy a dejarla caer aquí. Es demasiado grande. Así puedo aguantar turno y hacer clic en este cuadrado aquí y tirar hacia adentro para hacerlo más pequeño. A lo mejor ese tamaño. Así que ahora haz zoom con una rueda del ratón y aquí está la imagen. Entonces voy a bloquearlo para que no sea seleccionable. Porque lo que queremos hacer y se ha sumado al centro de la mesa de Entonces, si mantengo presionado Alt, si quiero dibujar un rectángulo aquí, puedo seleccionar la herramienta rectángulo y dibujar y hacer. Pero si quiero dibujarla justo en medio de la mesa de trabajo, mantendré presionada y simplemente le daré clic Se agregará un smack rectángulo en el origen mundial, 0.00 en la X e Y, como se puede ver en los atributos, rectángulo posición X cero, Y cero Entonces ahora también tenemos aquí el tipo primitivo, debajo de los atributos del rectángulo y debajo de los atributos de cualquier otra forma aquí, si agrego una elipse y dibujo la elipse Aquí se selecciona la elipse. Se puede ver que tenemos el tipo primitivo aquí. Esta sección solo te permite cambiar cualquier forma que acabas dibujar en cualquier otra forma aquí si cambias de opinión. Así puedo cambiar de opinión y decir, no quiero que esto sea una elipse Yo quería que fuera un rectángulo, así puedo venir aquí y decir rectángulo. Y así se convierte en un rectángulo. Puedo venir aquí con la herramienta de selección, seleccionar esto y decir, quería que esto fuera una elipse, y ahora es una elipse Esta sección de tipo primitivo aquí permite afectar la forma que acaba de perforar como primitiva. Entonces déjame deshacer todo eso y dejarme con esto. Entonces, si queremos aumentar el tamaño de este rectángulo en la X, vamos al ancho aquí mismo, tamaño primitivo ancho del rectángulo. Y lo que esto nos permite hacer es que si vamos al radio de la esquina, podemos aumentar así el radio de la esquina. Ahora bien, si deshago ese Control Z, podrías haber sido tentado originalmente a asumir si quieres aumentar el ancho de este rectángulo, es ir a la escala X y Valla Pero si vamos y aumentamos el radio de la esquina, se ve estirado. Así que tenlo en mente. Entonces voy a rehacer eso, luego aumentar ese radio hasta ese punto, tal vez 200 solo para redondearlo. De hecho, podemos simplemente poner esto de lado y verlo siempre. Entonces no lo necesitamos ahí porque no estamos tratando de rastrearlo. Entonces seleccionaré este desbloquearlo, y lo arrastraré hacia un lado, luego acercaré el zoom. Ahora que tenemos esto, podemos controlar D para duplicarlo. Ahora tenemos otro más pequeño como este, reducimos el ancho y la altura. Podemos cambiar el color solo para diferenciarlo. Todo bien. Ahora, vamos a seleccionar este exterior. Se puede ir al relleno, seleccionar eso, y le voy a dar este color rojo oscuro Después selecciona esta más pequeña, ve al campo. Vamos a darle un rojo brillante. Y vamos a ir al trazo del más pequeño habilitamos el trazo. Y vamos a hacerlo también rojo, pero un poco más oscuro. Stroke. ¿Qué hay de ahí? No. Sí, eso me gusta. Ahora voy a hacer clic en Hold on At porque aquí todo está en el centro. En y haz clic en T. Ahora, como puedes ver, el Gizmo está desplazado del texto. Queremos el texto. Pasemos a los atributos del texto porque aquí está seleccionado. Vamos a la alineación vertical. Ahora está alineado al centro en relación con el Gizmo. También vamos a alinearlo al centro así. Y ahora cambiemos esto para suscribirnos. Podemos darle este color. No es blanco, parece crema brillante. A mí me encanta. Ahora bien, si quieren agregar esta campana, podemos ir a Yo había abierto svgple.com Puedes venir aquí y buscar campana o notificación. Primero pensaste en Bien. Así que permítanme seleccionar esto. Puedes editar el color antes de descargarlo, selecciónalo. Si queremos que sea de este color. Déjame seleccionar esto. Ve al relleno, selecciona esa copia, ve aquí, pégala. Entonces digamos exportar un SVG. Entonces ahora aquí vamos. Tenemos el SVG. Sólo puedo arrastrar y soltar esto aquí. Ahí vamos, o haga doble clic en esto y vaya a la Descarga y haga clic en eso. Entonces aquí tenemos la ondulación SVG. Voy a dejarlo caer aquí como capa de activos. Si lo selecciono, puedo mantener presionado y cambiar y reducir el tamaño, empujarlo hacia un lado así. Empuja eso hacia un lado. Creo que eso me gusta. ¿O es demasiado grande? Un turno. También debes seleccionar esto, quiero reducir la altura. Entonces éste también, reduce la altura. Solo lo estoy haciendo un ala usando mi ojo para juzgar el tamaño. Creo que me encanta el tamaño así. Entonces ahora solo eliminemos eso. Y ahora tenemos un botón. Controla S para guardarlo, y nuestro botón está listo. Entonces, en la siguiente lección, veamos cómo diseñar un cursor de mouse. Nos vemos en breve. 5. Diseña un cursor de ratón: Ahora es el momento de diseñar un cursor de ratón. Ahora, sé lo que estás pensando. Oye, Ken, ¿por qué no ir aquí a SVG Repo y buscar un cursor de ratón Cursor del ratón. Tenemos tantos de ellos. O simplemente cursor. Tenemos tantos de ellos. Y eso es cierto, y queremos dibujar uno que se vea así. Y la razón por la que estamos haciendo esto es porque estoy buscando una razón para que aprendamos a usar la herramienta pluma aquí. Entonces, antes que nada, vamos a agruparlos en un botón. Así que los he seleccionado todos, Control G, selecciona el grupo, Enter. Botón. Ahora bien, si selecciono el grupo y lo arrastre, como puede ver, el punto de pivote siempre está en su centro. Entonces, si animo la rotación, va a suceder exactamente en el centro, tal como queremos que lo haga Ahora, tal vez queramos que suceda en un lugar diferente. Podemos mover el punto de pivote. Déjame deshacer eso y dejarlo en el centro, pero voy a esconderlo. Ahora, agreguemos un rectángulo en el centro. Así que fuera, mantenga presionado y haga clic. Ahí vamos. Acercar. Vamos a agregar una línea. Sostenga y haga clic. Ahí vamos. Ahora voy mientras se selecciona la línea para darle al Control D, para duplicarlo. Ahora tenemos línea y línea uno, y voy a rotar la línea uno, 90 grados. Todo bien. Ahora voy a seleccionar nuevo esta línea, Control D, y simplemente arrastrarla hacia abajo hasta tal vez ese lugar, en algún lugar cerca de la parte inferior. No tiene que ser preciso porque lo que queremos es poder seleccionar esta herramienta ahora, herramienta pluma y asegurarnos de que el ajuste esté habilitado, que pueda ajustar a las esquinas así, luego ajustar a esa línea así, luego ajustar a esa otra esquina, luego ajustar a ese punto justo ahí, y finalmente ahí mismo Entonces ahora, todos estos otros pueden irse. Esos otros eran solo lineamientos. Ahora tenemos un bonito, hermoso cursor del ratón. La otra cosa que queremos hacer es ir al trazo. Y para el estilo join, digamos redondo. Bien, vayamos al color de relleno y cambiemos eso a podemos hacerlo ligero Y el trazo puede ser un poco más brillante. Y vamos a la rotación. Forma, rotación, digamos 20 grados. Si miras el cursor de nuestro mouse y ese cursor solo perforamos, la rotación es casi la misma. 20 grados. Así que ahora, vamos a seleccionarlo. Redujamos el tamaño. Entonces escala. Si reduzco esta escala, va a reducir la escala X. Pero si aguanto, voy a reducir tanto X como Y. quiero que sea pequeña. De hecho, vamos a arrastrarlo a un lado así. Entonces vamos a mostrar el botón. Aquí está el cursor del ratón. Ahí vamos. Entonces hagámoslo más pequeño. Sostenga hacia fuera. Sí, ese es un buen tamaño ahora. A mí me encanta. Creo que este es un buen lugar para terminar con esto. En la siguiente lección, veamos cómo animar esta configuración. El cursor del ratón entrará y hará clic en el botón. ¿Cómo lo hacemos? Veamos cómo hacerlo en breve. 6. Anima el cursor: Esta lección, vamos a animar el cursor del ratón y luego en la siguiente lección, vamos a animar el botón. Sigamos adelante y hagamos eso. Seleccionando el cursor, déjame simplemente presionar Enter aquí mismo y llamarlo cursor. Si eres un principiante, la forma en que animarías un cursor es tal vez arrastrándolo Déjame arrastrarlo así de un lado. Entonces vayamos a la posición y luego animemos eso y eso fijó un fotograma clave para esos dos justo ahí al principio Y entonces tal vez hasta ese punto, lo traes ahí mismo. Entonces ahora, si juego. Esa es una maldición de ratón. Animación. Pero el problema es que si me miras moviendo el cursor del mouse alrededor de la pantalla, nunca mueves el cursor del mouse en una línea súper recta. Siempre parece estar curvándose si trabajas de forma natural Así que queremos mover este cursor del ratón de forma curva. Entonces, ¿cómo haces eso? Usamos un camino. Así que permítanme quitar estos marcos clave, volver al principio. Y ahora lo que queremos hacer es tomar el rependido y dibujar el camino que queremos que siga el cursor del ratón Entonces si hago clic en eso y tal vez ahí Escape. A lo mejor pueda hacer doble clic en él y luego llevarlo a cabo a ese lugar. Entonces V. Ahora tenemos un camino. ¿Cómo conseguimos que el ratón entre en el camino? Utilizamos un buscador de caminos para encontrar el camino. Así que voy a ir aquí y decir pathfinder. Entrar. Y en los atributos de los pathfinders, notarás aquí tenemos entrada Este campo se pregunta en el pathfinder, este campo se pregunta, ¿Dónde está el camino? Enséñame el camino. Muy bien, entonces vamos a mostrarte el camino. Así que sólo voy a arrastrar aquí nuestro afeitarse editable, que es el camino Déjame entrar y cambiarle el nombre a path. Ahora bien, este camino es lo que necesitamos brindar a este campo que está preguntando ¿Dónde está el camino Entonces voy a arrastrar esto a esta forma de entrada. Como puedes ver ahora, dice camino, el nombre que le dimos a nuestro camino. Entonces ahora, el pathfinder conoce el camino que queremos usar. Entonces queremos decirle a este cursor en el atributo position, Oye, ¿sabes qué? Sigue este camino que te proporciona el pathfinder. Entonces queremos llegar al pathfinder y arrastrarlo y conectarlo a la posición Así que estamos manejando la posición del cursor del ratón. En lugar de conducir manualmente estas posiciones nosotros mismos, estamos diciendo que te posicione, tu cursor del mouse de acuerdo a donde el camino te diga el pathfinder te dice Entonces conéctate al pathfinder, así. Y como se puede ver, el ratón saltó a donde el pathfinder le dijo que es el camino Ahora, en el cursor, no podemos animar nada porque ahora es impulsado por el pathfinder, lo que significa animar el cursor del ratón, tenemos que animar un atributo del pathfinder, que es el no podemos animar nada porque ahora es impulsado por el pathfinder, lo que significa animar el cursor del ratón, tenemos que animar un atributo del pathfinder, que es el viaje. Porque se puede ver, pero ahora está siguiendo ese camino. Entonces todo lo que tenemos que hacer es ir al primer fotograma clave, cero, ahí mismo Ahora, vamos a crear un fotograma clave. Y entonces tal vez solo déjame jugar. Ahí es donde quiero que el ratón soh. Entonces aumentemos esto hasta ese punto, 99.5. Y ahora automáticamente se ha agregado otro fotograma clave. Entonces ahora viene de esta manera. Ahora podemos agregar camino, el camino mismo. Está oculto, pero el ratón sabe dónde está el camino. Entonces si lo juego, pero ahora noto que viene en muy linealmente No tiene ese sentido de animación, esa elasticidad. Necesitamos agregar esa elasticidad que haga que las animaciones se vean mejor. Entonces lo que tenemos que hacer es pasar del editor de tiempo al editor de grafos, mantener presionada la tecla shift y reducir la altura de este, mantener pulsado el control para acercar. Seleccione ambos, mantenga presionados y haga clic en uno de ellos para cambiar esto a curva bezier Era una curva lineal. Ahora es una curva Bézier. Entonces con los dos seleccionados, puedo mantener presionado el turno para limitarlos a moverse en línea recta Pero lo que queremos hacer es crear esa forma de S así. Entonces, lo que eso significa es que la animación comenzará lentamente luego aumentará repentinamente, luego disminuirá la velocidad lentamente así. Entonces veamos eso. Si juego, ¿lo ves? Entonces, volvamos al editor de tiempo. Juguémoslo. A mí me gusta. Permítanme simplemente reducir el tiempo Control K para que suba al editor de composición si me escapo. También podemos ir aquí a la composición, ajustes de composición. Podemos reducir esto a 20 rango de cuadro 20. Entonces tenemos una línea de tiempo más corta. Así que toca eso. Entonces creo que ese es un movimiento muy natural del cursor del ratón. En la siguiente lección, veamos cómo animar el botón a medida que se hace clic, porque ahora mismo no se puede decir si se ha hecho clic en el botón Te veré en breve. No vayas a ningún lado. 7. Anima el clic de un botón: Abierto, todo el mundo. Bienvenida de nuevo. Entonces ahora es el momento de animar el botón en sí. Entonces déjame jugar para ver dónde quiero que se anime. Así que aquí mismo, aquí mismo. Entonces necesitamos aumentar la duración del proyecto, tal vez hasta 60. Eso son los 60. Mantenga presionado para expandirlo y contratarlo. Entonces ahora, déjame jugar de nuevo. Justo ahí. Entonces quiero seleccionar el botón en sí, el grupo de botones. Recuerda, es un grupo con muchas cosas. Estamos animando al propio grupo. Y lo que quiero hacer es animar la posición Y. Entonces voy a agregar un fotograma clave ahí. Y el marco clave se agregará aquí mismo. Entonces si lo juego quiero copiar esta copia y pegarla ahí mismo porque en el medio, va a bajar un poco. Entonces en el eje Y, digamos 15. Entonces va a comenzar en la posición normal y terminar en la posición normal, pero en el medio, baja un poco en el eje Y. Juguemos a eso. seleccionarlos todos y tirarlos un poco hacia atrás. Así. Ahí vamos. Entonces ahora, una cosa más para agregarle algo de realismo es ir al editor de grafos, y hagamos el mismo tratamiento le dimos a los otros fotogramas clave. Así que mantén presionada la tecla Shift para reducir la altura aquí, selecciónalas todas. Aguanta hacia fuera. Mantenga pulsada la tecla Mayús y, a continuación, haga clic y arrastre para formar esa curva S. Bien. Una cosa más. Vayamos aquí. Y quiero que vayamos a Pixa Bay. Efectos de sonido Pixel Bay. Porque queremos agregar ese sonido de clic. Había descargado uno, pero no recuerdo dónde está. Así que explora. No, vamos a ir a Efectos de sonido. Después buscaré Click. Como pueden ver, había buscado Click antes. ¿Es esto? Bien, solo descargaré este primero. Pero elige el que más te guste. Ahí vamos. Así que sólo voy a arrastrarlo hasta aquí. Y ahora, aquí está Universal field computer mouse click. Así que voy a arrastrarlo y soltarlo en algún lugar de aquí. ¿Dónde está? Ahí vamos. Entonces ahora lo arrastraré y lo colocaré justo debajo donde ocurre el clic. Juguémoslo desde el principio. Así como así. A mí me gustan los resultados, pero esto es solo el comienzo. Por supuesto, esto es un ejemplo y un punto de entrada a lo que vamos a hacer en las próximas lecciones. Quería que nos pusiéramos cómodos animando componentes. Espero que ahora tengas la confianza para pasar a las siguientes lecciones donde vamos a empezar diseñando una tarjeta de perfil de usuario. Te veré en breve. Y una cosa más si acaso quieres regular el volumen de tu audio, igual que cualquier otro elemento aquí, audio tiene atributos, y uno de los atributos aquí es el volumen. Para que la puedas reducir hasta los niveles que quieras. Normalmente subo a 20 negativos por cosas que quiero mantener sutiles. Déjame tocar eso. Así como así. Así que solo juega con los atributos y mira lo que quieres cambiar y mejora el sonido del clic. Entonces creo que este es un buen lugar para terminar con esto. En la siguiente lección, diseñemos una tarjeta de perfil de usuario. Nos vemos en breve. 8. Diseñar una tarjeta de perfil de usuario: Entonces ahora que terminamos con este botón, porque lo estábamos usando como ejemplo, es momento de crear un proyecto completamente nuevo. Entonces solo voy a ir aquí, crear ir a mi carpeta de dos Proyectos D. Voy a proporcionar esta carpeta de proyecto también si quieres examinarla. Pero ahora mismo, sólo voy a crearlo aquí. App, animación de interfaz de usuario porque vamos a contener todos los componentes de la interfaz de usuario aquí que vamos a animar para el resto de la clase Entonces entra, elige y claro, esto es en un proyecto diferente, así que solo voy a decir Control N para nueva escena. Y ahora podemos guardar esta primera escena como tarjeta de perfil de usuario. Déjame copiar aquí este nombre. Tarjeta de perfil de usuario. Guarde eso. Entonces lo primero es, claro, traer la inspiración si ya tenemos la UI. Por supuesto, si estás animando una interfaz de usuario, estás basando en una aplicación o software real o sitio web, por lo que necesitamos tener una captura de pantalla de la misma por lo que necesitamos tener una captura de pantalla de la Entonces voy a hacer doble clic en esto. Descargué algunos elementos de la interfaz de usuario. Desde magnifico Déjame buscarlo muy rápido y volver. Bien, entonces estamos de vuelta. Entonces ahora voy a ir dentro de la carpeta del proyecto. Esta es nuestra carpeta de proyectos, y por supuesto, estas son las carpetas que se crearon. Una de las carpetas creadas automáticamente fueron los assets. Voy a entrar aquí y pegar la interfaz de usuario que quiero que usemos. Entonces voy a hacer doble clic. Oh, espera, ya estamos aquí. Entonces déjame entrar en los dos proyectos D. Activos, aquí está la interfaz de usuario que quería que usáramos. Así que voy a arrastrarlo y soltarlo aquí, mantener pulsada la tecla Mayús y arrastrar. Entonces los elementos que queremos son este y este mensaje UI, y vamos a crear ese titular de noticias también. Ahora que tenemos esto aquí, permítame simplemente arrastrar y poner esto de lado aquí para que podamos observarlo como lo dibujamos aquí. 9. Diseñar una tarjeta de perfil de usuario: Todo bien. Así que ahora, mantenga pulsada la Alt y haga clic en el rectángulo. Aumentemos las alturas. Y el ancho. Entonces digamos ¿750 por 550? Digamos por 600. Sí, así. Y recuerda, está justo en el medio. Está en el centro de la mesa de trabajo. Y ahí es donde lo queremos. Bien ahora esto está interfiriendo. Así que déjame seleccionarlo. Entonces aguanta aquí afuera. Sí, así. Acercar. Ahora, queremos seleccionar esto e ir al radio de esquina. Pliega el radio de la esquina hasta ese punto, cambia el color Y como pueden ver, tenemos un fondo morado. Así que haz clic en esta forma de Fondo. El fondo es una forma como todas estas otras formas, haz doble clic en eso, y puedes arrastrarlo y colocarlo en la parte posterior o simplemente usar los atajos normales de adobe illustrator. Control Shift soporte izquierdo para enviarlo a la parte posterior. Otro atajo es V para la herramienta de selección o A para la selección directa, que se llama Editar forma dos. Entonces, todos los atajos que estás acostumbrado a trabajar aquí. Entonces está en la parte de atrás. Ahora, mientras aún esté seleccionado, vayamos al color de relleno y cambiémoslo a ese color purpúreo A mí me gusta el morado. También es azulado. O simplemente podemos usar la herramienta Cuentagotas para muestrear esto en lugar de perder demasiado tiempo. Ahí vamos. Entonces acercando el zoom, voy a seleccionar esto y también usar la herramienta Cuentagotas para ahorrar tiempo y Ahora, vamos a crear este texto de perfil de usuario. Entonces solo voy a seleccionar la herramienta de texto y dar click ahí Perfil de usuario. Perfil de usuario. Seleccione la herramienta de selección. Mantenga pulsada la Mayús, haga clic en esta y cambie su tamaño. Ahora podemos entrar aquí, y me gusta alinearlo así con el Gizmo A lo mejor ese punto. También podemos hacerlo audaz. Lo quiero negro. Eso es más grueso que audaz. Y el nuestro es un poco más grande. Entonces podemos seguir redimensionándolo de esta manera o simplemente usar el tamaño de fuente en lugar de la escala, pero no importa para lo que queramos. A continuación, queremos crear este menú. Así que voy a mantener pulsada la tecla Alt y hacer clic en la elipse también y voy a hacer clic en el duplicador para crear una duplicación de Voy a ir al duplicador seleccionado automáticamente y cambiar a lineal y aumentar el tamaño para espaciarlo así Entonces podemos reducir el tamaño de esta cosa. Así como así. Y podemos cambiar esto a vertical. Si hacemos clic a un lado, de hecho, esto no está bloqueado. Entonces déjame cerrarlo, el fondo. Ahora, necesitamos espaciar esto. Déjame acercarme. Comparado con este otro, necesitamos espaciarlo. Entonces, mientras aún esté seleccionado , aumente el tamaño. Sí, me gusta. Pero los círculos siguen siendo más grandes. Así que también podemos seleccionar la elipse misma y reducir la escala manteniendo pulsada para reducir el tamaño de cada forma individual Vamos a la duplicadora. Coloca eso ahí. Ahora, tenemos que hacer algo de organización muy rápido aquí. ¿Qué es esto? Esta es la tarjeta. Entrar, fondo de tarjeta o tarjeta BG. El texto es perfil de usuario. Texto, la elipse. Bueno, esa es la forma de elipse del menú punteado, solo para que podamos saber qué es Es la forma original que dibujamos que ahora hemos duplicado con la duplicadora Por lo que este duplicador puede renombrarse a duplicador de menú punteado Para que podamos saber de qué se trata de un duplicador. Y siempre podemos simplemente padre esto al duplicador porque esto es lo que se duplica por el duplicador Por lo que puede ser un hijo de la duplicadora. ¿Qué más? Creo que por ahora, ya es suficiente. También podemos agruparlos todos en un grupo de perfiles de usuario, pero lo vamos a hacer más adelante. Entonces vamos a crear este Adam Sally. Mantener presionado mientras esta se selecciona, estos textos o cualquier forma, manteniendo pulsada y tirando de ella se duplica Entonces voy a hacer doble clic en eso y Adam salvaje. Ahí vamos. Voy a aumentar el tamaño. Sí. 10. Diseñar una tarjeta de perfil de usuario: Ahora, para el Avata, puedes volver a nuestro sitio web aquí mismo Para SVG Repo, busca Avatar. O si tienes una imagen de perfil de usuario, usa tu imagen. Así que usa Avatar. Como pueden ver, con el que fui en mi ejemplo es este. Entonces sólo voy a seleccionar esto. No hace falta editar el vector, así que descárgalo y puedo arrastrarlo y soltarlo ahí. Entonces puedo arrastrarlo y soltarlo ahí como una capa de activos. Y mientras esté seleccionada, mantenga presionada la tecla Mayús A para reducir el tamaño. Déjame ver, es una buena comparación. Todo bien. Ahora, vamos a crear las estrellas, la reseña de cinco estrellas. Entonces voy a mantener presionada la tecla Alt y hacer clic en arrastrar eso y colocarla ahí. Mantenga pulsada la tecla Alt Shift, así como así. Puede arrastrarlo y colocarlo ahí mismo. Todo bien. Antes de hacer eso, primero que nada, duplicarlo. Los duplicadores funcionan mejor cuando comienzas en el origen mundial 0.00 Entonces esto es lo que deberíamos haber hecho, duplicarlo así. Después cambiar a lineal aumentar esto a cinco. Y aumentemos el tamaño para espaciarlos, espaciarlos por completo. Entonces vamos a reducir el tamaño del duplicador en sí. Sólo lo estamos viendo. No estamos tratando de ser perfectos o exactamente así. Solo estamos aprendiendo los conceptos. Usando el ratón ahí mismo. Podemos espaciarlos más, así que aumenta el tamaño. Y podemos mover el punto de pivote a este fin. Si quisiéramos animar las estrellas desde este lado, moveríamos así el punto de pivote al principio Y entonces si hacemos alguna animación, sería en relación con ese punto de pivote, incluso cualquier tipo de animación. Entonces ahora, con eso, creo que tenemos una buena calificación de estrellas. Podemos ir y cambiar el color. Entonces ese es el Avatar. Esta es una forma de estrella. Así Inicio, calificación de cinco estrellas. Forma. Y este es el cinco estrellas el duplicador de calificación Para que podamos colocar esto debajo de eso. No hay importancia en hacer eso. Solo lo estamos organizando para que pueda colapsar eso porque esto es lo que realmente nos interesa ahora mismo. Pero si quieres hacer cambios granulares muy específicos a la estrella misma, nosotros podemos hacerlo. Por ejemplo, podemos ir al relleno y cambiar el color a ese morado. Casi lo clavé en la primera oportunidad, así que solo selecciono este color De hecho, solo volvamos y llenemos de color. No, teníamos el esto. Solo usemos el gotero de gota. Copia eso. Vayamos en escape. ¿Por qué esto no va a desaparecer? Todo bien. Ahora, entremos aquí y habilitemos eso. Vamos a acercarnos. Si vamos al estilo conjunto y decimos redondo, aumentemos así el tamaño del borde. Después pega el color el color morado ahí para hacerlo más redondeado. Entonces ahora lo que tenemos que hacer es reducir aún más el tamaño de la duplicadora, manteniendo presionada así como así A mí me gusta. Ahora, aguantando, puedo arrastrar eso. Por supuesto, podemos reducir el tamaño de esto y cambiarlo a camarillas dobles regulares y mi correo electrónico en email.com Con esta seleccionada, voy a arrastrar Alt y arrastrar otra vez a Alt. Doble clic Ingresa el número de teléfono más 25407001, dos, tres, cuatro, cinco, seis Haga doble clic en ese Mombasa Road, Nairobi. Carretera Mombasa Ahora todo lo que tenemos que hacer es ir a buscar íconos de este lugar, SBG Repo, correo electrónico o correo A mí me gusta esto, pero queremos cambiar el color a este morado. Entonces voy a seleccionar esto. No, selecciona esta forma en sí, ve aquí, selecciona este código de color, entra aquí, edita, pega ahí el color, luego exporta el SVG. Arrastre el SVG y colóquelo aquí. Aquí está. Vamos a soltarlo ahí como una capa de activos. Selecciónelo. Mantenga pulsada, Todo turno. Ahí vamos. Entonces hagamos lo mismo para el teléfono y la ubicación. Teléfono inteligente. Exportar SVG. Vamos a dejarlo caer aquí. Capa de activos, selecciónela. Por alguna razón. Oh, espera. Se me cayó en el lugar equivocado. Perdón por eso. Debería haberlo caído fuera del correo electrónico. Pero está cayendo dentro del correo electrónico, así que lo arrastraré afuera así. Bien, ahora ¿De qué tamaño es este correo electrónico? 0.047. Entonces 0.047 y 0.047 Sí, estamos acercándonos. Ubicación. Ve a soltarlo justo debajo de ahí. Hay una capa de activos. Sí, no está dentro de esos íconos. Al turno, 0.470 0.047. 0.047. Entonces, como puedes ver, diseñar cualquier interfaz de usuario en Caballería es muy fácil con estas herramientas similares a Adobe Illustrator Es muy fácil si ya has estado usando herramientas de diseño gráfico. Vamos a derribar estos. Todo bien. Así que ya casi estamos ahí. Dibujemos los botones, aumentemos el ancho. I Antes de moverlo, primero terminemos el texto y todo. Entonces aumenta el radio de esquina a 30. Mantenga presionada la tecla y luego haga clic para agregar texto. Vamos a alinearlo verticalmente al centro y alinearlo en el centro horizontalmente. Dale este color. Ahora, vamos a darle blanco. Reduzca el tamaño. Haga doble clic. Seguir. Creo que el tamaño de la fuente sigue siendo grande. Sí, digamos, 24, selección dos. Mientras aún esté seleccionado, mantenga presionada la tecla Mayús para seleccionar ambos y colocarlos allí. Mientras aún estén seleccionados, mantén presionados. Bien, ¿por qué no funciona? ¿Es porque no son un grupo? Estoy tratando de duplicarlos. Entonces de todos modos, selecciona el rectángulo. Al arrastre. Seleccione el texto. Al arrastre. ¿Por qué estoy seleccionando esto? Déjame solo cerrarlo. Ahora, veamos. Sí, así. Al arrastre. Haga doble clic en eso. Mensaje. Yo seleccionaré esto. Vamos a sentir. Deja caer los ojos un dos y selecciona eso. Selecciona el segundo, ve al color, hazlo más claro. Podemos darle un gradiente, pero quiero que las cosas sean simples por ahora. Seleccionemos el texto, vayamos al color y lo hagamos más oscuro. No negro sino oscuro. Y ahí vamos. Creo que tenemos una linda tarjeta. Quiero seleccionar estos dos, mantener presionada la tecla shift para seleccionar ambos y luego empujarlos hacia abajo. Y creo que tenemos una buena interfaz de usuario. Antes de seguir adelante, quiero seleccionarlos y Control G para agruparlos. Y ahora, como pueden ver, deberíamos haber terminado de crearlos en el medio, pero no hay problema, podemos mover los puntos de pivote. Entonces, ¿dónde está el punto de pivote en el eje Y. Y luego ahora vamos a mover el punto de pivote en sí porque lo que estamos animando es el punto de pivote Selecciona esto y este Control G. Vamos a mover también el punto de pivote. Y volvamos a moverlo hacia abajo. Ahora, seleccionando todos ellos incluyendo este fondo de tarjeta. Control G. Ahora podemos mover esta carta como un todo y podemos animarla como una carta Pero si animamos lo que sea que esté dentro del grupo, en realidad, este es un grupo Déjame entrar y cambiarle el nombre a la tarjeta de Perfil de Usuario. Ahora bien, lo que sea que esté dentro la tarjeta de perfil de usuario es todo lo que teníamos. Entonces ahora teníamos a este grupo llamado la tarjeta de mensaje, Enter. Botón de mensaje y este segundo grupo aquí, Enter. Botón Seguir. Ahora también podemos animar los botones dentro del grupo. Entonces siempre es bueno tener ese punto de pivote ahí mismo. Ahora bien, el punto de pivote de estos otros realmente no importa porque vamos a animar los botones y la tarjeta Esto ya es un duplicador, así que vamos a animarlo como un Entonces creo que este es un buen lugar para terminar esta lección. Esto fue aprender a diseñar algo más complejo que un botón. En la siguiente lección, vas a diseñar la tarjeta de mensajes porque, recuerden, dijimos que tenemos varias cosas que diseñar. Esto es lo siguiente que vamos a diseñar. De hecho, este es un ejercicio para ti. Siga los mismos principios que hemos seguido para diseñar esto para diseñar esto. Te veré en breve. 11. Diseño de tarjeta de mensajes: Ahora es el momento de diseñar la tarjeta de mensaje o la tarjeta de chat, esta tarjeta de aquí mismo. Ahora, ya creamos esto y tiene su Gizmo justo en el medio Entonces, ¿por qué no simplemente duplicarlo? Entonces voy a colapsarla, tarjeta de perfil de usuario, luego Control D, y va a crear un duplicado llamado tarjeta de perfil de usuario con todo en ella. Pero no necesitamos de todo porque como pueden ver, la referencia aquí no tiene ningún botón. Entonces, ¿por qué no eliminar? En primer lugar, permítame seleccionar la tarjeta uno. Voy a ocultar la tarjeta original, luego seleccionar esta y entrar. Entonces llámelo la tarjeta de mensajes. Expandirlo, colapsar todos estos. Queremos deshacernos de ellos. De hecho, vamos a usar estos dos porque podemos usar esto como una de las burbujas de chat y esta otra. Seleccionando este enter chat bubble uno, y este otro ingresa. Sombrero burbuja dos. Podemos eliminar todos estos otros detalles. Veamos cómo se ve. Podríamos usar vamos a eliminar todos estos iconos. Quita el Avatar, o tiene el avatar. Entonces seleccionamos el Avatar y lo movemos a la parte superior. Mantenga presionado el turno para moverse en línea recta. Mantenga presionado el turno para cambiar su tamaño. Perfil de usuario. Si bien aún está seleccionado, mantenga presionado y arrastre. Haga doble clic en él. Control A, selecciona todo. En línea, creo que dice en línea. Esto es audaz. Queremos que sea regular y reducir el tamaño. Y vamos a empujarlo hacia abajo. Al mantener presionado Control para moverse en pequeños incrementos, empújelo hacia abajo. A ver. Quita esa esa calificación de cinco estrellas. La tarjeta BG está bien. De hecho, tenemos que etiquetar esto. Entrar. Nombre de usuario. Y aquí se supone que debe leer Adam savaging como el nombre de usuario Entonces este aquí es el texto en línea en línea. También debe ser el texto del nombre de usuario. Texto en línea. Ya leí en línea. Ahora vamos al Avatar. Entonces tenemos el menú punteado. Eso está bien. Chat burbuja uno. Puede jalarlo aquí arriba. Ahora fíjese si lo ampliamos. Oh, ese es el sombrero burbuja dos. Si lo expandimos, si vamos a la forma rectangular en el radio de la esquina, podemos cambiar de todos a individuales y aquí cambiarlos a 20. 20 y 20. Eso crea una especie de forma de burbuja de habla. Entonces seleccionándolo de nuevo, y podemos aumentar la altura, podemos seleccionar el texto y proporcionar el texto que queramos. Déjame ver si puedo agarrar algún texto aquí. Entonces copia eso, pegarlo ahí. Ahora, viene como un solo texto, así que solo voy a borrar eso y en su lugar, voy a seleccionar una herramienta de texto, clic aquí y arrastrar para crear un cuadro de texto en el que ahora pueda pegar todo mi texto. ¿Dónde está? ¿Por qué fue ahí arriba? Así que volvamos a entrar aquí otra vez. Texto. Pegar. Sí, se supone que debe estar pegado aquí Entonces sólo voy a quitar algún texto. Solo queremos algunos Vamos a alinearlo a la izquierda y cambiar el color del campo a blanco. Empujarlo manualmente con las teclas de flecha, y ahí vamos, tenemos una burbuja de discurso. Ahora, en lugar de perder el tiempo con este otro de aquí, eliminémoslo y luego seleccionemos este control Oh, espera. Este texto que acabamos de agregar debería estar dentro esa burbuja de chat dos para formar ese grupo. Ahora bien, si controlamos D hat bubble dos, va a formar una nueva burbuja así. Vamos a expandirlo. La forma. Aquí dentro, se supone que son cinco y este 20. Entonces el color de fondo, podemos probar esto, vamos a probar esto. Así que hazlo. Justo ahí. Seleccione el texto, cambie el color a un gris oscuro, no negro, gris oscuro. Esa es una burbuja de discurso agradable. Bien, puedes cambiar el texto para que diga otra cosa o simplemente dejarlo como está Déjame cambiar eso. Ahora puedo seleccionar la burbuja del habla dos otra vez, el turno D, y luego tirarla hacia abajo y luego la burbuja del habla tres. Controle D y tire de él hacia abajo. Control S. Ahora podríamos agregar déjame seleccionar este, Control D, y tirarlo hacia abajo hasta el fondo. Y vamos a eliminar expandirlo, borrar el texto. Seleccione el rectángulo. Queremos crear el área de mecanografía, este cuadro de texto. Seleccionando el rectángulo, vaya a este también 20. Vamos al color de relleno y hazlo más oscuro. A lo mejor darle una frontera pero muy débil también. No, es demasiado oscuro. Entonces, antes que nada, un poco más ligero. Bien, mi proyecto está colgado. Bien, ahora, mi proyecto está colgado. Déjame reiniciarlo, y volveré en breve. 12. Diseño de tarjeta de mensajes: Y, bienvenido de nuevo. Ahora, tuve que reiniciar Caballería después de que se congeló, así que permítanme darle solo a Control O para volver a abrir nuestra escena Y nombramos a esta escena tarjeta de perfil de usuario. Pero ya hemos visto que ya estamos creando incluso la tarjeta de mensajes aquí dentro. Así que vamos a cambiar este nombre a la animación de la interfaz de usuario de la aplicación porque va a contener todas las tarjetas. No vamos a crear cada carta como una escena individual, pero es posible. Así que déjame hacer clic en eso. Déjame expandir sombrero burbuja cinco, y queremos duplicar ese fondo. Entonces voy a seleccionarlo Control D. voy a cambiar el color del trazo. A un tono muy tenue pero ligeramente más oscuro. Aún ligero. Así que quiero volver aquí. Eso me gusta. Entonces seleccionándolo, empujémoslo hacia abajo con las teclas de flecha. Y cambiemos de esta forma de burbuja de discurso a todos los radios de esquina siendo 30 para que sea todo redondo, así como así Ahora, una cosa que quiero que hagamos en este punto, si arrastro esto hacia un lado es seleccionar el rectángulo de la tarjeta, la tarjeta BG, y queremos aplicarle una sombra paralela. ¿Cómo aplicamos una sombra paralela? Una sombra paralela es un efecto, y los filtros son lo que llamamos efectos en Caballería Si quieres aplicar una sombra paralela, desenfoque, todos esos tipos de efectos, usas filtro. Entonces voy a hacer clic en PAS en la tarjeta BG. Además en los filtros, entonces voy a ir a sombra. Como pueden ver ahora tenemos una sombra paralela, y la sombra paralela se agrega ahí mismo, así que voy a seleccionarla. Todo lo que añadas en Caballería es como un nodo. Por eso está apareciendo aquí de manera individual. En after effects, cuando aplicas un efecto, ni siquiera aparece como una capa porque no es un nodo, pero aquí, es un nodo. Entonces la sombra paralela, podemos jugar con opacidad. Puede hacerlo menos visible. Podemos difundirlo. Simplemente mantengamos presionada la Alt y o no mantengamos presionada la Alt, veamos a dónde va. Cantidad de desenfoque, puede desenfocarla. Sí, me gusta. Desenfocarlo. Vamos a reducir el Alfa. A lo mejor en la X, podamos mover el lado positivo. Ahí vamos. Ahora bien, lo bueno de que los efectos y filtros y deformadores sean nodos individuales es que puedes reutilizarlos. Podemos usar esta misma sombra paralela para el fondo de la tarjeta de perfil de usuario. Puedo simplemente sacar esto y colocarlo fuera de todos ellos. Ahora tenemos la tarjeta de mensajes y la tarjeta de perfil de usuario. Déjame seleccionar la tarjeta de mensaje y empujarla a un lado así. Después, oculta la tarjeta de perfil de usuario que golpeamos. Tenía su propio fondo, tarjeta BG. Para que podamos venir aquí a esta sombra paralela y arrastrarla a la tarjeta BG. Filtros. Sí, exactamente así. O déjeme simplemente deshacer eso. Con la propia tarjeta BG seleccionada, podemos volver a la sombra paralela. Y porque la sombra paralela, como ya viste, es un filtro. Y si quisiéramos agregar una sombra paralela a esta tarjeta BG, seleccionaríamos e iríamos a los filtros. Simplemente podemos ir a este filtro que ya se agregó y arrastrarlo a este campo de filtros de esta tarjeta. Así como así, y ya está mostrando ahora el efecto de la sombra paralela. Entonces eso es todo. Creo que estamos listos para pasar al siguiente paso, que es diseñar el titular de noticias antes de comenzar la animación. Entonces te veré en breve. 13. Diseño de tarjeta de mensajes: Una cosa que acabo de recordar es en vez de que esto sea una burbuja de texto, pueden ser esos botones de carga que muestran que alguien está escribiendo. Entonces, ¿por qué no entrar aquí tarjeta de mensaje? Y eso es chat burbuja cinco. Y de hecho, todavía tenemos algo de esta área de texto aquí. Colóquelo en la tarjeta de mensajes y fuera la burbuja de chat para que la burbuja de chat sea solo eso. Pero ahora queremos eliminar este texto. Y queremos duplicar este menú punteado y colocarlo aquí. Entonces tarjeta de mensaje, menú punteado, Control D para duplicarlo. Va a llamar a esto Enter, efecto de mecanografía de texto punteado. Duplicador de efectos Enter. Entonces ahora podemos arrastrarlo hacia abajo. Y porque es un duplicador, recuerden, tiene esta distribución la cual podemos cambiar de dirección podemos cambiar a horizontal Ahora está detrás de esta burbuja del habla. Así que vamos a colocarlo por encima de esa burbuja del habla. Justo arriba a la derecha debajo de forma rectangular. Exactamente delante de esto. Ahora esta es la burbuja de discurso cinco. Entonces, si selecciono el rectángulo, vamos a reducir el ancho y alto. Y vamos a empujarlo hacia un lado. Mantenido el turno para moverlo limitarlo en línea recta Va a seleccionar un duplicador punteado. Creo que deberíamos hacer estos círculos una escala de forma un poco más grande, manteniendo presionada, pero también aumentando el tamaño aquí para espaciarlos. Creo que la escala de forma es demasiado grande. Entonces tal vez 1.8. No, eso es demasiado grande. Y esto también es demasiado grande. Entonces 800 tal vez. Y esto tal vez 1.5 h seleccionándolo de nuevo. Creo que esa es una buena talla. Ahora, claro, vamos a animarlo, pero por ahora, todavía quiero reducir la intensidad de este color oscuro Entonces ahora, permítanme simplemente expandir el efecto de mecanografía punteada y seleccionar la elipse misma e ir al color del campo Queremos reducir la opacidad del color del campo, reducir el Alfa Tal vez fuera a ese lugar. Vamos a animarlo. No te preocupes. Pero por ahora, creo que ese es un buen lugar para terminar con esto. En la siguiente lección, vamos a crear el titular de noticias antes de pasar a la animación. Entonces te veré en breve. 14. Diseño de titulares de noticias: Ahora es el momento de diseñar el titular de noticias. Ahora, ya hemos terminado con esta captura de pantalla, así que solo voy a eliminar eso, seleccionar estos dos, y voy a mantener pulsada Mayús para reducir el tamaño. Y ahí los voy a colocar. No hay problema. Realmente no importa. Entonces ahora, colapsar eso. Entonces tenemos dos tarjetas. Tenemos una sombra paralela que están compartiendo, y tenemos un fondo. Queremos esconder a estos dos. Control S para guardar eso. Ahora queremos crear un titular de noticias aquí mismo, siguiendo los mismos principios de asegurarnos de que el Gizmo esté justo en el medio Así que solo voy a escoger la herramienta de texto y arrastrar para crear un cuadro de texto Y tengo un titular de muestra aquí, cinco mejores habilidades tecnológicas en demanda en este momento. Cambiemos a la herramienta de selección. Voy a aumentar el tamaño. Cambiemos a una fuente diferente. El líder uno. Negritas. elegir la fuente que quieras. Redujamos el espaciado entre líneas. Creo que ya terminamos. Siempre podemos cambiar la fuente. Déjame ver qué pasa con el hacha monstruo. Pero quiero negro. Muy grueso. Sí, algo así. Si hago doble clic en él, podemos arrastrar esto para aumentar el ancho. Creo que ahora me gusta esa forma. Así que vuelve a la selección dos. Si bien todavía está seleccionado, voy a arrastrar y hacer doble clic ahí, Control A, y voy a escribir un subtema o subtitular más pequeño Copia eso. Bien, es demasiado grande, así que vamos a reducir ese tamaño Yo sólo quiero una frase. Algo así. Al mantener presionado el turno, puedo arrastrarlo en línea recta hacia abajo. Y mientras todavía está seleccionado, puedo volver a arrastrar para duplicarlo y hacer doble clic ahí, Control A, fecha, tal vez una columna, herramienta de selección. Y el cuadro de texto es demasiado grande, así que aléjese. De hecho, esto es lo que debería Lo que quiero hacer es eliminar eso y simplemente seleccionar esto y dar clic para hacer un libro de texto de una sola línea en lugar de un libro de texto de párrafo Entonces ahora cambiemos esto a la fecha y una columna. El post del blog fue escrito drag Double click that. ¿En qué fecha? 29 de mayo de 2026 Y para ello, vamos a usar regular. Para este, también vamos a usar regular. Ahora, dejémoslo como audaz. Arrastraré la fecha. Escrito por Alt drag, manteniendo pulsada la tecla shift para moverse en línea recta. Bien, no pude hacer eso. Digamos, Michelle Lin o algo así. No quiero que esto sea negro, así que vamos a hacerlo atrevido. Negritas. Seleccionándolo todo ahora mismo. Podemos agruparlo entrar, y llamarlo Titular de noticias. También podemos mover su punto de pivote si no nos gusta dónde está, tal vez lo queremos ahí. Ahora, una cosa más que podemos agregar son esos aspectos destacados, cinco mejores habilidades tecnológicas. Sí, digamos esa. Y si bien todavía está seleccionado, voy a arrastrar alta demanda, seleccionar este lado y tirar. Entonces queremos el resaltador. Si bien todavía están seleccionados, voy a entrar en opacidad y reducir la opacidad a tal vez 70 Y ahora, estos son los efectos de strike throughs o highlighter que vamos a animar encima del texto Así que vamos a reducir eso. Digamos que estás usando un marcador que no cubre todo el texto. Pero vamos a animar este texto, animar estos reflejos De hecho, cambiemos eso a un resaltador verde. O cualquier color que quieras usar. Esto es por ahora. Creo que este es un buen lugar para terminar con esto. Quería que creáramos el titular de noticias y no olvides agregar estas formas al grupo de titulares de noticias para que cuando muevas el grupo, estés moviendo todo. Cuando estás animando al grupo, estás animando todo. Controles. 15. Cursor de ratón: Antes de pasar a la animación, necesitaremos un cursor del mouse. Y como este es un proyecto nuevo, no tenemos el cursor del mouse que creamos antes. Ahora podemos importar ese cursor del mouse como un pre comp o un activo precompuesto y comenzar a usarlo, pero no tenemos tiempo para empezar a hablar de precomps Entonces vamos a tener que volver a crear un cursor de ratón, pero esto depende de ti. Este es tu ejercicio. Crea un cursor de ratón siguiendo los pasos que seguimos anteriormente en las lecciones de botón y crea un bonito cursor de ratón que podamos usar en nuestra animación. Te veré en la siguiente lección. 16. Anima el cursor: Así que ahora, como pueden ver, ya he creado mi propio cursor del ratón, y es el momento de iniciar la animación. Entonces, déjame esconder el titular de la noticia. Y como pueden ver, esto es lo que tenemos. Quiero hacerlo más pequeño. Entonces la seleccionaré y mantendré presionada Voy a cambiar porque queremos que todo quede en esta pantalla y luego animar todo Entonces quiero empujarla ahí abajo a esa esquina. Y quiero dar a conocer a estos otros dos. Podemos colocar esto aquí. De hecho, vamos a empujarlos hacia arriba y hacia un lado. Vamos a seleccionarlos todos, excepto el cursor del ratón y simplemente reducir el tamaño así porque quieres Queremos que cada uno de ellos tenga suficiente espacio para caber en la pantalla así sin que el otro se muestre. Entonces queremos esto en algún lugar de aquí y esto en algún lugar de aquí. En breve vamos a limpiar el arreglo. Solo queríamos tener un lugar rudo donde el ratón pueda moverse de un lugar a otro animado. Ahora bien, esto debería ser así opuesto. Y así ahora queremos pensar en el viaje del cursor del ratón. ¿Cómo va a viajar y durante cuánto tiempo en cada punto dado? Entonces ese es nuestro trabajo ahora. Por supuesto, el primer paso es crear la ruta por la que va a pasar el ratón de principio a fin, y luego vamos a cronometrar cada parte en la que interactúa con un elemento Entonces, digamos, déjame elegir el remordido. Queremos que el cursor del mouse venga aquí y luego pase el cursor sobre la clasificación de estrellas y haga clic en él. Va a comenzar como un perfil de usuario no clasificado con solo las estrellas teniendo un contorno. Y luego al hacer clic, van a tener un color de campo Entonces el ratón va a bajar aquí al botón de mensaje y darle click. Entonces ve aquí. Vamos a ver estos tres botones animados, luego pasar a este lugar. Entonces el camino que queremos es algo similar a esto. No tiene que ser así. Tal vez hasta ese punto, y luego dudas un poco, luego haces clic en la calificación de cinco estrellas, luego pasa al botón de mensaje, pero queremos que sea un movimiento curvo. Entonces sólo podemos continuar con esta curva. El cursor del ratón puede moverse a ese punto. Entonces después de quedarnos ahí por un momento, podemos navegar hasta este punto. Después escapa. Entonces ese es el camino que va a tomar el cursor del ratón. Bien, sigamos adelante y renombremos el cursor del mouse, la forma, enter, el cursor del mouse y la ruta De hecho, sí, vamos a llamarlo Path y seleccionar el cursor del ratón también y Control G. Ahora los tenemos como grupo, y quiero presionar Enter y llamarlos cursor. Entonces si nos expandimos, tenemos el cursor del ratón y la ruta todo en un solo grupo. Ahora, vamos a crear también añadir un Pathfinder. Recuerda, necesitamos un pathfinder. Aquí adentro, y el pathfinder nos está preguntando, ¿Dónde está el camino que quieres usar Entonces aquí está el camino. Entonces arrastramos este camino hacia aquí. Ahora sabe acerca de esta ruta, y el atributo de posición del cursor del ratón necesita ser conducido por el buscatrazos Así que ahora vamos a arrastrar el pathfinder a la posición del cursor del ratón Ahora, debido a que estamos en el principio aquí, podemos establecer un marco clave en el viaje de los buscadores de caminos Y vamos a jugar esto para ver a dónde queremos que llegue el cursor del ratón a este punto, tal vez en ese lugar. Entonces para ese momento, el cursor del ratón debería haber viajado a ese lugar. Y como puede ver, se ha creado automáticamente un fotograma clave ha creado automáticamente Ahora, al mismo tiempo, queremos editar esta ruta para que el cursor del mouse no esté demasiado alto. El cursor del ratón está demasiado alto por encima de la clasificación de estrellas. Así podemos ir a la selección directa a y editar la ruta. Así podemos seleccionar ese punto, mantener pulsada la tecla shift, seleccionar este punto, o simplemente seleccionar ese punto y colocarlo ahí abajo. Queremos que apunte ahí. Pero al mismo tiempo, también quiero seleccionar este cursor y reducir el tamaño. Es demasiado grande. Esto se verifica para asegurarse de que ambos estén limitados a trabajar juntos. Y si vuelvo a la herramienta de selección directa, seleccione este punto. Justo ahí. Entonces estos son solo unos pequeños ajustes que te preguntarías cómo hacer. Sólo estoy tratando de mostrarte cómo hacer eso. Ahora, en ese punto, no queremos el cursor del mouse ahí mismo. Quiero sacarlo un poco. Si vamos al pathfinder, como pueden ver, estamos en el fotograma clave verde Eso significa que estamos en el fotograma clave y podemos editar cuál es el valor del fotograma clave Podemos volver aquí. Lo queremos ahí. Entonces por un momento, queremos quedarnos aquí. A lo mejor hasta ese punto, vamos. Para que pueda copiar esto y pegarlo ahí. Eso significa que este valor se copia a este lugar, y así permanecerá ahí antes de que haga otra cosa. Entonces ahora pasemos a este lugar tal vez y continuemos con esto tal vez hasta ese punto. Entonces esto es asumiendo que estás haciendo clic en la calificación de cinco estrellas. Entonces viene así, retrasa, luego se mueve y hace clic en la calificación de cinco estrellas. Ahora queremos copiar este último fotograma clave porque queremos que permanezca ahí un momento y lo pegue ahí Entonces estos dos valores son los mismos aquí. Por lo que se retrasará ahí después de hacer clic en él. Retrasar ahí por un momento. Y luego a partir de aquí, podemos empezar a bajar. Entonces veamos cuánto tiempo quiero que dure bajando de ahí hasta ese punto. Entonces para cuando llegue a 160, debería estar en el punto 36 digamos 55 45. Sí, ahí mismo. vendrá así. Retraso ahí. Verifique la clasificación por estrellas, luego baje al botón de mensaje antes. Bien ahora vamos a retrasar ahí un momento porque queremos retrasar a medida que hacemos clic en él. Entonces llegará ahí, luego se retrasará. Ahí es donde haremos clic en él, luego comenzaremos a movernos. Entonces vamos a darle click a tal vez 200. Entonces solo estamos diciendo que este valor este valor es el mismo que este valor. Entonces, entre este punto y este punto, el cursor del mouse no debería cambiar su posición. Pero después de aquí, podemos empezar a movernos. Lo movemos ahora a este punto. Entonces necesitamos aumentar el tiempo aquí. Así que vayamos a los ajustes de composición. Hagámoslo mil. 1,000. Agárrate para alejar el zoom. Y ahora, como pueden ver, tenemos más espacio. Puedo seleccionarlos todos, moverme hasta el final y aguantar para acercar. Por allá para ver ese punto culminante al final y ahora jalar hacia el final. Justo ahí. Entonces ahora decimos que una vez que llega ahí, hacemos clic, luego comienza a moverse. Entonces vayamos al pathfinder y continuemos con eso. A lo mejor ese spot. Vamos a copiar ese valor, y vamos a permitir que se demore ahí por un segundo. Después pega antes de pasar finalmente al texto al titular de la noticia. Entonces agreguemos un fotograma clave para el titular de noticias. Justo ahí. Guarde eso. Entonces, si mantengo pulsado y alejo el zoom con la rueda del mouse, vuelve al principio. Aleje aquí. Haga clic en ese mensaje de Mouse, muévase allí, vea los tres botones. Exactamente. Digamos, hasta 450. Entonces Control K para sacar a colación los ajustes de composición 450 o tal vez incluso 400. Exactamente. Escapar. Ahí vamos. Toma eso. Bien ahora, vamos a jugar sin. Ocultemos el camino. ¿Dónde está el camino? Vamos a ocultarlo. Juguemos eso. Exactamente. A mí me encanta. Vamos a 360, Control K. Todavía me queda demasiado tiempo ahí. 360. Sí, Escape. Bien, Control S. Ahora lo que nos queda es que lo seleccionemos. Pasemos al editor de gráficos. Y queremos ir al pathfinder. Recuerden, esto es lo que estábamos animando el viaje. Queremos venir aquí, mantener presionado el turno para reducir la altura, seleccionarlos todos, mantener presionados, hacer clic en uno de ellos y acerquemos eso. Mantenga pulsada la tecla Mayús y vamos a crear un buen conjunto de curvas S por todas partes. Entonces eso significa que el cursor del mouse se moverá en mejores animaciones. Vamos a ver qué pasa aquí. Vamos. Sí. Exactamente. Entonces se toca lentamente luego rápido luego lentamente. Todo bien. Tenemos bastantes cosas que animar. Tampoco hemos animado la calificación de cinco estrellas. Cuando se hace clic, debería comportarse de alguna manera. Cuando el cursor del mouse pasa sobre este botón morado, necesita mostrar algunos efectos de desplazamiento. Necesita reaccionar. Y luego cuando llegue hasta aquí, también necesita pasar el mouse Todos esos efectos, necesitamos tener esas reacciones. Pero antes de hacer eso, primero que nada, animemos la cámara Te veré en la siguiente lección. 17. Animar la cámara: Ahora es el momento de animar la cámara. Entonces veamos cómo hacer eso. En primer lugar, quiero colapsar el pathfinder aquí y colapsar el cursor. ¿Qué más tenemos? Déjame solo arrastrar la sombra desplegable ahí abajo para que tengamos todas las formas arriba aquí y estos otros ayudantes allá abajo Entonces ahora mismo estamos animando la cámara. Entonces quiero decir más cámara. Y ahora tenemos una cámara. Y para que la cámara funcione, necesitamos convertir todo aquí a 2.5 D. Así que marquemos todas estas casillas. No, sí, incluyendo el fondo porque también queremos que el fondo se mueva junto con todo a medida que movemos la cámara. Ahora, aquí está la cámara. Eso es lo que hemos seleccionado, y podemos mover las cosas. Entonces, por ejemplo, no queremos mirar. Quiero forma libre este es el tipo que quiero. En lecciones futuras o en futuros cursos, te mostraré cómo usar estos otros tipos, pero por ahora, vamos a usar espuma gratis. Eso solo nos permite movernos y navegar muy fácilmente así. Y te darás cuenta cuando esta sea ahora la cámara en movimiento. Supongamos que estamos sosteniendo la cámara y moviéndonos en el mundo. El mundo no se mueve. Nos estamos moviendo. Esta es la cámara viendo lo que ve y estamos animando lo que miran las cámaras Entonces no queremos este color blanco. Entonces lo que tenemos que hacer es ir a un segundo plano y aumentar su tamaño. Entonces escalarlo. Voy a comprobar eso y simplemente subir la talla. Eso está bien. Ahora, nos quiero porque esto es 2.5 D, vamos a ir a la cámara. Esto es 2.5 D. Podemos acercar el eje Z así y moverlo así. Acercar así y así. Quizá hasta ese lugar. Ahora, estamos en el principio, así que podemos establecer un fotograma clave aquí mismo Entonces con la cámara seleccionada, y por supuesto, queremos asegurarnos de que todos estos tres, si mantengo presionado, hemos establecido un fotograma clave para el X, Y y Z. Entonces el eje X, el Y y el eje Z saben que empezamos aquí en este punto Por eso tenemos los fotogramas clave. Ahora vamos a avanzar un poco. Ahora como pueden ver, ha entrado el ratón . Ahora está justo ahí. Esto nos da la oportunidad de copiar estos fotogramas clave, copiar y pegar para que cuando los movemos para hacer clic en la calificación de cinco estrellas, podamos acercar el zoom Entonces, antes que nada, en este punto, está justo ahí. De hecho, vamos a moverlo un poco hacia adelante, ahí mismo. Entonces quiero arrastrar estos fotogramas clave ahí mismo. De hecho, vamos a retroceder un poco. Ahora, tenemos que movernos para acercar en ese punto. Entonces en el eje Z, así que vamos a movernos en el eje Z. Eje X y eje Y. Eje X un poco. Mantenga presionado el control para moverse en incrementos más pequeños. Y ahora queremos quedarnos aquí un momento. Voy a seleccionar esta copia, luego avanzar un poco, hasta ese momento en que le demos clic. Ahora estamos asumiendo que este es el momento estamos haciendo clic en eso, pega eso. Por todo el tiempo, clave los valores aquí serán los mismos hasta ese punto, así que no vamos a movernos por la cámara. Juguemos eso y veamos. Entonces ya que de aquí para acá, estamos moviendo el ratón para ir y hacer clic en eso. Tenemos que retrasar la cámara aquí mismo hasta ese punto. Así que permítanme hacer clic en esa copia y pegarla ahí. Eso significa que vamos a demorar ahí ese momento antes de que empecemos a mudarnos. Entonces ahora vamos a mudarnos. Entonces en el eje Z y en el eje Y, el eje Z nuevamente. Eje Y. Creo que es un buen lugar. Di eso, Control. También voy a copiar el eje X y pegarlo ahí porque también va a ser animado a medida vayamos hacia el futuro en la parte restante de la línea de tiempo. Entonces queremos que también sepa que se supone que debe mantener su posición y valor de eje hasta que se cambie. Entonces ahora, vamos a demorar aquí un momento, también. Hasta que el cursor del ratón se mueva porque en algún momento aquí, se va a hacer clic en el botón Entonces digamos que se va a hacer clic en ese punto. Entonces para ese momento, debió haber mantenido esa misma posición. Pegemos estas mismas posiciones aquí mismo. Y cuando se hace clic, ahora nos movemos al otro lugar a la otra carta Entonces, de hecho, vamos a arrastrar estos más lejos. Control S para guardar. Volvamos a jugar esto desde el principio. Mm hmm. Retrasar allí, haga clic y luego muévase. Entonces ahora empezamos a mudarnos aquí. Empezamos a movernos de aquí, y para cuando lleguemos a este punto, veamos qué tenemos. cuando lleguemos a ese punto, tenemos eso y vamos también a acercar ligeramente la Z. Exactamente, así. Después de demorar aquí por un momento, se hace clic en el botón Después pasamos a seguir hacia dónde va el cursor del ratón. Llegamos antes que eso. Entonces vamos a demorar aquí un momento, copiar el hasta que sea el momento de movernos. Así que vamos a pegarlo ahí mismo antes de empezar a bajar al título. Entonces Control S, y luego juguemos eso. Se hizo clic en el mensaje. Vamos aquí para ver el efecto de mecanografía del mensaje. Entonces a partir de aquí, salgamos a ver qué tenemos. Moviendo la Z Y vamos a acercarnos. X. Creo que ese es un buen lugar. Entonces ahora tenemos eso. Nos retrasamos aquí un momento, luego pasamos al titular de noticias, y ahí es donde nos relajamos. ¿O vamos a movernos lentamente? ¿Y si nos movemos más rápido? Sí, más rápido es mejor. Bien, vamos a moverlo ahí atrás. Bien, así que ahora vamos a jugarlo desde el principio. Toca eso. Haga clic en el mensaje de Strating Adam savaging. Los podemos ver contestando. Entonces lee eso. Ahí es donde vamos a animar ese efecto de resaltador Hagamos una cosa más importante. Como puedes ver, la animación se ve muy aburrida y lineal. Queremos darle esa sensación de animación hinchable y elástica. Así que esa flexibilización hinchable. Entonces, como de costumbre, seleccionemos todos estos turnos de mantener presionada para reducir la altura ahí. Seleccione todos ellos. Aguanta y haz clic en una de ellas para cambiarlas a curvas más bezier. Mantenga presionado el turno. Y vamos a crear algunas curvas bonitas como esa. Formas S. Bien, ahora, volviendo al cronómetro y vamos a jugarlo desde el principio y C. Si. Exactamente. Se ve muy profesional. Me encanta. Ahora imagina cuando añadimos algo de música y algunos efectos de sonido. Va a ser épico. En la siguiente lección, veamos cómo animar ahora estos otros elementos Te veré en breve. 18. Anima la tarjeta de perfil del usuario: Ahora es el momento de animar las reacciones del cursor del ratón haciendo clic o flotando Entonces vamos a comenzar con la tarjeta de perfil de usuario, que es esta. Y lo primero que vemos aquí es que el cursor del ratón viene aquí y se acerca a la clasificación de estrellas. Entonces animemos la calificación de estrellas. Está en la tarjeta de perfil de usuario. Duplicador de cinco estrellas. Ahora bien, lo que queremos hacer es duplicar este duplicador de calificación de cinco estrellas porque queremos uno que no tenga relleno y otro que tenga un relleno Déjame mostrarte. Entonces con esta seleccionada, y recuerda, ponemos las cinco estrellas la estrella misma, la forma de estrella dentro del duplicador, solo para que podamos moverlas como una sola cosa Entonces lo que queremos hacer es seleccionar el duplicador de calificación cinco estrellas y Control D. Ahora tenemos dos de ellos. Voy a ingresar esto y decir, llenar y seleccionar esto, ingresar y decir trazo. Este va a ser el que tenga el trazo. Voy a ampliar eso e ir al campo aquí y deshabilitar ese relleno. Yo sólo tengo un derrame cerebral. Todo lo que tenemos que hacer ahora es movernos en la línea de tiempo. Antes de que el cursor del ratón llegue a la clasificación por estrellas. Entonces aquí mismo, seleccionemos el que tenga una sensación, vayamos al principio y seleccionemos ese asa. Y básicamente lo que estamos diciendo es desde este momento, todo el camino hasta este momento, solo muestra este golpe de calificación de cinco estrellas. Pero cuando lleguemos a este punto, introduce el que tiene la sensación. Así que en realidad no hemos animado nada. Acabamos de trasladar a uno de ellos más al futuro. Así que eso produce el efecto de que cuando pasamos el cursor sobre él, cambia de color Quiero mantener pulsada la tecla Alt, acercar aquí con una rueda del ratón, seleccionar esta. Ahí es donde debería comenzar. Muy bien, vamos a agarrar esto así. Muy bien, así que mantén presionada la tecla Alt y el mouse will para alejar el zoom. Así que vamos a jugar a eso y a ver. Así. A mí me encanta. Ahora, lo siguiente que vamos a hacer aquí es llegar a este punto. Cuando el lanzamiento del mouse llegue a este botón morado, el color debería cambiar. Entonces este es el botón de seguir dentro del perfil de usuario. Aquí está. Entonces expanda ese botón de seguimiento. Para la forma rectangular. Sabemos que es en este punto que queremos cambiar el color. Entonces rectángulo. Color de relleno. Vamos a mantener presionada y hacer clic en eso. Entonces en ese punto, estamos diciendo que el color de este rectángulo debería ser ese color en este momento. Pero ahora, retrocedamos ligeramente. De hecho, lo queremos yo lo quiero ahí mismo. Ahí es donde queremos que sea de este color. Pero cuando pasa al siguiente fotograma en el propio botón, tiene que ser de un color diferente. Y antes de hacer eso, primero que nada, manejemos después de que el cursor del mouse salga del botón. Entonces sigue en el botón, aún en el botón, fuera del botón. Entonces en ese punto, también debería ser este color, el color normal, pegar. Pero ahora, entre aquí, debería ser de un color diferente. Entonces, de qué color. Vamos a darle un morado más oscuro. Automáticamente, se han introducido algunos marcos clave. Entonces en este punto, púrpura, púrpura claro, oscuro, luego claro otra vez. Así que vamos a jugar a eso y a ver. Por lo que produce ese efecto hover. A mí me encanta. Queremos hacer lo mismo para el botón de mensaje. Entonces justo antes de ese punto, déjame colapsar y eso y expandir el botón de mensaje, el rectángulo aquí. Entonces en este punto, estamos diciendo que queremos que el color de este rectángulo sea ese color. Y cuando lleguemos a este punto donde el cursor del ratón está apuntando al botón, vamos a establecer otro fotograma clave Entonces, manteniendo presionado, vamos a establecer otro fotograma clave, pero vamos a hacerlo más oscuro solo un poco Así. Y, por supuesto, después de eso, cuando el cursor del mouse deja el botón, necesita volver al color. Entonces vamos a copiar eso. Y vamos a avanzar un poco. Se va a retrasar ahí. Digamos, en ese punto, en ese punto, pegar. Entonces tenemos ese efecto hover, sobre efecto. Y cuando esté por ahí, ahora también vamos a darle esa animación de posición. Contraer ese rectángulo, seleccionar el botón de mensaje como un todo, y vamos a animar la posición en ese punto Entonces volviendo aquí, hacemos clic en él en ese punto. Entonces ahí mismo, vamos a expandir eso. Copia eso, pegarlo. Ahora, en el medio, empújalo hacia abajo. Así que así. Entonces empezamos a movernos. Así que vamos. Jugar. Exactamente. Aquí mismo, queremos animar los puntos, y eso es lo que vamos a hacer en la siguiente lección Te veré en breve. 19. Anima la tarjeta de mensajes: Ahora es el momento de ver cómo animar Déjame simplemente traer la pantalla Déjame darle a F para llenarlo. Entonces queremos ver cómo animar estos tres puntos aquí mismo Entonces esta es la tarjeta de mensajes. Voy a expandirlo. Y creo que estos tres puntos se agruparon junto con esto. Olvidé separarlos porque lo estaba buscando y lo encontré aquí. Y sin embargo esta forma rectangular seis es esta texteria. Así que voy a sacar esto y ponerlo dentro de sombrero burbuja cinco porque esto es sombrero burbuja cinco, que en realidad debería llamar efecto de mecanografía punteada porque eso no es una burbuja de discurso. Entonces ahora si lo expandimos, vamos a encontrar el duplicador que buscábamos Este duplicador tiene tres puntos. Entonces lo que queremos hacer es animar estos tres puntos, y el atributo específico que queremos animar es la opacidad para que en este segundo, el primer punto sea más claro que el segundo y el tercero sea segundo y el tercero Al segundo siguiente, el siguiente punto es más ligero o más tenue y en adelante a lo largo de la línea de tiempo Entonces queremos alternar la opacidad. Entonces, ¿ cómo hacemos eso? Una buena manera de alternar valores o datos dentro de Caballería es usar el Un oscilador es un deformador, y vamos a ver cómo usarlo Pero si queremos aplicar un deformador a cada elemento en un duplicador o en un grupo que se haya duplicado así, necesitamos acceder a ellos a través del deformador submsh Entonces con el duplicador seleccionado, voy a ir a los deformadores y voy a seleccionar el deformador submsh Entonces ahora voy a seleccionar la sub malla, y esto es lo que tenemos. La submalla es un deformador que simplemente selecciona cada elemento en una duplicadora y hace lo que le has dicho al duplicador Entonces, si tenemos un grupo de puntos, lo que sucede es que la submalla escoge el primer elemento en la duplicadora y hace lo que le has dicho que haga Después va de nuevo, recoge el segundo elemento en la duplicadora y aplica lo que le has dicho para aplicar Después va al tercer ítem en la duplicadora y aplica lo que le dijiste que aplicara Entonces con el submsh seleccionado, vamos a entrar en el color del campo Y ¿qué le estamos diciendo a los submers que hagan con cada artículo? Este es el campo Alfa. Alfa es todo acerca de la opacidad. esto queremos decir, agreguemos un oscilador Entonces aquí mismo, voy a decir oscilador. Y ahora voy a seleccionar la sub malla y arrastrar el oscilador al canal Alfa Ahora, voy a entrar en el oscilador. Y si jugamos esto, vas a ver que algo está pasando, pero se está moviendo demasiado rápido. ¿Los puedes ver? Entonces lo que queremos hacer es aumentar, en primer lugar, el valor máximo y el valor mínimo también. No queremos que esté demasiado oscuro. Ahora como oscila, lo más bajo que puede llegar es 21 en términos de opacidad, 21% Como puedes ver ahora, está oscilando 21-48. Si puedo dar esto tal vez 70 u 80, va a ser más oscuro en el lado superior. Así. Ahora bien, lo bueno de los deformadores es que no es necesario enmarcarlos con llave Simplemente suceden automáticamente, como puedes ver, no hemos agregado ningún fotograma clave, sino que está animando Pero el problema es que si jugamos esto, está pasando demasiado rápido. Está parpadeando y parece ser que todos los puntos parecen estar parpadeando al mismo tiempo Entonces lo que queremos hacer es agregar un escalonamiento aquí. Ahora si jugamos eso, pero se están moviendo rápido. Entonces vayamos a la frecuencia y digamos 0.1. Vamos a probar eso. Toca eso. Bien, es demasiado lento. 0.3. 0.4. Sí, así. Incluso podemos decir 0.5. Ahí vamos. Eso era lo único que se suponía que íbamos a animar en la tarjeta de mensajes Lo siguiente que vamos a hacer en la siguiente lección es animar estos efectos de resaltadores Entonces te veré en breve. 20. Anima el título de las noticias: Ahora, en esta lección, queremos ver cómo animar este efecto de resaltador Entonces este es el titular de la noticia. Voy a ampliar eso. Y estas fueron las dos últimas formas que dibujamos. Entonces voy a presionar Enter y renombrarlo a Highlighter per Enter, alto más ligero, más bajo para que pueda distinguir entre los dos Ahora, lo que queremos hacer es seleccionar este resaltador, primero superior, y quiero agregarle un deformador align Y lo que eso hace es, antes de agregarlo, si digo resaltador superior y voy a la escala de tallas, podemos animar estos campos Podemos animar la escala. Pero el problema es que siempre va a crecer desde el centro, pero queremos que crezca de este lado hacia la derecha, la misma manera que resaltarías una frase. Entonces, ¿cómo haces eso? Queremos alinear esto. Queremos usar algo llamado un deformador align para decir crecer de este lado o comportarse como sea que se comporte desde este lado Entonces con este resaltador seleccionado, voy a entrar en los deformadores alinear. Aquí se va a agregar el align. Entonces como siempre, solo puedo agregar este resaltador a la alineación Y o puedo agregar esta alineación al resaltador. Ahora bien esta alinea aquí, puedo usarla para empujar las cosas a la izquierda o a la derecha. Ahora bien, si lo presiono así y selecciono el propio resaltador, escalarlo hacia arriba o hacia abajo en la X significa que ahora estamos escalando desde este lado Lo que puedo hacer ahora es posicionarlo aquí mismo en las X cinco habilidades tecnológicas a partir de ahí, aumentar la escala hasta el final. Entonces quiero ver desde dónde voy a tocarlo. Entonces voy a tocar eso. Entonces se va a animar y cuando llegue a este punto, va a retrasar un segundo, luego empezar a dibujar desde aquí Entonces quiero colocar un fotograma clave aquí mismo en el resaltador Entonces escala, en primer lugar, establece un marco clave. Y para la escala, quiero de hecho, déjame usar mi tecla de flecha hacia abajo hasta que desaparezca. Entonces en este punto, la escala en la X es cero. Ahora bien, si juego, para ese punto, quería haber dibujado todo el resaltador Así que vamos a dibujarlo. Entonces de aquí para aquí, va a dibujar eso. A ver, jugar. Exactamente. Entonces a partir de aquí, tenemos que hacerle lo mismo a este segundo resaltador Voy a seleccionar el inferior, ir a deformadores alinear. ¿Dónde está la alineación? Voy a ponerlo debajo del resaltador que está alineando para que pueda simplemente colapsar eso y expandirlo Pero ahora seleccionemos el align y empujemos esto hasta el final. Ahora selecciona el propio resaltador. Entonces tenemos que posicionarlo aquí. Y ahora solo podemos fotogramas clave de la escala. Entonces fotograma clave la escala. Cero en ese punto. Y luego en ese punto, uno. Exactamente. Entonces lo que tenemos que hacer es ampliar esto también. Seleccione la tecla Control, selecciónela, cambie al editor de gráficos, cambie, desplácese hacia abajo, seleccione aquellos hacia fuera. Mantenga presionado el turno. Vamos a tirar de eso. Mantenga presionado el turno para reducir la altura, acercar el zoom. Y ahora volvamos aquí a jugar y ver qué pasa. Es un rap, amigo mío. Ahora lo único que queda son los efectos de sonido. Queremos algo de música de fondo y sonidos de click y todo eso. Hagámoslo en la siguiente lección. 21. Añade efectos de sonido: Ahora es el momento de agregar algo de sonido a nuestro proyecto. Así que quiero volver a nuestro sitio web favorito de Resources, y se llama Pixel Bay. Además de los efectos de sonido, también cuentan con música gratis. Entonces voy a elegir la música. Y puedes elegir el tipo de sonido que quieras. Entonces digamos tecnología ambiental. Ahora, adelante y elige una banda sonora aquí y descárgala. Ahora, una cosa que me gusta hacer es mirar esto. Me gusta descargar solo activos que tengan este escudo de ID de contenido, y hay una buena razón para ello. Si abro esto en una nueva pestaña, se registra el ID de contenido. Y si digo descargar esto gratis, voy a poder descargar un certificado de licencia. Entonces tengo el ritmo. Entonces tengo el instrumental y la licencia. Si abro la licencia, aquí está. Esta es la licencia que te van a pedir que proporciones dentro de YouTube. En caso de que publiques tu video y haya un aviso de identificación de contenido, se te va a pedir que demuestres que tienes permiso para usar ese sonido. Y entonces esto es lo que vas a proporcionar. Hay un lugar al que vas a pegar. Es muy sencillo, muy fácil, unos minutos de tiempo. Hay muchos, muchos otros instrumentales aquí sin tal sin tal licencia, y son completamente gratuitos para que los uses El problema es que a veces podrías usar esto y es posible que no te marquen por nada Pero en algún momento en el futuro, podría despertarse una mañana y darse cuenta de que hay un aviso de infracción de ID de contenido basado en este instrumental, y no hay licencia en ningún lugar para descargar. Entonces hay que tirar hacia abajo ese video o encontrar manera de eliminar esa sección donde se está reproduciendo la canción. Así que evita usar instrumentales sin ID de contenido. Volvamos a los efectos de sonido. Y quiero buscar ya descargamos un clic Sonido. También queremos descargar un ssh, algunos sonidos ssh Como Bien, mi volumen está bajando, así que déjame tocar esto. Sí. Así que busca sonidos que se reproduzcan a medida las cosas se mueven a través del video. Esas son las cosas que hacen que suene increíble. Volveré para mostrarte lo que he podido descargar. Nos vemos en breve. Como pueden ver, he podido descargar algunos efectos de sonido y un fondo instrumental. Así que sólo voy a arrastrarlos a esta carpeta. Y ahora van a ser importados como grupo. Si lo expando, todos mis sonidos están en un solo grupo. Entonces comencemos con el sonido principal. Oh, espera. Eso es en un lugar diferente. Déjame hacer doble clic en eso. Déjame colapsar eso y hacer doble clic en esto. Entonces esta es la canción que quiero usar como pista de fondo. Voy a arrastrarlo ahí. Y lo voy a arrastrar por debajo del fondo fuera del fondo, pero abajo. Quiero que el boom empiece aquí mismo. No, aquí mismo. Sí, así. Ahora necesitamos un clic del ratón aquí mismo. De hecho, necesitamos un clic del mouse aquí mismo cuando estamos dando un clic de calificación de cinco estrellas. Así que vamos a colocarlo ahí mismo. Después Control D para duplicarlo. Muévelo adelante. Ahí mismo, también necesitamos ahí mismo. Entonces vamos a jugar a eso. Todo bien. Agreguemos un swoosh Sí, así. Echa un vistazo a esto. Podemos tener uno más lento aquí. Fue ese otro soh. Tómate tu tiempo para que sea perfecto. Sí, vamos a ver eso. Vamos a regular el volumen. No te preocupes. Sí. Bien ahora como vamos a la deriva de aquí para aquí, necesitamos otro Vamos a duplicar esto y colocarlo aquí mismo. Entonces ahora mismo, no estamos tratando de ser perfectos. Control D una vez más para finalizar aquí. Ahí vamos. Entonces, finalmente, los reflejos son sonoros. ¿Dónde está? ¿Es al principio? Sí. Control D. Muy bien. Ahora, aquí mismo, voy a tener que aumentar volumen de mi altavoz para regular el sonido por un momento. Así que sólo dame un momento. Quiero equilibrar el sonido. Entonces esta traducción es demasiado ruidosa. Negativo 16. Digamos diez negativos. Por lo que también debería ser negativo 20. Oh, debería ser negativo diez, negativo 20, negativo diez, negativo 20, negativo 20, probablemente negativo 20, y estos negativos 15 cada uno. Bien, empecemos por la plática. Digamos negativo 20 también. Ver nah, sigo pensando negativo 20, negativo 30. Aún demasiado ruidoso. Sí. Entonces toqué con el volumen de cada sonido, y creo que me gusta lo que tenemos ahora mismo. No es perfecto, pero es mucho mejor. Entonces, tómate tu tiempo y juega con el ajuste de volumen aquí mismo. Trabajar en los negativos, mayor parte del tiempo porque cualquier cosa positiva, cualquier cosa cercana a uno y arriba es demasiado ruidoso. Como pueden ver, la mayoría de los míos aquí son negativos 20, negativos 16, negativos diez, negativos 20, en las decenas negativas. Entonces Control S. voy a decir eso, y ya terminamos con el sonido. Ahora que terminamos con todo el diseño y animación, es el momento de exportar nuestro video. ¿Cómo lo hacemos? Vamos a averiguarlo en la siguiente lección. Nos vemos en breve. 22. Exportación: El proyecto está casi hecho, pero necesitamos exportarlo para compartirlo con la gente. ¿Cómo lo hacemos? Entonces lo primero que tenemos que hacer es asegurarnos nuestro espacio de color esté configurado al menos para mí, lo que funciona es el espacio de trabajo de color Rec seven oh nueve. Ahora bien, si habilitas esto y cambias esto a algún otro valor aquí, es posible que no obtengas los resultados que esperas. En primer lugar, solo por el hecho de que hemos habilitado la gestión del color, todos nuestros colores han cambiado aquí. Esto era de color púrpura. Ahora es azul. Así que no he jugado mucho con el manejo del color en Caballería Solo llevo menos de un mes jugando con el software. Y entonces esto es algo de lo que estoy aquí para saber más. Entonces lo que encontré funciona para mí es desactivar eso. Establece este No, ve aquí y establece esto en Rec siete oh nueve, desactiva eso. Después vaya a gerente de render. Así que vamos a seleccionar la composición actual, y veremos todos los ajustes predeterminados. Aquí no cambio muchas cosas, tal vez el nombre de la animación de la interfaz de usuario de composición. Y la carpeta de renderizado automático es la carpeta de renders creada automáticamente que se creó cuando creamos la animación UI, renders. Recuerden eso. ¿Hay algo más aquí? Ahora, por supuesto, antes de renderizar, siempre puedes ir a los ajustes de composición y cambiar el rango de fotogramas, pero eso también cambiará dónde funcionan tus fotogramas clave porque tu ruta y todo lo que creaste se basa en este tamaño de la línea de tiempo. Si expandes la línea de tiempo, eso significa que todos estos fotogramas clave ahora no están exactamente donde estaban. Están un poco apagados. Entonces de todos modos, sigamos adelante y exportemos o renderizemos. Creo que estamos bien. Así que sólo voy a darle a Enter. Vamos a Formato. En este momento, el formato es P cuatro. Eso es lo que voy a exportar. Vamos a golpear Render. Esta es en realidad la carpeta de destino. Podemos abrirla. Ahora que ya está hecho, abramos la carpeta de destino, y ahí está nuestro video. Juguémoslo y aquí lo que tenemos. Permítanme simplemente aumentar el volumen. Oh, se está reproduciendo en mi segunda pantalla. Déjame traerlo aquí. Todo bien. Bien. Estoy muy emocionada de jugar. Vamos. Vamos. Empecemos un juego, hombre. A mí me encanta. Entonces ahí vamos. Creo que este es un buen lugar para terminar esta lección. Tengo algunas reflexiones finales más y próximos pasos que recomendaría tomar. Entonces nos vemos en la siguiente y última lección. No vayas a ningún lado. 23. Próximos pasos: Y eso es un envoltorio en tu primera animación de Caballería. Pasaste de una composición en blanco a una escena de interfaz de usuario completamente animada con un cursor que se mueve como un ratón real, botones que reaccionan a los clics, efectos de desplazamiento, un goteo de cámara cinematográfica entre diferentes tarjetas y elementos de la interfaz de usuario, un indicador de escritura y un titular de noticias con efectos de iluminador animados Y así sólo quiero decir felicitaciones por llegar hasta aquí. Ahora tienes las habilidades para crear tus propias animaciones en el futuro. Si creas una aplicación o software o sitio web con código de vibra o diseñado por vibra, ahora puedes promocionarlo con bonitos videos animados, cortesía de Cavalry Próximamente llegarán más clases. Planeo profundizar en las animaciones impulsadas por datos, gráficos en movimiento para YouTube y, finalmente, la animación completa del producto. Si quieres que te avisen cuando deje caer una nueva clase en Caballería, asegúrate de seguirme aquí mismo en Skillshare Si disfrutas de esta clase, avísame lo que pensabas al respecto. ¿Qué disfrutó de ello? Y ojalá que tal vez qué quieres que cubra en la próxima clase. Puede que no lo sepas, pero tu reseña es la mejor manera de hacerme saber cómo me estoy desempeñando como maestra de caballería, y también ayuda a otros alumnos saber si esta clase puede ayudarlos Así que deja una reseña y hazme saber lo que pensabas. Mi nombre es Ken, y solo quiero darte las gracias por seguir conmigo desde la primera lección hasta la última. Ahora, sal y anima algo increíble. Te veré en la siguiente clase. Paz.