Introducción a motion graphics: Videos explicativos de storyboard a la animación

1. Introducción: Hola, soy Hung Chu, y soy diseñadora de movimiento en Canadá. Llevo más de cinco años animando profesionalmente en Adobe After Effects. He trabajado en dos agencias de publicidad diferentes para clientes como Adidas, PayPal, Walmart, y muchos más. hoy te voy a enseñar a animar videos explicativos en After Effects desde storyboard hasta animación final. Los videos de Explainer están en alta demanda ahora, es una parte esencial de los gráficos en movimiento. Una vez que sepas animar videos explicadores, te convertirá en un animador más comercializable hacia tus competidores y podrás emprender proyectos divertidos por tu cuenta. En este curso, te mostraré todo lo que necesitas saber para empezar con este breve y sencillo video explicador. Te mostraré el completo flujo de trabajo profesional desde el principio que viene con este guión gráfico, cómo configurar tus ilustraciones para la animación, identificar las principales escenas animadas y transiciones, agregando acento y animación secundaria, paso a paso trabajando a través del guión gráfico. Aplicando principios de animación como overshoot y anticipation, usando editor de gráficos para dar vida a tus fotogramas clave y toneladas de atajos de teclado consejos y trucos que uso todo el tiempo para un flujo de trabajo más eficiente. Para el proyecto de clase, estarás aplicando las habilidades y técnicas aprendidas aquí para crear tu propio video explicador de 15 segundos. Haz algo de lo que te sientas realmente orgulloso, y las cosas que aprendemos en este curso se traducirán fácilmente en cualquier tipo de proyectos gráficos en movimiento y te pone en marcha con la animación After Effects. Más allá de solo crear tu video explicador final, también desarrollarás una mayor visión la narración visual y ampliarás tus vocabularios de animación. Entrena tus ojos para convertirte en animadores ojos y te proporcionará una nueva forma de mirar la animación y los storyboards en el futuro. Espero que te diviertas mucho aprendiendo una animación. Te veré en clase. 2. Proyectos: Bienvenidos a la clase. Antes de empezar, quiero hablar de los proyectos de clase. Para el proyecto, estarás animando tu propio video explicativo de 15 segundos basado en el guión y guión gráfico proporcionado. Te llevaré a través de todo el proceso, desde cómo personalizar o idear tu propio guión gráfico hasta la animación final. En primer lugar, quiero que leas la descripción del proyecto que he enumerado en la sección de detalles, y ahí encontrarás los pasos que debes dar para completar el proyecto. Familiarízate con lo que estamos haciendo, y te llevaré al viaje de crear un video explicador. Al estar tomando el curso y trabajando en el proyecto, animo a compartir conmigo el trabajo en curso en el panel del proyecto para que pueda brindarles algunos comentarios y guiarlos a través del proceso. Un video explicador de 15 segundos no es un proyecto fácil, sobre todo si es tu primera vez que lo haces. Habrá luchas, y habrá dolor. Confía en mí. Tu cerebro podría incluso doler un poco. No bromees. Pero igual que aprender cualquier cosa, es parte del proceso, y estoy aquí para ayudarte a sacar el máximo provecho de este curso y contestar cualquier pregunta que puedas tener y despejar los bloqueos en el camino. Una vez que me sigas y completes este proyecto, obtendrás una idea de cuál es el proceso completo para crear un video explicador. Este proceso y flujo de trabajo es aplicable a cualquier obra gráfica de movimiento. Te ayudará a adelantarte al juego y te dará la confianza para poder asumir cualquier trabajo futuro del cliente. No sólo eso, al final, tendrás un video explicador completo para poner en tu carrete demo que podrás compartir entre amigos. Eso fue todo proyectos de clase. Te veré en primera clase. 3. El storyboard: Bienvenidos a la primera lección. En esta lección, quiero hablar del guión gráfico. Habrá dos escenarios cuando se trate de storyboard. Una es que si te proporcionan el guión gráfico tu cliente o un director de arte, todo lo que necesitas hacer es animarlo. Dos es si solo se te proporciona un guión y necesitas diseñar tu propio guión gráfico. Estaré cubriendo ambos escenarios en este curso y proporcionaré un proceso áspero de cómo se me ocurre un guión gráfico. Habrá algunos recursos útiles donde podrás encontrar algunas ilustraciones gratuitas o paletas de colores. Ahora sin más preámbulos, ven a echar un vistazo. Para nuestro SmartCity.io, aquí hay un guión gráfico que recibí de un director de arte, que soy yo mismo. Me di este guión gráfico. Como pueden ver aquí, tengo aquí el logo de la empresa y luego 15 segundos explicador video storyboard, qué es. Aquí tengo siete storyboards, al final, hay un lockup de logo de la empresa. Aquí debajo de cada guión gráfico, hay algunas notas aquí. primero es el V0 resaltado aquí, que es el guión del video inicialmente. Por lo que todo el video de 15 segundos se va a leer así. No importa dónde te encuentres en el mundo, qué ciudad vives, se puede acceder a la información en cualquier lugar. Por eso construimos SmartCity.io, mantente conectado dondequiera que estés. Ese es nuestro punto caliente. Entonces, entre cada guión gráfico, también tengo una ilustración de transición. Me dice más o menos cómo la primera transición a la siguiente y luego la siguiente transición a la siguiente. Normalmente, si no eres bueno en la ilustración o el guión gráfico, no eres un artista de storyboard. Si solo eres un diseñador de movimiento que eres bueno en la animación, normalmente recibirás una baraja de storyboard como esta del director de arte o de un Illustrator, y tendrán todo el storyboard de ilustraciones hecho por ti. Junto con esta baraja PDF, también recibiré un archivo de trabajo de Illustrator. Abramos este. Esencialmente, este es el archivo de trabajo del guión gráfico en el que el ilustrador hizo todas las ilustraciones en. Tiene todos los elementos separados del guión gráfico, y luego puedo usar este para preparar mis archivos y luego usarlo para animación. El ilustrador también incluido es paleta de colores aquí también. Estos dos documentos aquí son típicamente lo que recibo de, digamos, director de arte o ilustrador. Pero, ¿qué pasa si no los recibes de otra persona? Al igual que lo que pasa si estás freelance y luego tu cliente quiere un video explicador de 15 segundos, y tú vas a ser el que está haciendo el storyboard. ¿ Cómo puedes hacer eso? Bueno, déjame mostrarte el proceso de llegar a un storyboard. Si bien para ser honesto, no me considero artista de storyboard o Illustrator, pero a veces cuando tengo cliente freelance, todavía tengo que hacerlo yo mismo. Te puedo mostrar más o menos mi proceso, cómo trato con esos. Si, por ejemplo, el cliente acude a ti, solo recibirías un guión con probablemente un logotipo de su empresa. Déjame abrir esta plantilla de storyboard aquí. Esta es una plantilla que uso. Por ejemplo, tenemos un video de 15 segundos que necesitamos para llegar a un guión gráfico y luego cliente ya me envió el guión. El guión lee lo mismo que lo que hemos visto antes. No importa dónde te encuentres en el mundo, qué ciudad vives, se puede acceder a la información en cualquier lugar. Por eso construimos SmartCity.io. Mantente conectado dondequiera que estés. Ese es el guión que recibimos. Ya lo he puesto aquí en mi plantilla de storyboard. Entonces como pueden ver, tengo una pauta de mi guión gráfico durante 15 segundos. En primer lugar, necesito una obra de arte aquí, que es la obra principal, la apertura, y luego necesito una transición como segunda, y luego necesito una segunda escena, básicamente, un tercer guión gráfico. Entonces necesito otra transición. Necesito otra escena, y luego al final sería logo revelado transición, y el bloqueo del logo. Esta es una pauta para mí para llegar a un storyboard que necesito presentar su información para básicamente contar historias sus guiones. El siguiente paso, lo que haría es, iría a dos vías. Si lo estás haciendo de forma gratuita como tu proyecto personal, te recomendaría que vayas a freepik.com. Este es un recurso gráfico gratuito, y luego si solo lo usas con fines educativos, todo lo que necesitas es solo anotar la obra de arte o el gráfico, lo que sea que lo uses viene de este sitio web y no necesitas pagarlo. Pero eso es sólo con fines educativos, no se puede usar un gratuito para cualquier trabajo de cliente. Esa es una. Entonces otro te recomendaría si estás trabajando en el trabajo del cliente, te recomendaría Shutterstock. Puedes pagar como alrededor de $30 al mes por 10 imágenes. Mira, hasta tengo esto aquí. Diez imágenes gratis. Tengo cuenta yo mismo así que solo puedo descargar imágenes para trabajo del cliente y luego pagar como $30 al mes y puedes descargar cualquier ilustración vectorial y luego tal vez personalizarla para tus propias necesidades para que no tengas que hacer nada desde rasguño. A menos que seas muy bueno en la ilustración, eres un ilustrador bastante bueno, por todos los medios, en ese caso, puedes hacer lo que quieras. Por ahora, sólo nos vamos a quedar con Freepik porque creo que la mayoría de nosotros lo estamos usando con fines educativos. En primer lugar, necesito un gráfico para, no importa dónde estés en el mundo. Aquí la palabra clave es, Mundo. Déjame buscar Mundo. Mundo. Tengo un mapa mundial. Estos gráficos con un icono de corona aquí, esos requieren clases premium con el fin de descargar. Si estás usando una cuenta gratuita, no puedes descargar esas imágenes, pero todo lo demás, solo puedes descargarla de forma gratuita. Bastante. Simplemente encontraría algo que me guste que pueda usar como mi primer guión gráfico. Incluso este globo aquí. Simplemente puedes deshacerte de este tipo y luego usar ese globo. Por ejemplo, si quiero usar ese como mi primer guión gráfico, solo puedo venir aquí y hacer clic en “Descargar”, y luego puedes descargar gratis, pero luego debes atribuir al autor. Copia este enlace. Si quieres ponerlo en tu portafolio, puedes hacerlo, pero entonces tienes que atribuir al autor. Ahora que descargo ese ícono de globo pequeñito, puedo buscar mi tercer storyboard, la escena principal. Si bien antes de empezar a buscar referencia de imagen o inspiraciones, sería genial si puedes dibujar algo hacia abajo para que tengas una imagen específica en la cabeza que quieras crear. Algún tipo de escena que quieres crear antes de entrar en Illustrator. Pero con esta plantilla, eres capaz de tener una pauta bastante clara de qué tipo de gráfico necesitas, ya sea como transición o en escena principal para ayudarte con el guión gráfico. Vuelve a lo que tenemos ahora. puede ver que es similar a mi plantilla. Tenemos una transición de escena principal, otra escena, otra escena, y esta es transición y otra escena. Después transición del logotipo, revisión del logotipo, y luego bloqueo del logotipo. Ese es el flujo general del video. Pero este curso, quiero mostrarles cómo hacer video explicador. No estoy aquí para enseñarte a hacer storyboards, así que solo quiero mostrarte la idea general de cómo llegar a un storyboard tú mismo. Simplemente pasaría por la palabra clave de estos guiones y luego pensaría en la escena que quieres tener y luego los colocaría aquí. Una vez que lo tengo, algo así. Tengo toda la obra de arte colocada en mi plantilla, luego iré a otro sitio web Coolors. Este sitio web, en realidad se puede seleccionar una paleta de colores. Intenta, toca “Explora”. Está cargando. Esas son las paletas de colores de tendencia. Puedes seleccionar cualquier paleta de colores de tendencia que te guste y luego personalizar tus gráficos a cualquier color que quieras transmitir el mensaje o transmitir el estado de ánimo y la sensación que te gusta. Diga si me gusta este de aquí, para que simplemente lo capturara en pantalla, y luego volvería a mi archivo de Illustrator. Ponga aquí esta captura de pantalla, y luego quizá cree unos bloques. Algo así. Si me gusta este color, entraría en cada uno nuestros tableros y cambiaría el color de estos elementos alrededor de esta paleta de colores. Pero ahora mismo, tengo esta paleta de colores con la que trabajar, así que no quiero cambiar una ahora mismo. Lo que puedes hacer es seguir el mismo proceso. Puedes usar esta plantilla, rellenarla con el tipo de gráficos que quieras y luego buscar una paleta de colores que se adapte a tu guión gráfico. Cambia todos los colores o puedes personalizar los gráficos también para llegar a un guión gráfico similar a lo que tengo aquí. Ahora recapitulemos. En este video, primero hablamos del storyboard, y luego hablamos de cómo llegar a tu storyboard personal y la plantilla de storyboard donde te puede guiar a través del proceso. También tenemos algunos recursos como Freepik, Shutterstock, o Coolors, donde también van a ser de ayuda con el proceso. Eso es básicamente todo lo que cubrimos. Para comenzar tu proyecto, necesitarás tener un guión gráfico. Ahora aquí está mi reto para ti. Tengo dos opciones. En primer lugar, puedes tomar mi guión gráfico y personalizarlo con la paleta de colores diferente o algunos elementos de diseño diferentes, haz lo que quieras. Segunda opción, puedes usar la forma en que enseñamos aquí en este video y llegar a un storyboard completamente nuevo. Asegúrate de publicar tu guión gráfico o cualquier progreso que tengas en el panel del proyecto y compártelo conmigo para inspirar a compañeros estudiantes. No puedo esperar a ver qué se te ocurre. Siguiente video, te voy a mostrar cómo preparar tus archivos de Illustrator y prepararlo para la animación after effects. 4. Preparar archivo de Illustrator: En este video, déjame mostrarte cómo preparar tu archivo de Illustrator con múltiples storyboards y prepararlo para la animación antes de traerlo a Adobe After Effects. Abramos este storyboard explicativo. Aquí vamos. Ahora tenemos los siete storyboards. Están todos en mesas de trabajo separadas. Normalmente si sólo tenemos un guión gráfico, sería más fácil, pero ahora, como tenemos siete de ellos, lo primero que tenemos que hacer es separar a cada uno en su propio archivo. Haga cada guión gráfico en su propio archivo Illustrator. Para ello, tenemos que ir a Archivo, y luego dar click en Guardar como, tal vez crear una carpeta aquí, Storyboards separados, y luego dar clic en Guardar. Aquí está el panel de opciones. Ahora tenemos que comprobar en la Caja Fuerte cada mesa de trabajo a un archivo separado. Entonces sólo necesitamos todas las mesas de trabajo en archivos separados. Da click en Ok. Volvamos al buscador. Aquí vamos. ves, tengo explicador 1, 2, 3, 4, 5, 6, 7, y luego ahí este original archivo maestro Illustrator. Ahora podemos cerrar este maestro, y luego revisar cada uno. Aquí, 01, esta es nuestra primera escena de apertura. No obstante, 02, no parece, déjame abrir este guión gráfico aquí. 02 no parece el segundo guión gráfico. Parece éste, como el quinto guión gráfico. Todo lo que necesitamos hacer es cambiar el nombre de esos storyboards. Éste, déjame encontrar el segundo. Este es el segundo. Voy a renombrar 002, 001, y entonces éste es el tercero, y éste es el cuarto, quinto, sexto, y luego siete. Ahora tenemos cada archivo de Illustrator en orden desde el guión gráfico. Este es mi primer, segundo , tercero, cuarto, quinto, sexto, y séptimo, el cierre del logo final. Eso es lo primero que tenemos que hacer. El segundo es, que necesitamos averiguar en qué guión gráfico necesitamos traerlo a After Effects. Para ser honestos, no necesitamos traer todas estas siete cosas a After Effects, porque algunas de ellas, como esta segunda línea es sólo una transición. Puedo animar de la primera escena a la segunda escena, a la tercera escena. Sólo necesito averiguar el guión gráfico, la obra principal, que es la primera, y ésta, la cuarta, y tal vez ésta con los iconos, y luego la última. Estas son las únicas cuatro mesas de trabajo que necesito para llevarlas a After Effects. Dicho todo eso, déjame abrir el primer archivo de Illustrator. Ahora tenemos este archivo de Illustrator. Esta línea aquí es sólo la indicación de chispas secundarias, lo que sea. No lo necesito ahora mismo. Simplemente puedo animarlo más adelante en After Effects, así puedo eliminar este. Lo primero que tengo que hacer, necesito ir a Layers. Si no tienes el panel Capas aquí, solo tienes que ir a Ventana, y luego está aquí abajo, Capas. Como puedes ver en este momento, solo hay una capa, pero lo que necesito hacer es liberar todas las capas debajo de esta capa maestra, que más adelante cuando traiga este archivo a After Effects, todos los elementos sean se va a separar. Ahora mismo si traigo este archivo a After Effects, sólo me va a mostrar una imagen plana, que no puedo hacer nada, no puedo animarlo. Para separar los elementos, necesito hacer clic en esta Capa, y luego ir a este botón aquí. Haga clic en esta Secuencia de Lanzamiento a Capas. Ahora tengo todas las capas debajo de ella, seleccionarlas todas, hacer clic en la primera, hacer clic en la última y luego arrastrarlas fuera de la capa maestra. Arrástralos y luego borra el último porque ahora está vacío. Ahora como puedes ver, todas estas pequeñas estrellas están separadas en su propia capa. Otra cosa que necesito hacer para este guión gráfico es que necesito hacer clic derecho y luego soltar la máscara de recorte. Necesito liberar la máscara de recorte de este mapa del mundo y del globo porque necesito rehacerlo para animarlo en After Effects. Este es solo un caso específico cuando estás haciendo el globo. Si no tenemos este globo aquí, eso es todo lo que necesitamos, pero como tenemos este globo, tenemos que tener este mapa completo en After Effects para que podamos animar al globo. Eso es todo lo que necesitamos hacer. Apenas ahora necesito guardar este comando de archivo S. Ya terminamos con el primer guión gráfico. El segundo es transición no la necesitamos. El tercero, es casi la transición, así que realmente no necesitamos esta también. Necesitamos esta escena completa aquí. Haga doble clic en cuarto uno. Aquí está nuestro cuarto guión gráfico. Tenemos que repetir el mismo proceso. Vaya a Capas, y luego haga clic en esta Capa 1, vaya a este botón de la esquina superior derecha, haga clic en Liberar a la secuencia de capas, y luego simplemente arrastre todas estas capas fuera de la capa 1. Ahora sólo tienes que bajar y luego eliminar la última capa que está vacía. Otra cosa que tengo que hacer, es limpiar algunos de los elementos aquí dentro. Necesito todos estos edificios en una sola capa. Algunos de ellos están ahora separados en múltiples capas. Se va a aumentar el número de capas cuando las traiga a After Effects, que es algo que no necesito y no quiero, solo necesito que cada edificio esté en su propia capa para estar limpio. Ahora solo iré desde la parte inferior del panel de capas aquí y organizaré un poco las capas. Puedo hacer clic en estos pequeño círculo aquí para seleccionar la ilustración de capa, y luego las tres deberían ser un grupo, entonces, solo los agruparé, comando G. Ya que está agrupada, las dos capas debajo de ella están vacías ahora, por lo que, puedo eliminar estas dos capas. Éste está por aquí, detrás de ese edificio. Sólo puedo borrar éste porque es un poco difícil de ver. Entonces hay algo, alguna ventana detrás también, puedo borrar esa también, pero tal vez más tarde cuando lleguemos a ella. Este ya está hecho. Este. Por lo que D3 son el mismo edificio. Comando grupo G, borra los dos que están vacíos frente a uno azul aquí. Azul uno, ventana azul, agrupa estos también, borra la que está vacía. Estos tres son el mismo comando de edificio G, grupo, borrar los dos que están vacíos. Entonces esto es por aquí. Elimina eso. Aceleraré esta parte. Todo lo que necesito hacer, es agrupar algunos de los elementos de la ventana del edificio. Aquí vamos. Ahora tengo todos estos edificios en su propia capa. Todos los elementos están en sus capas separadas ahora. Salvemos el proyecto. Se puede ver en el panel de capas aquí he reducido el número de capas de un 100 algo justo ahora a tal vez alrededor de 20, lo cual es mucho más fácil de manejar más adelante en After Effects. Eso es todo lo que queremos hacer por esta mesa de trabajo. Volvamos al Finder. Ahora abramos O5. El truco para éste es, ya que ya tenemos O4, el edificio, entonces, no necesitamos volver a importar todos estos edificios en After Effects, solo puedo borrarlo. Entonces esto es lo único que necesitamos de esta mesa de trabajo. Ir al Panel de capas. Haga clic en “Capa 1", vaya a este botón aquí, suelte a secuencia de capas. Entonces podemos simplemente seleccionar todas estas capas debajo de ella, arrastrarlas hacia fuera, eliminar la última, y ahora quiero ver si están todas bien para ir en su propia capa. Entonces tengo eso. Supongo que lo único es, quiero agrupar este círculo y esta carta juntos. Comanda G y luego borra este. Entonces estas son las capas que necesito para esta mesa de trabajo. Comando S, vuelve a Finder. Ahora se reduce al último bloqueo del logotipo, ábrelo, ve a Capas, golpea en esta “Capa 1". Vaya a Liberar secuencia de capas, y traiga estos fuera de la capa 1. Eliminar capa 1. Tengo el logo aquí, y la nube, y el fondo. Sí, eso es todo lo que necesitamos. Comando S, guardar el proyecto. Ahí vas. Es así como preparamos nuestro guión gráfico en Illustrator antes de llevarlos a After Effects para la animación. Básicamente repito el mismo proceso por cuatro veces. Puedes hacer lo mismo por tu propio guión gráfico o puedes usar mi guión gráfico para preparar los archivos. Una vez que trabajes en él, te va a ayudar a memorizar todo el proceso, lo cual es bastante sencillo. Después de que termines estos proyectos tú mismo, podrás preparar rápida y fácilmente los archivos de Illustrator. Ahora es momento de recapitular. En este video, primero te mostré cómo guardar cada mesa de trabajo en un archivo separado de Illustrator, y luego identificamos cuáles son las escenas principales que necesitan animación. Después entramos en cada archivo de Illustrator para tratar de separar el elemento, y la función clave es liberar a la secuencia de capas. También te mostré en la escena del edificio donde he agrupado algunas de las capas juntas para reducir el número de capas ilustrador que podamos ser más eficientes en After Effects. En el siguiente video, te voy a mostrar cómo configurar tus archivos en After Effects. 5. Configurar archivos en AE: En este video, te voy a mostrar cómo configurar archivos en after effects para video explicador. Ahora abramos Adobe After Effects. Lo que estoy usando es Adobe After Effects 2020. Si tienes una versión anterior eso también está bien. Aquí vamos. En primer lugar necesitamos crear un nuevo proyecto. Para ello, si no ves lo que estoy viendo aquí nueva composición, puedes ir al archivo y luego crear nuevo proyecto. Haga clic en este. Si estás viendo lo que estoy viendo en este momento, solo tienes que dar click en nueva composición. Vamos a renombrarlo a main comp. Esta va a ser la composición principal que estamos animando el video explicador. Las dimensiones van a ser 1920 por 1080, que es de calidad HD. fotogramas de píxeles cuadrados a 30 fotogramas por segundo, resolución completa. Duración vamos a crear una línea de tiempo de video de 20 segundos para que tengamos más cronología con la que trabajar. Nuestro video va a ser un explicador de 15 segundos. El color de fondo puedes usar cualquier color que quieras, me quedaré con el color blanco por ahora. Haga clic en OK y luego bien. Lo primero que quiero hacer es asegurarme de que todos tengamos el mismo diseño. Tenemos que ir a la ventana y luego al espacio de trabajo, elegir este diseño estándar. Después de elegir el diseño estándar, debes tener el mismo panel que puedes ver aquí. Pero si no tienes lo que estás viendo aquí, solo tienes que ir a ventana o espacio y restablecer el estándar para guardar el diseño. Este botón va a cambiar el diseño al diseño estándar predeterminado, y entonces deberías poder ver un mismo diseño que el mío aquí. A continuación, lo que quiero hacer es crear algunas carpetas para organizar aquí el panel del proyecto. El primer carpeta que quiero crear es la carpeta CSF. El segundo va a ser la comp final. Después tercero, basta con hacer click en este botón para crear otros nuevos, van a ser los precomps. Ahora, la carpeta de comp final va a ser esta comp principal en la que vamos a estar animando. En primer lugar vamos a cargar el archivo ilustrador y ver qué sucede. Para cargar el archivo ilustrador, el guión gráfico, la forma más fácil es hacer doble clic en este espacio vacío aquí en el panel del proyecto. Entonces esto navega a los activos de escritorio. Acude a este guión gráfico separado. Haga clic en este 001 que es el primer guión gráfico, y luego por aquí cambiar el metraje a composición. Si lo importas como un metraje, se va a importar como una imagen plana sin la capacidad de separar todos los elementos del guión gráfico. Ahora, tengo una composición seleccionada. Abrámoslo. Se puede ver aquí creó dos cosas diferentes aquí. Una de ellas es una composición. Si hago doble clic para abrirlo, consta de todas las capas separadas en esta composición. Entonces la otra es una carpeta, y la carpeta también consta de todos los archivos de Illustrator. Ahora lo que necesito hacer es soltar esta carpeta en los activos y luego esta comp en los precomps. Si abro toda la carpeta aquí, puedes ver que esto va a ser similar cuando importemos todos los demás archivos de ilustrador. El directorio va a entrar en activos y luego la composición recién creada va a entrar en los precomps, y luego la comp final va a ser esta única composición final en la que estamos trabajando. Es así como organizamos los archivos del proyecto. Si no lo haces de esta manera o si tienes tu propia manera, está bien pero tienes que organizar tus archivos en panel de proyectos porque una vez que tienes muchas capas diferentes, diferentes comps, es muy fácil confundirte más adelante especialmente cuando estás trabajando en un video explicador más largo, digamos un minuto, y vas a tener una tonelada de archivos de carpetas diferentes en este panel. Si queremos añadir música más adelante, también podemos crear una carpeta llamada música, algo así, y puedes personalizarla como quieras. Pero normalmente, la carpeta principal de tres que necesitamos aquí son estas tres. Ahora, volvamos a la composición principal, cierre esta. Tengo un fondo de transparencia. Si recuerdas, sí creamos un color de fondo blanco cuando creamos por primera vez la composición, pero ¿por qué está en modo transparente? El motivo es porque tengo este botón aquí click, retícula de transparencia alterada. Si desmarco este, se puede ver el fondo blanco que creamos antes. Pero entonces aunque ves que es un fondo blanco, no se renderiza como un fondo blanco. En realidad solo te está mostrando así, y en realidad es en realidad un fondo transparente. Es así como configuras el archivo after effects para video explicador. Ahora recapitulemos. En este video, te mostré cómo crear un proyecto en After Effects. Después cambiamos nuestro espacio el diseño estándar para que todos tengamos la misma ventana y disposición con la que trabajar. Después te mostré cómo crear carpetas en el panel del proyecto y organizé tus capas. lo último que hablamos es de cómo importar archivos de ilustrador a after effects. Ahora vamos al siguiente video y empecemos a animar. 6. Animar escena de apertura: En este video, quiero hablar de un flujo de trabajo general de un video explicador y luego podemos empezar a animar. Tan solo para recapitular lo que hicimos antes. Primero utilizamos un archivo maestro ilustrador y separamos este archivo ilustrador en sus fueraborda individuales, como se puede ver aquí. Entramos en estos ford archivo Illustrator separado y luego separamos los elementos, organizamos los archivos, y también soltamos las capas y por eso somos capaces de traerlos más adelante en After Effects, ese es el segundo paso. El tercer paso, creamos un archivo After Effects y luego organizamos nuestro panel de proyectos en carpetas para que sea más fácil realizar un seguimiento más adelante. Después el cuarto paso, vamos a importar el archivo de guión gráfico Illustrator en After Effects para la animación. Eso es lo que vamos a hacer aquí. Empecemos a animar el primer storyboard de apertura. Del último video, ya importamos la primera escena de apertura del storyboard, que puedes encontrar aquí bajo princomp. A continuación, haga doble clic en este explicador de la ciudad inteligente. Esas son todas las diferentes capas que tenemos y luego seleccionar una de ellas, comando A, seleccionar todo, comandos C, copiarlas, y luego volver a la comp principal, pegarlas todas en la comp principal. Ahora podemos cerrar esta composición. El primero que veo es que el nombre es largo porque ahora mismo mostrando use un nombre fuente. Solo puedo hacer clic en el nombre de la fuente aquí, y luego va a cambiar de nuevo a nombre de capa, que es más corto, más fácil de reconocer. En este guión gráfico, la animación va a ser esencialmente este globo creciendo de la nada, subir al centro del marco y luego la estrella apenas está centelleando de fondo. Esa es esencialmente nuestra primera animación de escena y eso es lo que vamos a hacer aquí. Ahora sé que la última capa aquí es un fondo, así que voy a renombrarlo rápidamente EKG. Ahora quiero tratar de encontrar aquí el globo terráqueo. Solo tienes que seleccionar unos fotogramas, encender el icono I y ver si desaparece. Si desaparece, el globo va a estar dentro de esas capas que seleccioné. Aquí vamos. Ahí está este único error que cometí aquí. El problema es que ahora mismo se puede ver que estas dos capas no están separadas. Tengo este mapa y el globo todo en una sola capa. Estos dos no están separados. Si ese es el caso, no hay forma de que pueda animarlo. Tengo que volver al archivo Illustrator, abrir este guión gráfico explicativo 01 y arreglarlo por ahí. Ir a capas. Encuentra aquí el globo terráqueo. Este es el uno, se puede ver desde la miniatura y la razón es, aunque todas las demás capas están liberadas y en su propia capa, pero esta capa, necesito soltarla de nuevo. Haga clic en la capa aquí, capa 10, y luego vaya a la esquina superior derecha. Suelte la secuencia de capas. Ahora tengo todos estos dos separados, traerlos fuera de esta capa 10, y luego eliminar la capa 10. Ahora si alterno entre el icono I aquí, puedes ver esas dos capas, me separé. Guarda este archivo de Illustrator. Vuelve a aquí. Ahora puedes ver que ya no puedes encontrar la capa 10 porque ya la he borrado. La forma más fácil es simplemente eliminar estos dos en el panel del proyecto y volver a importar todo. Haga clic en este primer guión gráfico, elija composición, abra, y luego ponga esta composición a princomp, y luego ponga esta carpeta en activos. Haz lo mismo, copia todas las capas, vuelve a la comp principal y pega en todo. Este proceso solo te muestra si has hecho algo mal desde el principio, siempre hay formas de volver atrás y luego cambiarlo y luego volver a hacerlo. Ahora sólo encontremos aquí al globo. Aquí está el globo. Aquí está mi mapa. Para crear un globo, aquí hay un paso que debes seguir. En primer lugar, necesito duplicar este comando de capa de globo D y éste va a ser como referencia. Solo necesito el tamaño como referencia y luego seleccionar las dos capas aquí, globo y mapa, precomponerlo, comando shift C, precomponer estas dos capas en una sola composición, renombrarlo a globo. Da click en ok, haz doble clic en este globo aquí, entrando y luego necesito ir a capa nuevo sólido. Necesito crear un mismo color que este globo azul aquí. Simplemente usa el cuentagotas, haz clic en él, haz clic en ok, ponlo debajo del mapa y luego podrás eliminar el archivo Globe Illustrator. Ya no lo necesito. Ese es nuestro globo plano. Volver a la comp principal. Este, el globo ahora mismo está encima de esto, así que quiero ocultarlo por ahora. Haga clic en globo, vaya al lado derecho. Encuentra efectos y presets. Si no lo tienes de tu lado derecho, deberías, porque todos tenemos el mismo diseño. Pero si no vas a la ventana y luego haces clic en efectos y presets y eliges buscar una esfera CC. Arrastre la esfera CC encima de esta composición de globo. Ahora puedes ver nuestro globo. No obstante, se parece más a un globo 3D, no se ve tan plano como nuestra ilustración. Lo que tenemos que hacer es apagar la intensidad de la luz, cambiarla a cero. Entonces altura cero, dirección cero, todo cero. Después el sombreado, el ambiente, vamos a aumentar el ambiente. Ahora puedes ver que se ve similar a nuestro diseño aquí. Yo quiero ponerlo en 115. Eso es bueno. Entonces si quiero cambiar el tamaño de A, solo aumentaré el radio. Recuerda el globo que guardamos aquí, justo como referencia de tamaño, en algún lugar alrededor de ahí y luego puedo borrar ese globo. Lo que quiero hacer primero es animar el tamaño de cero a tal vez el spake 414. El modo de hacerlo es, quiero enseñarte un comando de atajo desplazar flecha derecha, avanzar 10 fotogramas y luego comando flecha derecha, 1, 2, 3, 4, 5. Entonces eso es esencialmente 15 cuadros más adelante. Quiero agregar un fotograma clave en el radio y luego volver a cero segundos. A lo mejor cambiarlo a cero. Haga clic en usar barra espaciadora para previsualizar. Sí, esa es nuestra animación de globo de principio a fin. No obstante, eso es demasiado aburrido porque no hay energía y luego la animación es lineal, la velocidad es constante. Eso no es divertido. Para mostrar el fotograma clave, necesito mantener presionado el atajo U y luego me va a mostrar esos dos fotogramas clave. Lo primero que quiero hacer es antes de que este globo se asiente en su lugar, quiero que se haga más grande, tal vez en el cuadro 10. Entonces el final, se supone que son 414, pero luego a 10 fotograma, quiero que sea 425. Yo quiero que este globo se haga más grande y luego se asiente de nuevo en su lugar. Esto es típicamente lo que llamamos un rebasamiento. medida que el globo crece de cero a más grande y más grande, se rebasa un poco y luego se instala de nuevo en su lugar. Esto es lo que llamamos un rebasamiento en la animación, es uno de los principios de animación. Vamos a previsualizar esto. Es un poco sutil, así que quiero cambiarlo a 440. Eso es bueno. Ahora, lo que necesito hacer es seleccionar los tres fotogramas clave. Haga clic derecho en Asistente de fotogramas clave, Facilidad fácil. Lo que hace es, le va a dar más energía a la animación, como se puede ver aquí, y entonces el cambio de velocidad ya no es lineal. Si abro esta gráfica aquí, haga clic en este Editor de Gráficos, y luego haga clic en este botón para encajar el gráfico a ver, este es básicamente el gráfico de velocidad. Por aquí a cero segundo, se puede ver la velocidad es cero. Entonces por aquí en este punto alto, la velocidad es de 2 mil unidades por segundo. Vuelve a bajar la velocidad. Básicamente te está mostrando la velocidad de esta animación. No obstante, lo que quiero hacer es hacerlo más dramático. Yo quiero que la animación sea más enérgica, así que quiero cambiar el gráfico de velocidad por aquí a esta forma aquí, que tenga una velocidad más alta aquí en el punto más alto. Una vez que ajuste eso, volvamos atrás y previsualice esta animación y veamos qué pasa. ¿Ves eso? El animación no sólo es suave sino más enérgico. Ahora mi tema es, siento que necesito extender la animación para darle más tiempo, porque en este momento sólo está tomando alrededor de 15 fotogramas, que es un periodo de tiempo muy corto. Voy a darle más tiempo. Basta con seleccionar los tres fotogramas clave. Sostén la opción en Mac, Alt en PC, y luego arrastra la última. Arrástrelo un poco. Por ahí a 20 marco. Ahora vamos a previsualizar la animación. Sí, eso me gusta. Eso es bueno. Aparte de eso, también quiero que el globo rote también. Aquí se puede ver una rotación en la parte superior del radio. Animemos la rotación horizontal Y. Simplemente baja un fotograma clave por aquí y luego vuelve a una fila diferente y tal vez baja 180. A ver qué pasa. Ahora eso es demasiado. Está girando demasiado rápido. Yo quiero cambiarlo de nuevo a probablemente 90. Vamos a previsualizar eso. Yo quiero que este globo gire lentamente. Antes de acercarme al globo, quiero que se mueva constantemente. En este punto aquí, quiero ajustar la rotación, que el gráfico se vea así. Vamos a previsualizar eso. Sí, eso se ve bien. Asegúrate de guardar el proyecto Command+S. Esta es también la primera vez que lo guardo así que quiero guardarlo en SmartCity Explicainer. Animación, crea SmartCity Explainer, Guardar. A continuación, lo que quiero hacer es animar todas las estrellas, lo cual es muy sencillo. En primer lugar necesitamos encontrar todas las estrellas. Creo que todas las demás capas son las estrellas excepto por el fondo BKG. Ahora solo voy a seleccionar todas las demás capas, cambiarlas a un color, tal vez como un azul y luego usas el icono del ojo, apágalo para ver si son todas estrellas. Sí, lo son. Ahora quiero agruparlos junto con Pre-Comp. Entonces Comando+Shift +C, el nombre es Estrella, y luego haga clic en “Aceptar”. Ahora ya lo han visto, hemos limpiado la línea de tiempo aquí. Sólo tenemos el globo, la estrella, y el fondo. El modo de animar a la estrella, sólo quiero que a la estrella le guste centelleando por atrás. En ese caso, sólo es un cambio de transparencia. Haga doble clic aquí en la estrella, apague este botón de transparencia, y luego ahora mismo el fondo es blanco, pero no los veo así que necesito cambiar el fondo. Necesito volver a la configuración de la composición, que es Comando+K, y luego cambiar el color de fondo a negro. Ahora puedo ver la estrella. Selecciona uno de ellos, éste de aquí. Acercar. Golpea a “T” por opacidad de transparencia también. Presione Opción, haga clic en el cronómetro aquí. Te va a permitir agregar una expresión. La expresión que quiero agregar aquí, es muy simple, se llama wiggle. Basta con escribir el soporte de wiggle. Quiero agregar dos valor aquí. El primer valor va a ser la frecuencia de los cambios. Si ponen tres aquí, van a ser tres cambios por segundo. Entonces, el siguiente es la amplitud. Voy a poner 60 aquí, lo que significa la transparencia, también la opacidad va a cambiar entre 0-60 valores de lo que es ahora mismo, que es 100 por ciento. Eso significa que el valor real va a cambiar de 40 por ciento a 100 por ciento. Eso es lo que necesitamos. Vamos a previsualizar esto. Simplemente se puede ver la estrella que está brillando. Entonces aquí están las partes fáciles. Todo lo que necesito hacer es hacer clic en este valor de opacidad aquí, subir a Editar, y luego daré clic en este “Sólo Copiar Expresión”. Se va a copiar esta expresión. Después selecciona todo el resto de las capas. Haga clic en pegar en el teclado Comando+V. Se va a pegar en la expresión a todas estas capas. Después de eso, vamos a previsualizar esta comp aquí. Ahora puedes ver que nuestras estrellas están animando. ¿ Qué tan fácil es eso? No toma un segundo. Ahora volvamos a la composición principal. Empieza desde cero, vamos a previsualizar esto. Nuestra estrella está animando, el globo está animando, está girando. Se ve acomodado y bonito. Ahora recapitulemos. En este video, te mostré cómo usar el efecto Esfera CC para animar el globo. Después hablamos de rebasamiento. Uno de los principios de animación. También te mostré cómo modificar el gráfico de velocidad en el editor de curvas para que podamos sacar energía a nuestra animación. El último es cómo agregar una expresión de movimiento a las estrellas para animar a las estrellas. En el siguiente video, les voy a mostrar cómo agregar algún acento, que es animación secundaria alrededor del globo. 7. Acentuar el planeta: A continuación les voy a mostrar cómo agregar un acento de ráfaga de línea a esta primera escena de apertura. En primer lugar lo que tenemos que hacer es ir a la herramienta Paint en la parte superior aquí, y luego por aquí, puede ver que hay una rejilla de elegir y pauta. Haga clic en eso. Enciende el Título/Acción Seguro, y te va a mostrar el punto central del marco. Acercar. Lo que necesito hacer es trazar una línea aquí. Utilice la herramienta Pluma para hacer clic en el centro aquí, y luego subir, mantenga presionada la tecla Mayús para limitarlo. Simplemente dibuja una línea recta, y luego puedes cambiar el trazo. Haga clic en el Trazo, cámbielo a blanco, y luego podrá apagar el relleno. Manteniendo pulsada la opción, click, click, click, tres clics. Ahora tenemos una línea blanca con 4 píxeles. A continuación, lo que podemos hacer es subir aquí, cambiarlo de nuevo a la herramienta Selección, ahora tenemos una línea blanca. En primer lugar, necesitamos animar esta línea blanca. Haga clic en esta flecha abajo aquí, cursor por aquí, usemos un efecto llamado recorridos de recorte. Si cambio el porcentaje final aquí se puede ver, la línea está animando. Entonces la forma en que quiero hacer esto es, a cero segundo, quiero que sean ambos a cero. Haga clic en el cronómetro para 2 fotogramas clave, y luego vuelva a quizás 15 segundos, y cámbielos todos al 100 por ciento, y ahora lo que tengo que hacer es, seleccionar estos 2 marcos clave de terminación y rastrearlos. Va a crear un efecto como este. Si solo solo solo esta capa, este es el botón Solo, a veces cuando necesitas previsualizar solo una capa, se va a solo 1 capa sin mostrarte ninguna otra capa. Una vez que haga clic en esto, puede previsualizar esta 1 sola capa individualmente. Vamos a previsualizar esto, con el fotograma clave que tengo ahora, del 0-10, va a crear estos efectos aquí. Entonces lo que necesito hacer es cambiar estos 4 fotogramas clave a fotogramas clave más fáciles : Seleccionar y hacer clic con el botón derecho en Asistente de fotogramas clave, Facilidad fácil. Ahora puedes ver, hay un poco más de energía, pero aún así eso no es suficiente. De lo que necesitamos hacer un selecto todo 4, ir al Editor de gráficos, dar click en esto para ajustarlo a la vista previa, y luego arrastrar esos gráficos a una forma similar que teníamos antes cuando animamos el globo, como un montaña aquí. Asegúrate de estar en el gráfico de velocidad. Si haces click en esto, puedes ver editar gráficos de velocidad. ocasiones si estás en el gráfico de valores, te va a mostrar un tipo diferente de curva, pero esto no es lo que quieres, quieres estar en este gráfico de velocidad aquí. Sólo tienes que arrastrarlo hacia fuera. Dale más velocidad, así. Ahora vamos a previsualizar esto. Algo así. Lo siguiente que tenemos que hacer es dar click en esta tecla Flecha, y luego dar click en Agregar. Usemos un repetidor, haga clic en esta flecha, abra el repetidor, abra la propiedad de transformación debajo del repetidor y asegúrese de no hacer clic en esta transformación general, solo use esta transformada dentro del repetidor, y luego cambiar la posición a cero. Si quieres repetir por ángulo, tal vez 30 grados, y ahora, puedo cambiar las copias para que estén fuera de copias, y esto es lo que conseguimos aquí. Vamos a previsualizar esto. Eso es algo que me gusta, y ahora sólo puedo apagar el botón Solo. Alejar el zoom. Vamos a previsualizar esto. Ve al final de la animación del globo, y luego quiero que esta línea sea así cuando el globo se asiente, y ahora necesito cambiar el tamaño de la chispa. A lo mejor algo como esto. Vamos a previsualizarlo. Ahora mismo está frente al globo, así que necesito ponerlo debajo, algo así, pero siento, la línea todavía no es suficiente, necesito que la línea sea más larga. Puedo modificar ligeramente los fotogramas clave, en la trayectoria de recorte debajo de la línea, tal vez mover estos dos ligeramente a la derecha, algo así, eso es lo que me gusta. Otra cosa es, a lo mejor quiero agregar más líneas, así que voy a bajar aquí, ir al Repetidor, a lo mejor quiero cambiar este valor de rotación a decir, si lo cambio a 24, puedo cambiar la copia número a 16. Necesita sumar hasta 360 grados. Eso me parece mejor. Yo me voy a quedar con eso, vamos a previsualizar eso. Se ve bien, y lo último que necesito es un círculo que dé la vuelta al globo. Simplemente ve arriba aquí, click en esta herramienta Rectángulo, sosténgalo, hasta que veas herramienta Elipse, haz clic en eso, y luego ve al centro del marco, mantén pulsado el botón Mouse, mantén pulsado Comando, Opción y Mayús en el teclado, 3 teclas en el teclado. Se va a constreñir el círculo para que sea un círculo perfecto, y luego dibujar desde el centro. Esto es sobre el tamaño del círculo que quiero, suelta el ratón, ahora tengo un círculo perfecto alrededor de mi globo, y ahora lo que necesito hacer es solo copiar la animación de la trayectoria de recorte de esta línea aquí y ver si va a funcionar en nuestro círculo. Copia estos 4 fotogramas clave, ve a los frentes, lo pieza, eso funciona. Siento que funciona. Eso es lo que me gusta, pero luego siento que el círculo es un poco grande. Necesito que sea más pequeño, así que necesito cambiar el tamaño del círculo, tal vez a 90 por ciento, o 93, demasiado pequeño, 96. ¿ Y si muevo atrás la chispa aquí? Guardar el proyecto. Voy a parar aquí. No quiero hacerlo demasiado complicado, pero estoy bastante contenta con cómo resultó. Aquí está nuestra escena de apertura. Eso es todo con nuestra escena de apertura. Pasemos al siguiente video para la segunda animación de arte principal. En este video, principalmente te acabo de mostrar cómo agregar un acento de línea, que podrás ver en muchos videos de explicadores diferentes. Una vez que aprendas a hacer esto, puedes aplicar esta técnica a muchos escenarios diferentes. En primer lugar, dibujamos una sola línea y animamos la sola línea con los efectos de trayectoria de recorte, y luego usamos un repetidor para duplicar las líneas del círculo. Después, después de añadir el acento de línea, también agregamos un círculo y animamos el círculo con los mismos fotogramas clave de trayectoria de recorte de la línea. No te preocupes si no puedes recordar todo de una vez, siempre puedes volver y volver a ver este video, para refrescar tus recuerdos. Después de practicarlo pocas veces, deberías poder hacerlo tú mismo, y eso es todo con la primera animación de escena. Siguiente video, te voy a mostrar cómo transitar de la escena del globo al paisaje urbano. 8. Pasar del planeta a la ciudad: Ahora que hemos animado la primera escena, sigamos para la segunda escena. Ven a la cima aquí, ve a proyectos, y luego vamos a importar la segunda escena desde el archivo Illustrator. Haga doble clic en esta zona vacía. Va a subir una ventana. Solo localicemos la segunda escena que tenemos, que es ésta. Entonces por aquí, selecciona “Composición”. Haga clic en “Abrir”. Ahora podemos ver aquí tenemos un precomp, pero también tenemos una carpeta llamada Smart City Explainer 4. Arrastremos esta carpeta a los activos y arrastremos este precomp a la carpeta del precomp. Haga doble clic en esto, “04”. Se puede ver que aquí tengo todas estas capas separadas. Ahora lo que quiero hacer es volver a “Comp principal”. Recuerda, esta es una Comp Principal que estamos animando. Ya tenemos la primera mitad de la animación aquí. Yo quiero que la transición pase por aquí, dos segundos, y luego ahí es donde voy a importar este storyboard 04. Arrastremos este precomp a la línea de tiempo. Ahora ya puedes ver tengo este precomp encima de la gráfica que ya tengo. Todo lo que necesito es arrastrar este precomp, solo usa el botón del ratón todo el camino a dos segundos. Aquí es donde entra así. Pero ahora mismo, es un corte recto. Nosotros vamos a hacer la transición más tarde. Algo que me di cuenta ahora mismo es que no tenemos ningún color de fondo dentro de esta composición, la composición 04. Por eso se puede ver a través del globo. Tenemos que entrar en este precomp y crear un fondo. Sube aquí, “Capas, nuevas”, da click en “Sólido”. Así es como se crea un fondo. Intentemos que este fondo sea blanco por ahora. A ver qué pasa. Haga clic en “Aceptar”. Ponlo todo el camino hasta el fondo como fondo de cielo blanco y luego vuelve a la comp principal. Ahora puedes ver nuestra composición es sólida, no tiene un fondo transparente. Lo que necesito hacer aquí es descifrar la transición. Recuerda nuestro storyboard. Déjame levantar el guión gráfico. Ahora permítanme mostrarles cómo hacer esta transición de esta escena a esta escena aquí, del tercer storyboard al cuarto storyboard, la transición. Digamos que si queremos que el paisaje completo se asiente alrededor de cuatro segundos, primero necesitamos ir a la propiedad de escala. Pulsa en “S”, en el teclado y pon un fotograma clave. Entonces tal vez por aquí, retrocedan 20 cuadros. Yo solo quiero que esto muestre una porción de la ciudad. Pero si acerco ahora mismo, se puede ver que es escalar en función del punto de anclaje en el centro del fotograma. No obstante, también quiero mostrar los autos de la calle y los autos en la carretera. No puedo escalar en base al punto central del tablero R. Necesito cambiar el punto de anclaje hacia abajo para que cuando estoy acercando, cambiemos de nuevo al 100 por ciento por ahora. Ve arriba aquí, haz clic en este “Lápiz detrás de herramienta”. Y luego haga clic en, “Este punto de anclaje”. Arrástrelo hacia abajo hasta la parte inferior de la capa, y ahora cambiemos la propiedad de escala. Simplemente arrástrelo hacia la derecha para hacerlo más grande, y ahora puedes ver que está escalando en función de este punto de anclaje en el suelo. Es así como podemos ver los autos y los tranvías al principio, tal vez algo así y luego la transición. Yo sólo pongo dos fotogramas clave para la transición. Vamos a previsualizar esto. Eso es bueno. En primer lugar, quiero que este globo se aleje, y al mismo tiempo, cuando se vuelva demasiado grande, quiero que la transparencia se convierta en cero. Cuando estamos acercando al globo, también desaparece. El modo de hacerlo es ir a la capa de globo aquí. Entonces volvamos al panel de control de efectos. Aquí tienes un radio. Vamos a establecer un fotograma clave para el radio y luego seguir adelante tal vez 20 fotogramas. Ahora he ido demasiado lejos porque la capa de la ciudad está cubriendo mi globo así que quiero apagar el icono del ojo sólo para ocultarlo para que pueda ver todo debajo de él. Yo quiero que este globo sea más grande en este punto. Algo así. Probemos un 1000. Entonces también pinchemos en el “Globo”. Sostenga pulsado, “Shift T” en un fotograma clave sobre transparencia, y arrastre este 100 por ciento hacia atrás en el tiempo y cambie el valor aquí como cero. En este punto se convierte en cero. A medida que el globo crece y crece, también desaparece. Vamos a previsualizar esto. Se ve bien excepto que no hay energía. Todavía necesitamos ajustar las curvas gráficas. Pero luego recuerda lo que hicimos antes cuando el globo se instaló en su lugar, agregamos uno más fotogramas clave para el rebasamiento. También queremos hacer lo mismo aquí cuando se acerca. Pero esta vez en realidad es algo que se llama anticipación. Cuando el globo crece más grande, primero se hace más pequeño, anticipa. Es una preparación para la acción. puede ver al principio es 414, y puedo agregar otro fotograma clave por aquí, hacer el globo más pequeño, tal vez 395. Antes de que se haga más grande, en realidad se encoge primero así. Entonces vamos a seleccionar los tres fotogramas clave. Ir a Editor de Gráficos. Asegúrate de estar en el gráfico de velocidad. Simplemente arrastra el gráfico de velocidad hasta aquí y asegúrate de tener este gráfico como una montaña solo para darle más energía. Eso es lindo. Entonces así como desaparece el globo, quiero que suba esta escena de la ciudad. Lo que quiero hacer es por aquí, en este punto, quiero agregar un fotograma clave aquí y luego retroceder en el tiempo, tal vez al principio, hacerlo más pequeño. Ahora mismo, es 276. Probemos 240. También, quiero tirar hacia arriba la transparencia en la capa, Shift T y luego dar clic en la “Transparencia”, poner un fotograma clave. Arrastro éste hacia adelante en el tiempo y luego al principio quiero que sea cero. cero a 100 transparencia. Vamos a previsualizar esto. Algo así. Pero creo que la capa llegó demasiado temprano. Yo quiero arrastrarlo un poco hacia atrás. Entonces quiero asegurarme de que la transparencia del globo cambie más rápido, ahora mismo es demasiado lento. Solo quiero asegurarme de que estos dos fotogramas clave estén más cerca uno del otro para que la transición ocurra más rápido. Simplemente asegúrate de arrastrar estos fotogramas clave también más cerca para que esta transición ocurra más rápido. Es más natural. Vamos a previsualizar esto. Ahora funciona. El motivo por el que pongo aquí un cambio de escala es porque al acercarnos al globo, estamos asumiendo que tenemos una cámara entrando al globo. Entonces cuando pasemos a la siguiente escena, quiero que la escena siga en movimiento. No quiero que la escena sea cortada directamente. Eso va a perturbar la moción. Ahora, como he puesto un zoom en movimiento, realidad conduce a la segunda escena. Por eso podemos tener una transición suave. Como puedes ver aquí, estamos acercando y esta cosa sale como si también estuviéramos acercando a la ciudad, y estamos trabajando en esto. Si tu equipo se está volviendo lento y reacciona muy lento, también puedes cambiar la resolución de vista previa aquí. Ahora mismo, tengo una resolución completa. Pero si cambio a media resolución o tercera resolución, va a hacer mi escena aquí un poco borrosa, pero entonces el software va a responder más rápido y se puede trabajar más rápido. Esta transición aquí, quiero hacer clic con el botón derecho en “Asistente de fotogramas clave, Fácil facilitarlo, y luego ir al Editor de gráficos. Asegúrate de que tenemos aquí esa gráfica parecida a la montaña para darle más energía. Pero ahora mismo me está molestando porque cada vez que golpeo una vista previa, siempre previsualiza desde el inicio, cero segundo pero quiero previsualizar por aquí, dos segundos. Todo lo que necesito hacer es presionar en el atajo de teclado B para cortar el rango de vista previa, y se puede ver este encabezado de rango aquí, se corta a dos segundos. Ahora cuando hago clic en “Parte espacial para vista previa”. Empezará la vista previa a partir de ahí. Ahora siento que el cambio de escala es un poco abrupto. Quiero poner los fotogramas clave más separados y agregarles algo Fácil facilidad. Ahora recapitulemos. En este video, hablamos sobre cómo crear capas sólidas y también cómo cambiar el punto de anclaje y animar en función de dónde está el punto de anclaje. También cubrimos cómo modificar el gráfico de velocidad y también cómo cambiar la resolución de vista previa para acelerar el software. Ahora vamos al siguiente video. 9. Animación del paisaje urbano: Ahora es el momento de animar los trenes, los autos, y los edificios dentro de esta comp aquí. Vamos a asegurarnos de que tiene este indicador de línea de tiempo aquí, así que aquí es donde quiero que este tren entre a la vista. Entonces este es el marco de tiempo exacto y cuando entro en la composición, el indicador de línea de tiempo me va a mostrar ubicación exacta que corresponde a ese tiempo en la comp principal. Si no cambio mi indicador de línea de tiempo esta posición aquí, donde nuestro indicador de línea de tiempo se corresponde con la posición de aquí en la comp principal. Si no cambio mi indicador, estas dos posiciones son exactamente las mismas porque si miras el marco de tiempo aquí, este es sólo el octavo cuadro pero dentro de esta comp en realidad son dos segundos 23. Entonces la única forma es usar tu indicador de línea de tiempo ponerlo en algún lugar aquí y luego ir dentro del pre-comp, te va a mostrar dónde está ese punto. Ahora todo lo que necesito hacer es animar este tren aquí. Encontremos el tren. Esta es nuestra capa de tren, golpea p en el teclado, pon un marco clave ahí. A lo mejor arrastrarlo un poco hacia atrás y luego ir hacia adelante, tal vez dos segundos y luego cambiar la posición. Muévete a la izquierda, vamos a poner 400 por ahora o tal vez 200. Ahora tengo el tren viajando así. Aquí está mi auto rosa y luego auto amarillo. Yo quiero que estos autos viajen también, así que pon ahí un marco llave y luego el auto amarillo debería venir de izquierda, mientras que el auto rosa debería venir de derecha. Veamos cómo se ve en la comp principal, vamos a previsualizar esto. Pongamos el indicador al frente de esta capa aquí y pasemos a la composición. Podemos ver al principio primeros cuadros que no se están moviendo. Yo quiero que el tren se mueva incluso antes de cero segundo. Vamos a arrastrarlos sobre incluso antes cero segundo para que el tren ya se esté moviendo, vamos a previsualizar esto. Sí, pero el problema es que aún no quiero que el tren esté ya tan lejos a la izquierda cuando aparezca por primera vez. Voy a querer ajustar la posición del tren, tal vez cambiar la posición de salida a 1,300. Volvamos a la comp principal y echemos un vistazo. Sí, algo así. El tren entra en escena y luego los autos y luego la cámara se aleja. Yo quiero que el auto tal vez solo siga moviéndose, el tren siga moviéndose hasta que salga de escena. Parece que dos segundos no son lo suficientemente largos, así que quiero arrastrar estos fotogramas clave a cuatro segundos y mover el tren fuera del marco y luego también cambiarlos a fotogramas clave, arrástrelos a los cuatro segundos, y luego hacer esos dos autos para salir fuera del lugar. Volvamos a la comp principal, echemos un vistazo. Sí, eso es lindo. Lo siguiente es ahora mismo esta escena aquí basada en el guión gráfico, se puede ver que debería haber algunos árboles en el marco. Yo sólo quiero arrastrar los árboles a la escena. Asegúrate de saber dónde deben estar los árboles. Debería ser entre el edificio azul y naranja y este edificio verde y azul, en algún lugar alrededor de ahí. Volvamos aquí, encontremos los árboles. Entonces esa es una, solo hay que arrastrar este árbol hacia la izquierda. Yo estoy sosteniendo turno constreñir la posición horizontal, ponla por ahí y este son otros dos árboles, arrástrelos por ahí. Algo así. Ahora volvamos a la comp principal. Se puede ver que hay dos cuatro árboles. Ahora me queda bastante bien. Ahora vamos a entrar de nuevo en el pre-comp para animar el edificio. En realidad quiero que el edificio empiece desde algún lugar por aquí, un tres segundos, intentemos eso. Apenas hay que encontrar todos los edificios. Esta es una y luego ir todo el camino hasta el fondo. Creo que estos son todos mis edificios, sí, solo estoy alternando entre los iconos de los ojos y puedes ver estos son todos mis edificios. Haga clic en este color, hagámoslo amarillo para que mis capas amarillas sean los edificios. Animar el edificio, es bastante fácil. Vamos a necesitar tres marcos clave para todos los edificios, y ahí podemos copiar los tres fotogramas clave en cada uno de ellos. Podemos animar primero este primer edificio naranja. Todo lo que necesitamos hacer es cambiar primero el punto de anclaje al fondo de este edificio aquí, pero ahora mismo no puedo ver dónde está el fondo así que lo que voy a hacer es solo esta capa, dar click en este botón aquí, puntitos, se va a solista esta capa. Solo necesito ver esta sola capa, ir arriba usa esta pluma detrás también, arrastra este punto hasta la parte inferior del edificio y luego lo que necesito hacer es, apaguemos el botón en solitario. Hit “S” encender la propiedad de escala y enlazar aquí la propiedad x e y. Ponga un fotograma clave y luego arrástrelo hacia adelante. Cambia la escala y a cero. Si rasco la línea de tiempo, el edificio va a crecer del 0-100 por ciento, sólo en la posición Y. No obstante, como hablamos antes necesitamos añadir un rebasamiento para que sea más interesante. Por lo que antes de llegar al 100 por ciento, necesita repasar tal vez 110 por ciento. Quiero arrastrar este fotograma clave más aparte para dar más tiempo para la animación. Seleccione los tres, haga clic con el botón derecho. Otra forma de lograr el mismo gráfico que en realidad podemos hacer una velocidad de fotograma clave aquí, y luego simplemente cambiar todo a 66.66. Da click en Ok. Vamos a entrar en la gráfica. Se puede ver esta gráfica es casi lo mismo que lo que hicimos. Hay dos formas de modificarlo una es entrar aquí para arrastrar manualmente los manejadores, y luego la otra forma es solo hacer clic derecho en cambiar la velocidad del fotograma clave aquí. Vamos a previsualizar esto, y se puede ver que sale el edificio. mí me parece bien. Entonces lo siguiente que necesito hacer es cambiar el punto de anclaje de todas estas capas al fondo del edificio, y luego copiar los tres fotogramas clave en cada uno individual en todas las capas. Encuentra este edificio aquí, arrastra el punto de anclaje hasta el fondo, ponlo ahí abajo. El siguiente también lo puso ahí abajo al fondo. Yo sólo voy a acelerar esta parte para que no tengas que verme haciendo esto una y otra vez. Ahora puedes ver tenemos todos los puntos de anclaje ahí abajo en el fondo del edificio. Lo siguiente que tengo que hacer, antes de copiar el fotograma clave necesito entrar en cada uno a un enlace la propiedad de escala X e Y escala. Entonces selecciona todos ellos hit S, te va a mostrar toda la propiedad de escala y luego solo desmarca el enlace a una escala dx e Y de longitud. Eso es bueno. Después sube aquí, copia los tres fotogramas clave, Comando C, y luego selecciona todo el resto del edificio. Asegúrate de que tu indicador de línea de tiempo esté al inicio de este fotograma clave Command V pega, y luego podrás ver que tengo todos estos fotogramas clave. Vamos a previsualizar esto. Oops, hay un problema con un edificio, este de aquí y ese también dos edificios, estos dos saltaron. Entonces necesito eliminar el fotograma clave creo que el punto de anclaje está en la posición equivocada. Permítanme borrar el fotograma clave. Entonces quiero encontrar dónde está ese punto de anclaje para ese edificio. Alejar el zoom. Al alejarme, no tengo ni idea de por qué este punto de anclaje está todo el camino por ahí. Entonces necesito arrastrar eso de nuevo al marco, ponerlo en la parte inferior del edificio, y luego volver a recopiar el fotograma clave, pegarlo de nuevo. Tenemos un último edificio tiene problema ahora que es una pantalla uno aquí. Sólo busquemos el punto de anclaje de este edificio verde. Está lejos, lejos de la mesa de trabajo. Arrastre hacia atrás el punto de anclaje hasta la parte inferior del edificio verde. Ponlo ahí abajo, y luego haz lo mismo. Copie los tres fotogramas clave y luego péguelos en la capa de construcción verde. Ahora creo que todos nuestros edificios están animados. A continuación, quiero tambalear la animación del edificio porque no quiero que esos edificios entren todos al mismo tiempo. Yo sólo quiero darle un movimiento aleatorio. Entonces solo estoy tratando de arrastrar estas capas para darle una aleatoriedad para que no estén empezando todas a la vez. Echemos un vistazo. Volvamos a entrar en esta composición de O4. Quiero cambiar el color de fondo en un color cielo. Just Command Shift to Y, y luego usemos esta herramienta cuentagotas para cuentagotas este color azul en el tren. A lo mejor que sea un poco más ligero. Eso es bueno. Vamos a pegarle a Ok. Ahora, tenemos un cielo azul claro aquí en la segunda escena. Ahora todo lo que necesito hacer es afinar el tiempo para que cuando esta transición ocurra por aquí a los cuatro segundos, quiera ver la acumulación del edificio. En este momento estos edificios todavía se construye bastante temprano. Sólo puedo ver la parte final de la animación. Todavía quiero poder ver el edificio para acumularse desde el suelo dentro de esta transición, así que necesito mover estas capas un poco más atrás para retrasar un poco la animación. Vamos a previsualizar. Sí, algo así. Ahora tenemos las dos primeras cosas animadas y listas para ir. En este video, hablamos sobre cómo cambiar los colores etiquetados de capa para agruparlos. También te mostré cómo modificar el gráfico de velocidad cambiando el valor de la velocidad del fotograma clave. Cubrimos cómo aplicar los mismos fotogramas clave a otras capas y cómo cambiar el color de capa sólida. Ahora pasemos al siguiente video. 10. Conviértete en Insiders de Motion: Antes de continuar, quiero compartir con ustedes una noticia emocionante. Los cursos de diseño de movimiento se volvieron más asequibles en los círculos de movimiento. Con nuestra membresía motion insider por tan solo $7 al mes, obtendrá acceso ilimitado a nuestros cursos de diseño de movimiento de primer nivel, confían más de 50,000 estudiantes en todo el mundo hora de elevar tus habilidades de diseño de movimiento para convertirte en los mejores animadores que puedas ser Como información privilegiada, también recibirás archivos de proyecto de cortesía de todos nuestros tutoriales de YouTube de Motion Circles. Y disfruta de un 25% de descuento exclusivo en todos los demás increíbles proyectos de animación de otros artistas en nuestra tienda de archivos de proyectos. No te pierdas esta oportunidad de subir de nivel tus habilidades de animación mientras conviertes en parte de nuestra vibrante comunidad. Únete a nosotros hoy en motion circles.com y libera tu potencial creativo. 11. Transición luego del paisaje urbano: Veamos qué tenemos hasta ahora. En este video, vamos a continuar desde donde lo dejamos. Vamos a seguir animando a la siguiente escena. Vamos a levantar el guión gráfico. Ya hemos hecho la primera escena de primer plano y luego lo siguiente va a ser una transición donde la cámara se agita para que estos iconos de comunicación aparezcan en el cielo. Para ello, necesitamos importar primero esta mesa de trabajo. Ahora vamos al panel de proyectos aquí. En lugar de hacer doble clic, también podemos hacer clic derecho y luego elegir Importar archivo. Navegemos a nuestra Mesa de trabajo, Activos, Storyboard Separados y esto es lo que necesitamos aquí. Esos iconos. Haga clic en este archivo aquí abajo, cámbielo a composición, haga clic en Abrir. Ahora, tenemos este precomp, importarlo al panel del proyecto. Recuerda lo que hicimos antes, necesitamos arrastrar esto, los cinco precomp a la carpeta del precomp y luego arrastrar esta carpeta a los activos. Si cierro todas las carpetas, todavía tenemos un panel de proyecto bastante limpio y organizado. Ahora primero lo que quiero hacer es hacer una transición desde esta escena como si la cámara se estuviera levantando, por lo que la ciudad baja. Para ello, quiero arrastrar este rango de vista previa, tal vez a ocho segundos aquí, y luego ir hasta casi el final cuando los edificios se detienen y luego los autos siguen moviéndose. Yo quiero aguantar en la escena tal vez por un segundo, aquí mismo. Entonces en este punto, quiero que la cámara se haga panear. En lugar de usar cámara, cual es bastante complicado, lo que puedo lograr fácilmente es simplemente cambiar la posición de toda la comp. Si hago clic en la primera composición y luego usas un atajo turno P para tirar hacia arriba la propiedad de posición aquí, lo que puedo hacer ahora es agregar un fotograma clave primero. Esta es la posición inicial de toda esta comp y entonces tal vez ir adelante 25 fotogramas. Yo quiero que esta transición sea muy lenta. La cámara se está levantando lentamente. Después de 25 cuadros, quiero que la posición blanca cambie aquí abajo. A lo mejor quiero que la ciudad sea así aquí y luego adelante otros 25 marcos. Yo quiero que desaparezca toda la ciudad. Pero el problema es que ahora mismo, estamos viendo la escena inicial de apertura, que es lo que no queremos. Necesito extender el cielo aquí para cubrir la parte posterior de esta composición para que no estemos viendo la escena del cielo inicial. El modo de hacerlo es ir a capa, crear un nuevo sólido y la altura y el ancho van a ser lo mismo que esta composición. Cambia el color al color del cielo, haz clic en Ok, y luego arrastra este color sólido debajo de esta comp skyline de la ciudad. Entonces cuando nos movemos por la ciudad, todavía podemos ver aquí la capa sólida. No obstante, no quiero que esta capa empiece en cero segundos porque si arrastro la línea de tiempo hasta el inicio, va a cubrir toda mi otra animación. Todo lo que necesito es partir de este punto aquí, cuando la escena de la ciudad empiece a moverse hacia abajo, necesito que este fondo aparezca en el marco. Pulsa el atajo de teclado corchete cuadrado izquierdo y luego esta capa sólida va a comenzar desde este punto donde está mi indicador de línea de tiempo. Vamos a guardar el proyecto por ahora y vamos a previsualizar esto. Quiero previsualizar a partir de los cuatro segundos así que voy a cambiar este rango de vista previa, usar el atajo B, para cortarlo desde ahí para poder iniciar la vista previa desde el cuarto segundo. Algo así. No obstante, el movimiento aquí es bastante lineal. Es muy aburrido. Es porque aquí no aplicamos ningún fotograma clave de flexibilización a esta animación. Ahora lo que necesito hacer es seleccionar los tres fotogramas clave, igual que lo que hicimos antes. Haga clic derecho asistente de fotogramas clave facilidad fácil. Veamos qué pasa ahora. Algo así, pero entonces quiero que esta escena aquí desacelere en el fotograma clave medio aquí. Para ralentizarlo en el fotograma clave medio, quiero seleccionar los tres y luego ir al gráfico. Aquí está el gráfico de velocidad para esto. Lo que quiero hacer es dar más tiempo para el fotograma clave central y dejar que la animación se ralentice en el fotograma clave central. Si hago una forma como esta, vamos a previsualizar la animación aquí. Nos va a dar una velocidad ligeramente más rápida al principio aquí y luego va a haber una flexibilización en el fotograma clave medio. Después está la facilidad fuera del fotograma clave medio lentamente, luego va más rápido al final. El único es que quiero quedarme alrededor del fotograma clave medio. No quiero que la animación vaya demasiado rápido en el fotograma clave medio. Este es un tipo de curva que necesito para lograrlo. Vamos a previsualizar esto de nuevo. Incluso puedo darle más tiempo para tal vez hacer los tres fotogramas clave más separados con el fin de lograr una animación más lenta, tal vez más sutil. Voy a seleccionar los tres fotogramas clave. Mantenga pulsada Opción en Mac, Alt en PC, arrastre el último fotograma clave para que pueda espaciar uniformemente los tres fotogramas clave hacia fuera. Dale más tiempo. Algo así. Lo siguiente que quiero hacer es importar este icono a esta comp principal. Simplemente arrástralo hacia abajo en la comp principal y luego arrastra los puntos de partida la derecha hasta donde se supone que vamos a ver el icono aquí, que está por aquí. Arrastremos este punto de partida hasta tal vez por aquí, en el sexto segundo. Aquí es donde vamos a ver todos los iconos. No obstante, todavía necesitamos animar esos. Antes de pasar a la animación de iconos, quiero recapitular. En este video, hablamos sobre cómo importar archivos a After Effects, cómo agregar una capa sólida y cómo modificar el gráfico de velocidad. Es algo que hemos cubierto previamente. Ahora podemos ir al siguiente video para la animación de iconos. 12. Animación de íconos: A continuación, voy a entrar en esta composición de iconos para animar esos iconos. Haga doble clic en el “Smart City Explainer 005". Dentro de esta composición, puedes ver aquí todos estos pequeños iconos. La buena noticia es que van a tener una animación similar, así que no tenemos que hacer cada una de ellas individualmente, solo podemos hacer una de ellas y luego copiar y pegar todos los fotogramas clave. Empecemos con tal vez esta capa 4, este ícono aquí. Podemos acercar, presionar “Z” en el teclado, arrastrar el ratón, acercar. Lo que queremos hacer es, primero necesitamos cambiar el punto de anclaje a esta posición aquí porque quiero rotar este icono partiendo de esta esquina inferior derecha aquí. Haga clic en el “Pan Behind Tool”. Necesito encontrar dónde está el punto de anclaje, arrastra este punto de anclaje por aquí. Entonces vamos a necesitar la propiedad de posición, golpear en “P”, luego vamos a necesitar rotación, golpear en “Shift R” sigue siendo la tecla Shift. Si solo presionas una tecla del teclado, di si pulsas “P” y luego si pulsas “R” sólo te va a mostrar una propiedad. Si quieres ver múltiples propiedades por aquí, tienes que mantener presionada la tecla “Shift Key” en el teclado y luego hacer clic en “P”. Es así como se pueden ver múltiples valores en la capa. También necesito el tamaño. Golpe en “Shift S”. En primer lugar, crear un marco clave para los tres. Esta va a ser la posición final final. Vuelve a la herramienta de selección, al atajo, “SV”, luego selecciona los tres fotogramas clave, tal vez ponerlo adelante por aquí, cuadro 18, y luego vuelve a cero segundo. Quiero que este ícono empiece de tal vez más bajo y luego anime hacia arriba. También quiero que la escala cambie de 0-100 por ciento. También quiero que la rotación empiece como un grado negativo, tal vez negativo 90. Veamos cómo se ve ahora. Algo así. Esa es esencialmente la animación que necesito. No obstante, necesito un poco más de energía. ¿ Recuerdas cómo hicimos las otras animaciones? Tenemos que sumar en un rebasamiento. En primer lugar, sumemos algún rebasamiento. A medida que el valor de rotación se convierte en cero, quiero que se rebase a un positivo 10 grados antes de que llegue a cero, por lo que va pasando cero y luego vuelve. El balanza. También quiero ir a pasar 100 por ciento, que es tal vez 110 por ciento, y la posición, también quiero que pase por encima del valor final. El valor final es 526 en la posición y, así que quiero que sea 500. Va más alto y luego vuelve a bajar. Vamos a previsualizar esta animación. Creo que la posición es demasiado. Debería ser 526, y luego por aquí tal vez 516. Probemos eso. Sí, eso me funciona. ¿Ves? Sin siquiera cambiar los fotogramas clave lineales para facilitar los fotogramas clave, ya tenemos un poco de energía pasando aquí, sin embargo, simplemente no es suficiente. A continuación lo que queremos hacer es, seleccionar todos los fotogramas clave, clic derecho, “Asistente de fotogramas clave”, facilidad fácil. Echemos un vistazo. Mira eso. Mira la energía y la suavidad. ¿ Ves eso? Eso me queda bien. Si queremos ir aún más lejos, puedo seleccionar todo el marco clave aquí y luego ir al editor de gráficos. Haga clic en este icono aquí, ajuste el gráfico para ver y recuerde el gráfico parecido a la montaña que teníamos antes. Podemos simplemente arrastrar esas asas outs, para tener esta montaña más alta aquí. Eso va a darle más energía a toda la animación. Vamos a previsualizar esto. Es más deliberado. ¿Ves eso? Ahora soy bueno con esta animación. A continuación lo que quiero hacer es sólo copiar todos esos fotogramas clave en los otros iconos para que todos tengan la misma animación. Necesito tener cuidado porque algunos de los iconos, tienen esta pequeña flecha en el lado izquierdo del ícono en lugar de la derecha. En este caso, necesito que el icono gire desde una dirección opuesta. Dicho esto, necesito tener más cuidado cuando copio y pegue mis iconos. En primer lugar, lo que necesito hacer es cambiar el punto de anclaje de cada uno de estos iconos a una posición donde quiero que se animen los iconos. Déjame simplemente pasar por cada uno de forma individual. Haga clic en el primero. Sube aquí, pan detrás de herramienta, ese es el pequeño círculo aquí tarjeta. Necesito cambiarlo a aquí. A lo mejor quiero animar desde abajo aquí. Este va a ser similar al primer ícono comenzando desde abajo a la derecha, y éste partiendo desde abajo a la derecha. Ahora lo que puedo hacer es, quiero cambiar este, éste, éste, estos tres a diferentes colores para que yo pueda hacer primero éste. Este es rojo. Ahora tengo tres grupos de colores. Los tres primeros iconos son los tres aquí. Todos necesitan rotar desde la derecha, que es lo mismo que lo que tenemos para el primer ícono. En este caso, sólo puedo copiar, seleccionar todos los fotogramas clave Comando C, y luego seleccionar las tres capas, Comando V pegar como vista previa. Ves ahora tenemos un problema, porque he pegado la propiedad de posición, y ahora los tres iconos, todos tienen exactamente la misma propiedad de posición que el primero. Por eso los cuatro están ahora en la misma posición exacta aquí. Eso es lo que no queremos. Va a ser muy fácil arreglar esto, pega en U para mostrar la propiedad animada en esta capa. Ahora todo lo que necesito es solo seleccionar los tres fotogramas clave y luego cambiar la posición x y la posición y a donde quiero que esté este ícono al final. Di este ícono aquí, quiero que sea al final en esta posición aquí. Después pulsa en U para seleccionar los tres fotogramas clave. Cambia este, cambia la posición x y la posición y. Si lo cambias de esta manera, una vez que todo está seleccionado y tu indicador de línea de tiempo está en uno de los fotogramas clave, tiene que estar en uno de los fotogramas clave. No puede ser un cuadro aparte. Tiene que quedarse en uno fotogramas clave, y luego cuando cambies la propiedad de posición, No va a estropear tu animación. Toda la animación se va a desplazar en función de dónde quieras que esté esto. Entonces quiero dar click en la capa cinco aquí. Pulsa en U, muestra todos los fotogramas clave, selecciona los tres fotogramas clave aquí en la propiedad de posición, y luego cambia la posición x aquí. Ahora vamos a previsualizar esto. Mira, tengo exactamente la misma animación en cuatro iconos diferentes. Eso me queda bien. Lo siguiente que quiero hacer es copiar fotogramas clave en estos ícono de círculo, elementos de círculo. Esto va a ser un poco diferente porque el círculo no necesita el valor de rotación aquí. No quiero que el círculo gire a la derecha o a la izquierda. Yo solo quiero que el círculo salga directamente. Lo que necesito hacer es sólo copiar la posición y la propiedad de escala, y dejar fuera la rotación. Copia estos keyframes comando C, y ve a cero segundos, selecciona todas estas capas, y luego Comando V. Ahora tengo el mismo problema, todo solo uno a la misma posición. Pero podemos hacer lo mismo para arreglarlo. Vamos a pasar por cada uno, golpear en U, poner el indicador de línea de tiempo en la parte superior del último fotograma clave aquí, seleccionar los tres fotogramas clave, y simplemente cambiar la posición x y la posición y para moverlo a donde quieres que esté en el final. Esta cosa del círculo, con una tarjeta, debería estar por aquí en la esquina superior izquierda. Sí, eso es bueno. Entonces los dos últimos iconos que necesitamos, vamos a copiar los fotogramas clave de aquí. Propiedad de escala de posición, Comando C, y luego vaya al primer fotograma clave inicial cero segundo, seleccione las dos capas aquí , Comando V pegar, y luego hagamos lo mismo. No obstante, aún necesito cambiar la rotación. Si previsualizo esto, estos dos están girando hacia la dirección equivocada. Todo lo que necesito hacer es cambiar este negativo 90 a 90 y luego cambiar este rebasamiento a negativo 10 en lugar de positivo 10. Vamos a previsualizar esto. Sí, algo así. Estoy contento con la animación aquí. Ahora lo último que quiero hacer aquí es tambalear estas capas, darles algo de aleatoriedad. No quiero que empiecen todas en el mismo punto que cero segundo, quiero arrastrar esas capas y luego simplemente escalonar esas para asegurarme de que tenga algo de aleatoriedad. Después de que haya hecho eso, veamos qué pasa aquí. Ahora volvamos a la composición principal y echemos un vistazo. Ahora mismo, me queda bien. No obstante, como los iconos están todos en el cielo, no quiero que se mantengan estáticos en el cielo. Yo quiero que solo se muevan en el cielo, tal vez nos den algo más de movimiento, así que solo necesito agregar efectos. Volvamos a entrar en la composición. Ahora quiero ir al panel de efectos y presets aquí, la derecha, si no lo tienes aquí, sólo tienes que ir a Windows y luego a efectos y presets. Encontremos los efectos de movimiento. Solo necesito usar esta posición de guión de movimiento. La última vez intentamos arrastrar estos efectos a la capa. Esta vez, sólo podemos hacer doble clic en el efecto. Siempre y cuando tengas una capa seleccionada, solo puedes hacer doble clic en el efecto, se va a aplicar directamente a esta capa. Esta es la que tenemos aquí. Después de aplicar, vamos a previsualizar esto. Ya ves, ya se está moviendo. No obstante, esto no es lo que quiero. Quiero una animación más sutil así que quiero cambiar la cantidad de movimiento a tal vez 20, y luego la velocidad como un movimiento por segundo, tal vez quería tres wiggles por segundo. Analicemos desde aquí. Todavía demasiado. Cámbialo a 10, la cantidad de movimiento. Sí, eso es lo que me gusta, sutil, pero eficaz. Ahora todo lo que necesito hacer es solo copiar los efectos, Comando C, y luego seleccionar todas las demás capas, Comando V, pegando todos los efectos. Vamos a previsualizar esto. Alejar zoom. Vamos a previsualizar la animación. ¿ Ves todos están flotando en el aire? Eso es lo que quiero. Bien. Volvamos a la comp principal y echemos un vistazo. Sí, y una última cosa que quiero hacer, a medida que el edificio baje, quiero que esos iconos bajen ligeramente con el edificio para que pueda simplemente fingir que el movimiento de la cámara panning arriba. De lo contrario, si sólo se baja el edificio, y los iconos todavía se quedan en la misma posición, no parece que la cámara esté volando hacia arriba. Todo lo que necesito hacer es desde aquí, golpear a P, darle una propiedad de posición, y luego como un edificio va hacia abajo, quiero que estos iconos se muevan ligeramente hacia abajo a tal vez en el centro del marco aquí. Después haga clic derecho en asistente de fotogramas clave, facilidad fácil. Vista previa de esto. Algo así. No obstante, también quiero sólo tal vez retrasar un poco el fotograma clave, porque sé que el edificio empieza a bajar desde este segundo aquí. Pero quiero retrasar el punto de partida de los iconos moviéndose hacia abajo porque solo quiero crear ese tipo de efecto rezagado, como si el edificio estuviera arrastrando los iconos hacia abajo. Está bien, eso es todo lo que quiero mostrarles en esta lección. Echemos un vistazo a lo que tenemos hasta ahora. Hemos recorrido un largo camino. Nos dieron la primera escena, nos dieron la transición, la segunda escena, y luego la cuarta escena luce súper bonita. Siguiente video, lo vamos a terminar con el cierre del logo lockup y también la transición. Ahora recapitulemos. En este video, hablamos de sobrebrotes, uno de los principios de animación. También hablamos de cómo modificar el gráfico de velocidad para darle más energía a tu animación. Te mostré cómo copiar fotogramas clave a diferentes capas y ajustar la animación en consecuencia, wow para agregar efecto de movimiento a nuestros iconos, y también cómo escalonar capas aleatoriamente para darle un aspecto más natural. Eso es todo con este video, sigamos adelante. 13. Transición luego de los íconos: Solo retomemos de donde lo dejamos. Por aquí, aquí tenemos esta animación de icono. Ahora echemos un vistazo al storyboard original. Recuerda esta escena aquí con las constantes de ojo como ciudades. A continuación se va a hacer la transición al bloqueo del logotipo, y la forma en que me imagino es que todos estos pequeños iconos, se pueden unir al centro de la pantalla, luego desencadenar alguna transición, y tenemos el círculo cosa que aparece desde el centro de la pantalla para llenar toda la pantalla. Después transición para revelar la animación del logotipo. Eso es lo que vamos a hacer aquí. Yo quiero que pase la transición, tal vez alrededor de 9 segundos aquí. Por aquí, basta con poner el indicador de línea de tiempo alrededor de 9 segundos, en la comp principal, y luego vamos a entrar en este íconos pre-comp explicador O5, haga doble clic. Aquí está el marco de tiempo que corresponde al fotograma de 9 segundos 04 en comp principal. Este es un punto en el que quiero que esos iconos se unan en el centro. El modo de hacerlo es, en primer lugar quiero seleccionar todos los iconos. Golpea en p para mostrar la posición. Deja un marco clave, usa este ícono aquí. Ahora tengo un marco clave para bloquear la posición de esos iconos. A lo mejor ir adelante 25 cuadros 1, 2, 3, 4, 5. Después de 25 cuadros, quiero que esos iconos vengan al centro aquí. La forma más fácil es arrastrar cada uno de ellos al centro, ya que ya tengo un marco clave creado antes de este punto, una vez que arrastre la posición del icono aquí, va a crear automáticamente un nuevo marco clave, que es lo que quiero. Ahorra mi tiempo. Para crear un marco clave, solo puedo arrastrar esos iconos hasta donde deberían estar al final. Entonces va a tener la animación lista para mí. Ahora vamos a previsualizar esto. Partiendo de este punto aquí, sería establecer el rango de vista previa. Ya ves que todos se juntan. No obstante, me parece bastante lineal. A pesar de que sé que esos fotogramas clave están facilitando los fotogramas clave, pero entonces no tiene suficiente energía, recuerda que hablamos del rebasamiento. Cuando los objetos se instalan en posición, pasa por encima de algunos marcos. En este caso, quiero usar el mismo principio al inicio de esta animación aquí, y ahora ya no lo llamamos overshoot. Se va a llamar anticipación. Básicamente lo que significa es que cuando un objeto se mueve hacia la izquierda, siempre se mueve ligeramente hacia la derecha para ganar algo de energía. Entonces se va a mover a la dirección que quiere ir. Diga si quieres seguir adelante, necesitas inclinarte hacia atrás para ganar algo de energía o como decir si quieres saltar hacia arriba, siempre te pones en cuclillas para ganar algo de energía, y luego saltas hacia arriba. Entonces esa es la anticipación. También es uno de los principios de animación, y eso es lo que queremos aplicar aquí. Cuando el objeto se mueve a una dirección, quiero que se mueva primero a la dirección opuesta para ganar algo de energía, y luego ir donde quiera estar. En este caso, para cada uno de ellos, quiero avanzar tal vez de 5 a 6 fotogramas por aquí, y entonces sólo quiero que este ícono retroceda de donde fue para ganar algo de energía. Vamos a previsualizar esto. Ves que se apagó un segundo, para luego volver a entrar. Ahora echemos un vistazo a lo que tenemos en la comp principal. Aquí vuelve a tener un problema. Recuerda cambiamos la posición de esta composición 05 para bajar con el paisaje de la ciudad, y ahora el centro de esta composición dentro es diferente del centro de la comp principal aquí ahora. Recuerda cuando animamos este ícono aquí para mover todo en el centro, pero uno está afuera aquí en la estafa principal, esta posición ya no es una posición exacta como posición relativa, el centro de esta comp es en realidad más bajo que el centro del marco aquí, y eso es algo que tenemos que arreglar. Es muy fácil volver a arreglar, volvamos a la composición aquí. Entonces solo podemos seleccionar todo el último fotograma clave, que es la posición. Todo lo que necesitamos hacer es mover la posición y de este marco clave. Mueve todo hacia arriba, tal vez en algún lugar por ahí. Basta con volver a la comprobación de comp principal para ver si está en el centro. Sí, lo es. Eso me parece bien. Vamos a previsualizar esto. Ahora todos los iconos están llegando al centro. Lo último que quiero hacerlo sólo para escalonar los fotogramas clave aquí para que no todos se muevan al mismo tiempo. Sólo para dar algo de aleatoriedad. Recuerda la primera vez cuando escalonamos la animación en el frente al inicio de esta comp aquí arrastramos las capas en lugar de unos fotogramas clave. Pero ahora si vuelvo a arrastrar las capas, va a afectar los fotogramas clave frente a ella. Por eso solo estamos usando fotogramas clave para modificar el escalonamiento de la animación por aquí. Apenas [inaudible] arrastran todos estos fotogramas clave para tambalearlos. Vamos a previsualizar esta animación. Sí, algo así, y ahora adelante necesito que salga un círculo del centro. Vamos a este rectángulo también aquí, y luego haga clic en la herramienta Elipse. Ahora podemos dibujar un círculo justo desde el punto central aquí. Utilice el botón del ratón para arrastrar un círculo, y luego mantenga presionado el turno para limitarlo a un círculo perfecto. Aguanta el mando para dibujar desde el centro del círculo, y esto es lo que necesitamos. Suelte el botón izquierdo del ratón. Ahora tenemos una forma que es círculo con sólo un trazo que es de cuatro píxeles. Ahora quiero apagar el trazo. Sostenga la tecla Opción en el teclado. Haga clic aquí en el trazo, 1, 2, 3 haga clic tres veces. Apague el ícono el círculo, suba aquí, haga clic en llenar, haga clic en la herramienta cuentagotas Quiero agregar soltar este color rosa aquí, haga clic en Ok y luego encienda el icono del ojo. Aquí hay un círculo que tenemos. El círculo comenzó a partir de cero segundos. Necesito arrastrarlo hacia atrás, tal vez empezar de nuevo por aquí. Yo quiero el círculo, golpear en S en el teclado, poner un fotograma clave por ahí, y luego seguir adelante 25 fotogramas otra vez. Ahora quiero que el círculo crezca fuera del marco aquí, bonito. Seleccione los dos fotogramas clave, haga clic con el botón derecho en asistente de fotogramas clave , facilidad fácil y luego vaya al editor de gráficos. En este caso, en realidad quiero que el círculo disminuya más al final, y luego quise crecer más rápido al principio. Si arrastro la montaña así va a crecer más rápido al principio y luego lentamente se asienta en su lugar al final. Veamos cómo se ve ahora. Algo así. Yo soy bueno con eso. Pero entonces necesito duplicar este comando círculo D, y el segundo círculo se va a convertir en el color del bloqueo final. Acude a mi panel de proyectos. Aquí es cuando necesitamos cargar en el guión gráfico final, que es el bloqueo final del logotipo. Haga doble clic aquí. Haga clic en este 07 Illustrator archivo composición abierta. Recuerda poner este en el pre-comp, pon esta carpeta en los activos, y arrastra ésta hacia abajo, por aquí. Este es un color cielo que quiero al final. El segundo círculo necesita tener el mismo color que el cielo como una transición. Ahora lo que quiero hacer es solo apagar la composición 07. Ahora ves que el círculo está encima del círculo rosa que teníamos. Lo está cubriendo por completo. Basta con arrastrar este hacia atrás, empujar hacia atrás dos marcos. O tres marcos para tener algo como esto. Vamos a previsualizar esto. En este video hablamos de anticipación. Similar a los overshoots, también es uno de los principios de animación. También te mostré cómo escalonar fotogramas clave al azar, cómo dibujar un círculo y cómo modificar el gráfico de velocidad. Ahora pasemos al siguiente video. 14. Logotipos combinados: En este video, te voy a mostrar cómo hacer la revisión del logotipo. Ahora todo lo que quiero hacer es ir dentro de esta composición para animar el Logo Lockup. En primer lugar, quiero animar la Nube. Aquí tienes una Nube 1,2,3. Estas son tres Nubes. Cámbialo a un color diferente, tal vez un color azul. Selecciona los tres. Ponga P para posición. Pon ahí un fotograma clave, muévalo al quinto segundo y luego solo podemos arrastrar ligeramente la posición de cada uno para que la Nube se mueva. Otra cosa es que, ya que aquí tenemos una transición, no quiero que la Nube simplemente entre en el marco. Lo que quiero hacer es darle un cambio de transparencia, desplazar “T” por opacidad, bajar un fotograma clave. A lo mejor moverlo ligeramente hacia adelante unos fotogramas, y luego cambiarlo a cero como principio. Ahora, tenemos la Nube desvaneciéndose en la escena. Pero siento que el desvanecimiento es demasiado lento. Dale solo 10 marcos aquí. A 10 cuadros, la opacidad es de 100. A continuación, animemos este logotipo en el centro. En primer lugar, necesito dibujar esta barra amarilla en efectos posteriores. Subamos aquí, sostén esta herramienta de rectángulo hasta que veas este rectángulo redondeado. Haga clic en eso. Entonces podemos acercar, dibujar un rectángulo redondeado. Aquí hay un error que cometí. Ya que tengo seleccionada esta capa, cuando dibujo con la herramienta de rectángulo, realidad es crear una máscara en lugar de una capa de forma. Eso es lo que no quiero. Basta con eliminar la máscara, y luego hacer clic fuera de la capa. Asegúrese de que no haya seleccionado nada. Entonces podemos dibujar una capa de forma, algo así. Después podemos ir al camino del rectángulo y luego podemos cambiar la redondez. También podemos ajustar el tamaño. Solo quiero asegurarme de que sea similar al storyboard original. Ahora creo que la altura es buena, pero entonces el ancho es más corto que esta barra amarilla. Ahora solo voy a desmarcar este botón de enlace para desvincular la dimensión X e Y y luego solo puedo ajustar la posición X e Y individualmente así. Ahora que mi forma es casi la misma que la que teníamos antes, podemos eliminar este archivo de Illustrator, ya no necesitamos esto y luego arrastrar esto detrás del Smartcity.io. Esta es la forma que tenemos. Ahora quiero animar esta forma para crecer. En primer lugar, lo que quiero hacer es poner un fotograma clave en el tamaño de la trayectoria del rectángulo, y luego tal vez ir hacia adelante 10-15 fotogramas, arrastrar este fotograma clave a la marca del fotograma 15, volver a cero segundos. Entonces sólo quiero cambiar la posición X aquí hasta que se convierta en un círculo perfecto, así. Ahora, si previsuo esto, se puede ver que la barra amarilla se está expandiendo, algo así. Pero entonces quiero agregar algunos ajustes de curva para que no sea lineal. Ir al asistente de fotogramas clave “Fácil facilidad”. Recuerdo la otra forma que podemos hacer es hacer clic derecho en agregar en “Velocidad de fotograma clave”. este momento es sólo 33.33. Yo quiero cambiarlo a 66.66 sólo para darle más energía así. Eso es bueno. Entonces lo que también quiero cambiar es el tamaño de toda la forma. Quiero que este círculo amarillo empiece desde cero y luego crezca hasta el 100 por ciento. Como estoy mirando en este momento, hay un punto de anclaje que no está en el centro del círculo. Tenemos que ajustar primero la posición del punto de anclaje, subir aquí a la pluma detrás de la herramienta, arrastrar este punto de anclaje al centro del círculo para que cuando animemos la propiedad de escala, pueda crecer en el centro, algo así. A continuación vamos a añadir un fotograma clave a la escala, arrastrar la escala hacia adelante, y luego a cero segundos cambiar la escala a cero. Ahora puedes ver que desaparece. Pero si previsualizamos esto, se puede ver todo el asunto animado en. No obstante, quiero retrasar la animación de primer tamaño. Quiero que el círculo aparezca primero y luego expanda horizontalmente para convertirse en este rectángulo redondeado. Si cambio y retraso el fotograma clave de tamaño y luego también quiero hacer clic derecho asistente de fotograma clave, Fácil Facilidad, tal vez también le dé alguna influencia. Cambio de velocidad de fotograma clave a 66. Vamos a previsualizar esto. Algo así. Yo estoy contento con ello. Siguiente cosa te quiero mostrar como para animar este Smartcity.io aquí. Podemos hacerlo bastante sencillo. Vamos a animar la propiedad de posición, golpear en “P” y su clic derecho dimensiones separadas. Ahora, quiero separar la dimensión de la posición X e Y para que sólo pueda lidiar con una, que es la posición Y. Haga clic en la posición Y. Cronómetro en un fotograma clave. Esta va a ser la posición final. Yo quiero arrastrarlo hacia adelante tal vez hasta el fotograma 15. Entonces puedo arrastrar esto hacia abajo. Inicialmente se va a empezar desde aquí para luego subir a la posición y seguir el mismo proceso. Podemos añadir un rebasamiento. Ahora mismo podemos ver la posición Y es 540. Está empezando en 661, así que el rebasamiento, podemos cambiarlo a 530 como si se estuviera moviendo demasiado alto para luego volver a bajar. Seleccione los tres, haga clic derecho en “Velocidad de fotograma clave”, cambie a 66. Si nos quedamos con el mismo número para la velocidad, tu animación va a ser muy consistente y es como una cosa de branding. En tanto que a veces cuando estás diseñando algo, quieres que el diseño sea consistente, la paleta de colores sea consistente, pero ahora estamos lidiando con la animación. Si tenemos la mayor parte de la influencia o velocidad de fotograma clave con el mismo valor, la animación va a ser consistente. Es sólo algo en lo que hay que pensar. Vamos a previsualizar esto. Algo así. A mí me gusta. Pero lo que no queremos es, solo quiero mostrar el Smartcity.io dentro de la barra amarilla, no quiero mostrarlo cuando está fuera de la barra amarilla. En ese caso, lo que necesitamos es un Track Matt. Déjame mostrarte lo que es un Track Matt. Todo lo que necesito es un rectángulo aquí. Dibujemos un rectángulo para cubrir la barra amarilla. Entonces esta capa aquí va a ser nuestro Track Matt. Si hago clic en esta capa SmartCity.io y luego bajaré aquí, ahora mismo no está en mi función aquí. Necesito bajar y luego revisar este botón aquí. Me va a mostrar más opciones y hay una opción Track Matt. Yo quiero revisar este Alfa Matt. Entonces puedes ver esta capa Track Matt desaparece. Al hacer clic en él, se puede ver el borde del Track Matt. Básicamente, lo que sucede es que podemos usar esta capa en la parte superior para determinar el límite de la capa debajo de ella. Lo que significa donde sea que esta capa Track Matt sea visible, tiene píxel visible en la pantalla, la capa debajo de ella va a ser visible en la pantalla. Si cambio la posición del Track Matt, puedes ver aquí, una vez que lo muevo hacia arriba, el rectángulo se mueve hacia arriba, pero todo fuera del rectángulo es invisible. Es como una máscara que lo cubre. Eso se llama un Track Matt. En este caso, si desecho la línea de tiempo hasta cero, y se puede ver qué sucede aquí. Una vez que entra, se hace visible. Cuando está fuera de este rectángulo no es visible. No obstante, no quiero que este rectángulo aleatorio sea mi Track Matt. Yo quiero que esta barra amarilla sea mi Track Matt. Todo lo que necesito hacer es encomiar a D, duplicarlo, ponerlo encima de la capa Smartcity.io, y luego ir a esta capa 2 establecer Alpha Matt forma capa 2, por lo que la capa en la parte superior es Alpha Matt. Oops, ¿sabes por qué ahora se muestra? Porque esta capa cuando es un Track Matt, necesita estar apagado, el ícono I. Normalmente, cuando lo estés configurando aquí, cuando elijas Alpha Matt aquí va a desactivar la visibilidad para ti automáticamente. Ahora, si previsualizo esto, va a ser algo así. Sí, eso es todo lo que quería hacer, pero luego necesito tambalearme, tal vez retrasar la animación de la línea del logotipo aquí, arrastrarla un poco hacia atrás para que yo quiera que la barra amarilla crezca primero y luego salga el logo. Algo así. Es suave y natural. Tiempo de recapitular. En este video, hablamos sobre cómo usar el color de la etiqueta para agrupar capas y también cómo cambiar la velocidad del fotograma clave para manipular el nivel de energía de la animación. También te mostré el concepto de Track Matt, que se puede aplicar en muchos escenarios diferentes. Pasemos al siguiente video. 15. Eslogan y retoques finales: Ahora, podemos animar el lema. Encontremos aquí el lema. Este es mi lema. Permítanme simplemente renombrarlo lema. Para el lema, también quiero sólo hacer un cambio de posición que es P, y luego separar dimensiones, ir a cero segundo. Siempre quiero animar las cosas como cero segundo y después puedo arrastrar las capas a donde quiera. Ahora, puedo hacer clic en el cronómetro aquí en la posición Y y arrastrarlo hacia adelante. Éste, muévelo hacia abajo. Ya que esta línea es muy pequeña, no es muy visible así que no tengo que añadir un rebasamiento. Si quieres agregar un rebasamiento, puedes, pero entonces no va a ser muy perceptible. Entonces solo quiero agregar una velocidad probablemente aquí para que todo sea consistente. El movimiento va a ser consistente. Yo quiero agregar un cambio de opacidad, Shift T, traer arriba la opacidad, tal vez de 0-100 así. Yo quiero retroceder un poco, algo así. Eso es bueno. mí me parece bien. No obstante, aún quiero hacer más. Yo quiero dar en más atención a los detalles. Duplicemos tres veces el lema. Seleccione el tagline Comando D, Comando D duplicado dos veces. Ahora, tenemos tres copias. Entonces, quiero añadir una máscara en este lema. Por lo que la primera línea va a ser el “mantenerse conectado”. Sólo tienes que ir a la herramienta de rectángulo y luego con el lema seleccionado, puedo dibujar una máscara. Si solo esta capa, es como se ve ahora. Estoy dibujando una máscara que está cubriendo las dos primeras palabras y eso es lo único que se va a mostrar después de la máscara. Entonces para el segundo, lema 2, puedo dibujar una máscara en donde quiera. Entonces para el lema 3, puedo dibujar una máscara sobre “tú eres”. Básicamente, he separado el tagline en tres partes diferentes y como ya están animadas, todo lo que necesito hacer es tambalear las tres capas, escalonar la animación. A lo mejor arrastra un poco esto hacia atrás, unos fotogramas, y luego arrastra este unos fotogramas hacia atrás. Entonces, una vez que la animación del logotipo superior esté a punto de asentarse, quiero que este lema aparezca así. Simplemente muévelo hacia atrás y luego tambalea las tres animaciones. Vamos a previsualizar esto. Sí, algo así. Siento que el lema está animado demasiado rápido, así que vamos a seleccionar las tres capas, presione en U para mostrar todos los fotogramas clave. Yo quiero que sea más lento, así que quiero seleccionar tagline con tecla Shift hold en el teclado, puedo seleccionar toda la posición Y. Entonces, recuerda algo que te mostré antes con la tecla Option hold en el teclado, podemos arrastrar el último fotograma clave para espaciarlos uniformemente para dar más tiempo. Ahora, echemos un vistazo. Sí. Algo así. Yo estoy contento con ello. Ahora, lo que quiero hacer es volver a la composición principal y ahora puedo previsualizar la animación. Vamos a previsualizar. Eso es lo que parece ahora. Aquí está el tema, cuando esta composición 07 inicia, aquí hay un corte recto, pero como tenemos un fondo azul dentro de la composición, solo cubre toda mi transición. Entonces todo lo que necesito hacer es ir dentro de la precomposición y entonces tal vez ahora mismo intentemos apagar el icono de visibilidad para el fondo azul para que esta composición sea esencialmente transparente. Volvamos a la cámara principal y echemos un vistazo. También me molesta que este color azul sea diferente a este color azul, quiero cambiarlo de nuevo para hacerlos iguales. Sólo encontremos aquí este círculo que es la capa de forma 4. Entonces, vamos al relleno de arriba, golpea este cuentagotas, cámbialo de nuevo a este color azul. Veamos cómo se ve porque ahora mismo si lo cambio a ese azul es diferente del guión gráfico que conseguimos. Sí, creo que se ve bien. Se ve mejor. Ahora, hemos hecho toda la animación del video explicador, volvamos al inicio y echemos un vistazo a lo que tenemos. Está bien, esa es nuestra animación y probablemente te hayas dado cuenta de que nuestra animación termina a los 12 segundos. Ahora mismo hay un hueco de tres segundos porque recuerdan nuestro video que se supone a 15 segundos pero luego normalmente algunos explicadores, suelen tener como un segundo a dos segundos de retención al final para su logo, solo para que la gente recuerde lo que el empresa es, cuál es el producto que están tratando de promover pero entonces para nosotros en este momento tenemos brecha de casi tres segundos, que es demasiado. Es algo que hay que ajustar sobre la marcha. A veces como cuando estás trabajando, es mejor tener un cero VO, digamos que alguien puede leer primero la voz en off y luego si tienes la voz en off importada puedes animar en base al ritmo de la voz en off por lo que que puedes conseguir un ritmo bastante preciso para la animación, pero después como no trabajamos con una voz en off, acabamos de trabajar a nuestro propio ritmo. En ese caso, cuando obtuviéramos la última voz en off tendríamos que cronometrar la animación, la transición de nuevo a esa voz en off. Es solo otra solucion si no tienes el VO de primera mano. Como puedes ver aquí, trabajamos con la precomposición y todas estas transiciones son bastante simples, por lo que es muy fácil leer tiempo algunas de las transiciones para hacer una más lenta o alguna de la animación, aún podemos ajustar. Simplemente te va a costar quizá un poco más de tiempo para finalizarlo, para que sea pulido, pero te das la idea. Este es el video final de toda la animación. En este video te mostré cómo aplicar máscara a capas y además te comparto algunas reflexiones sobre el ritmo y la voz en off. En el siguiente video, te voy a mostrar cómo exportar tu animación. 16. Exportación: Ahora terminamos toda la animación, echemos un vistazo. Esa es nuestra animación de 15 segundos Explicador. Déjame mostrarte cómo exportar este archivo a un video en formato MP4. En primer lugar, tenemos que ir a aquí “Composición” y luego a “Agregar a Adobe Media Encoder Queue”. Haga clic en eso. Ahora, se va a abrir Adobe Media Encoder. Por cierto, antes de exportar, debe asegurarse de que el rango de vista previa esté establecido en el rango que desea exportar. Por ejemplo, en este momento nuestro rango es de 0 segundos todo el camino a 15 segundos. Se puede ver el encabezado de rango aquí, se detiene a los 15 segundos. Si tienes algún otro lugar solo puedes usar tu ratón para arrastrar este encabezado a donde quieras. Si arrastras a 14 segundos por ejemplo, solo va a renderizar 14 segundos. Si arrastro a 15 segundos se va a renderizar 15 segundos. Aquí vamos. Tenemos esta animación añadida a la Cola del Encoder. este momento, mi formato de exportación de animación ya está establecido en H.264, que es un formato común para el video MP4. Este va a ser MP4 de alta res, y éste es el más común. Otra opción es que también puedes exportarlo como Quick Time que es un archivo ProGres. El tamaño del archivo va a ser mucho más grande, pero la mayoría de las veces sólo necesitamos este H.264. Para la segunda columna preestablecida, solo manténgala igual que está, no cambies nada. Para la ubicación del archivo, solo puedo cambiarlo a la carpeta que quiera. Ve al escritorio, y luego ponlo en la carpeta creativa SmartCity Explicainer llamada salida, pulsa en “Crear” y ahora podemos renombrar este a SmartCity Explicainer, pulsa “Guardar”. Ahora, solo podemos tocar esos botones de reproducción verde para empezar a renderizar. Ya está hecho. Volvamos al escritorio y echemos un vistazo a nuestro video de 15 segundos Explainer. Ábrelo, ahí tienes. Es así como se exporta la animación a un video en formato MP4. 17. ¡Felicitaciones!: Enhorabuena, lo lograste. Ahora, es momento de terminar tu proyecto y compartirlo conmigo y tus compañeros estudiantes. Asegúrate de publicar tu video en el panel del proyecto para obtener retroalimentación e inspirar a otros estudiantes. Este no es un curso fácil, pero ahora lo has hecho. Si hay algo de lo que no tengas claro, siéntete libre de hacerme cualquier pregunta que tengas. Yo estoy aquí para ayudarte. Si no recuerdas algunas de las técnicas que platicamos aquí, siempre puedes volver a verlo y refrescar tus recuerdos. También tengo algunas otras clases sobre motion graphics que puedes comprobar si quieres aprender más técnicas diferentes para mejorar tus habilidades. Muchas gracias por tomar mi curso, y espero verte en mis otros videos. Salud.