Как сделать счетчик в After Effects

Обновлено: 04.07.2024

Мой последний проект для Loop — это совершенно новый скрипт для создания одометров или счетчиков скользящих чисел в After Effects, как показано ниже:

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

Когда я посмотрел на реальный процесс, я понял, что в нем много повторений, обычно везде, где есть повторения, есть шанс на автоматизацию!

Вот почему я создал скрипт Numero, чтобы автоматизировать этот процесс! Теперь я просто выбираю количество колонок и нажимаю «Пуск» — после этого скрипт делает за меня 99% работы, включая предварительную композицию и создание подложки! Также есть дополнительные элементы управления интервалом, и поскольку все это делается с помощью текстовых слоев, вы можете легко редактировать стиль и интервал по вертикали с помощью текстовых элементов управления.

Возродить планету заново с помощью внештатной анимации и моушн-дизайна

У нас есть только одна планета, и прямо сейчас ей нужна вся возможная помощь. Изменение климата и утрата биоразнообразия – это огромные проблемы, с которыми нам нужно бороться.

Вот почему за каждый внештатный анимационный проект стоимостью более 1000 фунтов стерлингов от вашего имени будет сделано пожертвование в размере 1 % от общего бюджета в пользу World Land Trust.

Деньги пойдут на программу WLT "Купи акр"; скупка и защита жизненно важных мест обитания по всему миру и помощь в борьбе с изменением климата.

Для любого проекта моушн-дизайна стоимостью менее 1000 фунтов стерлингов будет посажено дерево от вашего имени.

На данный момент сэкономлено акров:

Благодаря моим замечательным клиентам и созданным нами анимациям было пожертвовано достаточно денег, чтобы сэкономить:

17,5 акров жизненно важных мест обитания по всему миру.

Подумать только, ваш анимированный пояснительный видеоролик или анимация логотипа также могут помочь в борьбе с климатическим кризисом!

Если вас интересуют анимационные работы на фрилансе и спасение планеты, свяжитесь с нами и пообщаемся!

Мы помогаем вам рассказывать потрясающие истории, которые меняют умы и покоряют сердца. У вас есть анимационный проект? Свяжитесь с нами: [email protected]

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

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

О, и если вы хотите продолжить и использовать выражение, которое он использует, вот оно. Все, что вам нужно сделать, это скопировать его:
n=effect("Slider Control")("Slider");
Math.floor(n) + «%»

Анимация входа вашего текста

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

Преувеличение анимации

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

Экономьте время, используя выражения

Если у нас есть текст, связанный с нашим номером, и мы хотим, чтобы оба элемента одновременно входили в композицию одинаковым образом, мы можем использовать выражения для экономии времени. Для этого мы снова разделяем значения X и Y в нашем тексте и нажимаем Alt над Y, чтобы мы могли связать движение с движением Y нашего числа.

Если текст, привязанный к числу, не оказывается в желаемой позиции (он появляется над или под числом), мы можем добавить «значение+» к выражению Y. Теперь мы можем манипулировать координатой Y текста и помещать его в любое место.

Интерфейс Adobe After Effects

Создание счетчика

После того как мы связали число и текст (или тексты), мы можем приступить к созданию нашего счетчика.

Создание и привязка ползунка

Для этого мы переходим в «Эффекты»> «Управление выражением»> «Управление ползунком»; появится ползунок со всеми числовыми значениями нашего счетчика.

Переходим к нашему номеру в нашей временной шкале и, открыв параметры «Текст», вводим выражение «Исходный текст» по нажатию Alt. Пишем (без кавычек) «n=» и связываем его с ползунок, который мы ранее открыли, перетащив мышь от выражения к самому ползунку. Наконец, мы закрываем строку, вводя «;».

Использование Math.floor

Если теперь мы нажмем пробел, чтобы воспроизвести наш счетчик, мы увидим, что числа отображаются с десятичными знаками. Если мы хотим, чтобы отображались только целые числа, то нам нужно будет использовать выражение «Math.floor». Для этого в следующей строке вводим «n=", нужно просто написать (без кавычек) «Math.floor». .floor(n)». Теперь наш счетчик будет округляться до целых чисел.

Добавление процента

Чтобы добавить символ процента, нам просто нужно написать в выражении следующее: +”%”. Таким образом, рядом с нашим номером автоматически появится знак процента.

Анимация масштаба числа

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

Вы можете посмотреть видео ниже:

Если вы нашли эти советы полезными, помните, что вы можете научиться создавать анимацию легко, быстро и просто с помощью Yimbo в его курсе Domestika «Экспресс-анимация для социальных сетей с помощью After Effects».

Если вы хотите научиться оживлять своих персонажей и показывать их настоящие личности, попробуйте его курс «Основы анимации персонажей с помощью After Effects».

Здравствуйте, добро пожаловать в тему подсчета чисел, где он увеличивается с 0, в данном случае до 53%. Хорошо, давайте теперь посмотрим, как это сделать.

Итак, сначала у меня есть проект, который я как бы начал для нас. Вы, очевидно, можете использовать свои собственные, перейдите на рабочий стол, найдите свои файлы упражнений, один из них называется «Круговые диаграммы», и он называется «Счетчик чисел». Теперь то, что я сделал для вас, это то, что я создал именно то, что мы сделали в предыдущем упражнении, вместо двух из них, где у нас были Tablet и Mobile, я только что сделал один. Процент составит 83%. И я только что вычислил это уже. Это просто глупый диск посередине, из-за чего он похож на пончик.

Теперь мы хотим добавить числовой счетчик. Прежде всего, нам нужен текст. Итак, мы собираемся взять инструмент «Текст», щелкнув его прямо посередине. И я собираюсь напечатать свои цифры. Я использую здесь этот шрифт под названием Lust. Это бесплатно, это от TypeKit, мы рассматривали TypeKit ранее. Теперь то, что мы хотим сделать, это то, что мы не хотим иметь процент в том же текстовом поле, так что ему 50, на самом деле это 53%. Это мой топ. И я хочу, чтобы он был в отдельном поле, потому что числовой счетчик может работать здесь, но не может добавлять туда проценты.

Итак, я выберу его здесь, скопирую и вставлю. И он дожил до 54, это круто. Дважды щелкните по нему и измените его на проценты. Сейчас как-то мешает, только хватать инструмент. Сдвинув его, я удерживаю «Shift», пока перетаскиваю. Итак, теперь у нас есть эти две маленькие единицы. Так что проценты нам больше не нужны. Именно над этим номером 53 мы и будем работать. Если вы пытаетесь редактировать другие части, я заблокировал все слои вместе, чтобы вы не испортили их, но если вы хотите их испортить, разблокируйте их.

Первое, что нам нужно сделать, это создать нечто, называемое Slider. И он будет контролировать движение вверх и вниз, и позволит нам использовать ключевой кадр. Итак, что мы собираемся сделать, это перейти в «Эффекты и пресеты» и ввести «Слайдер». И здесь есть один под названием «Slider Control». Нажмите и перетащите его сюда или, что проще, перетащите его к номеру здесь внизу на слоях. Теперь это то, к чему мы собираемся подключиться. Поэтому я применил этот эффект под названием Slider, и Slider просто позволяет вам крутить его вверх и вниз. Он еще не подключен. Нам нужно, чтобы он соединился с одним из атрибутов внутри здесь. И на самом деле, что будет хорошо для нас, так это исходный текст. И то, как вы соединяете их вместе, такое же, как когда мы добавляем выражение. Помните, мы удерживаем клавишу «Alt» на ПК или клавишу «Option» на Mac. Нажмите на маленький секундомер. И мы начали немного Expression.

Теперь то, что мы сделали ранее, удалили его и заменили. Теперь мы собираемся использовать эту штуку под названием Pickwhip.И его работа состоит в том, чтобы нажимать, удерживать, перетаскивать, он немного странный, поэтому я хочу, чтобы вы тоже подключились и отпустили слайдер. Нажмите «Возврат» на клавиатуре, щелкните в любом другом месте документа. И теперь, если мы вернем наш Playhead в начало, этот слайдер будет подключен. Круто, да! Итак, нам все еще нужно анимировать ключевые кадры с помощью вот этого маленького секундомера. Итак, в начале я собираюсь установить его на «0». Вы можете перейти в отрицательное значение, поэтому установите его на «0». Давайте запустим секундомер, чтобы добавить ключевой кадр. Тебе решать. Мы находимся в этом «Элементе управления эффектами», вы на самом деле найдете материал здесь, там есть Эффекты. Это элемент управления Slider. И если вы предпочитаете использовать его здесь внизу, как в остальной части урока, вы можете увидеть ключевой кадр там или использовать тот, что там вверху, это не имеет значения.

Итак, как далеко мы собираемся зайти? Что я, вероятно, собираюсь сделать, так это заставить его начать примерно там, поэтому я хочу, чтобы этот первый ключевой кадр был равен 0 примерно там. Вот эта планка, мы как бы пытаемся ее ассоциировать, и когда она будет закончена, я хотел бы поднять ее до 53%. Потрясающий! Проблема в том, что по умолчанию в нем есть дроби или десятичные точки. Это довольно легко удалить. На самом деле нормально считает. Что мы хотим сделать сейчас, так это найти то выражение, над которым мы работали. Он находится в разделе «Текст», «Исходный текст», вот он.

Теперь, что мы собираемся сделать, чтобы исправить это, нам нужно поместить его в круглые скобки внутри набора квадратных скобок, чтобы скобка была в конце, скобка в начале, так что заверните это. В начале здесь мы используем Capital M для Math.round Без пробелов. Щелкните в любом другом месте, и, надеюсь, теперь он поднимается без всех дополнительных десятичных точек. И это мои друзья. Хорошо, у нас есть небольшой процент на нашем крутом маленьком графике.

Все, увидимся в следующем уроке. Я вернулся на секунду. Я просто закрывал файл и думал: «Это может их взбесить». Смотрите здесь, в моих панелях, мы здесь в таком другом режиме. Так что вы можете добавить Switches, на самом деле мы в Modes. Теперь, если я нажму на это, это вернется к тому, как мы были на протяжении большей части курса. Нажмите на это снова. Как-то странно найти эту кнопку. Вы можете искать здесь вверху и внизу, но посмотрите на этого парня, трансформирующегося из... мы будем смотреть на них больше, когда будем проходить через Маски, но большую часть времени мы будем здесь с нашим прекрасным Размытие в движении и наше 3D. Поэтому убедитесь, что вы установили его обратно после... причина, по которой он переключился, заключается в том, что мы ранее возились с выражениями. Хорошо, как вы были.

Вы когда-нибудь хотели воссоздать в Adobe After Effects таймер обратного отсчета для запуска ракеты или просто создать напряженный момент в видео, показав, как истекает время? Как сделать обратный отсчет в After Effects — это то, чему вам нужно научиться!

В этой статье я покажу вам, как создать обратный отсчет вместе с AE. Этот процесс прост и охватывает плагины и выражения. Мы можем сделать это несколькими способами, так что оставайтесь и узнайте больше!

800+ анимированных элементов 6K и 4K

Более 800 анимаций перетаскивания, которые работают непосредственно в Premiere Pro. Улучшите редактирование видео с помощью профессиональных инструментов для редактирования видео. Не нужно нанимать аниматоров по высокой цене и выглядеть более профессионально.

Скидка 30 % — ~~84 доллара~~ 49 доллара

Как легко создать таймер обратного отсчета в After Effects

Создайте новый текстовый слой.
Откройте параметры текста и нажмите Alt + (ПК) или Option + Клик (Mac) на секундомере исходного текста.
Вставьте следующее выражение в область выражения: timeToCurrentFormat().
Чтобы он выглядел как настоящий цифровой таймер обратного отсчета, вы должны установить частоту кадров вашей композиции на 60 кадров в секунду.
Предварительно скомпонуйте все и измените скорость композиции, чтобы начать обратный отсчет. Чтобы изменить скорость композиции, щелкните ее правой кнопкой мыши, перейдите к пункту «Время» и выберите «Обратный по времени слой».

Примечание. Вы можете настроить начальное значение таймера обратного отсчета, просто изменив продолжительность композиции в настройках композиции. Чтобы получить доступ к настройкам композиции, войдите в любую композицию и нажмите Control + K (ПК) или Command + K (Mac).

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

Вот короткое видео, которое показывает, как просто сделать таймер обратного отсчета таким образом:

Использование плагина Timecode для создания таймера обратного отсчета

Вместо использования выражения «timeToCurrentFormat()» вы можете использовать подключаемый модуль Timecode для создания таймера обратного отсчета. Просто добавьте плагин в New Solid, и он автоматически создаст макет таймера — проделайте тот же процесс, что и раньше, чтобы превратить его в таймер обратного отсчета.

Вот короткое видео, которое показывает, как просто сделать таймер обратного отсчета таким образом:

Как создать простой обратный отсчет в After Effects

Создайте текстовый слой.
Откройте параметры текста и нажмите Alt + (ПК) или Option + Клик (Mac) на секундомере исходного текста.
Вставьте следующее выражение в область выражения: Math.floor(-time)+10. Вместо «10» вы можете добавить любое число. Это будет начальное значение обратного отсчета.

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

Вот короткое видео, которое показывает, как легко вести обратный отсчет таким образом:

Вот оно! Теперь вы знаете, как сделать простой обратный отсчет и таймер обратного отсчета в After Effects, и у вас есть три способа сделать это. Используйте эту информацию, чтобы добавить изюминку в свои видео и дополнить впечатления зрителей.

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

Другой метод

Предложено Павлом К.:

Без реверса времени и масок скопируйте и вставьте на слой выражений:

timeToCurrentFormat(((5 * 60) – время) / 60).replace("00:00:", "")

Где вместо числа 5 добавьте любое значение, с которого вы хотите начать обратный отсчет.

Связанные

Михай Сесса

Проработав 6 лет в студии постпродакшна, Михай решил поделиться своими мыслями о редактировании видео и компьютерах.

Дополнительное чтение.

Как стабилизировать видео в DaVinci Resolve

Как использовать общий узел в DaVinci Resolve

Как добавить текст в Filmora

1 комментарий

Павел К

Я бы предложил немного более элегантное решение, без обращения времени и масок…
Скопируйте и вставьте это в слой с выражениями

Читайте также: