Как пользоваться adobe animate

Обновлено: 04.07.2024

Сегодня мы расскажем, как в Playrix создаются анимации в Animate (Flash). Статья посвящена несложным трюкам, которые можно использовать как базу для эффектов посложнее. Для профессионалов она, возможно, и не будет откровением, но начинающие флешеры (или анимейтеры, если хотите) наверняка найдут для себя что-нибудь интересное. Эти приемы точно сэкономят вам уйму времени в сложных задачах.

Несколько слов о флеше и других программах. Вопросы, наверняка, возникнут, ведь Flash «хоронят» уже который год, а он до сих пор никуда не исчез.

1. Почему мы работаем в Animate, а не в Spine?

Технология уже годами обкатана, изучена и прочно вписалась в рабочий процесс. Как программа для игровой 2D-анимации флеш жив и действительно хороших альтернатив пока нет.
Для Spine нужен дополнительный этап работы – риг. Это неоправданно для объектов или персонажей, у которых одна-две анимации (например, декорации Fishdom или персонажи в диалогах Township).
Производительность. Spine тут проигрывает даже с хорошим ригом, в котором нет ничего лишнего, минимум костей и простые меши.
Нельзя что-нибудь дорисовать на ходу. Во флеше мы это делаем регулярно и такой подход отчасти напоминает классическую рисованную анимацию – можно «прорисовать» практически любую позу или нужный эффект тщательнее, ригом мы не ограничены.
Spine ситуативен. Отлично подходит для персонажной анимации «2D строго вид сбоку» и всевозможных «оживших портретов» – которые и анимацией-то можно назвать с натяжкой. Кроме того, если нужно повернуть сложный объект больше, чем на 20-30 градусов, колдовать в Spine нужно еще сильнее, чем во флеше.

Как видите, Spine точно не «убийца флеша», но в ряде случаев мы все-таки используем и его.

И вновь дело в производительности, по этому критерию флеш выигрывает. 3D используется ситуативно, где без него никак не обойтись – рыбки в Fishdom, главные персонажи в Homescapes и Gardenscapes, например.
Лишние этапы работы – нужно создать модель, текстуры, риг.

3. Как флеш-анимации попадают в игру, что поддерживается, а что нет?

Используем свою программу-растеризатор, которая превращает swf в два файла: текстурный атлас и swl, в котором записаны все смещения объектов. Это аналог GAF.
Поддерживается: иерархия вложенностей, инстанс-неймы.
Не поддерживаются: маски, фильтры, tint/brightness и режимы наложения.

На первый взгляд может показаться, что во флеше невозможно сделать что-то действительно интересное. Но это не так! Сейчас объясним.

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

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

Итак, возьмем клип с квадратной стороной куба и поместим его во вложенность (назовем его «основной клип»). Преобразовать основной клип в изометрический тайл можно, если повернуть его на 45 градусов. Затем нужно сжать в два раза по вертикали то, что получилось (после поворота – сгруппировать, уменьшить по высоте на 50%, разгруппировать). Теперь у нас есть верхняя грань куба (рис.1).

Повернем его содержимое. Внутри у него всё еще квадрат и поворачиваться он будет как квадрат, ведь все искажения внешние.

Нижняя грань повторяет движение верхней. Создайте ее копию.

Полдела сделано, вращаются верхняя и нижняя грани. Движение их углов полностью определяет положение боковых граней. Предстоит немного механической работы, чтобы аккуратно подогнать боковые стороны (рис.2). Удобнее будет использовать режим graphic для верхних граней, чтобы их поворот отображался на основном таймлайне.

Затем можно сделать коробку деревянной и добавить «освещение»: полупрозрачные затемняющие клипы для боковых граней и посветлее – для верхней (рис.3). Теперь у есть готовый ящик:

Таким нехитрым способом можно сделать вращение и для других правильных многогранников – октаэдров, додекаэдров и т.д. С неправильными работать сложнее, но тоже возможно.

А сейчас мы откроем наш изометрический куб. На глаз открывать «крышку» долго и можно легко ошибиться – тогда движение может получиться дерганным.

Посмотрим на коробку сбоку – открытие створок предельно простое. Повернем их во вложенности (рис.1). Створки – это желтые отрезки. Рекомендуем для них использовать круг как подложку. Так удобнее и нагляднее будет трансформировать основной клип. Без круга, только с отрезками можно запутаться.

Затем расположим в изометрии клипы, которые содержат поворот створок во вложении, и поставим им режим graphic. Поворот желтых отрезков будем использовать как ориентир.

Пять минут механической работы, чтобы вместо палочек были настоящие створки – и готово (рис.2.2). Для второй пары створок можно использовать отзеркаленную копию первой.

Где это можно применять помимо очевидного открытия разных створок и ворот? Там, где нужно отследить перемещение объекта по круговым траекториям, особенно в сложных ракурсах.

В этом примере мы покажем, как подходы, описанные в предыдущих пунктах, можно применять для более сложных объектов. Анимировать будем маленькую машинку, которая ездит между дорожных конусов.

Очевидно, первое, что нужно сделать – представить сложный объект как набор простых, игнорируя вторичные элементы на этом этапе. (рис.1)

Подробно расписывать этапы работы над поворотом мы не будем, принцип тот же, что и в первых двух примерах – поворот неискаженного элемента машины во вложенности и последующая внешняя трансформация клипа (либо создание вспомогательных клипов, по которым проще отслеживать трансформацию сегментов машины). Во вспомогательных клипах можно сделать различные пометки, которые помогут отследить положение второстепенных элементов (Рис.2).

Поворот – одна из составляющих более сложного движения. Изначальная задумка – машина объезжает препятствия на дороге, двигаясь «змейкой». Можно попытаться двигать её по guide-кривой, но в этом случае сложно подобрать ease для твина (либо движение по кривой будет линейным, если анимировать без ease вообще).

Можно пойти другим путем и разложить сложное движение на составляющие (рис.3, слева направо с самого нижнего уровня вложенности):

Поворот машины на месте
Цикл движения из стороны в сторону
Движение машины по прямой

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

Прежде чем что-то делать, поищите способ, который позволит как можно быстрее набросать «картину» в целом – и обязательно им воспользуйтесь. От наброска гораздо проще двигаться дальше. Для флага мы выбрали такой вариант:

Анимируем вспомогательный символ (зацикленное движение вверх-вниз и в стороны) (Рис.1)

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

Когда «набросок» выглядит хорошо, можно продолжить работу. Используем положение вспомогательных символов как место стыка прямоугольных сегментов флага (Рис.2).

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

По сюжету краб выбегает из-за шара, затем останавливается перед ним и стучит клешней. Затем снова убегает за шар – таким образом совершив полный оборот. Анимация непростая, «запчастей» у краба несколько десятков, поэтому для такой задачи просто необходима хорошая организация структуры.

На основном таймлайне всего несколько символов (рис.1). Во вложенность помещены все действия краба помимо перемещения. Он поворачивается, удивляется, стучит по стеклу и т.д. – все это стоя на месте (рис.2). Туловище краба также содержит поворот во вложенности, это удобно.

Запутаться при таком количестве лапок проще простого, поэтому мы использовали вспомогательные клипы. На них циклично меняется состояние для каждой из «ног»: находится на поверхности (большой кружок) или поднята вверх (маленький). Вся эта структура затем поворачивается вместе с крабом (Рис.3).

У этого крабика множество разных анимаций, структура вложенности у них отличается. Но логика в целом одна и та же – комплексные движения распределены по уровням вложенности, на основном таймлайне происходят главные движение символов головы и клешней. А все моргания и улыбки, изгибы и движения клешней сделаны вложенными анимациями.

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

Напоследок небольшой бонус. Еще парочка маленьких хитростей и скрипты:

Сбивается точка трансформации клипа и в результате анимация дергается. Как это починить:

а) Двойной клик на белый кружок вернет его в точку регистрации.

б) Можно выставить нужное положение точки трансформации, затем пройтись по всем ключевым кадрам с этим клипом, нажимая Ctrl+Y (это не только однократный Redo, но и повтор последнего действия).

Клип неудобно трансформировать при его текущей рамке трансформации. Особенно если он уже очень сильно деформирован

Клип можно сгруппировать (Ctrl+G). Группа даст новую рамку трансформации. После этого от группы нужно избавиться с помощью Break apart (Ctrl+B).

Работа с растровыми изображениями

Если вы работаете с множеством сегментов, бывает сложно выделить какой-нибудь клип на нижних слоях. Флеш реагирует на клик по прозрачной области растровой картинки – и выделяется не то, что нужно. Можно превратить растр в растровую заливку с помощью Break apart и стереть прозрачные участки, но это долго. У нас есть несколько скриптов для избавления от прозрачных областей – вы можете найти их по ссылке.

Sorcery_MaskBitmap.jsfl – создает векторную маску по форме картинки

Sorcery_CutBitmap.jsfl – обрезает прозрачную область

Sorcery_CutBitmapPrecise.jsfl – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.

Сжатие/растяжение таймлайна.

Для этого есть отличный скрипт. Ссылка на страницу разработчика. Мы его используем регулярно. Принцип работы предельно прост – выделяем нужный участок фреймов на таймлайне, запускаем скрипт, задаем коэффициент для сжатия или растяжения. Готово.

И вот появилось окно предварительной настройки программы и здесь вы просто можете нажать на кнопку -ОК.

В левом верхнем углу можно обнаружить кнопку Создать вот она нам теперь и поможет вывести на экран монитора Главное окно программы и здесь всё просто два клика на кнопке девая мышкина

Но нет ещё Главное окно на экран не появляется а на экран выходит специальное окно с именем Создать документ и это не просто окно а огромное меню с разными видами Главного окна

Но вначале можете выбрать, то что предложит компьютер видите выделенное голубой рамкой

Просто курсор на этот значок и кликаете левой кнопкой мыши

Вы выбирает самый качественное Главное окно программы, скажите мне ещё рано работать в качественном окне и я не могу показать хорошее качество, не надо о себе так приучайтесь сразу работать в качестве

Вот и появилось Главное окно программы Adobe Animator 2020 а для чего эта программа спросите вы она нужна для создания мультфильмов видеоклипов и видео банеров высокого класса профессиональная программа

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

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

Слева на Главном окне меню инструментов рисования и текста .

Справа инструменты от программы аниматор.

Внизу можно сказать Главные инструменты уже для создания фильма или мультфильма

Здесь фильм мультфильм разбивается по кадрам и может содержать сколько кадров просто можно сказать миллион кадров и в каждом кадре есть рисунок. Вы можете себе представить миллион рисунков нарисовать для мультфильма .

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

Сейчас я буду вам показывать инструменты и меню и кнопки так что вы просто смотрите их

Иногда вместо тысячи слов и схем достаточно одной простой 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-анимации это графика, а для более сложных проектов можно например внутри одной анимации запустить другую и так формировать ролик как матрёшку. Из библиотеки можно перетаскивать символ только в ключевые кадры.

Чтобы использовать объект, который до вас уже сотни раз рисовали и фотографировали, лучше взять готовый (например найти в интернете картинку с прозрачным фоном) или как я в слайдах ниже для изображения Земли и Солнца преобразовал фотографии из интернета в их упрощённый вариант и оставил только то что нужно.

Анимированный баннер

Баннер - это короткая анимация, которая обычно ставится на паузу или зациклена, содержит текст и при клике на неё открывается страница сайта. Создание документа HTML5 отличается от обычного документа в Animate доступными параметрами публикации (и ещё парой ограничений, о них скажу дальше). Я сразу включаю галочки "Центрировать рабочую область" и "Сделать адаптивной" в параметрах публикации для того, чтобы баннер вёл себя так как задумал программист при изменении рабочей области (например перевернули телефон).

Выбираем тип документа "HTML5 Canvas", размер потом можно будет изменить Я всегда включаю галочки "Центрировать рабочую область" и "Сделать адаптивной" в параметрах публикации Выбираем тип документа "HTML5 Canvas", размер потом можно будет изменить

Для примера прорекламируем замену моторного масла и клик будет уводить на страницу оформления заявки. В реальном проекте лучше показать всплывающее окно на запись прям тут, потому что лишний клик "охлаждает" желание клиента сделать требуемое действие, но для примера сделаем так . Создадим анимацию: медленно сдвигаем фон, а эффект свечения (чёрный цвет) вокруг надписи "мы меняем масло БЕСПЛАТНО!" заставим сгущаться и разрастаться, намекая на то что масло рано или поздно испачкается.

Фрагменты кода можно использовать как основу для создания собственного скрипта Действия из фрагментов кода можно применить к именованному ролику (ban1), а потом изменить на c "this.ban1" на просто "this." Фрагменты кода можно использовать как основу для создания собственного скрипта

Действие перехода к веб-странице (как и другие часто используемые действия) можно вставить из "фрагментов кода" (см слайд). В последний кадр добавим действие stop(); чтобы остановить ролик. Это можно сделать также через фрагменты кода.

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

В Adobe Animate делается интерактив, который затем можно поместить куда угодно. Например я бы разместил этот баннер с помощью тега iframe:

<iframe src="файл_публикаци.html" width="728" height="90" align="right"> Ваш браузер не поддерживает фреймы! </iframe>

Карусель

Карусель может понадобится, чтобы показать несколько баннеров в шапке сайта (например с акциями) или фотографий (например вариантов интерьеров). Вполне может что легче взять готовый вариант из интернета и настроить под себя. Но мы сделаем карусель как один из примеров применения кнопки, плавно вытекающий из предыдущего применения картинки (баннера).

Сделаем из предыдущего примера именованный фрагмент ролика. И сделаем ещё один баннер в фрагменте ролика. Разместим их в двух первых кадрах на сцене. И каждому из этих кадров назначим действие this. stop(); . В новом слое выше них разместим кнопки для перехода между ними. В конец каждого ролика-баннера вместо stop(); укажем перейти на следующий кадр основной сцены (this. parent.gotoAndStop(1); ).

На кнопки назначим действие перехода на нужный кадр (без слова parent). Кнопка имеет 4 положения: просто показана, наведена мышка, мышка нажата, мышка отжата. Это может оказаться полезным при создании интерактива (например подсвечивать кружочек при наведении мышки).

Готовая карусель из 2х банеров, перелистывается при окончании движения или по нажатию кружков внизу Готовая карусель из 2х банеров, перелистывается при окончании движения или по нажатию кружков внизу

Плагин на сайт

Сначала я сделал плагин для Mozilla Firefox в Adobe Animate. Но оказалось, что запакованные и сделанные через всякие фреймворки файлы HTML не проходят проверку при публикации, так как в Mozilla бояться спрятанного в них вредоносного кода. Так что применение плагинов может быть ограничено только одним сайтом. Для примера сделаем окошко расценки артикула из на сайте автозапчастей, которое зафиксировано относительно экрана. Как его крепить не особо важно - это делается на стороне сайта, например так:

Мой плагин - это поле ввода артикула запчасти, которое по нажатию кнопки ENTER на клавиатуре открывает страницу покупки на сайте. Чаще всего запрос пишется прям в адресной строке в виде: сайт/search/?pcode=артикул .

Вставим из компонент TextInput. Сделаем необходимый внешний вид окошка (на слайдах видно как это делается).

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