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

Что, если вместо этого, использовать названия композиций с панели Project? Сделать так, чтобы это

превратилось в это

Для этого нам понадобится использовать метод split(). Он разбивает текст на части и создаёт из этих частей массив, элементы которого мы и будем использовать.

Итак, в SourceText текстового слоя нужно прописать следующее:

thisComp.name.split(" - ")[0]

thisComp.name получает имя композиции, split() разбивает его на части. Если посмотреть на панель Project, то можно заметить, что в именах композиции имя и должность разделены дефисом. Достаточно указать этот дефис в скобках метода split(), чтобы получить массив, первым элементом которого ([0]) будет имя, а вторым ([1]) — должность.

thisComp.name.split(" - ")[0] // возвращает имя
thisComp.name.split(" - ")[1] // возвращает должность

Остаётся только прописать выражения в параметр SourceText текстовых слоёв и все необходимые данные будут отображаться автоматически. Теперь остаётся только копировать и переименовывать композицию, что гораздо проще, чем вводить все данные руками.

Оригинал статьи

Некоторое время назад я опубликовал свой скрипт, создающий удобную для работы в After Effects титровальную плашку. А на днях — пост о том, как её можно ещё больше автоматизировать. И вот теперь, наконец, у меня дошли руки, чтобы доработать свой скрипт, чтобы он сразу из коробки умел понимать размеры текста внутри себя.

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

По аналогии с Wipe Out Horizontal и Wipe Out Vertical появились Wipe In Horizontal и Wipe In Vertical. Теперь можно заанимировать появление и исчезновение плашки через эти значения, а параметры Width и Height оставить без ключей — благодаря этому можно редактировать их значения и быть уверенным, что новых ненужных ключей не создастся и анимация не поедет.

Появился параметр Parent. Можно создать несколько копий одной плашки и указать у всех них в качестве родителя одну, теперь параметры высоты и ширины будут наследоваться от неё всеми остальными слоями. Например, можно разнести их по глубине или использовать один из слоёв как маску для какого-нибудь блика. Значения Wipe In / Wipe Out не наследуются, чтобы оставить больше простора для творчества.

Теперь, если прилинковать плашку к тексту и включить чекбоксы Use Parent Text Width и Use Parent Text Height, плашка начнёт автоматически изменять свои размеры в зависимости от размеров текстового слоя. Не обязательно при этом включать обе галочки. В этом режиме параметры Width и Height превращаются в контроллеры отступов слева/справа и сверху/снизу соответственно. Также пришлось добавить ещё один параметр Line Height, регулирующий высоту одной строки. Последнюю, придётся высчитывать вручную, для этого рекомендую собрать следующую композицию:

Выровняв слой по нижнему краю букв верхней строки, выставить Height (здесь — высота отступов сверху и снизу) на 0 и регулировать Line Height, пока нижний край плашки не поравняется с нижним краем букв второй строки. Всё, теперь надо умножить получившееся число на 2 и высота строки вычислена, можно собирать плашку в тот вид, в каком она должна быть. Плашка будет подстраиваться по высоте текста корректно.

Автоматические размеры под размер текста будут работать только при параметре Parent установленном на None.

Версия скрипта получила номер 1.4 и доступна для скачивания на странице загрузок.

Придумал тут, как улучшить свой скрипт, создающий параметрическую плашку для текста. Шейповый слой нужно привязать к текстовому слою, из которого скрипт будет брать значение ширины и, при желании, высоты текста. Затем в параметр Width нужно прописать следующий код:

t = thisLayer.parent.sourceRectAtTime(time,false); // Указываем родительский слой
w = t.width; // Достаём значение ширины
x = 150; // Указываем сумму отступов справа и слева в пикселях
w + x

Если нужно, регулировать плашку и по высоте, то есть два варианта

Вариант попроще

В параметр Height нужно прописать:

t = thisLayer.parent.sourceRectAtTime(time,false); // Указываем родительский слой
h = t.height; // Достаём значение высоты
x = 150; // Указываем сумму отступов сверху и снизу в пикселях
h + x

Минус этого способа — высота плашки будет меняться в зависимости от того, есть ли у букв в тексте выносные элементы. Буква «р» увеличит высоту плашки на несколько пикселей за счёт выносного элемента снизу. Заглавная «Ё» увеличит ещё на несколько пикселей за счёт двух точек над «Е».

Вариант посложнее

Чтобы высота плашки не зависела от наличия или отсутствия выносных элементов у букв в Height вместо предыдущего кода нужно прописать следующее:

t = thisLayer.parent.text.sourceText; // Указываем родительский слой
lines = t.split(/\r?\n|\r/); // Создаём массив из строк
count = lines.length; // Достаём количество строк из массива
x=60; // Указываем сумму отступов снизу и сверху
h = 130; // Прописываем высоту одной строки
count*h + x

Минус этого способа — понадобится несколько минут, чтобы вычислить высоту строки. Параметр Font Size, казалось бы, должен отвечать именно за это число, но нет. Поэтому рекомендую сперва установить x на 0 и поиграться со значениями. Если у кого-то есть идеи, как можно выяснить высоту строки не методом тыка, буду рад почитать в комментариях.

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

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

Для начала надо понять, какой уровень автоматизации процесса нас устроит. Допустим, мы согласны вручную копировать и выравнивать столбцы (на самом деле не совсем вручную, а используя инструмент Align) и вручную вбивать цифры, но только один раз.

Итак, создадим пустой шейповый слой и добавим в него Rectangle. Переименуем слой для удобства.

Теперь добавим элемент управления этим и всеми связанными с ним слоями. Применим эффект Slider Control, который также переименуем.

Теперь нам надо сделать так, чтобы шейп вёл себя как столбик. Размер Rectangle регулируется параметром Size. Size требует двух значений, записанных в формате [x, y]. Нас в данном случае интересует только высота столбика, поэтому первое значение мы пока зададим цифрой, а второе привяжем к ранее созданному слайдеру. Кликаем левой кнопкой мыши по часикам напротив параметра Size, зажав Alt, и начинаем писать выражение:

[5,

После чего кликаем по спиральке и тянем мышью на строку Slider

В результате чего код выглядит так

[5, effect("Value")("Slider")]

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

[0,-effect("Value")("Slider")/2]

Разберём, что тут написано.

[0,

Положение столбца по горизонтали. Мы не будем менять положения слоя внутри шейпа, поэтому оставляем 0.

-effect("Value")("Slider")/2]

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

Теперь столбик ведёт себя правильно, но пользоваться им всё ещё неудобно — высота столбика задаётся в пикселях, а значения у нас могут быть совершенно разные. Напрямую использовать это значение для высоты столбца нельзя. Нужен коэффициент, с помощью которого можно увеличивать высоту столбцов, если значение столбца слишком маленькое и наоборот. Создадим Null Object, применим к нему Slider Control и переименуем его.

Допишем в выражение параметра Size знак *, чтобы получилось

[5,effect("Value")("Slider")*

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

[5,effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider")]

То же самое проделаем с параметром Position

[0,-effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider")/2]

Теперь остаётся добавить слою Fill, скорректировать его цвет и столбик готов. Слой можно копировать сколько угодно раз, и регулировать его значение через соответствующий слайдер.

Теперь добавим число, которое будет висеть над столбиком и показывать значение слоя, которое мы вбили руками.

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

Привяжем текстовый слой к первому столбику

Раскроем параметр Position и введём то, ради чего я и написал весь этот пост.

L = thisLayer.parent;
y = L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider");
[0, y]

Первой строкой мы задали переменной L значение родительского слоя.
Второй строкой мы вытащили значение эффекта Value из переменной L, то есть из родителя данного слоя, умножили это значение на коэффициент и присвоили всё это переменной y.
Третьей строкой мы задали двойное значение параметру Position — 0 по горизонтали и y по вертикали.

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

Однако вернёмся к нашей диаграмме.

Цифра съехала вниз, потому что After Effects отсчитывает пиксели слева направо и сверху вниз. Поправим код, добавив во второй строке минус.

L = thisLayer.parent;
y = -L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider");
[0, y]

Стало лучше, но нужно немного воздуха. Ещё немного поправим вторую строку кода

L = thisLayer.parent;
y = -L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider")-10;
[0, y]

Теперь нам надо сделать так, чтобы текстовый слой отображал значение, вбитое нами в столбик. Скопируем только что написанный код из параметра Position и вставляем его в параметр Source Text, немного поправив

L = thisLayer.parent;
y = L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider");
y

Работает! Теперь копируем текстовый слой необходимое количество раз и привязываем к каждому столбцу по очереди (Или удаляем все столбцы, начиная со второго, и копируем первый вместе с привязанной к нему цифрой).

Теперь заанимируем появление первого столбика, изменяя значение с нуля до 105. И видим посреди анимации следующее

Необходимо округлить значение, чтобы не видеть все эти страшные цифры после запятой. Для этого необходимо поправить код параметра Source Text, добавив в него метод Math.floor, округляющий значение вниз.

L = thisLayer.parent;
y =Math.floor(L.effect("Value")("Slider"))*thisComp.layer("Null 1").effect("K")("Slider");
y

Помимо Math.floor бывают ещё и Math.round и Math.ceil, различающиеся тем, в какую сторону они округляют.

Теперь нужно скопировать исправленный код на остальные текстовые слои. Для этого кликаем правой кнопкой мыши по Source Text и нажимаем на Copy Expression Only

А затем выделяем все остальные текстовые слои и нажимаем Ctrl+V.

Готово!