Перед тем как мы приступим к нашей первой анимации, попрыгунчику, я хочу сначала организовать технический вызов: текст должен быть нарисован, как будто бы его нарисовали вручную. "Fig Leaf Rag" имеет прекрасное введение с ударением в конце, где мы разместим точку восклицательного знака.
Существует несколько методов, которые более или менее хороши в зависимости от ситуации, в которой мы находимся. Поскольку я работаю с графическим планшетом, я нарисую текст и покажу вам, как это работает. Но прежде чем это сделать, я покажу вам еще один способ, который, однако, не является моим фаворитом:
Шаги 1–10
Шаг 1
Я хочу удалить текстовый слой и вместо него создать композиционный слой, обычный пиксельный слой, на котором я смогу рисовать. Текст должен быть внутри слоя. Для этого я создаю вложенную композицию с помощью Ctrl+Shift+C или через Слой>Создать вложенную композицию. Я называю это "Typo_Intro".
Шаг 2
Все атрибуты были сохранены, включая Турбулентное смещение.
Поскольку я этого не хочу, я выбираю Турбулентное смещение, нажимаю Ctrl+X и затем вставляю это все снова в композицию выше ("Fig Leaf Rag").
Шаг 3
Возвращаемся в композицию "Typo_Intro". Здесь мы нашли текст и можем его анимировать.
Первый вариант - с помощью Траекторий. Я беру Инструмент пера и провожу первую линию буквы A на тексте. Затем отпускаю и, нажимая клавишу Ctrl, кликаю где-то на черном фоне и таким образом завершаю текущий путь, прежде чем провести вторую линию буквы A.
Я опять отпускаю, кликаю на черном фоне с зажатой клавишей Ctrl и затем провожу следующую линию и так далее, пока весь текст не будет нарисован.
Шаг 4
Теперь я добавляю эффект. Мы находим его как Контур в версии CC в разделе Генераторы. В CS6 он назывался Эффект контура.
Мы выбираем маску или отмечаем Все маски и таким образом можем нарисовать эти маски.
Шаг 5
Я скрываю маски с помощью этого маленького символа и окрашиваю Путь в красный цвет. Я могу также изменить Размер, однако только глобально для всех масок.
И когда я снова показываю маски, я могу сдвигать и настраивать отдельные точки, чтобы закрыть весь белый текст снизу.
Шаг 6
Здесь я имею Ползунок начала и Конец: провожу его от начала до конца и таким образом нарисовываю весь текст.
Это работает очень хорошо, но у вас нет полного контроля. Например, нужно использовать всегда одну толщину линии, поэтому нельзя рисовать то тоньше, то толще.
Поэтому я хотел бы показать вам еще один метод, который мне кажется немного быстрее, чем поочередно все это перерисовывать …
Шаг 7
В этом случае я предпочитаю чуть более быстрый метод с использованием Кисти.
Однако эту Кисть нельзя применить к текстовым слоям. Поэтому нам нужно снова создать Вложенную композицию и назвать ее "Typo_Statisch". Мы можем сразу работать в этой Вложенной композиции.
Шаг 8
Как только мы захотим работать с Кистью и дважды кликнем в Режиме кисти, откроется панель слоев, и только там можно работать с Кистью.
Появились также два новых панели: Кисть и Рисование. В панели Кисти можно настроить размер, жесткость и т. д. кисти.
И в панели Рисование мы можем выбрать способ рисования. Изначально указано "Постоянно", но я изменяю на "Анимировать рисование".
Я провожу один штрих, еще один и еще один - но как только я завершу один штрих, он странно исчезнет.
Шаг 9
Когда я возвращаюсь на другую вкладку и прокручиваю по временной шкале, я вижу, что все линии там и все автоматически нарисованы.
Шаг 10
Если нажать на UU для всех измененных свойств, то мы увидим здесь множество дополнительных свойств.
Для каждого из них также отображаются начало и конец.
Кроме того, мы можем изменить отдельные расстояние, жесткость и даже позицию каждой линии - даже после того, как она была нарисована.
Просто продолжайте: Шаги 11–20
Шаг 11
Я удаляю все еще раз, чтобы у нас был лучший обзор.
Я снова рисую новую линию, и если вы находитесь в режиме слоев, вы увидите траекторию. Это то, что сохраняется.
Предположим, мне не нравится нарисованная линия, тогда я могу ее перерисовать, выбрав ее и просто рисуя заново. Он будет обновлен и просто перезаписан.
Шаг 12
Точно так же я хочу нарисовать текст, потому что это самый быстрый способ создать такую анимацию.
Итак, я уменьшаю диаметр и прохожу по тексту графическим планшетом, перенося его сюда.
Шаг 13
Я нарисовал все линии, и если мы воспроизведем это во временной шкале, мы увидим, что все там.
Если я нажму U, у нас снова будут все ключевые кадры.
Шаг 14
Если я нажму клавишу Ü, окно, над которым сейчас мышь, максимизируется. В этом случае - временная шкала. Так у меня больше места, и я лучше вижу элементы, которые выделяются. Я немного отодвигаю их, чтобы все примерно одинаково длились.
Шаг 15
Давайте воспроизведем это.
Кстати: Если вы случайно нажали клавишу Caps Lock, то After Effects не обновляется. В этом случае вы увидите уведомление Отключите Caps Lock, чтобы обновить вид.
Когда мы теперь воспроизводим это, After Effects начинает рисовать все буквы одновременно. Но он должен начать сначала и продолжать вперед. Вот в чем загвоздка. Чтобы добиться того, что я хочу, придется синхронизировать все вручную - одну линию за другой. Это довольно сложно. Я хочу сделать это быстрее.
В следующем шаге объясню вам, как именно - но сначала мы выделяем все линии.
Шаг 16
Поэтому я использую скрипт, который устанавливает эти ключевые кадры один за другим.
Этот скрипт я написал сам и, конечно же, передал вам его. Вы найдете его в папке Скрипты с именем Последовательность линий. Тот, кто знаком с фильмом "Последовательные слои в After Effects", может приблизительно представить, что делает этот скрипт.
Я открываю этот скрипт в Extend Script и запускаю его.
Шаг 17
Теперь у нас практически лестница из ключевых кадров, и текст рисуется пошагово. Однако это все еще слишком медленно.
Нам нужно ускорить это. Для этого мы выделяем все, берем последний ключевой кадр, который мы находим, нажимаем клавишу Alt- и тянем его на 5 секунд.
Тогда это уже будет намного быстрее.
Последняя точка должна быть немного задержана, но об этом мы позаботимся сейчас.
Шаг 18
Я хотел бы также поговорить о значении смещения-offset-. Он влияет на переходы ключевых кадров:
Если мы посмотрим на сейчасшние переходы ключевых кадров, то следующий всегда начинается там, где заканчивается предыдущий (a).
Если я этого не хочу и, например, хочу вместо этого два кадра паузы между двумя линиями, то я ввожу 2 в смещение.
Конечно, мне нужно снова выбрать все кисти, прежде чем я смогу активировать этот скрипт. С помощью Ctrl+A я могу выделить все сразу.
Или я хочу, чтобы кадры перекрывались, тогда я устанавливаю значение -2 в смещении. Тогда он всегда будет на два кадра назад от фактического. Однако, если вы уже так быстро уменьшили это, как мы здесь, это не имеет смысла. Я также доволен и оставляю 2.
Шаг 19
То, что я точно хочу изменить, это время восклицательного знака. Я хочу лучше синхронизировать его с музыкой.
Поэтому мне нужна эта музыка в композиции. Я перехожу в раздел "Fig Leaf Rag" и копирую файл.
Затем, возможно, вернусь в композицию с помощью Alt-клика и вставлю его здесь.
Шаг 20
Теперь посмотрим, где находятся две позиции, которые нам нужны. Для этого я использую Num-Pad и нажимаю клавишу Коммы, чтобы создать предварительный просмотр. Звездочку * на Num-Pad, чтобы поставить маркер. На устройствах без Num-Pad, особенно на Mac, это будет cmd+Комма для предварительного просмотра и cmd+8 для маркера.
Я сейчас воспроизвожу музыку и ставлю маркеры точно в тех местах, где должны быть стрелка и точка восклицательного знака (1). Именно в момент двух акцентов мелодии.
Таким образом, я установил два маркера: на первом должна быть готова стрелка восклицательного знака, а на втором - точка.
Я устанавливаю линию-ориентир на первый маркер и перехожу в композицию "Typo_Statisch". Там я сдвигаю тот кадр на линию-ориентир, который обозначает линию восклицательного знака (2).
То же самое я делаю со вторым маркером, указывающим позицию точки: я устанавливаю линию-ориентир на маркер и сдвигаю кадр в соответствии с ней в композиции.
Последние шаги
Шаг 21
Я хочу, чтобы стрелка восклицательного знака рисовалась медленнее, чем текст до этого, чтобы у нас был более выразительный восклицательный знак (1).
И в целом текст должен стать немного быстрее готовым. Так что я выделяю все текст до этого (2) и немного передвигаю его вперед (3).
Так что все синхронизировано идеально.
Шаг 22
Мы нарисовали текст поверх текста и сейчас сделаем некоторые изменения.
Сначала я дублирую слой "Typo_Statisch" и удаляю на нижнем слое эффект Рисование.
Шаг 23
Итак, на верхнем слое у нас нарисованный текст поверх белого оригинала.
На нижнем слое у нас обычный белый текст.
Если мы установим флажок Наносить прозрачность,, то останутся только нарисованные красные линии.
Шаг 24
Таким образом, верхний слой будет использоваться в качестве маски для нижнего.
Если маска не отображается, просто нажмите на Включить/отключить режимы, в результате отобразится движущаяся маска BewMas
Здесь я могу выбрать альфа-маску, и достигнуть именно того результата, который мне нужен. То есть, где нарисованы эти линии, там также виден мой оригинальный текст.
Я что-то немного сдвинул, потому что прямо в начале уже есть буква A.
Шаг 25
Итак, лучше всего выбрать все кисти с помощью прямоугольного выделения, от нижней части до верхней (1), а затем исключить два кадра восклицательного знака с помощью Shift+выбор (2). Поскольку оба кадра уже точно расположены во времени.
Затем я сдвигаю первый кадр вниз немного вправо, чтобы буква A совершенно в начале не была видна.
Теперь все в порядке.
Шаг 26
Мы сделали это в подкомпозиции, здесь у нас есть эффект Турбулентное искажение.
Если мы посмотрим это все в этой композиции, то увидим не только желтое, изменяющееся цвета, но и дрожащее. 
Шаг 27
Это замечательно и идеально подходит, но цвет должен измениться только после этого или вообще не меняться. Изменение цвета пока отсутствует.
Итак, мы завершили первые 4 секунды трейлера и увидим вас снова в следующей части учебника, с Bouncing Ball.
