Покадровая анимация
Покадровая рисованная анимация — это вид анимации, когда рисуется множество картинок, которые при быстрой смене друг друга образуют непрерывное движение. Человеческий глаз перестает замечать отдельные изображения примерно от 12 кадров в секунду. Частоту смену изображений принято обозначать как FPS, кадр/сек.
В целом рисовать 12 кадр/сек для учебных работ допустимо, но так как покадровую анимацию и перекладку (изучим эту технику в следующей теме) часто совмещают в Adobe Animate, то лучше брать 25 кадр/сек, особенно для простых упражнений, как наш итоговый проект.
Для создания в Adobe Animate покадровой анимации нам понадобиться шкала времени — Timeline. С помощью нее можно увидеть отдельные кадры, перемещать и удалять их, воспроизводить видео.
Timeline
Шкала времени состоит из дорожек (слоев) с кадрами и инструментов. Чтобы добавить новый слой просто нажмите на знак плюса. Для удаления слоя воспользуйтесь знаком «корзины». Двойным щелчком мыши можно переименовать дорожки.
Чтобы скрыть слой нажмите на значок «глаза». Для подстраховки от случайных изменений слоя можно его заблокировать, используя «замок». Тогда программа не разрешит проводить никакие модификации со слоем.
Для группировки слоев используйте папку, а для показа слоя, на котором вы работаете, примените функцию «показывать только активные слои» в левой части шкалы времени.
Слои шкалы времени также можно подсвечивать и показывать только контуры, без заливок. Настройки слоя редактируются через Layer Properties через двойное нажатие на прямоугольную иконку.
Кроме того, из доступного функционала программы есть камера, которая позволяет кадрировать и поворачивать композицию. То, что попадет в поле зрения камеры будет показано на экране. Рядом с камерой располагается инструмент «привязка», который позволяет создавать связь между родительскими и дочерними слоями.
В другой части шкалы времени находится важный инструмент Onion skin (Shift + Alt + O), калька, которая показывает фазы до и после выбранного кадра, благодаря чему можно детально редактировать рисованную анимацию. Можно отмечать необходимый диапазон отображения кадров и проигрывать его через кнопку в виде закрученной стрелки Loop.
Для проигрыша всей анимации нужно выключить диапазон и просто нажать Play (клавиша Enter), для остановки выбрать значок Pause (пауза). Справа панели с помощью ползунка есть возможность менять размер кадров.
В Adobe Animate на шкале времени есть ключевые кадры, «ключи» (key frames), последовательность которых создает рисованную анимацию, когда каждый кадр рисуется вручную, а не создается самой программой. Эти кадры выглядят как прямоугольник с точкой. Для их редактирования нам потребуется несколько горячих клавиш:
F5 — продлить ключевой кадр F6 — скопировать ключевой кадр F7 — создать пустой (следующий) кадр
Чтобы кадры активировались (стали светлыми) не забудьте нарисовать что-нибудь на монтажном кадре, иначе ключи будут серыми, то есть пустыми. Для удаления кадров используйте инструмент Remove frames (Shift+F5), а для переключения между кадрами — клавиши «<» и «>».
Для ускорения работы с кадрами я рекомендую использовать горячие клавиши. Инструменты Insert keyframes (F6), Insert blank keyframes (F7), Insert frames (F5) в верхней части шкалы времени можно использовать, но лучше экономить силы.
Ускорение и замедление
В рисованной анимации существует 12 принципов, которые были сформированы на студии Дисней и используются по всему миру. Это анимационная база. Для тренировки создания покадровой анимации в Adobe Animate мы попробуем взять один принцип на примере круглого объекта, а именно ускорение и замедление. Остальные принципы вы можете изучить в книге «Аниматор: набор для выживания. Секреты и методы создания анимации, 3D-графики и компьютерных игр» от Уильямса Ричарда.
Для начала создадим монтажный кадр 1920 на 1080 px, 25 кадр/сек (принятый в России стандарт для анимации). Через панель View > Rulers активируем направляющие, установим одну из них по горизонтали, это будет наша опора.
У нас есть два ключевых кадра, точка начала и точка конца в маршруте мяча. Между ними необходимо нарисовать промежуточные изображения (фазы), воспользовавшись калькой, но если их нарисовать на одинаковом расстоянии, то эффекта ускорения и замедления не возникает.
Нам нужно изменить расположение промежуточных кадров. Чем ближе друг к другу кадры, тем медленнее становится движение, а чем дальше кадры, тем быстрее. Сначала объект медленно разгоняется, потом ускоряется и в конечной точке останавливается с замедлением.
Поэтому рисуем наш объект отдаляя от начальной точки, а потом приближая к конечной, изменяя расстояние между кадрами. Измерить его можно с помощью специальных отметок, схем.
Для этого возьмем яркий цвет и нарисуем вертикальные линии на краю объекта. Расстояние между черточками должно увеличиваться, а потом уменьшаться. У нас уже есть линейка, которая помогает сохранять довольно простую траекторию, но можно также провести её горизонтальной линией.
Так как у нас простой объект, то его нет необходимости заново рисовать в каждом кадре, можно просто копировать. Для более сложных фигур, конечно, придется каждое изображение создавать индивидуально.
В результате можно проследить ускорение и замедление мяча. Если объект двигается слишком медленно, сократите длительность или количество промежуточных кадров, а если движение получилось прерывистым, то дорисуйте еще фаз.
Домашнее задание
Задача: создать черновую покадровую анимацию ускорения и замедления объекта
Описание: ознакомиться с темой и повторить покадровое анимационное движение мяча с ускорением и замедлением
Условия: обязательное использование ключевых кадров, кальки, кисти, принципа ускорения и замедления, создание схем (из линий) для траекторий и проверки корректности расстояний между фазами, загрузка задания для проверки на гугл-диск в формате 1920×1080, 25 кадр/сек, MP4
Результат: черновая покадровая анимация с ускоряющимся и замедляющимся мячом
