Crea una plantilla de Motion Graphics: Adobe After Effects avanzado

1. Avance: Oye, soy Jake Bartlett. Soy diseñador de movimiento con sede en Denver, Colorado y llevo usando After Effects desde 2006. Esta clase es avanzada After Effects, construir una plantillas de gráficos en movimiento. En esta clase, te voy a enseñar a hacer una plantilla de motion graphics y estas plantillas o Mogrt, como a Adobe le gusta llamarlas, están diseñadas dentro de after effects como cualquier otra animación pero luego pueden ser personalizado insider Premier. Puedes darle al usuario controles específicos sobre cómo modificar y personalizar la plantilla sin necesidad de volver a las secuelas o actualizar pero aunque nunca necesites entrar en Premier, aún puedes aprovechar lo esencial panel gráfico y cómo se crean plantillas de gráficos en movimiento para acelerar su flujo de trabajo de diseño de movimiento directamente en After Effects. Para aprovechar estas herramientas, vamos a necesitar saber un poco de código y sé que eso podría ponerte un mal sabor en la boca. Si solo quieres hacer que las cosas se muevan, expresiones, el lenguaje de codificación en After Effects podría realmente apagarte pero confía en mí, una vez que las entiendas y comienzas a ver cómo puedes usarlas en tu flujo de trabajo nunca vas a dar la vuelta atrás. En esta clase, te voy a guiar a través de los mismos fundamentos de las expresiones, así como guiarte por cada expresión que usamos paso a paso para que al final de esta clase, vas a tener total confianza usando ellos en su propio diseño de movimiento. Para el proyecto de clase, estaremos construyendo una tercera plantilla baja que se pueden superponer encima de video al igual que este uno.Esta clase es para cualquiera que quiera entrar en flujos de trabajo avanzados de After Effects, ya sea realmente necesitas hacer plantillas para que los equipos de personas lo usen, o estás tratando de vender plantillas en línea o tal vez solo quieres aprovechar expresiones en tu propio flujo de trabajo personal. De todas formas, esta clase es para ti. Prepárate para empezar a escribir algún código, y te veré en clase. [ MÚSICA] 2. Expresiones básicas: Las expresiones son esenciales para hacer plantillas de gráficos en movimiento porque es el lenguaje de codificación que usa After Effects, que en realidad permite personalizar tus plantillas. Vas a necesitar tener un conocimiento básico de cómo funcionan, e incluso vamos a estar usando un par de expresiones que son bastante avanzadas. Pero no te preocupes, aunque nunca antes hayas usado expresiones, te voy a guiar a través de cada paso del proceso para que al final de esta clase, te sientas totalmente cómodo implementándolas en tus propias plantillas. Si eres completamente nuevo en las expresiones, este video es exactamente para ti porque te voy a guiar por conceptos básicos de las expresiones y cómo funcionan dentro de After Effects. En primer lugar, ¿qué es una expresión? Vamos a expresiones es el lenguaje de código que After Effects utiliza para poder hacer cosas complejas. Ese código se puede escribir básicamente en cualquier propiedad keyframeble, y una manera realmente fácil de pensar en expresiones es poder hacer cualquier cosa que los fotogramas clave puedan hacer. Si puedes controlar algo a mano usando fotogramas clave, puedes escribir una expresión para hacer lo mismo. El beneficio de las expresiones es que puede hacer que las cosas realmente complejas se ejecuten automáticamente. Ahora, las expresiones en realidad se basan en el lenguaje de código JavaScript. Podría haber oído hablar de eso antes, se usa mucho en línea, pero el código de expresiones en sí no es las bibliotecas JavaScript completas. Por lo que no tienes acceso a toda la biblioteca de códigos que es JavaScript. No obstante, recientemente Adobe sí cambió a JavaScript totalmente compatible dentro de After Effects. Si voy aquí abajo a la configuración de mi proyecto y paso a la pestaña de expresiones, ves que mi motor de expresiones está configurado en JavaScript y ese debería ser el predeterminado para ti si estás usando la versión más reciente de After Effects. Si hago clic en esto, puedo cambiar a Legacy ExtendsScript, un ExtendScript es el término de Adobe para la biblioteca de expresiones. Pero usar toda la biblioteca JavaScript simplemente abre muchas más posibilidades, realmente no vamos a meternos eso en esta clase, pero te sugiero que dejes este conjunto en JavaScript. Entonces eso es lo que es el código de expresiones, pero ¿qué podemos hacer exactamente con él? Bueno, hay mucho que se puede hacer con él, mucho más de lo que vamos a poder cubrir en una clase, pero aquí hay algunos ejemplos. Una forma de pensar en una expresión es como un padre de una capa a otra. Si fuera a hacer una capa sólida que sea de 100 píxeles por 100 píxeles, puedo padre este texto de expresiones a ese sólido, y adoptará los controles de transformación de esta capa. Entonces si lo giro, va a seguir eso, si lo escalo hacia arriba o hacia abajo, lo muevo alrededor, la capa de texto se va a mover con ella. Una forma de usar una expresión es básicamente padre o vincular una propiedad a otra. Si me quito esta relación de parentesco y abrí la rotación presionando R en el teclado para cada una de estas capas, notarás que hay otro látigo de pico aquí mismo, y esto se llama el látigo de la propiedad. Lo que esto me permite hacer es básicamente padre de una propiedad a otra. Si fuera a agarrar esta propiedad pick látigo para el valor de rotación de la capa de texto y llevarlo a la rotación de la capa sólida blanca, ahora, estos números son rojos y eso está indicando que hay una expresión aplicada a esta propiedad, y si giro el sólido blanco, la rotación del texto está adoptando el mismo valor. No está parentado a esa capa, todavía puedo moverla, escalarla hacia arriba o hacia abajo y eso no va a afectar nada, pero el valor de rotación siempre va a coincidir con el valor de rotación de sólidos blancos. Ahora, mira lo que pasa si cambio a mi herramienta de rotación e intento modificar la rotación de esta capa. No puedo, está bloqueado y eso es porque la expresión está anulando mi control de rotación. Entonces puedo cambiar el número aquí abajo, pero en cuanto lo suelto, se remonta al mismo valor que la expresión le está dando. Eso es realmente importante de entender. La expresión va a anular cualquier valor que pongas aquí, a menos que contabiques ese valor dentro de tu expresión. Otra cosa que notarás que esto agrega es una pequeña flecha desplegable. Si hago clic en eso, podemos ver expresión en la propiedad de rotación, justo aquí tenemos una línea de código, esta es nuestra expresión. Si me doy un poco más de espacio y hago clic en esto, podemos ver que hay poco editor para las expresiones es realmente útil porque nos da codificación de colores para este lenguaje JavaScript, lo cual puede ser muy útil para identificando diferentes partes de tu código. Ahora, no tuve que escribir nada de este código, todo lo que hice fue usar el látigo de pick parent para seleccionar la propiedad de rotación y automáticamente la cambió por mí. Si estás nervioso por las expresiones, esto debería hacerte permitir más cómodo, porque no necesitas saber escribir todo esto, solo necesitas poder usar su propiedad látigo rosa para agarrar algo y After Effects lo llena para ti. Ahora, si notan justo aquí tenemos algunos controles, hay otro látigo de pico y éste se llama la expresión pick látigo. Ahora bien, esto no era visible antes de usar el látigo de la propiedad pick. Entonces déjame simplemente deshacerme de todo este código muy rápido y mostrarte esos controles para la expresión desaparecen. Pero si deshago y traigo eso de vuelta, esto va a hacer exactamente lo mismo que el látigo de la propiedad. Si fuera a agarrar este click y arrastrar e ir a la rotación, se va a llenar ese mismo código exacto. Es que eso no era visible antes de añadir la expresión. Cuando Adobe introdujo esta propiedad pick whip, la expresión pick whip ya había existido, por lo que la única forma de obtener acceso a eso sería agregar una expresión manualmente, cual se puede hacer pulsando Alt en PC u opción en un Mac, y dar click en el cronómetro que agrega una expresión, y luego vemos esos controles. Pero Adobe nos hizo un poco más fácil, ahora, que tenemos esta propiedad pick látigo, así que todo lo que tengo que hacer para iniciar mi expresión es agarrar algo y automáticamente rellena ese texto para mí. Tenemos esta rotación de esta capa de texto vinculada a la rotación de la capa sólida blanca, pero ¿y si quisiera vincularla a una propiedad diferente? Bueno, en realidad puedo hacer eso. Voy a presionar turno T con ese sólido blanco seleccionado para sacar la opacidad, y qué pasa si en vez de vincular esto a la rotación, vinculo eso a la opacidad. Dejaré ir y mi texto de expresiones giró a este extraño ángulo, pero si notan son 100 grados y la opacidad es del 100 por ciento. Si bajo este valor de opacidad y miro eso, el texto de las expresiones está girando. A pesar de que se trata de dos propiedades completamente diferentes, el código de expresión es capaz de traducir el valor de esta opacidad a grados en la rotación, y es una traducción uno a uno. Entonces, cualquiera que sea el porcentaje este valor de opacidad se va a enchufar a este valor numérico el cual en realidad se mide en grados. Esta no es necesariamente una expresión muy útil, pero solo ilustra el punto de que puedes vincular cualquier número a otro número. Pero independientemente de cómo estés usando expresiones, el resultado final siempre es el mismo. Se va a generar un valor para enchufar o al valor al que has aplicado la expresión. Estos pueden ser enlaces simples entre propiedades, pueden ser cálculos con ecuaciones complejas, pueden estar basados en múltiples capas y múltiples propiedades, e incluso pueden tener condiciones para que si las casillas de verificación están marcadas o no comprobado, calcularán diferentes valores y se emitirá a este valor. Parece realmente complejo y lo es. Es un tema realmente grande y las expresiones pueden hacer tanto. Las posibilidades son prácticamente infinitas, pero solo hay un puñado de expresiones que realmente necesitas entender para empezar a aprovecharlas en tu propio trabajo, y aún menos para hacer plantillas de motion graphics, como la que estaremos haciendo en esta clase. Pero veamos otra forma en que podemos usar expresiones. En lugar de simplemente hacer referencia a otra propiedad, en realidad podemos usar expresiones para generar valores que no se basan en nada más en la comp. Estos son a través de lo que se llaman métodos y eso es solo un término de JavaScript para una pieza del lenguaje que te permite generar algo. Por ejemplo, podríamos generar un valor numérico aleatorio para la rotación para cada fotograma de nuestra comp. Para ello, solo voy a editar esta expresión y borrarla, y voy a empezar a escribir el método aleatorio que se ve así. Simplemente escribo al azar y ves que a medida que empiezo a escribir, After Effects me da esta ventana de autocompletar, esta es la biblioteca de expresiones y me está dando lo que piensa que estoy tratando de escribir. Aquí hay otras opciones que tienen un aleatorio en la palabra, pero si hago doble clic en ella, se autocompletará para mí. Ese texto está en azul, haciéndome saber que como método, no está haciendo referencia a otra parte de la capa ni a la comp o a una propiedad, y luego me da estos paréntesis. Automáticamente me da paréntesis de apertura y cierre. Cuando ves estos paréntesis, eso significa que podemos agregar más a este método para generar un número específico. Ahora, de nuevo, no quiero abrumarte, no voy a entrar en profundidad en cómo funciona este método aleatorio, pero si solo aplico la expresión, en realidad no tengo que llenar ningún número entre esos paréntesis, ya ves que mi valor es ahora 0.8. Si solo repongo esto golpeando la barra espaciadora, mira eso, el texto está vibrando. Porque en cada fotograma de mi comp, After Effects ahora está generando un número aleatorio. El motivo por el que está girando tan poco es porque por defecto está generando un valor entre cero y uno, así que por eso tengo 0.1 en este marco, 0.9 o ahí tenemos todo un valor de uno. Nunca va a ir por encima de uno o por debajo de cero. Pero si volviera a entrar en esta expresión entre esos paréntesis, podría poner en cualquier número. Digamos 20 y luego haga clic apagado, y ahora va a generar un número entre cero y 20. Si vuelvo a jugar esto, mi rotación aleatoria va a ser mucho más. Pero ¿y si quisiera ir por debajo de cero? Bueno, entonces realmente puedo agregar en un segundo número, el primer número que escriba será el extremo bajo del aleatorio, y el segundo número será el de gama alta. Si pongo en negativo 20 y lo separo por una coma, entonces tengo los valores aleatorios mínimo y máximo, puedo hacer clic apagado, y ahora se va a generar aleatoriamente un número entre el negativo 20-20, y llenar eso en cada cuadro de esta comp. Ese es un método, pero digamos que esto va un poco demasiado salvaje, no quiero que sea tan aleatorio. Bueno, hay otro método llamado wiggle y éste con el que probablemente estés familiarizado. Si alguna vez has usado expresiones, wiggle es probablemente algo que te has encontrado, pero para escribirlo, solo voy a escribir wiggle y de nuevo, se autorellena para mí, haré doble clic para autocompletar. Pone el cursor ahí mismo entre los paréntesis para mí. Ahora bien, esta expresión en particular no funciona sin ningún valor entre esos paréntesis. Hice clic y se rompió. Nada está girando e incluso me pone poco ícono de error. Si hago clic en eso, me está diciendo que tengo una advertencia. After Effects, advertir la expresión está desactivada. Hay un error en la línea 1 en la rotación de propiedades de las expresiones de la capa 2, fuente de ingresosCatTime. Pero el error aquí abajo es que el método de mudanza necesita entre dos y cinco argumentos. Un argumento es lo que va entre estos paréntesis, esos números que ponemos en el método aleatorio, ese fue el argumento. El argumento fue darme un número entre el negativo 20 y el 20. Para wiggle, no hay valor por defecto como aleatorio al de generar un número entre cero y uno si no se escribía nada ahí. Tengo que darle entre dos y cinco argumentos. Los dos argumentos requeridos más básicos son la frecuencia de este movimiento y la amplitud de la mudanza, y ahí en ese orden. La frecuencia, quiero que suceda, digamos cuatro veces por segundo. eso se mide ese valor, el número de veces por segundo. Entonces lo separo por un comentario para darle el segundo argumento, que es la amplitud, o hasta dónde puede cambiar este valor con el movimiento, y diré 180 grados. No te preocupes por los otros argumentos que se podrían poner aquí. Esto es todo lo que necesito ahora mismo. Haré clic fuera y reproduciré esto atrás y ahora estoy obteniendo un número aleatorio en cada fotograma, pero está moviendo, es una especie de flexibilización de ida y vuelta entre valores en lugar de solo darme aleatoriamente un valor único cada vez. Se puede pensar en ello como un aleatorio suave. Ahora, nuevamente quiero reiterar que no hace falta saber cómo está funcionando todo esto. No necesitas conocer todos los diferentes métodos de expresión y argumentos y lo que significan, y cuántos de ellos necesitas tener y qué representa cada uno. Esto es algo que vas a aprender con el tiempo y empezar a memorizar a medida que lo usas. Pero si alguna vez olvidas, no puedes recordar en qué orden se supone que están estos valores, en realidad hay una pequeña hoja de trucos en After Effects que te ayudará a recordar. Echa un vistazo a esta pequeña flecha de aquí. Este es el menú del lenguaje de expresión. Si hago clic en él, esta es toda la biblioteca de expresiones y está separada en categorías. Ves que hay una categoría de números aleatorios y ahí es donde podemos encontrar aleatorios. Pero debajo de aleatorio, también tenemos valor máximo aleatorio o matriz, así como valor mínimo o matriz, valor máximo o matriz y esta es la parte de la hoja de trucos de la que estoy hablando. Esto nos está diciendo cuáles podrían ser los argumentos dentro de esos paréntesis. Si pones un número, solo uno, va a ser el valor máximo que ese método aleatorio va a generar, y devolverá un valor entre cero y lo que sea que escriba. Si pondrías dos números separados por una coma, será entre el valor mínimo y el valor máximo, que es lo que hicimos. Si buscamos un poco por aquí y vamos a la categoría de propiedad, ahí está la expresión de movimiento. Esto va a enumerar todos los diferentes argumentos que se pueden poner aquí, y esto en realidad es algo que debo señalar. No todos los métodos requieren que uses cada argumento, para meneo, solo usamos los dos primeros, que fue la frecuencia y la amplitud. Tres, cuatro y cinco son mucho más complejos. En realidad nunca los he tocado si eso te dice algo. Pero el punto de esto es que si olvidas cuál viene primero, frecuencia o amplitud, simplemente baja a las expresiones, una biblioteca encuentra la propiedad o método en particular que estabas buscando y esto te dirá exactamente lo que necesitas saber. Otra cosa que puedes hacer es usar Google. JavaScript es un lenguaje de código de uso masivo y documentado y puedes encontrar explicaciones realmente profundas y claras en cualquier cálculo de argumento de método que se te ocurra en línea. Porque After Effects utiliza toda la biblioteca JavaScript, si la ves en una expresión, alguien ha hablado de ello en Internet y puedes encontrar explicaciones muy rápida y fácilmente con solo buscarla en Google. Déjame deshacer y volver a donde estábamos controlando solo una propiedad por la otra. Echemos un vistazo ahora a cómo se escribe esta expresión y ¿qué exactamente After Effects está sacando de ella? Bueno, en primer lugar, quiero señalar todos estos periodos, estos puntos, se puede pensar en estos periodos como separadores en una jerarquía y la línea general de código como una ruta. En la primera sección de este código se dice esta comp, este es el comienzo de la ruta After Effects, está empezando por decir dónde necesito buscar un valor. Vamos a decirle a After Effects, esta comp, la comp en la que estamos, y eso implica que puedes mirar otro lugar que no sea esta comp y eso es exactamente correcto. En realidad se pueden hacer referencia a propiedades en otras comps. Pero para este ejemplo, estamos viendo esta comp en la que estamos, entonces tenemos el punto, el separador de periodos, que está diciendo After Effects qué sigue. Después de que estamos buscando en este campamento, donde buscamos a continuación. Entonces vamos a ver una capa, una capa dentro de esta comp y esta siguiente sección entre paréntesis y entre comillas, tenemos un nombre de caso propio, blanco sólido 1, que es exactamente el nombre de esta capa . Es así como le estamos diciendo a After Effects que mire una capa llamada sólida blanca 1. Entonces tenemos otro periodo. Este periodo es el siguiente separador. es decir, qué sigue. Después de que miramos esa capa, qué quieres ver a continuación. Bueno, entonces entra a los controles de Transformación. Ese sería este pequeño desplegable aquí mismo, los controles de Transformar. Estamos viendo la Transformación controla otro periodo, ¿qué sigue? El inmueble de opacidad, ahí vamos. Opacidad propiedad 100. En ese punto After Effects es como: “Está bien, sé lo que estoy buscando ahora, el valor de la propiedad de opacidad”. Voy a tomar ese valor porque no hay otras expresiones ni código después de eso, voy a tomar ese valor y conectarlo directamente a la propiedad en la que está escrita esta expresión, que es la rotación para esa capa de texto. De nuevo, no necesitas saber escribir código como este. No es algo que hago regularmente, o uso la propiedad, pick látigo o la expresión pick látigo constantemente. Pero es realmente útil entender la estructura de una expresión para que puedas identificar problemas si las cosas empiezan a no funcionar y puedes leer mejor lo que se está escribiendo dentro de esta ventana de código. Eso es lo básico de las expresiones y cómo funcionan dentro de After Effects. No te preocupes si te sientes abrumado, puedo recordar cuando empecé a usar expresiones, estaba completamente apagado a la idea de usar código en mis gráficos en movimiento. Pero una vez que realmente empiezas a usarlos y ves el poder y las posibilidades que abren dentro de tus diseños, nunca vas a volver atrás. No te preocupes si nunca los has usado antes. Si este fue un video muy abrumador, está bien. El resto de esta clase, vamos a usar expresiones muy específicas y te voy a caminar a través de cada una de ellas muy lentamente. Vamos a hacer mucha repetición para que al final de esta clase, te vas a sentir totalmente cómodo implementándolos en tus propios diseños. 3. Variables: En esta lección, vamos a echar un vistazo a las variables. Se puede pensar en una variable como la taquigrafía dentro de sus expresiones. Hace que todo sea mucho más eficiente, e incluso hace que tu código sea más fácil de ver y solo poder leer. Echemos un vistazo a un ejemplo. No vamos a hacer nada demasiado emocionante, sino sólo para demostrar para qué es una variable, vamos a entrar en los controles de transformación y otra vez a la rotación. Empecemos a escribir una expresión aquí en el conocido ALT y pinchando en ese cronómetro. Yo quiero darme un poco más de espacio aquí, déjame solo ampliar esto. De esa manera, esto es sólo un poco más fácil de ver. Ahora, como dije, una variable es como taquigrafía dentro de tu código. Digamos que quiero conducir la rotación por la propiedad de opacidad. Cuando cambia la opacidad, también cambia la rotación. O podríamos hacerlo de la misma manera que lo hacíamos antes, cual sería usando la expresión pick whip, y luego seleccionando el valor de opacidad y simplemente haciendo clic, y luego después de efectos rellenaremos la expresión que necesita para hacer referencia a que propiedad. En los controles de transformación estamos viendo la opacidad. Por cierto, la razón por la que no tenemos este comp, esta capa, todo ese material extra es porque está en la misma capa. Estamos viendo la propiedad de opacidad para la misma capa. After effects está asumiendo automáticamente cuando no agregamos en eso, esta comp.layer y luego variables, está asumiendo que todo eso ya está ahí, cuando no se agrega nada de ello en. Si no estás diciendo after effects para hacer referencia a una capa diferente o a una comp diferente, entonces va a suponer que estamos tratando con la capa en la que estás escribiendo la expresión. En fin, solo aplicemos eso, y ahora la rotación se corresponde directamente al nivel de opacidad de 0-100 grados. Pero también puedo almacenar este código en lo que se llama una variable. Veamos cómo podemos escribir eso. Bueno, voy a dejar esto como está e ir antes ese código y escribir en var para variable y luego un espacio, y luego necesito darle un nombre. Esto será lo que usaremos como taquigrafía. Para la opacidad, solo voy a usar la variable o, solo una letra minúscula o, y luego otro espacio igual al espacio y luego al final de la línea, voy a poner un punto y coma, y así se termina una línea de código en una expresión. Pero en conjunto, esto es sólo decir que estoy definiendo una variable, la estoy llamando o, y eso va a igualar estoy llamando o, y eso va a igualar el valor de transformación de opacidad cada vez que haga referencia a esa letra o, esa variable, más abajo en mi código . Si aplico esto realmente voy a obtener un error de expresión, porque esta no es una expresión válida. No está dando after effects ningún valor, es solo un poco de código para hacer referencia a otra propiedad. Si hago clic en esto, me va a dar el error aquí mismo, diciendo que hay un valor indefinido utilizado en esta expresión, lo que significa que no le estoy dando un valor con este código. Lo que necesito hacer es bajar una línea y tal vez dos solo para darme un poco más de espacio, y luego poner un valor en. Esto puede ser un valor codificado. Si pongo 90 y hago clic, me va a dar un valor de 90. Pero quiero que sea el valor de opacidad y lo definí como la letra o.Si solo selecciono ese 90 y escribo minúscula o, y pongo un punto y coma para terminar esa línea de código, click off, ahí vamos. Eso ahora me está dando el mismo valor que tenía antes cuando acababa de usar la expresión pick látigo. Ahora, esto por sí mismo, obviamente no me está salvando en cualquier momento definiendo esa variable y luego haciendo referencia a esa variable, porque todo lo que tendré que hacer para que esta cosa en particular funcione es agarrar esta expresión pick látigo y click en opacidad, y hace exactamente lo mismo. Eso voy a deshacer. El poder de esto es cuando estás usando expresiones mucho más complejas, que estamos a punto de meternos. Tener esta taquigrafía que hace que sea mucho más fácil simplemente mirar tus expresiones, que no tengas largas líneas de código por las que vadear y confundirte, y hace que sea mucho más fácil escribir tus expresiones porque solo estás usando lo que sea que definas tus variables como. Ahora me doy cuenta de que todo esto podría parecer bastante abstracto en este punto. Estamos usando ejemplos muy sencillos y en realidad no están haciendo nada. Pero confía en mí, una vez que empecemos a implementarlas en nuestras plantillas de motion graphics, todo va a tener sentido y vas a estar muy contenta de que ya supieras de ellas antes. 4. sourceRectAtTime: Ahora, en realidad vamos a empezar a construir nuestra plantilla de gráficos en movimiento. Todo comienza con la expresión SourceRectatTime. Esta expresión es un poco confusa aunque hayas usado expresiones antes porque nos puede dar muchos valores diferentes, pero esos valores son muy importantes para lo que la vamos a usar para lo que es dimensionar un rectángulo, a una capa de texto sin importar lo que se haya escrito en ella. Entonces esto es lo que nos permite darle al usuario de nuestra plantilla la capacidad editar un campo de texto y que el diseño actualice de la forma en que queremos que se vea. No importa lo que se escriba ahí, la caja siempre va a dimensionar a ese texto. Entonces no te preocupes si ya estás un poco abrumado con expresiones, te voy a guiar por esto muy despacio y lo vamos a reutilizar mucho. Entonces echemos un vistazo. Ahora antes incluso de sumergirnos en eso, solo quiero señalar algo sobre JavaScript y expresiones. Esto empezando con una letra minúscula y luego cada palabra después de que sea mayúscula se llama caso camello porque es como jorobas de camello subiendo y bajando. Esa es una forma muy común de escribir tus expresiones, pero también es la forma en que se escriben la mayoría de los métodos en JavaScript, comenzando con una minúscula y cada palabra después de eso se está mayúscula. Entonces esa es la sintaxis técnica de cómo se escribe esta expresión, pero ¿qué significa exactamente? Bueno, SourceRectatTime es solo el nombre del método y significa que nos está dando el rectángulo de fuente en un momento dado. El rectángulo de origen es el cuadro delimitador de cualquier capa. Por lo que estos controles de transformación, si conectara todos estos puntos, haría un rectángulo y la expresión SourcRecttatTime nos va a dar las dimensiones o el tamaño de ese rectángulo, pero eso es solo el primero la mitad. También está la mitad AtTime, lo que significa que si el tamaño de esta capa cambia por cualquier motivo el contenido cambia o dice que animaste este texto, ese rectángulo fuente se va a actualizar a la hora actual en tu línea de tiempo. Entonces, cualquiera que sea el tamaño que sea en cualquier punto dado, esto nos dará el valor de ese tamaño de rectángulo. Tenemos aquí estos paréntesis que nos permiten sumar algunos argumentos. Hablaremos de esos en un rato. Pero esto por sí solo en realidad no nos va a dar lo que necesitamos porque hay cuatro propiedades diferentes que podemos sacar de SourceRectatTime, y necesitamos las cuatro para que esto funcione. Esos valores son el ancho del rectángulo, la altura del rectángulo, el valor izquierdo, y el valor superior. Por lo que el ancho y la altura tienen sentido. Es el ancho de la caja y la altura de la caja. Pero, ¿cuáles son los valores de izquierda y superior y por qué son importantes? Bueno, si acerco aquí, bonito y cerca de esta capa de texto, notarás que el punto de anclaje para esta capa de texto está en la esquina inferior izquierda. Para cualquier otra capa, suele estar justo en el centro de la capa. Pero la razón por la que esto está en la parte inferior izquierda es porque esta capa de texto es diferente a una capa sólida o una capa de forma. Puedes teclearlo y a medida que escribes, va de izquierda a derecha porque mi párrafo está configurado para justificar a la izquierda, puedo alinear esto al centro y luego el punto de anclaje se alinea al centro horizontalmente, pero verticalmente , todavía está abajo en la parte inferior de la capa de texto. Si justo lo justifico entonces está del lado derecho, pero aún desfase hacia abajo verticalmente. Voy a cambiar esto de vuelta a izquierda justificada. Hablemos de por qué es esto. Bueno el texto y la tipografía en general tiene lo que se llama una línea de base. El punto de referencia es básicamente donde está sentado tu texto. Ahora esta es una fuente estilizada, por lo que no es muy simétrica. Esta pierna en la A, está más baja que esta pierna. Pero si acerco realmente cerca. Se puede ver que ese punto de anclaje está bastante abajo cerca de donde descansa esta ida de la A. Si traigo mis reglas presionando control o comando R, y luego hago clic y arrastre para hacer una guía, alinéela con el punto de anclaje para esta capa justo ahí en el centro de ese punto de anclaje. Quiero ser súper preciso para ilustrar esto. Entonces ahí, mi punto de anclaje ahora está centrado hacia arriba, alinearse perfectamente con esas guías. Te darás cuenta de que muchas de estas cartas están descansando ahí mismo en esa guía. Esta es la línea de base para el texto. Los caracteres para las fuentes están diseñados encima de esta línea de base de para la alineación. Entonces ahí es donde after effects pone verticalmente el punto de anclaje para una capa de texto. Si bien parece que el punto de anclaje está alineado horizontalmente con el borde izquierdo de esta capa de texto, en realidad puede estar ligeramente apagado y no es muy visible con este personaje en particular. Pero si pruebo a un personaje diferente como una Y, y luego hago una pandilla un poco, se puede ver que la punta de este Y en este brazo de aquí mismo va más allá de ese punto de anclaje. Por lo que me gusta llamar a este punto horizontal el origen de la capa de texto. Esta es otra guía que el diseñador de tipos diseña allí tipo off. Algunos personajes se superpondrán, otros se alinearán con él. Pero after effects está colocando este punto de anclaje en esta posición porque fue como se diseñó el tipo con ese punto en mente como el origen de una capa de texto. Entender eso va a ser muy importante en tan solo un poquito. Pero ahora que lo entendemos, sólo volvamos a nuestra capa de texto. Voy a deshacerme de mis guías y esconder a mis gobernantes, y vamos a centrar esto de nuevo. Entonces voy a conseguir eso justo en el medio y hagamos un rectángulo. Entonces voy a ir a mi herramienta de rectángulo y hacer doble clic sobre ella. Lo arrastraré por debajo de este texto y justo ahí está bueno y necesito llegar al tamaño de este rectángulo. Entonces entra al grupo de rectángulos, al camino del rectángulo, y aquí tengo mi tamaño y posición. Estas son las dos propiedades a las que necesitamos agregar expresiones para este cuadro de texto se ajuste a este texto y se adhieran a él pase lo que pase. Entonces primero solo trabajemos en el ancho y la altura de SourceCtatTime, y enchufemos eso directamente al tamaño de este rectángulo. Entonces para agregar una expresión, recuerda que mantienes presionada Alt u Option en un Mac y haz clic en ese stop watch y luego podemos empezar a escribir la expresión. Entonces digamos SourceRect y after effects auto completa el resto del mismo por mí, haré doble clic en él. Por lo que tenemos sourcerectatTime, paréntesis abiertas y cerradas. No necesito poner nada dentro de esto todavía. Pero iré después de ese paréntesis de cierre y añadiré un punto, que recuerden es como un separador en la jerarquía. Entonces after effects es ver, quieres que use SourceRectatTime y luego qué? Bueno, quiero que encuentres el ancho y eso es todo. Solo quiero la propiedad width, y cerraré esto con punto y coma y aplicaré la expresión y no pasa nada. En realidad estoy recibiendo un error. Esto en realidad es por un par de razones diferentes. Para un sourcerectattime.Width por sí solo no está dando después de efectos suficiente información. Necesita saber de qué rectángulo de origen queremos que saque. En este caso, queremos que sea de esta capa de texto, y no especificé eso. Entonces déjame darme un poco más de espacio para ver esto. Quería encontrar una variable para esa capa de texto. Entonces hagámoslo. Voy a entrar en esta expresión y luego justo antes de la fuente rect en la expresión de tiempo que escribimos, voy a bajar una línea y en el tipo superior en VAR para espacio variable y luego llamaré a este TXT para texto. Recuerda que puedes nombrar eso como quieras. Simplemente voy a hacer que sea fácilmente identificable como TXT para texto y luego el espacio es igual al espacio. Usaré la expresión pick web para hacer clic y arrastrar a la capa de texto. No necesito entrar en ninguna de las propiedades. Solo te digo después de efectos, esta es la capa a la que quiero que me hagan referencia. Dejaré ir eso, lo llena, solo quiero asegurarme de que termine esa línea con punto y coma. Ahora tengo una variable para esa capa de texto. Siguiente Necesito ir al inicio de esta línea de código y escribir txt. para comenzar esa ruta para After Effects diciéndole, "Mira que las capas de texto fuente rect a veces, propiedad width”. Ahora voy a aplicar eso, y todavía tengo un error. Solucionamos un problema, pero aún tenemos otro. Averiguemos cuál es ese error. Si hago clic en este signo de advertencia, me está haciendo saber que la expresión está desactivada. Abajo en la parte inferior, está diciendo que el resultado de la expresión debe ser de la dimensión dos, no una. Lo que esto está diciendo es que solo le estoy dando un valor unidimensional, pero necesito que tenga dos dimensiones y eso se debe a mi valor de tamaño es en realidad dos valores diferentes, un ancho y una altura. Si estoy calculando un solo valor, se rompe porque después de f_x está esperando dos valores. A esto se le llama matriz. Cualquier propiedad que utilice más de un valor. Déjame mostrarte cómo escribes una matriz en una expresión muy rápidamente. Simplemente voy a seleccionar toda esta línea haciendo triple clic en ella y luego cortarla. Control X o Command X en un Mac, y en lugar de una expresión, solo voy a escribir un valor codificado en una matriz. Para ello, voy a presionar el corchete izquierdo, secuelas pondrán automáticamente un corchete de cierre para mí solo, así que no lo olvido, eso es algo que tienes que hacer. Pero ahora puedo escribir dos valores entre estos corchetes. Digamos que quiero que el ancho sea 400. Escribiré eso y luego presiono “Coma”, para separar los dos valores en la matriz y para la altura, digamos que quiero que sean 150. Pasaré y terminaré eso con punto y coma y aplicaré esto. Ahora mi tamaño de rectángulo es de 400 por 150. Exactamente lo que escribí aquí. No está usando esta variable y la expresión que corté no está siendo evaluada obviamente. Pero así es como escribimos una matriz, corchetes y dos valores separados por una coma. Si fuera una propiedad tridimensional, si fuera una capa 3D, entonces necesitarías hacer tres números, cada uno separado por esa coma. Ahora que sabemos escribir esta matriz, quiero intercambiar este primer número, el ancho de esta propiedad de tamaño con esa expresión que había cortado. Déjame pegar eso de nuevo ahora Control V o Command V en un Mac, y ahora tenemos esa variable para esta capa sourceCtatTime width dentro de este primer valor. Solo necesito asegurarme de que me quite ese punto y coma, porque eso solo va al final de tu línea de código. En el ancho, deberíamos estar obteniendo el ancho de la capa de texto a la que estamos referenciando y la altura sigue fijada en 150. Simplemente voy a hacer algo de limpieza muy rápido antes de aplicar esto y bajarlo una línea más. Así es como me gusta escribir mis expresiones de variables separadas por una línea de la expresión real. Pero ahora podemos hacer clic fuera que se aplique y mirar eso. El cuadro de texto tiene exactamente el mismo ancho que la capa de texto. Ahora no está alineado a la perfección, pero si solo lo muevo y mantén pulsado Control o Comando en un Mac, puedo ajustarlo al mismo centro de esa capa de texto y ahora está alineado. Si hago clic fuera de ella, se puede ver que está perfectamente alineado con el tamaño del texto. Pero, ¿qué pasa con la altura? Bueno, volvamos a nuestra expresión y solo copie lo que tenemos aquí y peguémoslo en lugar de este valor de 150 codificado. pegaré ahí y todo lo que necesito hacer es cambiar ancho a alto, y eso sacará el valor de altura del rectángulo fuente para esa capa, lo aplico, y ahí vamos. Nuestra caja tiene un tamaño perfecto para ese texto. Pero si echamos un vistazo a esta expresión una vez más, esto no es todo tan fácil de ver e identificar. Es una larga línea de código con un montón de textos repetidos. En realidad podemos limpiar bastante esto si usamos algunas variables más. Una gran cosa de las variables es que tan pronto como lo hayas definido, puedes empezar a usarlo en la siguiente línea. Voy a agregar otra variable desplegable, digamos espacio VAR, y luego voy a nombrar a este w para el espacio ancho es igual al espacio. Y lo que quiero aquí es lo que tengo aquí abajo en mi matriz para el ancho. Sólo voy a cortar eso y pegarlo aquí arriba. Termina esa línea con punto y coma y luego voy a bajar otra vez VAR h para espacio de altura es igual a espacio, y luego selecciona este texto, córtalo y pégalo aquí arriba, rematarlo con punto y coma. Por cierto, todos estos espacios es puramente para la organización visual. JavaScript no presta atención a los espacios ni a los saltos de línea. Podrías tener todos tus textos en una línea sin espacios y sería capaz de leerlo muy bien. Pero como humano, es mucho más fácil identificar y organizar visualmente tu código si espacias cosas y lo divides por líneas. Pero volviendo a nuestra expresión, tenemos las tres de nuestras variables para la capa de texto, el ancho de SourceRectatTime y la altura de SourceRectatTime. Ahora tenemos una matriz vacía, pero solo puedo enchufar w para ancho y h para altura. Aplícalo. Nada cambia. Nos da exactamente el mismo resultado, pero es mucho más fácil leer nuestra expresión real. Ahora, todas las cosas complicadas están aquí arriba en nuestras variables y todo está organizado por línea. Es fácil escoger y modificar si es necesario. En realidad puedo limpiar esto aún más si tomo el rect fuente a tiempo parte de la expresión en cada una de estas variables y cortar eso y lo incluí en la variable de texto fuente, lo pegaré justo después del texto. Ahora puedo deshacerme de ese rect fuente a la vez tanto en la variable ancho como en altura y es mucho más fácil de leer ahora. Ahora solo estoy mirando el ancho de las capas de texto y la altura de las capas de texto. Eso podría parecer un poco inútil, pero me permite entonces modificar lo que hay entre estos paréntesis en el método de rect de fuente en tiempo para ambas de las siguientes variables, que vamos a necesitar hacer en un poco para conseguir nuestra caja para funcionar correctamente. Se puede pensar en estas variables como precomps. Es una forma de almacenar información que vas a reutilizar una y otra vez. Al igual que animar con precomps y hace que una animación sea más rápida y eficiente. Las variables pueden hacer que las expresiones sean mucho más eficientes. Si hago clic fuera de esto y para aplicarlo, verás que obtenemos exactamente el mismo resultado, pero es solo un bloque de código mucho más limpio a mirar. Las variables son muy fáciles de identificar y nuestro array es extremadamente simple. Tenemos el tamaño del cuadro de texto a la capa de texto ahora, deberíamos poder escribir algo más aquí. Bueno, déjame solo editar esta capa de texto y decir algo más y, bueno, eso no funciona exactamente, ¿verdad? En primer lugar, si muevo mi capa de texto alrededor de la caja no se está moviendo con ella y viste que esta bandeja de entrada se estaba expandiendo, pero no es lo mismo. Eso se debe a que las capas de textos o al menos ésta se deja justificada, Se está expandiendo de izquierda a derecha, y ese punto izquierdo nunca se mueve. Pero sólo estamos agregando una expresión a, la propiedad de tamaño de esta ruta de rectángulo, y si desactivo esa expresión realmente rápidamente, al hacer clic en este pequeño signo igual azul que habilita o deshabilita la expresión, y simplemente ajusta el ancho del tamaño. Se puede ver el tamaño de ese rectángulo desde el centro de la capa, no desde el borde izquierdo. Eso en realidad tiene sentido. Esta expresión está haciendo lo que se supone que está haciendo en este momento, que es tamaño de la caja al tamaño de la capa. No tiene nada que ver con la posición de la caja. Nosotros sólo tenemos una parte del problema resuelto. Vamos a volver a habilitar esa expresión y voy a escribir esto de nuevo para sólo decir texto, así que es un poco más pequeño. Echemos un vistazo al siguiente número que es conseguir que el cuadro siga la capa de texto. Bueno, esto es realmente fácil. Solo necesito primero alinearlo y mantener presionado el control para encajar nuevamente en el centro de la capa, por lo que está perfectamente alineado con ese texto y luego solo voy a padre esta capa a la capa de texto. Ahora donde vaya el texto, la caja va con él. Déjame simplemente cambiar el nombre de este cuadro de texto solo para organización y te mostraré el próximo número. Si voy al panel de caracteres y hago algo así como tal vez lo cambié a todas las tapas. Ve ese cuadro de texto desplazado hacia la izquierda y si cambio el tamaño del texto, está escalando de nuevo desde el centro de la capa, pero la capa de texto se está escalando desde su punto de anclaje. Nuevamente, esto es exactamente lo que debería estar pasando. La única propiedad a la que hemos agregado una expresión es el tamaño. ¿ Cómo podemos conseguir que funcione el posicionamiento? Bueno, déjame deshacer volver a donde tenemos este texto muy bien alineado y voy a colapsar la propiedad de tamaño solo para que tengamos más espacio. Justo por debajo del tamaño se encuentra la propiedad de posición. Esto es lo que necesitamos para poder desplazar la caja alrededor de izquierda y derecha y arriba y abajo y debido a que esta capa está dimensionando desde ese punto de anclaje, recuerda que el origen de la capa de texto se alinean la línea base en el borde izquierdo que origen del texto, aquí es donde van a entrar en juego el SourceActTime, la izquierda y los valores superiores. El valor de la izquierda es la distancia entre el borde izquierdo de la capa de texto y el origen de esa capa de texto y el valor superior es la distancia entre la parte superior de la capa y la línea base. Si conocemos esos dos valores, entonces podemos cambiar el punto de anclaje para este cuadro de texto, específicamente la ruta del rectángulo para que no esté en el centro de la capa, sino alineada al origen de esa capa de texto y te mostraré cómo hacemos eso ahora mismo. Pasemos a la posición y añadamos una expresión. Ahora en realidad podemos reutilizar mucha de la expresión que ya escribimos en el tamaño. Déjame volver a eso, y sólo lo copiaré todo. Copiar y luego volver a mi expresión de posición y pegar. Ahora esto no nos va a dar lo que queremos, esto es tomar valores de tamaño y enchufarlo a la posición, no lo que queremos. Volvamos a esa expresión y empecemos a modificar algunas cosas. En primer lugar, esta primera variable puede permanecer exactamente igual. Queremos hacer referencia a la capa de texto sourceActTime pero para el ancho y la altura, necesitamos modificar un poco esto y para explicarlo un poco más fácil, voy a simplemente hacer un nuevo rectángulo y voy a dimensionarlo a 100 por 200, y vamos a mover esto aquí arriba para que sólo podamos enfocarnos en ello por un segundo. Vamos a entrar en ese Rectángulo, Posición y Tamaño. Estos son los dos valores de los que debemos preocuparnos. A medida que muevo la posición alrededor, verás que el punto de anclaje se queda en el centro. ¿ Qué debo hacer para que esto esté en la esquina superior izquierda? Bueno, si echamos un vistazo a estos dos valores entre el tamaño y la posición y cómo están relacionados, parece que la mitad del tamaño será la posición que necesitamos para que eso esté alineado, lo cual tiene sentido. mitad del ancho y la mitad de la altura desde el centro del rectángulo nos llevarán a la esquina superior izquierda. Otra forma en que podría haber hecho esto se acaba de decir hacer la posición la mitad del tamaño. En una expresión solo podría usar la propiedad pick látigo para seleccionar el tamaño y si abrimos esto y echamos un vistazo, notarás que no me está dando ningún error a pesar de que solo tenemos una línea de código. Esta es una matriz, así que pensarías que necesitamos dos números. Bueno, si agrega una expresión a una matriz y hace referencia otra propiedad que también es una matriz con el mismo número de valores, entonces no tenemos que escribirla en una matriz. Automáticamente va a tirar el primer valor en el primer valor y el segundo valor en el segundo valor. Pero se puede ver que el punto de anclaje está aquí arriba, y mi rectángulo se movió hacia abajo hacia la derecha porque solo está tirando de los mismos números exactos. Yo quiero la mitad de eso. Al final de esta línea de código, solo voy a decir dividirlo por 2 y luego aplicarlo y ahí vamos. Ahora esa esquina superior izquierda del rectángulo está alineada con el punto de anclaje de la capa. Si tamaño esto ahora va a escalar desde esa esquina superior izquierda. Esa fue la ilustración, ahora realmente la implementemos en nuestro cuadro de texto. Ahora mismo se está escalando desde el centro, pero queremos que escale desde la esquina superior izquierda. Sólo volvamos a nuestra expresión y sumamos divididos por 2 hasta el final del ancho y los valores de altura para este SourceActaTtime. Eso es todo lo que necesito cambiar, si hago clic en “Off”, el rectángulo ahora está alineado su esquina superior izquierda con el punto de anclaje de la capa. Ahora ya no está alineado en el texto, así que sí necesito hacer clic y arrastrar de nuevo, mantener pulsado el control, y ajustarlo al centro pero ahora ahí vamos, esquina superior izquierda, está alineado. Pero no terminamos, ese es solo el punto de partida. No queremos que se escala desde la esquina superior izquierda, queremos que escala desde donde está el punto de anclaje en la capa de texto. Bueno, recuerda esa parte de altura de puntos de SourceActTime, porque nos da la diferencia entre la altura de la capa y esa línea base, y en este momento nuestro cuadro de texto está alineado con los bordes superiores izquierdos de esta capa de texto, por lo que es ya en el punto de partida donde medimos la distancia desde, en el sourcereactAttime.Left y el sourcereactAttime.Top. Vamos a tener en cuenta esas cosas en nuestra expresión. Voy a bajar otra línea y agregar una variable que es l para la izquierda, espacio es igual al espacio txt.left; y recuerda que esa es toda esta línea de código, y luego solo estamos agregando el.left, y luego bajaré otra línea, var, t para top, espacio es igual a espacio, txt.top;. Ahora tengo esas dos variables y las puedo factorizar en mi matriz. Queremos tomar donde está ese punto de anclaje ahora mismo y agregarle el valor de la izquierda que esta variable aquí mismo nos va a dar. Voy a decir ancho más l para izquierda y altura más t para top. Si hice todo bien, voy a aplicar esto y debería funcionar. Ahora el cuadro de texto sí se movió hacia arriba, pero si hacemos clic en él y echamos un vistazo, el punto de anclaje está ahora en la esquina inferior izquierda, y eso es lo que queremos. Si zoom realmente bonito y cierro, se puede ver que no está perfectamente alineado con la esquina inferior izquierda de la caja, pero tampoco lo es el punto de anclaje para esta capa de texto. Esto parece que está funcionando. Bajemos esto una vez más. Lo agarraré, pincharé y arrastraré en ese punto de anclaje y mantén pulsado Control o Comando, lo ajustaré a los puntos de anclaje de capas de texto, y ahora intentemos escribir otra cosa. Algo más. Mira eso. El cuadro de texto está perfectamente alineado con esa capa de texto. Si lo hago todo gorras, si cambio su tamaño, si cambio su justificación, siempre se va a apegar a ese texto porque estamos basando la posición fuera de la línea base y origen de esa capa. Entre dimensionar correctamente la caja y colocarla correctamente, este cuadro de texto siempre va a ir exactamente donde necesita. Pero podrías estar pensando que eso no se ve tan genial, no necesariamente quiero que sea exactamente el tamaño de esa capa de texto, y tienes razón. Esta es sólo la base base. Piénsalo como construir una casa. Es la capa de cimentación que luego podemos construir encima. Para que este cuadro de texto sea un poco más grande, ya que se trata de una capa de forma, todo lo que necesito hacer es entrar en el Contenido y agregar rutas de desplazamiento. Ahora, tengo este slider muy fácil de controlar básicamente para aumentar o disminuir el margen para mi texto. De nuevo, esto cambiará en base a lo que pongas en este texto. Se actualizará dinámicamente para que siempre se ajuste a él y como es un rectángulo, incluso podría entrar en él y decir redondearlo si quisiera ser más como una forma de píldora, es tan fácil como eso. Pero esta es la verdadera base de cómo vamos a construir plantillas dinámicas que respondan a lo que sea que se escriba en ellas. Sé que fue toda una información lanzada contra ti, ojalá seas capaz de absorberla y tiene sentido. Creo que en este punto, si estás a la altura, deberías empezar a meterte en After Effects y tratar de recrear lo que te mostré cómo hacer, ver a través de él conmigo. Puedes ralentizar la velocidad de reproducción o simplemente estar deteniéndola pero en realidad deberías intentar codificar esto por ti mismo para que puedas ver qué cosas te podrían tropezar y cómo puedes conseguir que todo funcione juntos para realmente hacer una caja que tamaños al texto. Ahora podrías estar pensando que esto no es lo que quiero que luzca mi plantilla, pero la realidad es con una capa de texto y sobre todo con el tercio inferior, casi siempre vas a tener un rectángulo detrás de esa capa de texto, o tal vez tú quieren agregar dos líneas. Bueno, vamos a meternos en eso en la siguiente lección. Así que no te cuelgues demasiado del look real de tu plantilla en este punto, solo tienes que saber que esto es realmente fundamental para hacer una plantilla de motion graphics que sea lo suficientemente dinámica como para darle a alguien para que sepas que siempre va para mirar de la manera en que lo quieras. Pero adelante y salta ahí, empieza a escribir tus propias expresiones y llega al punto donde puedes tener un rectángulo dimensionado a esa capa de texto, no importa lo que hagas con esa capa de texto. Buena suerte. 5. Animar con expresiones: Ahora que tenemos esta base de trabajo, en realidad podemos empezar a animarla para que realmente sea un diseño de movimiento. Entonces echemos un vistazo a cómo podemos trabajar con expresiones, que nos permitan animar algo que es dinámico como esto. Voy a agregar realmente rápidamente un animador de texto a esta capa, que si no estás familiarizado con los animadores de texto, revisa mi clase, The Ultimate Guide to Text Animators en After Effects, donde te enseño absolutamente todo lo que necesitas para saber de ellos. Pero sólo voy a hacer una animación a escala muy simple. Añadiré eso y luego modificaré esto solo un poquito. Vamos a cambiar la “Escala” a 0. Por lo que escala todos mis personajes hacia abajo y voy a cambiar el “Selector de rango” dentro de los controles avanzados de “Cuadrado” a “Ramp up”. Ahora mientras animo el “Offset”, puedo limpiar esto. Así que vayamos al principio de la comp, pongamos un fotograma clave en 100 negativo en el desplazamiento, y luego vayamos hacia adelante tal vez 20 fotogramas y volteemos todo esto hasta el 100 por ciento. Ahora esto se va a animar, y puedo hacer esto un poco más bonito, si agarro la “Facilidad Baja” y subo eso. Eso es como la facilidad de salida para cada uno de los personajes individuales. Entonces que ahora anima en realmente agradable y la caja lo sigue. Porque recuerda que tenemos SourceRectatTime. Por lo que la fuente “Rectángulo” para esta capa en este momento dado es este tamaño y a medida que avanzamos, cambia de tamaño dinámicamente. Eso es genial, si eso es lo que quieres que se vea. Pero digamos que no quiero que esa caja se escale con el texto, quiero animarlo independientemente del texto y solo que se resuelva o termine con el tamaño correcto sin importar qué texto se escriba aquí. Bueno, ahí es exactamente donde entra en juego los paréntesis de cierre de apertura en SourceCtatTime. Entonces volvamos a sumergirnos en nuestras expresiones. El modo realmente fácil de subirlos es seleccionar la capa que tiene las expresiones y pulsar dos veces la tecla “E”. Entonces solo voy a tocar “E” “E”, y eso trae todas las expresiones para esa capa. No necesito preocuparme por la posición ahora mismo, sólo me preocupa el tamaño, así que colapsaré eso. Vamos a saltar aquí. Entre los dos paréntesis, aquí es donde podemos determinar en qué momento estamos leyendo el valor del rectángulo fuente. Ahora, por un segundo en mi comp, mi animación sobre el texto está completa. Entonces, ¿por qué no simplemente empezamos por ahí como nuestro punto de referencia. Queremos obtener el rectángulo de origen en un segundo en esta comp. Entonces si volvemos a nuestra expresión en medio de esos dos paréntesis, solo voy a escribir uno porque es El Valor del Tiempo se mide en segundos y basta con hacer clic en “Off”. Ahora si restrego mi animación, bueno, está haciendo algo, pero no está haciendo exactamente lo que queremos. Es del tamaño correcto todo el tiempo, pero se está moviendo. Eso se debe a que nuestro valor de posición realmente necesita ser modificado un poco. Si entramos en ella, esto también está usando SourceRectatTime. Entonces todo lo que necesito hacer es entrar en esta expresión y agregar la a ese SourceRectatTime también. Si aplico eso, ahora ese rectángulo se va a quedar del tamaño que se supone que es al final de la animación y no se moverá porque está agarrando el valor sourceCtatTime en un segundo e ignorando todo el otro tiempo en el cronología. Pero mira lo que pasa. Voy a subir los fotogramas clave presionando “U” con esa capa seleccionada. Si agarro estos dos fotogramas clave, y los recorro más allá de la marca de un segundo, tan pronto como lo haga, esa caja empieza a ser más pequeña otra vez. Es porque el valor SourceRectatTime en un segundo ya no es el final de la animación. Por lo que la caja está mirando básicamente un valor de rectángulo de 00. Ahora bien, si muevo estos de nuevo al inicio y realmente muevo toda la capa, vas a notar que lo mismo no es cierto. Porque este valor de AtTime es en realidad relativo a la capa, no a la comp. Entonces esto es un segundo en esa capa. Es posible que no lo hayas sabido, pero cada capa tiene un punto de inicio. Para demostrártelo, si alargo esto atrás en el tiempo, ves que tenemos estas diminutas marcas de hachís. Simplemente te están haciendo saber que esto se extiende más allá del punto de partida de esa capa. Entonces aunque lo haga, no está afectando el valor del tiempo. Este sería técnicamente tiempo negativo en esta capa. Por lo que mover esta capa a tiempo no afecta la expresión. Son los fotogramas clave dentro de la capa en relación con el punto final o el fotograma inicial de esa capa lo que importa. Pero ahora que tengo esa configuración, podría animar el rectángulo independientemente del texto. Entonces, ¿por qué no simplemente movemos esta capa de texto fuera del camino, y decimos que quiero que esto se escale desde el lado izquierdo hacia el lado derecho y luego que el texto se anime. Bueno, echemos un vistazo a la estructura de esta capa y veamos qué buena manera de hacer esto podría ser. Si entramos en el grupo “Rectángulo” y voy a renombrar esto muy rápidamente y llamar a este grupo de cuadro de texto, sólo para que entienda que es un grupo, no es una forma. Porque cada grupo en una capa de forma tiene sus propios controles de transformación. El camino del rectángulo en sí, esta forma tiene un tamaño y una posición. Esos son valores únicos a la forma del trazado del rectángulo. Pero cualquier grupo de formas tiene controles de transformación.Así que en lugar de meterse con los valores de tamaño o posición que todos listos tienen expresiones en ese rectángulo, voy a usar los controles de transformación del grupo de formas para animar esto. Echemos un vistazo a la propiedad Scale. Quiero desvincular la x e y animar en la x Ahora está todo listo básicamente haciendo lo que quería porque el punto de anclaje está cerca de ese lado inferior izquierdo. Pero de nuevo, no es exactamente donde necesita estar porque se basa en el punto de anclaje de la capa de texto, recuerda. Entonces, ¿qué necesitamos hacer para conseguir que el punto de anclaje para que este grupo de formas se alinee no sólo al borde izquierdo del rectángulo, sino también al borde izquierdo de este margen que incluimos? Bueno, vamos a usar algunas de las mismas expresiones. En primer lugar, quiero que la posición sea cualquiera que sea el punto de anclaje. Mantener esos dos valores iguales, evitará que el grupo de formas realmente se mueva alrededor en pantalla. Déjame mostrarte a lo que me refiero. Si compenso esto por, digamos, 100 píxeles en la posición. Déjame teclear eso. Entonces también compensé el punto de anclaje por 100, luego es justo de vuelta donde empezamos. Entonces como quiero mover ese punto de anclaje alrededor para que se alinee hasta ese borde izquierdo, solo voy a usar el látigo de recolección de propiedad, y agarrar ese valor de punto de anclaje para que el valor de posición siempre sea idéntico al ancla punto. Si muevo el punto de anclaje ahora, el propio grupo de formas no se mueve. Déjenme cero eso atrás. ¿ Cómo conseguimos que esto vuelva al borde izquierdo? Bueno, necesitamos escribir una expresión. Entonces mantengamos pulsado “Alt” u “Option” en un Mac y pinchemos en ese cronómetro y escribamos en algunas variables. En realidad al igual que antes, podemos reutilizar algunas de las mismas variables. Entonces vayamos a la trayectoria del rectángulo, a la posición, y solo copiemos todas las variables que tenemos aquí. Por lo que el texto fuente, el ancho, altura, los valores izquierdo y superior de la fuente naufragaron en el momento. Voy a copiar eso, volver a mi nueva expresión y pegar. Entonces estas son solo las variables, ¿qué queremos que sea la matriz? Bueno, tenemos que dar cuenta de este valor de offset, que está siendo impulsado por un pulso de desplazamiento. En realidad necesitamos agregar esa variable también. Bajemos una línea tipo “VAR”, y solo usaré o para offset, y luego necesitamos encontrar ese valor. Voy a conseguir un error por un segundo mientras encontramos esto. Pero ahí está, trayectorias de desplazamiento, y necesito usar este valor de cantidad. Entonces bajo esa variable, voy a usar la expresión pick látigo, agarrar la cantidad y cerrar eso con punto y coma. Vamos a colapsar esto hacia abajo para que podamos ver lo que estamos haciendo de nuevo y empezar a escribir nuestra matriz. Por lo que empezaré escribiendo un corchete izquierdo After Effects termina fuera el correcto. Para el valor x en este punto de anclaje, quiero que sea el valor de desplazamiento menos el valor de la izquierda. Recuerde que la izquierda es la distancia entre ese punto de origen y la izquierda de la capa de texto. Entonces diré o más l. Asegúrate de terminar esa línea con punto y coma. Entonces haré una coma por el segundo valor y por la altura, dejémosle un cero codificado por ahora. No voy a estar animando eso, así que dejarlo en cero en realidad está bien. Entonces vamos a aplicar eso y a ver qué pasa. El cuadro no se movió, así que esa es una buena señal, pero vamos a acercar aquí con esto seleccionado. Podemos ver que el punto de anclaje no es donde queremos que esté. Está del lado derecho, queremos que esté por aquí en el lado izquierdo. Eso se debe a que las direcciones positivas del eje son correctas y arriba. Por lo que agregar valores positivos del desplazamiento y de la izquierda en realidad lo está empujando en la dirección equivocada. Por lo que en realidad necesito restar el desplazamiento. El “l” puede permanecer igual, ese valor de borde izquierdo debe agregarse. Pero necesitamos que esta o sea un número negativo. Entonces sólo voy a volver a mi expresión y escribir un menos antes de esa o, y vamos a obtener un desplazamiento negativo más el valor izquierdo. Si aplico eso y vuelvo a mirar ese punto de anclaje, acercaré bien y cerraré, y miraré eso. Está 100 por ciento perfectamente alineado con el lado izquierdo de ese rectángulo, incluyendo nuestros trayectos de desplazamiento. Aunque baje y aumente esa cantidad, el punto de anclaje siempre se va a pegar a ese borde izquierdo ahora. Lo que eso significa es que el grupo de formas, que contiene la trayectoria del rectángulo, ahora se puede animar en esa propiedad de escala desde el borde izquierdo y ese borde izquierdo no se moverá. Entonces eso es exactamente lo que necesitaba. Establezcamos un fotograma clave en esa escala y solo presione “U” y para mostrar justo ese fotograma clave. Traeré esto tal vez a 20 cuadros en. Entonces en el fotograma uno, cambiaré el valor x en esa escala a cero. Juega eso atrás y ahora tenemos este escalado hacia arriba. Puedo hacer que esto se vea un poco más bonito, si entro en el editor de gráficos, asegúrate de que estoy en el gráfico de velocidad, y luego agarrar este mango y hacer de esto una bonita curva afilada. Ahí vamos. Por lo que ahora tenemos este cuadro de texto escalando hacia fuera al tamaño del texto animado final. Si traigo esa capa de texto de vuelta, ahora puedo cronometrar esto para empezar a animar, incluso al mismo tiempo que está el cuadro de texto. Ahí vamos. Tenemos una animación de trabajo y esto se actualizará dinámicamente sin importar lo que escriba aquí. Entonces si dije “Skillshare”, se va a animar. Si la hice una palabra más corta como top, todavía se va a animar y ese rectángulo va a cambiar de tamaño pase lo que pase. Aquí es donde las cosas empiezan a ponerse realmente divertidas porque podemos empezar a jugar con el diseño y crear gráficos que estén basados en la forma del texto que están detrás. Podría agregar un segundo cuadro de texto solo duplicando esto, ya que todas esas expresiones se van a copiar también. Llamaré a éste “Caja de acento”. y moveremos el cuadro de texto y la capa de texto hacia adelante en el tiempo un poco para que podamos enfocarnos en este primero y tal vez cambiaré ese color de relleno para que sea del mismo color que los textos. Algo así. Vamos a conseguir ese color exacto para que seamos consistentes. Ahora vamos a tener que salir esta primera caja y sólo le daré un par de marcos, tal vez dos marcos, para después sacar la siguiente caja. Entonces ahora tenemos esa linda línea de acento saliendo para empezar. De nuevo, puedo cambiar esto a mi nombre, si quisiera, y bajarlo un poco para que encaje en la pantalla, reposicionarlo, hacer lo que necesite, y todo es dinámico. Si bien creo que es realmente importante que entiendas exactamente lo que está pasando aquí, por eso pasé tanto tiempo tratando de darte detalle y explicación posible en estas expresiones, la realidad es que, una vez que se tiene esto construido, nunca hay que rehacer esto. Puedes guardar este archivo de proyecto y usarlo como una plantilla avanzando. De hecho, puedes llegar a “Archivo”, “Guardar como” y luego cambiar el tipo After Effects a proyecto de plantilla After Effects. Lo que esto hará es guardar un proyecto After Effects que al abrirlo no modificará este archivo de plantilla. Creará un nuevo proyecto basado en lo que hayas guardado dentro de esta plantilla. Por lo que podrías simplemente guardar esto como la plantilla de cuadro de texto y será la base para cualquier diseño que quieras crear a partir de ese punto. Por lo que es importante entender cómo todo esto está funcionando, pero no tienes que poner todo este trabajo cada vez que quieras hacer una plantilla. De verdad espero que seas capaz de ver las posibilidades que las expresiones se están abriendo dentro de After Effects. En el próximo par de lecciones vamos a empujar aún más este diseño para convertirlo en un tercio inferior. Voy a tener un poco más de animación a ella, algunas características más e incluso vamos a estilizarlo un poco más. En este punto, debes entrar ahí y tratar de animar esto por ti mismo y asegurarte de que todo se esté actualizando correctamente cuando cambies la capa de texto, cambies la fuente, cualquier cosa que hagas, que se preserve la animación. No te pongas demasiado colgado en el diseño de la plantilla en este punto. Está bien que sea sólo un rectángulo detrás del texto. En algunas lecciones, vamos a echar un vistazo a cómo estilizar esto y cómo en realidad puedes convertir esto en algo que se ve un poco más divertido que el texto encima de una caja. 6. Crear un tercio inferior: Ahora, que tenemos este cuadro dinámico y vinculado a nuestro texto, vamos a convertirlo en un tercio inferior. Me gusta usar mi título en acción guías guardadas para alineación para esto, es una buena práctica. Sólo voy a ir a mi pequeña guía y menú de cuadrícula y encontrar las guías guardadas de acción del título. El botón apóstrofo del teclado es el atajo para activar y desactivar eso, y este rectángulo de aquí es la caja segura del título. Para transmitirse en televisión, es práctica general no tener textos fuera de esa caja y por si acaso se recorte algo en las pantallas de la gente. Pero también es solo un buen buffer entre el borde de la pantalla y donde quieres leer este texto. Ahora, quiero que esto tenga dos líneas, no sólo la única línea de texto. Este texto no se va a sentar tasa en esta guía y probablemente sea demasiado grande. Déjame reducir un poco esto y tecleemos mi nombre. Simplemente usaré mi nombre como ejemplo y acercaré bonito y cerraré y señalaré que mi punto de anclaje no está tocando esta guía segura de título y eso es porque recuerden algunos personajes podrían superponerse a esos puntos de anclaje. Sólo me estoy dando un poco de buffer. Está bien que esa caja vaya más allá porque no es el texto real. Es justo lo que hay que leer debe estar dentro de esas guías. ¿ Cómo conseguimos una segunda línea aquí? Bueno, voy a simplemente duplicar lo que ya tengo y hacer algunas modificaciones. Seleccionaré tanto el texto Línea 1 una forma Cuadro de Texto 1 y los duplicaré Comando o Control D, y solo los agruparé en la parte superior por ahora. Voy a hacer doble clic en la capa de texto y decir diseñador de movimiento. Este cuadro de texto obviamente no está siguiendo esta nueva capa de texto y eso se debe a que las expresiones no se actualizan cuando las dupliques. Siguen haciendo referencia a esta primera línea de texto. El único motivo por el que se está moviendo con él es porque la relación de paternidad sí se traslada cuando se duplica. Se supone que quiero que estas dos capas duplicadas preserven la relación padre-hijo que ya tenían las dos originales. Tenemos que modificar algunas de las expresiones aquí dentro. Tocemos dos veces E para que aparezcan todas las expresiones y echemos un vistazo a lo que necesitamos modificar. Bueno, antes incluso de entrar en cualquiera de estos, se puede ver que la primera variable y estas tres expresiones todas usan el texto fuente de la Línea 1 justo aquí y porque son todas bonitas y organizadas, todo lo que necesito hacer para que la caja sea de tamaño y alineado a esta segunda capa de texto va a cada una de estas y cambiar el nombre de la capa de la Línea 1 a la Línea 2. Simplemente lo haré por cada una de estas expresiones. Todas las variables ahora están haciendo referencia a esa segunda capa de texto y así, mi cuadro de texto ahora está animando y dimensionando y alineando perfectamente a esta segunda línea. A partir de aquí voy a escalar un poco esto hacia abajo, tal vez voy a hacer estos 48 puntos y bajarlo por debajo de la otra capa de texto, estoy manteniendo el turno mientras muevo esto para restringirlo al eje y cuando me muevo. A lo mejor quería por ahí, lo que quiero hacer a continuación es asegurarme de que esté alineado a esta capa de texto en el eje horizontal. Simplemente voy a la línea principal 1 a la línea 2 y presione “P” para subir la posición y ver que el valor x ahora es cero, que significa que es el mismo valor relativo a la Línea 1. Puedo saber por cierto que esos están alineados y son 85 píxeles abajo en el eje y de la capa de texto original. Simplemente voy a mover mi cuadro de texto a capa abajo debajo del Cuadro de texto 1, para que no se superponga esa capa de texto original y necesito asegurarme de darme más espacio que esto. Porque recuerden, algunas letras tienen descendentes, así que si pongo un g minúscula aquí mismo, esa pernita en la g es un descendiente fuera de la línea base, que se ve bastante apretada en esa segunda línea. Voy a bajar eso un poco más, solo dale un poco más de espacio para respirar y eso se ve bastante bien. Pero quiero señalar que aquí mismo, si me acerco bien y cierro, hay una pequeña discrepancia entre los dos cuadros de texto. El nuevo cuadro de texto está apenas ligeramente a la derecha y eso se debe a la fuente destrozada en el valor de la izquierda del tiempo. El valor de la izquierda para esta capa de texto es diferente al valor de la izquierda para esta capa de texto porque hay diferentes caracteres. Recuerda, depende del primer personaje de la línea de texto. Para este segundo cuadro, en lugar de tomar el valor de la izquierda de esta capa de texto, quería tomarlo de la primera capa de texto para que esto siempre esté perfectamente alineado en el borde izquierdo. Déjame tocar doble E en Text Box 2 una vez más y no necesitamos preocuparnos por el tamaño de la caja, queremos que eso siga igual. Pero es la posición y el punto de anclaje los que van a necesitar sólo una ligera modificación. Vamos a entrar en la expresión de posición y necesito una variable para hacer referencia a esa primera línea de texto. Voy a duplicar esta primera línea. Así que triple click en él para seleccionar todo el asunto, copiar, soltar una línea y luego pegar y me desharé de esa línea extra, y vamos a llamar a esta variable Texto 2, sólo por simplicidad, y necesitamos cambiar la Línea 2 de nuevo a la Línea 1. Esta es la capa de texto original que tiene mi nombre en ella. Entonces solo necesitamos usar esa fuente para nuestra propiedad de punto izquierdo. Bajaré a la variable L y cambiaré texto a Texto 2. Ahora, estamos consiguiendo que la fuente naufragada en el momento punto valor izquierdo de la capa de texto original que tiene mi nombre escrito. Si bien estoy aquí, sólo voy a copiar todo esto porque después lo vamos a aplicar y hacer exactamente lo mismo para el punto de anclaje. Ya se puede ver que esa costura se ha ido ahí ahora perfectamente alineada. Pero ahora necesito cambiar el punto de anclaje es para que la animación suceda fuera de ese borde. Porque si hago una copia de seguridad aquí mismo, es muy sutil, pero se puede ver justo ahí al inicio de esa animación, no es escalar desde el lugar correcto. Vamos a entrar en esa propiedad de punto de anclaje, entrar en esa expresión y sólo voy a reemplazar todo por encima esta variable offset porque esta no era parte de esta expresión. Pero voy a pegar aquí que agrega en esa línea extra, cambia L a Texto 2, si aplico esto, ahora todo debería funcionar perfectamente. Se escala fuera del punto derecho y se alinea correctamente al borde izquierdo. Eso resuelve ese problema. Desde aquí podemos jugar con la forma en que se reproduce la animación, este momento ambas líneas se están animando al mismo tiempo exacto. Podría agarrar la Línea 2 y el Cuadro de Texto 2 y simplemente sacarlos hacia adelante un poco y luego se van a compensar, Eso es genial. Mi primera línea tiene esa caja de acento que ponemos. A lo mejor quisiera duplicar este cuadro de texto y llamarlo Accent Box 2 y luego podría agarrar ese mismo color y pegarlo y luego simplemente recorrer la segunda línea hacia adelante un poco a tiempo. Creo que fueron sólo dos marcos, ahí vamos. Ahora, tenemos esa caja de acento en cada marco. Ahora bien, sugeriría que recortes cualquier capa que esté oculta una vez terminada la animación. Estas dos cajas de acento, una vez que están completamente tapadas, que estarían al final de la animación de cuadros de texto, así que califica ahí. Voy a recortar esto, sólo para que ya no esté sentado ahí y lo mismo para éste. Voy a ir al segundo cuadro de texto a donde eso está completamente animado encendido y recortar ese cuadro de acento fuera en el mismo lugar. Enfriar. Ahora, digamos que estoy contento con la forma en que se ve esto, excepto que quiero modificar ese margen. Bueno, ahora que tengo un montón de duplicados, tendría que entrar en cada una de estas cajas y modificar ese operador de trayectorias offset para hacer eso. De hecho, empecemos a construir algunos controles para hacer estos ajustes un poco más fáciles. Voy a hacer un nulo subiendo a capa un nuevo Objeto Nulo y voy a nombrar a estos controles. En esta capa voy a añadir un efecto. Subiré a Effect hasta Expression Controls y estos efectos no hacen absolutamente nada por su cuenta. Simplemente están ahí para controlar las expresiones, razón por la cual se les llama controles de expresión. El offset pads amount propiedad es sólo un número. Vamos a controlar esto con un deslizador. Voy a añadir un control deslizante y se ve así. Es solo un valor de deslizador y me da un número, no hace nada por sí solo, es solo un valor numérica. Vamos a nombrar esto, cantidad compensada. Lo hice solo seleccionando el efecto y presionando “Enter” y luego escribiendo nuevamente “Enter”. Ahora, quiero mantener visible este efecto, incluso cuando haga clic en otra capa, ya ves como hago eso, se va. Entonces con esta capa seleccionada, voy a dar clic en este icono de candado bajo el panel de controles de efectos y ahora aunque haga clic fuera de esa capa, se va a quedar aquí arriba y ser visible. Eso es útil porque ahora lo que quiero hacer es buscar en estas cuatro capas. Seleccionaré a los cuatro para la propiedad cantidad y notarás que esto trae hasta las expresiones que tienen ese término en él. Pero quiero encontrar este offset pads uno en cada una de estas capas y lo que haré es vincular este valor de cantidad a ese control de deslizador. Usando el látigo de la propiedad, voy a hacer clic y arrastrar y llegar hasta los controles de efectos. Esto incluso funciona en un panel diferente, así que solo seleccionaré ese deslizador, soltaré y ahora ese valor está siendo impulsado por este deslizador. Si lo incremento o lo disminuyo, podemos ver que eso sucede. Voy a poner eso a 15 por ahora, sólo para que pueda ver la diferencia y luego hagamos eso por las otras cajas. Bajo trayectorias offset cantidad para la siguiente caja, voy a usar la propiedad pick látigo a gramo ese slider, fácil es eso y lo haré por las dos cajas restantes. Ahora, todos esos están vinculados hacia arriba, puedo usar este deslizador para ajustar esos trayectos de desplazamiento e incluso podría ser un poco más fácil si giro esto hacia abajo y puedo ir de 0 a 100. Si querías cambiar ese valor por alguna razón, solo puedes hacer clic con el botón derecho en el deslizador y decir editar valor, y puedes cambiar el rango de este deslizador. Ahora bien, no necesito hacer eso, así que voy a dejarlo exactamente como está. Pero ahora tenemos la capacidad de modificar ese margen sobre la marcha desde este controles nulo que creamos. Estos no son necesariamente controles que queremos darle al editor que va a estar usando esta plantilla en Premiere, pero es una forma realmente genial de trabajar dentro de After Effects. No hay que estar constantemente buscando valores, abriendo y cerrando capas todo el tiempo. En cambio, solo tienes una ubicación central para tus controles. Añadamos un poco más de personalidad a esta animación, para que no sea tan estática. Quiero que salga este primer cuadro y luego mueva hacia arriba a medida que esta segunda línea se anima. momento, realmente no puedo hacer eso porque esta capa de texto está parentada a la primera capa de texto. Rompamos en realidad esa relación. Simplemente me quitaré eso y también voy a mover la segunda línea. Necesito asegurarme de tener seleccionadas las tres capas, sacarlas adelante fuera del camino por un segundo. Nuevamente, lo que quiero hacer, es que esto salga y luego suba a esta posición. A lo mejor alrededor de este punto es donde quiero que termine en este punto. Voy a agregar un fotograma clave de posición presionando Alt Shift P o Command P en un Mac y luego hacer una copia de seguridad, tal vez 10 fotogramas, Shift más la tecla de página arriba en el teclado, y desplazar esto hacia abajo, tal vez por ahí. En esta parte de la animación podría incluso hacer que se deslice un poco. A lo mejor una línea que arriba con la animación del cuadro de texto para que deje de moverse en este punto. Añadiré otra velocidad de fotogramas clave aquí y luego volveré al inicio de la capa y recorreré esto un poco, no todo el camino hasta la pantalla, tal vez justo a punto de aquí y de hecho empujo este fotograma clave hacia atrás incluso antes de que esa capa comience para que esté alineada con el cuadro de texto. Ahora, tengo esta animación que sale y sube, solo necesito aliviar todo. Vamos a entrar en ese gráfico de velocidad de propiedad de posición, facilmente todo y solo traiga estas asas para que sean un poco más extremas, tal vez algo así y solo voy a trabajar un poco en el cronometraje. No necesito ninguna flexibilización fuera de ese primer fotograma clave y el segundo movimiento es un poco extremo. Vamos a espaciar eso un poco más, darle un poco más de tiempo y modificar esta curva sólo un poco, eso se ve bastante bien. En este punto que se está moviendo hacia arriba, es cuando quiero que el siguiente cuadro de texto esté animando en. Vamos a ir justo por aquí donde empieza a moverse y agarrar esas tres capas, traerlo de vuelta y probablemente iniciarlo justo por ahí. Ahora, podemos volver a jugar esto y ver cómo se ve todo juntos. En este punto tengo un tercio inferior de trabajo, que se puede ver aquí mismo. Es totalmente funcional a pesar de que es bastante básico. En este punto, probablemente quisiera entrar y empezar a ajustar las cosas para que las cosas sean más visualmente interesantes y eso es exactamente lo que vamos a hacer en el próximo par de lecciones. En este punto, debes volver a After Effects y si necesitas esas dos líneas de texto, asegúrate de que puedas llevarlo a un punto de trabajo, pero juega con la forma en que anima. Haz diferentes fuentes, usa diferentes animadores de texto y personalízalo como quieras. Entonces podemos pasar a la siguiente lección donde llevamos esto un poco más allá y empezamos a personalizar la forma en que todo se ve. 7. Recorrido por el diseño estilizado: En esta lección, te voy a guiar por cómo tomé la plantilla que creé hasta este punto, y la empujé más agregándole un toque más estilístico y algo de textura, una animación de texto un poco más divertida, y solo mostrarte cómo realmente puedes empujar esto para que luzca como siempre quieras. Si quieres descargar este archivo de proyecto, solo puedes ir a la pestaña Proyecto y Recursos, y mirar en el lado derecho de la página y luego puedes caminar por todo esto y diseccionar cómo lo hice. No te voy a mostrar específicamente cómo lo hice, pero te guiaré por lo que cambié y cómo sigue funcionando. En primer lugar, acabo de animar el texto de manera diferente por lo que es aleatoriamente barajando estos caracteres y esos personajes están siendo enmarañados en la forma base, esa capa de cuadro de texto. El modo en que hice eso fue solo usando el efecto mate set, que permite hacer un mate basado en cualquier capa. Elegí el cuadro de texto una capa, y me aseguré de usar efectos y máscaras porque eso me lleva a mi siguiente cambio, que era estratificación sobre efectos. Este cuadro de texto uno, tiene un desplazamiento turbulento que lo está haciendo no tan perfecto. Se puede ver que redondeé las esquinas del rectángulo, pero luego le agregué este desplazamiento turbulento. Es por eso que debes asegurarte de que los efectos y las máscaras estén habilitados en ese efecto mate conjunto, que esté prestando atención no solo a la capa, sino también a los efectos que se le aplican. Detrás de eso, agregué esta capa de textura, que nuevamente usa set mate para mantenerla dentro de los límites de esa caja, pero es solo una textura animada que se ve así usando un efecto de ruido turbulento. Entonces también tengo esta línea inicial que sale, esto al igual que un acento ondulado o línea que lleva a toda la animación. Eso se hizo modificando otra copia de esta caja base. Déjame mostrarte cómo hice eso realmente rápido. Si entro en el contenido, echa un vistazo al rectángulo, entra en la trayectoria del rectángulo. Todo es exactamente igual excepto dentro de la expresión de tamaño. Tengo una variable para el texto fuente, tengo una variable para el rect fuente a tiempo, y tengo una variable para el ancho. No por la altura sin embargo, porque quería que la altura fuera cero, para que esto sólo fuera una sola línea en lugar de una caja entera. Una vez que tuve eso, pude agregar un recorte paths al grupo, que pudiera animar esta línea entrando y bajando. Sólo vamos a solista eso por un segundo y apaguemos este zigzag. Se puede ver que es solo una línea recta animando hacia fuera, pero el ancho de la misma se basa en la capa de texto, siempre se alineará con ese cuadro de texto. Después acabo de agregar un zigzag y modificar las propiedades para que fuera un poco más garabateado, y cuando pones todo eso juntos, obtienes algo que se ve así. Pero al igual que todo lo demás, puedo cambiar este texto para decir algo más y se va a actualizar con él. Vamos a jugar esto atrás, ahí vamos. Esa línea es más larga, la caja es más larga. Todo es dinámico y se actualiza a lo que sea que escribas. Ese es el factor clave para hacer que estas plantillas funcionen dentro de premier. Ahora, que has visto hasta dónde empujé mi diseño, quiero que entres ahí y empiezas a personalizar tu propio diseño. El mío es muy plano en 2D, pero podrías agregarle efectos de iluminación para darle más sombreado y más profundidad, o en realidad podrías hacerlo 3D. Todo está siendo impulsado por esas expresiones, lo que realmente no importa lo que le hagas a tu diseño en este punto. Puedes hacer que se vea como siempre quieras. Porque pusimos todo este trabajo fundacional, todo se va a actualizar dinámicamente. Entra ahí, juega con él y diviértete un poco. Como siempre, puedes hacerme preguntas si te encuentras con algún problema con tu diseño específico. Siempre estoy aquí para ayudar. 8. Exportar tu plantilla: Ahora que mi diseño está buscando la forma en que quiero que lo haga, necesito realmente convertirlo en una plantilla. Eso es lo que vamos a echar un vistazo en esta lección. Bueno, aquí es donde entra en juego el panel Gráficos Esenciales. Sube a “Ventana”, y la mía se está recortando, pero solo sube a “Gráficos Esenciales”, y abre ese panel hacia arriba, y el mío está atracado justo aquí, junto a mis Controles de Efectos. Creo que este es un lugar bastante conveniente para tenerlo, así que lo voy a dejar ahí mismo. Lo que este panel de Gráficos Esenciales nos permite hacer es agregar controles que queremos darle al editor dentro de Premier. La cantidad de flexibilidad que le das al editor depende enteramente de tus necesidades. Digamos que eres un diseñador de movimiento diseñando un paquete gráfico para que los editores lo usen. Bueno, entonces probablemente tengas una guía de estilo a la que quieres que se adhieran esos editores, y no quieres que cambien cosas como colores y fuentes. Simplemente quieres darles la capacidad de cambiar el texto dentro de Premier; preservando el diseño que has creado en After Effects, pero permitiéndoles, digamos, hacer múltiples Tercios Inferior y cambiar el nombre para no tienen que volver a ti por esos gráficos. Bueno, empecemos por ahí. Bajo el panel Gráficos esenciales, primero necesitamos establecer la composición Maestra, así que selecciona ese desplegable y ve a la comp que quieras usar. Digamos que éste que dice “Tercer Bajo 2", y luego obtenemos algunos controles. Automáticamente trajo lo que piensa que podría querer, que eran dos capas de texto. Ciertamente, eso es exactamente lo que quería, pero si el panel de Gráficos Esenciales alguna vez trae algo que no querías, simplemente selecciónelo y presiona la tecla “Eliminar”. Está bien. Ahora que he hecho eso, necesito traerlo de vuelta, así que vamos a agarrar “Línea 2". Tenemos que seleccionar una propiedad específica, no toda la capa de texto. Si hago clic y arro esto hacia arriba, se puede ver que no va a traer eso, pero si expando esto hacia abajo, entra en el texto, y luego encuentro la propiedad “Texto fuente”, esto es lo que puedo arrastrar hacia arriba y traer aquí. En esta columna de la izquierda, aquí, es lo que mostrará el nombre del control como en Premier, por lo que necesitamos cambiar el “Texto de origen” a “Línea 2". En este punto, puedo escribir cualquier cosa que quiera en el contenido real, y se actualizará en After Effects, así que podría decir, “John Doe”, haga clic fuera de él, y se va a actualizar en After Effects. Entonces si quisieras, incluso podrías construir unos controles globales, aquí mismo en el panel Gráficos esenciales, y usarlo directamente en After Effects. De hecho, si anulo la selección y solo digo, Solo Supported Properties, va a traer hasta arriba todas las propiedades tu composición que el panel de Gráficos Esenciales pueda realmente controlar. manera similar a la forma en que creamos controles sobre este objeto nulo, el panel Gráficos Esenciales también puede manipular esos controles y darte un lugar central para modificar las cosas a través de tu proyecto. Yo diría que esa es una forma inteligente de trabajar si necesitas controlar las cosas a través de múltiples comps. Si solo estás controlando cosas dentro de una sola comp, entonces generalmente solo crearé un objeto nulo y le agregaré mis controles de expresión. Pero digamos que querías darle ese control de “Offset Import” al editor. Ya sé, en este caso en particular, probablemente no lo harías. Solo quieres darles los campos de texto. Pero digamos que por alguna razón lo hiciste. Bueno, atamos todos los controles de desplazamiento para esas capas de forma a este deslizador. Ahora que todos esos están siendo impulsados por este deslizador único, puedo agarrar ese deslizador y traerlo en lugar de traer la cantidad de desplazamiento para cada una de esas capas de forma, una por una, aquí. Eso es algo que el panel de Gráficos Esenciales no puede hacer. No puede controlar múltiples valores con un solo control a menos que lo vincules con expresiones a algo como este controlador de expresión que hemos configurado. Pero ahora que está aquí, puedo renombrarlo, “Offset Amount”, y a medida que ajuste este deslizador, se va a reflejar dentro del visor de comp. Volvamos a poner eso a 20 y echemos un vistazo a esta tercera columna, por aquí. En esta propiedad, un control de deslizador, puedes editar el rango igual que te mostré antes en los controles de efectos reales. Pero, ¿qué es esto “Editar propiedades” en los controles de texto? Bueno, vamos a averiguarlo. Estos son realmente importantes porque eres capaz de dar a los editores la capacidad de habilitar fuentes personalizadas, para que puedan cambiar la fuente; puedes darles controles para cambiar el tamaño de la fuente, e incluso puedes dar ellos controles para los estilos de imitación, como imitación negrita, imitación cursiva, cosas así. Estos no serían controles que me gustaría darle a un editor cuando tenga una guía de estilo de set, pero si estás intentando crear algo que tal vez quieras vender; sobre todo en Adobe Stock, esos son realmente requeridos de ti; tienes que darle al usuario la capacidad de elegir la fuente y el tamaño de la fuente; cosas así. Entonces aquí es donde irías a hacerlo. Solo para entender que eso hace que tus plantillas sean mucho más complicadas porque le da a la plantilla mucha más oportunidad de no funcionar como lo pretendías. De todos modos, voy a dejar todos esos sin marcar y hacer clic bien, y estos tres controles son todo lo que realmente necesito darle a mi editor. Antes de terminar esto, primero quiero ponerle nombre, y llamaré a esto, “Skillshare L3", por un tercio más bajo, y voy a hacer clic en el “Set Poster Time”, que nos da una captura de pantalla, básicamente, de nuestra plantilla, que será visible en Premier. ¿ Por qué no cambiamos esto de “Motion Designer” a “Title”? Este es un texto de marcador de posición. Tenemos “John Doe” y “Title” para Línea 1 y Línea 2, Set poster Time, y ahora podemos exportar la plantilla de motion graphics. Esto está diciendo que el proyecto necesita ser guardado primero. ¿ Quieres guardarlo? Sí, quiero guardarlo. Entonces, trae la ventana de exportación. Puedes poner esto donde quieras. Si lo pongo en la “Carpeta de Plantillas Locales”, va a aparecer automáticamente en Premier, así que ahí es donde la dejaré. Entonces, tenemos estas casillas de verificación de compatibilidad que nos permiten saber cosas como si estamos usando fuentes que están fuera de la biblioteca de Adobe Fonts, si After Effects necesita instalarse para poder modificarlo, o si hay ciertos controles que estoy usando en el panel Gráficos Esenciales que no se pueden editar con la herramienta “Tipo” Premier Pro. De nuevo, esto probablemente no importa si estás trabajando en un equipo interno, pero si estás enviando esta plantilla a internet, y necesitas que sea súper compatible y flexible, entonces vas a querer estas advertencias. También puedes agregar palabras clave a tus plantillas. De nuevo, esto es más por si estás tratando de venderlos para que sean más buscables. Pero dejemos todo eso en blanco. Haga clic en “Aceptar”, y sólo va a exportar. Ahora, podemos entrar a Premier y darle una prueba de manejo. Está bien. Aquí estamos en Premier. Empecé un nuevo proyecto, y vamos a encontrar esa plantilla. Voy a subir al panel “Ventana”, “Gráficos esenciales”. Eso se abre por aquí. Necesito encontrar mis plantillas, así que voy a dar clic en eso y luego desplazarme hacia abajo en esta lista. En realidad, aquí hay mucho, así que sólo busquemos “habiliza”. Ahí vamos. Eso lo trae para arriba. Necesito una línea de tiempo para poner eso, así que hagamos una nueva línea de tiempo. Tenemos que hacer este 1920 por 1080 a 30 fotogramas por segundo, así que vamos a hacer “Custom”, “30 fotos/segundo”, “1920", “1080", “Pixeles Cuadrados”, y hacer clic en “OK”. Aquí está nuestra secuencia, y voy a arrastrar eso directamente a la línea de tiempo. Eso tardará un poco en cargar. Tiene que leer After Effects para ayudar a renderizar esto. Ahora, si miramos nuestro monitor de “Programa” y reproducimos esto de nuevo, ahí está nuestra plantilla. En este panel de “Gráficos esenciales”, tengo esta pestaña llamada “Editar”. Si voy a esa pestaña, y tengo mi plantilla seleccionada, aquí están los controles que asignamos en After Effects. Línea 1, en un campo de texto, Línea 2, en otro campo de texto, y luego la cantidad de desfase. Puedo volver a cambiar esto a mi nombre, y se va a actualizar justo dentro de Premier sin necesidad de ir a After Effects por nada. Yo sólo voy a escalar esto para que podamos verlo. cierto, se ve exactamente igual que lo hacía dentro de After Effects. Puedo reproducirlo, y dependiendo de tu máquina y lo compleja que sea tu plantilla, puede que no se reproduzca en tiempo real. Pero esto en realidad está haciendo un trabajo bastante bueno. También tengo este control de “Offset Import” para que pueda ajustar eso si quiero, pero eso es mostrarte que es posible. De nuevo, realmente no querría darle ese control al editor. El punto es que ahora he probado mi plantilla, y está funcionando, así que puedo compartir esto con mi equipo, y pueden empezar a hacer sus propios Tercios Inferior. Algo que sí quiero señalar es que la longitud de esto es la misma que la longitud de tu comp dentro de After Effects. Tenía mi comp ajustado a 30 segundos. De esta manera, el editor puede simplemente recortarlo a donde quiera que termine. Porque es muy probable que un Tercero Inferior sea alguna vez 30 segundos de largo, eso debería ser más que suficiente tiempo del que nunca necesitarán. Pero ahora puedo compartir esta plantilla de trabajo. Eso es realmente todo lo que hay para hacer una plantilla de gráficos en movimiento. No es tan complejo, pero mi plantilla no era compleja, y no le di al editor muchos controles en absoluto, solo los dos campos de texto y ese control offset, que de nuevo, probablemente nunca les daría en el mundo real si necesitaba que esa plantilla se viera exactamente como la diseñé. Pero hay muy buenas posibilidades de que necesites hacer una plantilla mucho más personalizable; sobre todo si vas a intentar venderla. Al igual que las plantillas que he hecho en Adobe Stock tienen muchos y muchos controles. De hecho, aquí es como se ve una de mis plantillas. Se pueden ver todos los controles que yo construí en él. Doy controles sobre los colores, y la fuente, y transparencias, si algo es visible o no. Se puede ver que se vuelve mucho más complejo cuanto más personalizable necesita ser. Obviamente, no te enseñé todo lo que necesitas saber para hacer una plantilla tan compleja. Si lo hiciera, esta clase probablemente habría durado ocho horas, así que esto es realmente sólo el primer paso para entrar en plantillas de gráficos en movimiento. Si quieres aprender más, definitivamente avísame, y tal vez pueda hacer algunas clases más como esta. Pero para tu proyecto de clase, solo concéntrate en este Tercer Bajo. Hazlo tan personalizable como quieras. Si quieres agregar mucho más de esos controles, solo tienes que pulsar “Propiedades Soportadas Solo”. Recuerda ese botón del panel Gráficos esenciales, y eso te mostrará todo lo que podrías controlar con tu plantilla, y solo podrías arrastrar en las propiedades que deseas poder personalizar dentro de Premier. Depende totalmente de ti cuánto control quieres ceder al usuario dentro de Premier, pero te voy a dejar hacer esa llamada y llegar ahí, y empezar a personalizar las cosas y conseguir que funcione esta plantilla la forma en que quieres para que puedas probarlo en Premier, y asegurarte de que todo se vea exactamente como quieres. 9. ¡Gracias!: Ese es el fin de esta clase. Muchas gracias por ver y felicitaciones por lograrlo a través de todo el asunto. Estoy muy emocionado de ver todas las plantillas empezando a entrar en la página de Proyecto de Clase. Siempre puedes hacerme preguntas si te estás metiendo en problemas. Sé que las expresiones son complicadas y puedes realmente perturbarte en cómo conseguir que algo funcione cuando solo te estás metiendo en expresiones. Estoy aquí para contestar tus preguntas, no tengas miedo de preguntar. Si te gustó esta clase, me encantaría que me dejaras revisar o si no te gustó esta clase, avísame qué podría hacer mejor, para que pueda mejorar mis futuras clases. Puedes seguirme a cualquier lugar en línea en Jake In Motion y asegúrate de presionar ese botón “Suscribirse” aquí en Skillshare, para que sepas cuando publique contenido nuevo. Muchas gracias de nuevo por ver y nos vemos en la siguiente.