Edición de los estilos y las propiedades de texto mediante los controles de expresión.
Utilice expresiones para controlar el estilo del texto en cualquier expresión de texto o en plantillas de gráficos animados. Algunas de las cosas que puede hacer con las expresiones son las siguientes:
Vincule varios títulos y actualice sus estilos a la vez (muy útil para el diseño de títulos).
Mantenga la fuente, el tamaño y el estilo sincronizados en varias capas de Texto.
Haga cambios globales en las propiedades de texto.
Defina los atributos de estilo de caracteres individuales en una capa de Texto.
Una vez que se hayan establecido para una capa de Texto, haga referencia a las propiedades de esa capa para aplicar fácilmente los cambios en la composición.Las expresiones de After Effects utilizan propiedades para leer (get) valores de estilo de texto y métodos de función para escribir (set) dentro del motor de expresión. Esto le permite vincular estilos de texto en capas de texto o configurar controles para que se animen o se usen en una plantilla de Motion Graphics.
Antes de empezar a utilizar expresiones para editar propiedades de texto
Defina el Motor de expresiones como Javascript seleccionando Configuración del proyectoExpresionesMotor de expresionesJavascript.
En el menú emergente Lenguaje de expresión, seleccione Texto > Propiedades > Propiedades de textoo Texto > Estilo.
Atributos de texto disponibles
Los siguientes atributos de estilo de texto se pueden leer y establecer utilizando el objeto style:
Fuente
Tamaño de la fuente
Faux negrita
Cursiva faux
Todo en mayúsculas
Versalitas
Espacio entre caracteres
Interlineado
Interlineado automático
Distancia a línea de base
Relleno (activar/desactivar)
Color de relleno
Trazo (activar/desactivar)
Color del trazo
Ancho del trazo
Ajuste de dígitos
Escalar
Kerning
Tsume
Dirección de línea de base
Opción de línea de base
La propiedad Texto de origen de una capa de Texto se interpreta mediante expresiones como una cadena JavaScript. El propio texto se puede leer con sourceText, pero se debe establecer en el objeto style con el método setText si se modifican los atributos de estilo. Consulte algunos de los ejemplos.
Expresiones para capas de texto con párrafos
Inicio de una nueva línea de texto
Puede utilizar \r en la expresión de una cadena para iniciar una nueva línea de texto. Por ejemplo, para copiar el texto original de una capa dentro de la misma capa y repetirlo en todos los caracteres en mayúscula en una nueva línea, utilice la expresión siguiente:
Además de los atributos de estilo de texto, también hay atributos de párrafo. Estos solo se pueden aplicar a toda la capa de Texto. Los atributos de párrafo solo están disponibles en After Effects.
Dirección
Composición multilínea
Sangría en primera línea
Justificación
Tipo de interlineado
Margen izquierdo
Margen derecho
Espacio después
Espacio antes
Puntuación latina fuera de margen
Menú de expresión de fuente de PostScript
Al hacer referencia a las fuentes en las expresiones, deben utilizar un “nombre del sistema” especial (o similares). Se recomienda insertar este nombre especial desde el cuadro de diálogo Texto > Fuente > Seleccionar fuente para evitar errores de expresión.
Abra el menú flotante Lenguaje de expresión y, a continuación, seleccione Texto > Fuente. Se abre un cuadro de diálogo con menús desplegables para seleccionar la tipografía y la fuente que se insertará en la expresión.
Sincronización de fuentes
Las fuentes a las que solo se hace referencia en el Editor de expresiones no se graban como fuentes utilizadas por el proyecto. Para asegurarse de que todas las fuentes a las que se hace referencia en el Editor de expresiones se sincronicen automáticamente o rellenen el cuadro de diálogo Resolver fuentes, utilice todas las fuentes de una capa, aunque el origen de la capa esté oculto.
Objeto style
Todas las propiedades de estilo de una capa de Texto se encuentran en el objeto style, al que se accede en la propiedad Texto de origen mediante el siguiente procedimiento:
// Con la ruta de acceso completa a la propiedad Texto de origen text.sourceText.style // Con el nombre genérico de la propiedad actual thisProperty.style
Usar el estilo por sí mismo equivale a usar uno de los dos ejemplos anteriores, pero esto puede resultar confuso si se combinan atributos de estilo de varias capas de Texto.
También se pueden leer los atributos de estilo de otras capas de Texto. Utilice el icono espiral para crear un vínculo con la otra capa de Texto al principio del primer ejemplo que se muestra arriba.
// Acceder al objeto style de una capa de texto específica thisComp.layer(“Other Layer Name”).text.sourceText.style;
Atributos de estilo de caracteres individuales en una capa de texto
Además de utilizar expresiones de texto para establecer atributos de estilo de toda la capa de Texto, también puede establecer atributos de estilo de caracteres individuales en la capa. Una ventaja de este control por carácter es el reflujo automático de texto, como cuando se escalan las letras, se utiliza el superíndice y se utiliza una fuente diferente, tal y como se espera con el uso del estilo de subcadena del panel Carácter.
Para que se devuelvan los valores del estilo y del Texto de origen real a la vez, tendrá que combinar las funciones getStyleAt y setText. A continuación, se muestran dos ejemplos de cómo escribir esta expresión.
// Para que se devuelvan los valores del estilo y del texto de origen real al mismo tiempo (abreviado) var sourceTextProperty = thisComp.layer(“MAIN TEXT”).text.sourceText; var newStyle = sourceTextProperty.getStyleAt(0,0); newStyle.setText(sourceTextProperty);
// Para devolver los valores del estilo y del texto de origen real de la capa anterior, en el orden de apilado de capas, var sourceTextProperty = thisComp.layer(index - 1).text.sourceText; var newStyle = sourceTextProperty.getStyleAt(0,0); newStyle.setText(sourceTextProperty);
Fuentes desplegables
Puede utilizar los menús desplegables para controlar estilos de texto, por ejemplo, para bloquear capas de Texto a determinadas fuentes. Esto resulta útil para directrices de marcas, plantillas, Mogrts y mucho más:
// Para bloquear una capa de texto en fuentes específicas con un control de menú desplegable var dropDownMenu = thisComp.layer(“LayerName”).effect(“Dropdown Menu Control”)(“Menu”); switch (dropDownMenu.value) { case 1 : text.sourceText.style.setFont(“Georgia”); break; case 2 : text.sourceText.style.setFont(“Impact”); break; default : text.sourceText.style.setFont(“Tahoma”); }
Capa de texto principal
Vincule varias capas de Texto a un controlador de fuentes principal para controlar el estilo de texto de varias capas a la vez. Cree dos capas de Texto y pegue esta expresión en el Texto de origen de una de ellas:
// Para obtener todas las propiedades de texto de una capa de texto
thisComp.layer(“Text Layer 1”).text.sourceText.style;
Es posible obtener el estilo de una capa de Texto, pero anular determinadas propiedades de texto añadiendo valores con las funciones set. A continuación, se muestran dos ejemplos que utilizan Color de relleno y Tamaño de fuente.
// Para obtener todas las propiedades de texto de “Text Layer 1”, pero anular el color de relleno y el tamaño de la fuente con valores codificados var newStyle = thisComp.layer(“Text Layer 1”).text.sourceText.style; newStyle.setFillColor(hexToRgb(“FF0000”)).setFontSize(100);
// Para obtener todas las propiedades de texto de “Text Layer 1”, pero anular el color de relleno y el tamaño de la fuente con las propiedades de texto actuales de la capa var newStyle = thisComp.layer(“Text Layer 1”).text.sourceText.style; var currentFillColor = thisProperty.style.fillColor; var currentFontSize = thisProperty.style.fontSize; newStyle.setFillColor(currentFillColor).setFontSize(currentFontSize);
Ejemplos
A continuación se muestran ejemplos sobre cómo acceder a los valores de las propiedades de texto y utilizarlos con expresiones.
Fuente
A continuación se muestran algunos ejemplos para acceder a Fuente, Tamaño de fuente, Faux negrita, Faux cursiva, Espacio entre caracteres e Interlineado de una capa de Texto:
// Para que se devuelva el nombre de la fuente de la propia capa de texto text.sourceText.style.font; // Para que se devuelva el nombre de la fuente que otra capa de texto está utilizando var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.font; // Para que se devuelva el valor del tamaño de fuente de la propia capa de texto text.sourceText.style.fontSize; // Para que se devuelva el valor del tamaño de fuente de otra capa de texto var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.fontSize; // Para que se devuelva un valor booleano que indica si el texto de una capa es negrita faux o no (verdadero o falso) text.sourceText.style.isFauxBold; // Para que se devuelva un valor booleano que indica si el texto de una capa es cursiva faux o no (verdadero o falso) text.sourceText.style.isFauxItalic; // Para que se devuelva el valor del espacio entre caracteres de una capa de texto como un número text.sourceText.style.tracking; // Para que se devuelva el valor del interlineado de una capa de texto como un número text.sourceText.style.leading;
Relleno
A continuación se muestran algunos ejemplos para acceder a Relleno y Color de relleno de una capa de Texto:
// Para devolver un valor booleano que indica si el texto de una capa tiene un relleno aplicado (verdadero o falso)
text.sourceText.style.applyFill;
// Para devolver el valor del color de relleno de una capa de texto
// De forma predeterminada, se devuelve un conjunto de valores RGB en una escala entre 0 y 1.0 text.sourceText.style.fillColor;
// Defina el color de relleno de una capa de texto con setApplyFill y setFillColor
// Los valores de setFillColor se definen como una matriz RGB en una escala comprendida entre 0 – 1.0
var newStyle = Style. setApplyFill (true);
newStyle. setFillColor ([1.0, 1.0, 1.0]);
// Defina el color de relleno de una capa de texto que substituya al conjunto RGB 0 – 1.0 por hexToRGB para definir los valores de color con valores hexadecimales
var newStyle = Style. setApplyFill (true);
newStyle. setFillColor (hexToRgb(“FFFFFF”));
Valores RGB de relleno
// Para devolver el valor rojo (R) del color de relleno
text.sourceText.style.fillColor [0];
Nota:
Para devolver el valor de Color de relleno de R, G o B de una capa de texto, añada 0, 1 o 2 entre corchetes, respectivamente.
Trazo
A continuación se muestran algunos ejemplos de acceso a Trazo, Colorde trazo y Ancho del trazo: de una capa de Texto:
// Para devolver un valor booleano que indica si el texto de una capa tiene un trazo aplicado al texto (verdadero o falso)
text.sourceText.style.applyStroke;
// Para devolver el valor del color de trazo de una capa de texto
// De forma predeterminada, se devuelve un conjunto de valores RGB en una escala de 0 y 1.0
text.sourceText. style.strokeColor;
// Defina el color del trazo de una capa de texto con setApplyStroke y setStrokeColor
// Los valores setStrokeColor se definen como una matriz RGB en una escala entre 0 – 1.0
var newStyle = style.setApplyStroke (true);
newStyle.setStrokeColor ([1.0, 0.0, 0.0]);
// Defina el color del trazo de una capa de texto que sustituya el conjunto RGB 0 – 1.0 por hexToRGB para definir los valores de color con valores hexadecimales
var newStyle = style.setApplyStroke (true);
newStyle.setStrokeColor(hexToRgb (“FF0000”));
// Para devolver el valor de anchura de trazo de una capa de texto como un número
text.sourceText.style.strokeWidth;
Valores RGB de trazo
// Para devolver el valor verde (G) del color del trazo
text.sourceText.style.strokeColor[1];
Nota:
Para devolver el valor del Color de trazo de R, G o B de una capa de Texto, añada 0, 1 o 2 entre corchetes, respectivamente.
Función getStyleAt
Utilice la función get para devolver el valor de estilo de un carácter determinado en un momento específico. index debería ser un número, el índice de la letra o del carácter cuyo estilo se necesita. atTime también debe ser un número, el tiempo dentro de la composición del que se obtiene el estilo en caso de que el estilo sea un fotograma clave y cambie con el tiempo.
text.sourceText.getStyleAt(index, atTime);
Nota:
El uso de text.sourceText.style equivale a usar ttext.sourceText.getStyleAt(0,0).
// Obtiene el estilo del primer carácter al principio de la cronología text.sourceText.getStyleAt(0,0);
Definición de funciones
Funciones set adicionales que se pueden utilizar de forma individual o en combinación entre sí para aplicar estilos a las capas. Se llama a cada una de estas funciones en el objeto style de una propiedad de Texto de origen:
// Establezca la fuente utilizada en Arial
styleetFont(“ArialMT”)
// Establezca el tamaño de fuente en 80
styleetFontSize(80
// Habilite la negrita faux con un booleano
styleetFauxBold(true)
// Habilite la cursiva faux con un booleano
styleetFauxItalics(true)
//Habilite todas las mayúsculas con un booleano
styleetAllCaps(true)
// Habilite las minúsculas con un booleano
styleetSmallCaps(true)
// Establezca el seguimiento como un número
styleetTracking(10
// Establezca el interlineado como un número
styleetLeading(10
// Habilite el interlineado automático con un booleano
styleetAutoLeading(true
// Establezca el desplazamiento vertical como un número
styleetBaselineShift(10
// Establezca el ancho de trazo como un número
styleetStrokeWidth(10
// Establezca la primera línea de una capa de texto en negrita y amplíelo
textourceTexttyleetFontSize(100, 0, 30)etFauxBold(true, 0, 30)
// Establezca superscript para caracteres
textourceTexttyleetBaselineOption(“superscript”,1,2)etBaselineOption(“superscript”, 9, 2)
Todas las funciones set de los estilos de texto se pueden encadenar para definir fácilmente varios atributos sin tener que declarar un nuevo estilo cada vez, como en el siguiente ejemplo:
Nota:
No se utiliza un punto y coma hasta que se establece el último atributo. Enumerar cada atributo en su propia línea ayuda a hacer más legible la cadena completa.
// Habilite rellenar y defina el color de relleno, la línea de base y el seguimiento y habilite el interlineado automático text.sourceText.style .setApplyFill(true) .setFillColor(hexToRgb(“FFFFFF”)) .setBaselineShift(10) .setTracking(25) .setAutoLeading(true);
Usos adicionales de las expresiones en el texto de origen
Añadir una capa de Texto a una composición y añadir una expresión a su propiedad Texto de origen puede ser una gran forma de examinar los valores de propiedad de otras capas. Por ejemplo, la siguiente expresión de una propiedad Texto de origen informa sobre el nombre y valor de la propiedad Opacidad de la siguiente capa en el orden de apilamiento de las capas:
El siguiente ejemplo informa del nombre del elemento de material de archivo empleado como origen de la capa de imagen superior según el orden de apilado en el tiempo actual que tenga ajustado su definidor de Vídeo:
// Crear sourceFootageName como una cadena vacía var sourceFootageName = “”; // Recorrer en bucle todas las capas de la composición for (var i = 1; i <= thisComp.numLayers; i++) { // Si i coincide con el índice de esta capa, continuar al siguiente bucle if (i == index) { continue; } // Definir myLayer para la iteración actual del bucle var myLayer = thisComp.layer(i); // Si myLayer no tiene vídeo o no está activo, continuar al siguiente bucle/capa if ( !myLayer.hasVideo || !myLayer.active ) { continue; } // Si myLayer está activo en el momento actual if ( myLayer.active ) { try { // Establecer sourceFootageName al nombre de origen de myLayer sourceFootageName = myLayer.source.name; } catch ( err ) { // Si myLayer no tiene origen, // establezca sourceFootageName al nombre de myLayer sourceFootageName = myLayer.name; } // Detener el bucle break; } } // Mostrar sourceFootageName sourceFootageName;
Guardado de expresiones como ajustes preestablecidos
Seleccione la propiedad Texto de origen con expresiones añadidas. A continuación, seleccione Animación > Guardar ajustes preestablecidos de animación para reutilizar las expresiones en otros proyectos. Los Ajustes preestablecidos de animación se guardan en el panel Efectos y ajustes preestablecidos.
Ahora que ha entendido algunos de los conceptos que hay detrás de expresiones visite la comunidad para obtener ejemplos reales y compartir su trabajo.
En el foro de AE Enhancers también se incluyen diversos ejemplos y mucha información sobre expresiones, así como secuencias de comandos y ajustes preestablecidos de animación.