Использование выражений для изменения свойств текста и доступа к ним

Используйте выражения для управления стилем текста в любом текстовом выражении или в шаблонах анимационного дизайна. Некоторые вещи, которые вы можете сделать с выражениями:

• Связывайте несколько заголовков и обновляйте их стили одновременно (очень полезно для разработки заголовков).
• Синхронизируйте шрифт, размер и стили в нескольких текстовых слоях.
• Внесите глобальные изменения в свойства текста.
• Задайте атрибуты стиля отдельных символов в текстовом слое.

После их установки для текстового слоя можно ссылаться на свойства этого слоя, чтобы быстро применять изменения ко всей композиции. В выражениях After Effects используются свойства для чтения (получения) значений стиля текста и методы функций для записи (установки) их внутри движка выражений. Это позволяет связывать стили текста в текстовых слоях либо настраивать элементы управления для их анимации или использования в шаблоне анимационного дизайна.

Перед началом использования выражений для редактирования свойств текста

1. Установите для Движка выражений значение «Javascript», выбрав Настройки проекта > Выражения > Движок выражений > Javascript.
2. Добавление выражения в свойство Исходный текст текстового слоя.
3. Во всплывающем меню Язык выражений выберите Текст > Свойства > Свойства текста или Текст > Стили.

Доступные текстовые атрибуты

Следующие атрибуты стиля текста можно прочитать и задать с помощью объекта style:

Свойство Исходный текст текстового слоя преобразовывается выражениями в виде строки JavaScript. Сам текст можно прочитать с помощью sourceText, но он должен быть задан для объекта style с помощью метода setText, если атрибуты стиля изменяются. Просмотрите несколько примеров.

Выражения для текстовых слоев с абзацами

Начать новую строку текста

Для указания начала новой строки текста в строковом выражении можно использовать комбинацию символов \r. Например, чтобы скопировать исходный текст из одного слоя в тот же самый слой и повторить эту операцию для всех прописных символов в новой строке, используйте следующее выражение:

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

Доступные атрибуты абзаца 

Кроме атрибутов стиля текста, также есть атрибуты абзацев. Их можно применять только ко всему текстовому слою. Атрибуты абзаца доступны только в After Effects.

Меню выражений и шрифты PostScript

При обращении к шрифтам в выражениях они должны использовать специальное «системное имя» (или аналогичное). Рекомендуется вставить это специальное имя из диалогового окна Текст > Шрифт > Выбрать шрифт, чтобы избежать ошибок выражения.

• Откройте всплывающее меню Язык выражений и выберите Текст > Шрифт. Откроется диалоговое окно с раскрываемыми меню для выбора шрифта и шрифта для вставки в выражение.

Синхронизация шрифтов

Шрифты, на которые ссылаются только в Редакторе выражений, не записываются как шрифты, используемые проектом. Чтобы убедиться, что все шрифты, упомянутые в Редакторе выражений, будут автоматически синхронизироваться или заполнять диалоговое окно Разрешить шрифты, используйте все эти шрифты в слое, даже если этот источник слоя скрыт.

Объект style

Все свойства стилей для текстового слоя существуют в объекте style, доступ к которому осуществляется в свойстве Исходный текст с помощью указанных ниже действий.

// Использование полного пути к свойству Source Text
text.sourceText.style

// Использование общего имени для текущего свойства
thisProperty.style

Использование стиля само по себе аналогично использованию любого из двух приведенных выше примеров, но это может сбивать с толку, если атрибуты стиля из нескольких текстовых слоев объединяются.

Атрибуты стилей других текстовых слоев также можно прочитать. Используйте лассо выбора, чтобы создать ссылку на другой текстовый слой в начале первого примера, показанного выше.

// Доступ к объекту стиля определенного текстового слоя

thisComp.layer("Other Layer Name").text.sourceText.style;

Атрибуты стиля отдельных символов в текстовом слое

Кроме использования текстовых выражений с целью установки атрибутов стиля для всего текстового слоя, можно также задать атрибуты стиля для отдельных символов в слое. Преимуществом этого посимвольного элемента управления является автоматическое изменение размера текста, например при масштабировании букв, использовании надстрочных индексов или другого шрифта, как и при использовании стилей частей строки с панели Символ.

Примеры

Изменение шрифта для определенных слов

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

Установить для первой строки текстового слоя полужирный и более крупный шрифт

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

Задать надстрочный индекс для символов

Чтобы использовать строку, добавьте текстовый слой с текстом «Первое и второе место» и примените следующее к Исходному тексту.

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

Объединение стиля и исходного текста

Чтобы вернуть значения стиля и фактического исходного текста в один момент времени, необходимо объединить функции getStyleAt и setText. Ниже приведены два примера того, как записать это выражение.

// Возврат значений стиля и фактического Source Text в определенное время (краткая запись)

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

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

newStyle.setText(sourceTextProperty);

// Возврат значений стиля и фактического Source Text предыдущего слоя в порядке стека слоев

var sourceTextProperty = thisComp.layer(index - 1).text.sourceText;

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

newStyle.setText(sourceTextProperty);

Выпадающий список шрифтов

Раскрывающиеся меню можно использовать для управления стилями текста, например для блокировки текстовых слоев определенными шрифтами. Это полезно для рекомендаций по брендам, шаблонов, включая шаблоны анимационного дизайна, и многого другого.

// Привязка текстового слоя к определенным шрифтам с помощью элемента управления «Выпадающее меню»

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

}

Основной текстовый слой

Свяжите несколько текстовых слоев с основным контроллером шрифтов, чтобы управлять стилем текста нескольких слоев одновременно. Создайте два текстовых слоя и вставьте указанное ниже выражение в исходный текст одного из них.

// Получение всех свойств текста из текстового слоя

thisComp.layer("Text Layer 1").text.sourceText.style;

Можно получить стиль из текстового слоя, но переопределить определенные свойства текста, добавив значения с помощью функций set. Ниже приведены два примера использования цвета заливки и размера шрифта.

// Получение всех свойств текста из «Text Layer 1», но переопределение цвета заливки и кегля фиксированными значениями

var newStyle = thisComp.layer("Text Layer 1").text.sourceText.style;

newStyle.setFillColor(hexToRgb("FF0000")).setFontSize(100);

// Получение всех свойств текста из «Text Layer 1», но переопределение цвета заливки и кегля текущими свойствами текста слоя

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

Примеры

Ниже приведены примеры получения доступа к значениям свойств текста в выражениях и их использования.

Шрифт

Ниже приведены примеры доступа к таким параметрам текстового слоя, как Шрифт, Размер шрифта, Псевдополужирный, Псевдокурсивный, Трекинг и Интерлиньяж.

// Возврат названия шрифта для самого текстового слоя
text.sourceText.style.font;

// Возврат названия шрифта, который использует другой текстовый слой
var otherLayer = thisComp.layer("Other Layer Name");

otherLayer.text.sourceText.style.font;

// Возврат значения кегля для самого текстового слоя
text.sourceText.style.fontSize;

// Возврат значения кегля для другого текстового слоя
var otherLayer = thisComp.layer("Other Layer Name");

otherLayer.text.sourceText.style.fontSize;

// Возврат логического значения о том, является ли текст слоя псевдополужирным (True или False)
text.sourceText.style.isFauxBold;

// Возврат логического значения о том, является ли текст слоя псевдокурсивом (True или False)
text.sourceText.style.isFauxItalic;

// Возврат значения трекинга текстового слоя в виде числа
text.sourceText.style.tracking;

// Возврат значения интерлиньяжа текстового слоя в виде числа
text.sourceText.style.leading;

Заливка

Ниже приведены примеры доступа к таким параметрам текстового слоя, как Заливка и Цвет заливки.

// Возврат логического значения о том, применена ли к тексту слоя заливка (True или False)
text.sourceText.style.applyFill;

// Возврат значения цвета заливки текстового слоя
// По умолчанию возвращает массив значений RGB по шкале от 0 до 1.0
text.sourceText.style.fillColor;

// Настройка цвета заливки текстового слоя с помощью setApplyFill и setFillColor
// Значения setFillColor определяются как массив RGB по шкале от 0 до 1.0
var newStyle = style.setApplyFill(true);

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

// Настройка цвета заливки текстового слоя с заменой массива RGB 0–1.0 на hexToRGB для определения значений цвета с помощью шестнадцатеричных значений
var newStyle = style.setApplyFill(true);

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

Заполнение значений RGB

// Возврат красного (R) значения цвета заливки

text.sourceText.style.fillColor[0];

Обводка

Ниже приведены примеры доступа к таким параметрам текстового слоя, как Обводка, Цвет обводки и Ширина обводки.

// Возврат логического значения о том, применена ли к тексту слоя обводка (True или False)
text.sourceText.style.applyStroke;

// Возврат значения цвета обводки текстового слоя
// По умолчанию возвращает массив значений RGB по шкале от 0 до 1.0
text.sourceText.style.strokeColor;

// Настройка цвета обводки текстового слоя с помощью setApplyStroke и setStrokeColor
// Значения setStrokeColor определяются как массив RGB по шкале от 0 до 1.0
var newStyle = style.setApplyStroke(true);

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

// Настройка цвета обводки текстового слоя с заменой массива RGB 0–1.0 на hexToRGB для определения значений цвета с помощью шестнадцатеричных значений
var newStyle = style.setApplyStroke(true);

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

// Возврат значения ширины обводки текстового слоя в виде числа
text.sourceText.style.strokeWidth;

Значения RGB обводки

// Возврат зеленого (G) значения цвета обводки

text.sourceText.style.strokeColor[1];

Функция getStyleAt

Используйте функцию get для возврата значений стиля определенного символа в необходимое время. В качестве index нужно указывать число, являющееся индексом буквы или символа, значение стиля которого необходимо получить. atTime также должно быть числом, указывающим время в композиции, из которого можно получить стиль, если стиль является ключевым кадром и меняется с течением времени.

text.sourceText.getStyleAt(index, atTime);

// Получение стиля первого символа в начале временной шкалы

text.sourceText.getStyleAt(0,0);

Функции «Set»

Дополнительные функции set, которые могут использоваться по отдельности или в сочетании друг с другом для управления стилями в слоях. Каждая из приведенных функций вызывается для объекта style свойства исходного текста.

// Установить шрифт Arial
style.setFont("ArialMT")

// Установить кегль 80
style.setFontSize(80);

// Включить искусственное полужирное начертание с помощью логического значения
style.setFauxBold(true)

// Включить искусственный курсив с помощью логического значения
style.setFauxItalics(true)

// Включить все прописные буквы с помощью логического значения
style.setAllCaps(true)

// Включить капитель с помощью логического значения
style.setSmallCaps(true)

// Установить трекинг как число
style.setTracking(10);

// Установить интерлиньяж как число
style.setLeading(10);

// Включить автоинтерлиньяж с помощью логического значения
style.setAutoLeading(true);

// Установить смещение базовой линии как число
style.setBaselineShift(10);

// Установить ширину обводки как число
style.setStrokeWidth(10);

// Сделать первую строку текстового слоя полужирной и увеличить
text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(true, 0, 30)

// Устанавливает верхний индекс для символов
text.sourceText.style.setBaselineOption("superscript",1,2).setBaselineOption("superscript", 9, 2)

Все функции set для текстовых стилей можно использовать вместе, чтобы с легкостью задать несколько атрибутов без необходимости каждый раз определять новый стиль, как показано в следующем примере.

// Включить заливку, установить цвет заливки, установить смещение по базовой линии, установить трекинг и включить автоинтерлиньяж

text.sourceText.style

.setApplyFill(true)

.setFillColor(hexToRgb("FFFFFF"))

.setBaselineShift(10)

.setTracking(25)

.setAutoLeading(true);

Дополнительнsые варианты использования выражений в исходном тексте

Добавление текстового слоя к композиции и добавление выражения к свойству Исходный текст помогает изучить значения свойств других слоев. Например, следующее выражение в свойстве Исходный текст сообщает имя и значение свойства Непрозрачность для следующего слоя в порядке размещения слоев:

var nextLayer = thisComp.layer(index + 1);
nextLayer.name + "\rНепрозрачность = " + nextLayer.opacity.value;

В следующем примере сообщается имя элемента видеоряда, используемого в качестве источника самого верхнего слоя изображения в порядке наложения в текущий момент времени, для которого установлен переключатель «Видео»:

// Создать sourceFootageName как пустую строку
var sourceFootageName = "";

// Пройти циклом через все слои в композиции
for (var i = 1; i <= thisComp.numLayers; i++) {

// Если i соответствует индексу этого слоя, перейти к следующей итерации цикла
if (i == index) {
continue;
}

// Задать myLayer для текущей итерации цикла
var myLayer = thisComp.layer(i);

// Если myLayer не имеет видео или неактивен, перейти к следующему циклу/слою
if ( !myLayer.hasVideo || !myLayer.active ) {
continue;
}

// Если myLayer активен в текущий момент времени
if ( myLayer.active ) {
try {
// Задать sourceFootageName в качестве имени источника myLayer
sourceFootageName = myLayer.source.name;
} catch ( err ) {
// Если myLayer не имеет источника,
// задать sourceFootageName в качестве имени myLayer
sourceFootageName = myLayer.name;
}

// Остановить цикл
break;
}
}

// Отобразить sourceFootageName
sourceFootageName;

Сохранение выражений в виде стилей

Выберите свойство Исходный текст с добавленными выражениями. Затем выберите Анимация > Сохранить шаблон настроек анимации, чтобы использовать выражения в других проектах. Шаблоны настроек анимации сохраняются на панели Эффекты и стили.

Дополнительные сведения см. в разделе Обзор эффектов и стилей анимации.

Дополнительные ресурсы о выражениях