Иногда вместо тысячи слов и схем достаточно одной простой GIF-ки. Здесь я рассказал принцип работы индукционной плиты. Для иллюстрации мне понадобилась всего одна GIF-анимация. В этой статье я расскажу как сделать анимацию в программе Adobe Animate и сколько времени занял каждый шаг. Из примеров сделаем познавательный нарратив, который позволит разобраться почему происходит смена времён года (и который сейчас уже удалён с Дзена).
Почему именно Adobe Animate
Я ещё в школе рисовал анимацию во Flash. Может кто вспомнит Масяню, Етиспорт или другие детища Flash-анимации. По общеинтернетной договорённости Flash решено было убить ещё 15 лет назад. Поэтому Adobe переименовала его редактор в Animate. Вместе с этим компания не только сохранила удобство создания анимации, а ещё и добавила новых штук, которые для GIF-анимации никак не помогут, поэтому всё что будет в этом мастер-классе абсолютно также подходит к программам Flash (CC, CS, MX и даже ещё более старым). Насчёт удобства, это моё личное мнение, и Adobe за рекламу мне не платила (поэтому не даю ссылку для скачивания, а Вы сами найдёте откуда скачать программу в Яндексе).
Смена времён года
Если вы спросите своих друзей или коллег, почему зимой холоднее, чем летом, то больше половины ответит: "смена времён года обусловлена тем, что орбита земли эллиптическая" и что "зимой земля дальше от солнца и у нас холоднее". Первое не подлежит сомнению, поэтому и во втором почему-то не сомневаются. Но ведь все знают, что "когда у нас лето в другом полушарии - зима". Чтобы не стать сторонником теории плоской земли, идём в википедию и узнаём, что ближе всего земля к солнцу 3 января. Тот так мы узнаём, что у нас оказывается даже теплее чем в южном полушарии. Если посмотреть на географические координаты Москвы и аналогичные в Южном полушарии, то из суши мы найдём южную часть Южной Америки. На 3 градуса ближе к экватору от тех мест находится всемирно известный Лос-Гласьярес с его 100 метровыми ледниками и айсбергами в озёрах, а ещё там живут пингвины. Но если земля находится на 10 миллионов километров дальше от солнца, то почему там холоднее всего на 5 среднегодичных градусов? Смену времён года создаёт угол падения солнечных лучей на землю, а он обусловлен наклоном земной оси. Эллиптическая орбита влияла бы только если бы не было наклона земной оси. Тогда в июле у нас бы в среднем было пара градусов, а на новый год теплело бы аж до 10-15 градусов. Так что не забудьте показать своим детям результат наших трудов.
Начало работы
Всё что будет видно в анимации следует размещать на сцене (основное поле редактора). Если двигаться будет больше одного объекта, то я рекомендую всю работу с изображениями проводить в символах (они хранятся в библиотеке). Для GIF-анимации это графика, а для более сложных проектов можно например внутри одной анимации запустить другую и так формировать ролик как матрёшку. Из библиотеки можно перетаскивать символ только в ключевые кадры.
Чтобы использовать объект, который до вас уже сотни раз рисовали и фотографировали, лучше взять готовый (например найти в интернете картинку с прозрачным фоном) или как я в слайдах ниже для изображения Земли и Солнца преобразовал фотографии из интернета в их упрощённый вариант и оставил только то что нужно.
Размещаем на одном слое Солнце и орбиту земли, а в слое выше - Землю (слои заслоняют те, что ниже). Копируем орбиту в качестве направляющей по которой будет летать Земля. Выберем время одного оборота равный 4 секундам и сделаем ключевые кадры (те моменты и места в которых символ обязательно должен быть) на каждую четверть пути. И создаём на ключевых кадрах классическую анимацию движения. Чтобы просмотреть и убедиться, что всё сделали правильно, выделяем первый кадр и жмём Ввод/Enter на клавиатуре.
Экспортируем ролик в анимированный GIF, убираем прозрачность фона и ставим бесконечное число повторов.
Особенностью экспорта в GIF является то, что если вставить фрагмент ролика в анимацию (или создать программную анимацию через "Действия"), то при экспорте будет виден только первый кадр. Это заставляет делать всё не "в одном кадре", а раскладывая всё на временной шкале самого документа. Поэтому для вашего удобства советую называть слои осмысленными именами, группировать и называть элементы в библиотеке.
Анимация движения
Классическая анимация движения позволяет плавно изменять положение, а также размеры, ориентацию и свойства символа. В примере я преобразовал надпись в символ и изменил его прозрачность. Но довольно часто надо сделать более сложную траекторию движения с изменением скорости (или не прибегая к направляющим, а просто из символа, ведь в экспорте в GIF видна направляющая, а скрыть её в цвет фона иногда не получается). Тогда поможет анимация движения. В созданной анимации движения достаточно просто изменить местоположение объекта в нужном кадре и ключевой подставится автоматически. Для эффектов неравномерной скорости выберете "уточнить анимацию движения", и в графике скорости добавьте эффекты замедления. На картинке для примера видна нелинейная траектория движения солнца, но лично я не очень люблю анимацию движения из-за низкой её предсказуемости в хоть чуть-чуть усложнённых задачах. Идеальной задачей, решаемой анимацией движения, является полёт мусора и листьев от порыва ветра (анимацию движения можно скопировать к другим символам) или посадка самолёта с торможением.
Покадровая анимация
Любую анимацию движения или формы можно разложить по кадрам для того, чтобы вручную внести необходимые правки. Тогда важно согласовывать редактируемый кадр с текущим и следующим. В этом помогают режимы контуров многослойной структуры и слоёв. В примере я сделал скриншоты из глобуса земли с небольшими поворотами и сделал из них покадровую анимацию вращения. На создание анимации вращения Земли (включая создание и обработку рисунков для каждого кадра) ушло 10 минут.
Анимация формы
В нашем примере я не стал использовать анимацию формы, но покажу на примере трансформации формы тени зачем она может пригодиться и как ей пользоваться. Рекомендую прибегать к ней только для простых трансформаций сплошных фигур, так как зачастую на расстановку маркеров для правильной анимации формы уходит больше времени, чем на покадровую анимацию того же самого.