Antes de pasar a nuestra primera animación, la pelota que rebota, me gustaría hacer un reto técnico: El texto debe dibujarse como si hubiera sido escrito a mano. El Fig Leaf Rag tiene una bonita introducción con un acento al final, donde colocaremos el punto del signo de exclamación.
Hay varios métodos que son más o menos buenos según la situación que tengamos. Como estoy trabajando con una tableta gráfica, dibujaré la fuente y os mostraré cómo animarla. Pero antes, os mostraré cómo se podría hacer, que no es lo que más me gusta:
Pasos 1-10
Paso 1
Quiero deshacerme de la capa de texto y usar en su lugar una capa de composición, una capa normal de píxeles sobre la que puedo pintar. El texto debe estar en la capa. Así que hago una subcomposición con Ctrl+Mayús+C o a través de Capa>Crear subcomposición. La llamo "Typo_Intro".
Paso 2
Incluyo todos los atributos, incluido Turbulent Offset.
Como no quiero esto, hago clic en Turbulent Offset, pulso Ctrl+X e inserto todo de nuevo una composición más arriba ("Fig Leaf Rag").
Paso 3
Volvamos a la composición "Typo_Intro". Aquí hemos destapado el texto y podemos animarlo entero.
La primera opción sería mediante trazados. Cojo la herramienta pluma y trazo la primera línea de la letra A en la fuente. A continuación, presiono y, manteniendo pulsada la tecla Ctrl, hago clic en algún lugar del negro para finalizar el trazado actual antes de trazar la segunda línea de la letra A.
Vuelvo a bajar, hago clic en el negro con la tecla Ctrl pulsada y trazo la siguiente línea y así sucesivamente hasta que haya trazado toda la fuente.
Paso 4
Ahora voy a añadir un efecto. Podemos encontrarlo como contorno en la versión CC bajo Generar. Hasta CS6 se llamaba Efecto trazo.
Seleccionamos una máscara o marcamos la casilla Todas las máscaras y ya podemos tener dibujadas estas máscaras.
Paso 5
Oculto las máscaras con este pequeño símbolo y coloreo el trazado en rojo. También puedo cambiar el tamaño, pero sólo globalmente para todas las máscaras.
Y cuando vuelvo a mostrar las máscaras, puedo seguir moviendo y ajustando los puntos individuales para que todo el texto blanco de debajo quede cubierto.
Paso 6
Lo bueno es que aquí tengo un deslizador de inicio y otro de fin: lo arrastro de principio a fin y así puedo tener todo el texto dibujado.
Esto funciona muy bien, pero no tienes un control exacto. Por ejemplo, siempre tienes que usar el mismo ancho de línea, así que ni siquiera puedes dibujar líneas más finas y más gruesas.
Por eso me gustaría mostrarte otro método, que creo que es un poco más rápido que trazar todo individualmente...
Paso 7
En este caso, me inclino por el método ligeramente más rápido con el pincel.
Sin embargo, este pincel no se puede utilizar en capas de texto. Así que tenemos que crear otra subcomposición y llamarla "Typo_Static". Ya podemos trabajar en esta subcomposición.
Paso 8
En cuanto queramos trabajar con el pincel y hagamos doble clic en modo pincel, se abrirá la pestaña de capas y éste es el único lugar donde podemos trabajar con el pincel.
También se han creado dos nuevos paneles: Pincel y Pintura. En el panel pincel, podemos establecer el tamaño, la dureza, etc. del pincel.
Y en el panel de pintura, podemos seleccionar el tipo de pintura. La duración está inicialmente ajustada a constante, pero yo la cambio a pintura animada.
Hago un trazo, y otro, y otro... pero en cuanto acabo un trazo, extrañamente desaparece.
Paso 9
Si vuelvo a la otra pestaña y me desplazo por la línea de tiempo, veo que todos los trazos están ahí y se dibujan automáticamente.
Paso 10
Si pulsa UU para todas las propiedades modificadas, obtendremos un montón de sub-propiedades aquí abajo.
También se muestran el inicio y el final para cada una.
También podemos cambiar el espaciado individual , la dureza e incluso la posición de cada trazo - incluso después de que haya sido dibujado.
Simplemente continúe: Pasos 11-20
Paso 11
Borro todo de nuevo para que tengamos una mejor visión de conjunto.
Dibujo otro trazo nuevo y si estás en la vista de capas, verás el trazado. Esto es lo que se guardará.
Si no me gusta el trazo que he dibujado, puedo pintar sobre él seleccionándolo y volviendo a pintarlo. Se actualizará y simplemente se sobrescribirá.
Paso 12
Quiero trazar el texto de la misma manera, porque es la forma más rápida de animar algo así.
Así que hago mi diámetro un poco más pequeño y trazo el texto con la tableta gráfica y lo dibujo aquí.
Paso 13
He dibujado todos los trazos y si reproducimos todo en la línea de tiempo, podemos ver que todo está ahí.
Si pulso U, tenemos de nuevo todos los fotogramas clave.
Paso 14
Si pulso la tecla Ü, se maximiza la ventana sobre la que se está moviendo el ratón en ese momento. En este caso, la línea de tiempo. Así tengo más espacio y me resulta más fácil reconocer los elementos que sobresalen. Los retiro un poco para que todos ocupen más o menos el mismo tiempo.
Paso 15
Dejemos que se reproduzca.
Por cierto: Si pulsas accidentalmente la tecla Bloq Mayús, After Effects dejará de actualizarse. Aparecerá el mensaje Desactivar Bloq Mayús para actualizar la vista.
Si reproducimos esto ahora, After Effects empezará a dibujar todas las letras al mismo tiempo. Pero debería empezar por delante y seguir por detrás. Y ahí está el quid de la cuestión. Para hacerlo como quiero, tendría que cronometrarlo todo a mano, trazo a trazo. Eso es mucho trabajo. Me gustaría hacerlo más rápido.
En el siguiente paso te explico cómo hacerlo, pero primero vamos a marcar todos los trazos.
Paso 16
Por eso uso un script que establece estos fotogramas clave uno tras otro.
Este script lo he escrito yo mismo y, por supuesto, también te lo he dado a ti. Puedes encontrarlo en la carpeta de scripts con el nombre Trazos de secuencia. Cualquiera que esté familiarizado con la película "Capas de secuencia de After Effects" tendrá una buena idea de lo que hace el script.
Abro el script en Extend Script y lo ejecuto.
Paso 17
Ahora tenemos una escalera de fotogramas clave y el texto se dibuja paso a paso. Sin embargo, sigue siendo aburridamente lento.
Tenemos que acelerarlo. Para ello, seleccionamos todo, cogemos el último keyframe que encontremos, pulsamos la tecla Alty arrastramos el ran a 5 segundos.
Esto acelerará las cosas considerablemente.
El último punto aún necesita ser retrasado un poco, pero nos ocuparemos de eso en un momento.
Paso 18
Me gustaría hablar sobre el valorde desplazamiento. Esto afecta a las transiciones de los fotogramas clave:
Si nos fijamos en las transiciones de fotogramas clave actuales, el siguiente siempre comienza exactamente donde termina el anterior (a).
Si no quiero esto y prefiero tener dos fotogramas de pausa entre dos trazos, por ejemplo, entonces introduzco un 2 para el desplazamiento.
Por supuesto, tengo que seleccionar todos los pinceles de nuevo antes de poder activar el script. Con Ctrl+A puedo seleccionarlos todos a la vez.
O quiero que los fotogramas se solapen, entonces pongo el offset a -2. Entonces siempre iría dos fotogramas por detrás del actual. Sin embargo, si usted ha acortado tan rápidamente como lo hemos hecho aquí, entonces esto no tiene sentido. Yo estoy bastante contento con esto y lo dejo en 2.
Paso 19
Lo que definitivamente quiero cambiar es el momento del signo de exclamación. Me gustaría colocarlo mejor sobre la música.
Por lo tanto, también necesito la música en la composición. Así que voy a la pestaña "Fig Leaf Rag" y copio el archivo.
Luego vuelvo a la composición con Alt-clicy lo pego aquí.
Paso 20
Ahora vamos a ver dónde están las dos posiciones que necesitamos. Para ello, utilizo el teclado numérico y pulso la teclacoma para crear una vista previa. Pulso la tecla asterisco * del teclado numérico para establecer un marcador. En dispositivos sin teclado numérico, especialmente en el Mac, sería cmd+comma para la vista previa y cmd+8 para el marcador.
Ahora reproduzco la música y coloco los marcadores exactamente donde deben aparecer el guión y el punto del signo de exclamación (1). Es decir, exactamente en los dos acentos de la melodía.
Así que he colocado dos marcadores: En el primero debe terminar el trazo del signo de exclamación y en el segundo debe colocarse el punto.
Coloco la guía sobre el primer marcador y paso a la composición "Typo_Static". Allí muevo el marco sobre la guía que marca la línea del signo de exclamación (2).
Hago lo mismo con el segundo marcador, que indica la posición del punto: Coloco la guía sobre el marcador, cambio a la composición y muevo el marco en consecuencia.
Los últimos pasos
Paso 21
Me gustaría que el trazo del signo de exclamación se dibujara más despacio que la fuente que tiene delante, para que el conjunto quede más acentuado con el signo de exclamación (1).
Y que, en general, la fuente se acabe un poco más rápido. Así que marco todo lo que hay delante (2) y lo arrastro un poco hacia delante (3).
La sincronización es perfecta.
Paso 22
Hemos pintado la fuente sobre el texto y ahora le haremos algunos cambios.
Primero, duplico la capa "Typo_Static" y borro el efecto de pinturade la capa inferior.
Paso 23
En la capa superior tenemos ahora el texto pintado con el original blanco debajo.
En la capa inferior tenemos el texto blanco normal.
Si marcamos la casilla "Pintar en transparencia " en la capa superior, sólo quedarán los trazos rojos pintados.
Paso 24
La capa superior se utilizará como máscara para la capa inferior.
Si no se muestra la máscara, basta con hacer clic en Activar/desactivar modos de conmutación en la parte inferior y se mostrará la máscara móvil BewMas.
Entonces puedo seleccionar una máscara alfa y conseguir exactamente el resultado que necesito. En otras palabras, dondequiera que se dibujen estas líneas, también se verá mi letra original.
Sin embargo, se me ha escapado algo, porque la A ya está ahí justo al principio.
Paso 25
Así que vamos a seleccionar de nuevo todos los pinceles con una selección rectangulardesde abajo hacia arriba (1) y luego eliminamos los dos marcos del signo de exclamación con Mayús+selección(2). Los dos ya están perfectamente posicionados en el tiempo.
Luego movemos el primer fotograma de abajo un poco a la derecha para que no se vea la A del principio.
Ahora ya encaja.
Paso 26
Hemos hecho esto en la subcomposición, aquí todavía tenemos el efecto de Desplazamiento Turbulento.
Si miramos el conjunto en esta composición, no sólo lo tenemos en amarillo y cambia el color, sino que además se tambalea.
Paso 27
Es maravilloso y encaja perfectamente, pero el color sólo debería cambiar a posteriori o no cambiar en absoluto. Por lo tanto, Cambiar Colores no se utiliza por el momento.
Así hemos terminado los primeros 4 segundos del trailer y nos vemos de nuevo en la siguiente parte del tutorial, con la pelota que rebota.
