Uso de expresiones para editar y acceder a las propiedades de texto

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

1. Defina el Motor de expresiones como Javascript seleccionando Configuración del proyecto Expresiones Motor de expresiones Javascript.
2. Añada una expresión a la propiedad Texto de origen de una capa de Texto.
3. En el menú emergente Lenguaje de expresión, seleccione Texto > Propiedades > Propiedades de texto o Texto > Estilo.

Atributos de texto disponibles

Los siguientes atributos de estilo de texto se pueden leer y establecer utilizando el objeto style:

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:

text.sourceText + “\r” + text.sourceText.toUpperCase()

Atributos de párrafo disponibles 

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.

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:

// Uso de la ruta completa a la propiedad Source Text
text.sourceText.style

// Uso del nombre genérico para 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.

// Acceso al objeto de estilo 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.

Ejemplos

Cambiar la fuente para ciertas palabras

text.sourceText.style
.setFont("Montserrat-Light")
.setFont("Gigantic", 0, 6).setFont("Gigantic", 10, 6).setFont("Gigantic", 20)

Establecer la primera línea de una capa de texto en negrita y ampliarla

text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(true, 0, 30)

Establecer superíndice para caracteres

Para utilizar la cadena, añada una capa de Texto con el texto 'Primer y segundo lugar' y aplique lo siguiente al Texto de origen.

textourceTexttyleetBaselineOption(“superscript”,1,2)etBaselineOption(“superscript”, 9, 2)

Combinación de estilo y texto de origen

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 devolver los valores tanto del estilo como del Source Text real en tiempo (forma abreviada)

var sourceTextProperty = thisComp.layer("MAIN TEXT").text.sourceText;

var newStyle = sourceTextProperty.getStyleAt(0,0);

newStyle.setText(sourceTextProperty);

// Para devolver los valores tanto del estilo como del Source Text real de la capa anterior en el orden de la pila 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 a 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 Fill Color y Tamaño de 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 Fill Color y Tamaño de fuente con las propiedades actuales de texto 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 devolver el nombre de la fuente para la propia capa de texto
text.sourceText.style.font;

// Para devolver el nombre de la fuente que está usando otra capa de texto
var otherLayer = thisComp.layer("Other Layer Name");

otherLayer.text.sourceText.style.font;

// Para devolver el valor del tamaño de fuente para la propia capa de texto
text.sourceText.style.fontSize;

// Para devolver el valor del tamaño de fuente para otra capa de texto
var otherLayer = thisComp.layer("Other Layer Name");

otherLayer.text.sourceText.style.fontSize;

// Para devolver un valor booleano de si el texto de una capa es Faux Bold o no (verdadero o falso)
text.sourceText.style.isFauxBold;

// Para devolver un valor booleano de si el texto de una capa es Faux Italic o no (verdadero o falso)
text.sourceText.style.isFauxItalic;

// Para devolver el valor del seguimiento de una capa de texto como número
text.sourceText.style.tracking;

// Para devolver el valor del interlineado de una capa de texto como 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 de si el texto de una capa tiene Fill aplicado (verdadero o falso)
text.sourceText.style.applyFill;

// Para devolver el valor del Fill Color de una capa de texto
// De forma predeterminada, esto devuelve una matriz de los valores RGB en una escala de 0 a 1.0
text.sourceText.style.fillColor;

// Establecer el Fill Color de una capa de texto con setApplyFill y setFillColor
// Los valores de setFillColor se definen como una matriz RGB en una escala entre 0 y 1.0
var newStyle = style.setApplyFill(true);

newStyle.setFillColor([1.0, 1.0, 1.0]);

// Establecer el Fill Color de una capa de texto sustituyendo la matriz RGB de 0 a 1.0 con hexToRGB para definir los valores de color mediante valores hexadecimales
var newStyle = style.setApplyFill(true);

newStyle.setFillColor(hexToRgb("FFFFFF"));

Valores RGB de relleno

// Para devolver el Valor rojo (R) del Fill Color

text.sourceText.style.fillColor[0];

Trazo

A continuación se muestran algunos ejemplos de acceso a Trazo, Color de trazo y Ancho del trazo: de una capa de Texto:

// Para devolver un Valor booleano de si el texto de una capa tiene trazo aplicado (verdadero o falso)
text.sourceText.style.applyStroke;

// Para devolver el Valor del Stroke Color de una capa de texto
// De forma predeterminada, esto devuelve una matriz de los valores RGB en una escala de 0 a 1.0
text.sourceText.style.strokeColor;

// Establece el Stroke Color de una capa de texto con setApplyStroke y setStrokeColor
// Los valores de setStrokeColor se definen como una matriz RGB en una escala entre 0 y 1.0
var newStyle = style.setApplyStroke(true);

newStyle.setStrokeColor([1.0, 0.0, 0.0]);

// Establece el Stroke Color de una capa de texto sustituyendo la matriz RGB de 0 a 1.0 con hexToRGB para definir los valores de color con valores hexadecimales
var newStyle = style.setApplyStroke(true);

newStyle.setStrokeColor(hexToRgb("FF0000"));

// Para devolver el Valor de la Anchura de trazo de una capa de texto como número
text.sourceText.style.strokeWidth;

Valores RGB de trazo

// Para devolver el valor verde (G) del color de trazo

text.sourceText.style.strokeColor[1];

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);

// 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:

// Establecer la fuente usada a Arial
style.setFont("ArialMT")

// Establecer el tamaño de fuente a 80
style.setFontSize(80);

// Habilitar negrita falsa con un booleano
style.setFauxBold(true)

// Habilitar cursiva falsa con un booleano
style.setFauxItalics(true)

// Habilitar mayúsculas con un booleano
style.setAllCaps(true)

// Habilitar versalitas con un booleano
style.setSmallCaps(true)

// Establecer el seguimiento como un número
style.setTracking(10);

// Establecer el interlineado como un número
style.setLeading(10);

// Habilitar interlineado automático con un booleano
style.setAutoLeading(true);

// Establecer el desplazamiento vertical como un número
style.setBaselineShift(10);

// Establecer la anchura del trazo como un número
style.setStrokeWidth(10);

// Establecer la primera línea de una capa de texto en negrita y hacerla más grande
text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(true, 0, 30)

// Establece superíndice para caracteres
text.sourceText.style.setBaselineOption("superscript",1,2).setBaselineOption("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:

// Habilitar relleno, establecer color de relleno, establecer línea de base, establecer seguimiento y habilitar 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:

var nextLayer = thisComp.layer(index + 1);
nextLayer.name + "\rOpacidad = " + nextLayer.opacity.value;

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 = "";

// Iterar por todas las capas de la composición
for (var i = 1; i <= thisComp.numLayers; i++) {

// Si i coincide con el índice de esta capa, continúa con la siguiente iteración
if (i == index) {
continue;
}

// Establecer myLayer para la iteración actual del bucle
var myLayer = thisComp.layer(i);

// Si myLayer no tiene vídeo o no está activa, continúa con la siguiente iteración/capa
if ( !myLayer.hasVideo || !myLayer.active ) {
continue;
}

// Si myLayer está activa en el momento actual
if ( myLayer.active ) {
try {
// Establecer sourceFootageName al nombre de la fuente de myLayer
sourceFootageName = myLayer.source.name;
} catch ( err ) {
// Si myLayer no tiene fuente,
// establecer sourceFootageName al nombre de myLayer
sourceFootageName = myLayer.name;
}

// Detener iteración
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.

Para obtener más información, consulte Información general de efectos y ajustes preestablecidos de animación.

Más recursos de Expresión