Adobe animate что это

Обновлено: 05.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 – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.

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

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

Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом

Немного исторического экскурса и терминов

Лично я сам знаком с Flash гораздо больше 10 лет и немного представляю, как работает эта технология «изнутри».

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

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

За последние 5 лет flash не пинал только ленивый, причем, не особо разбираясь в вопросе. Лично я никогда не видел ни тормозов, ни дырявости, а уж про самое первое утверждение от Стива Джобса про то, что «Flash не заточен под палец» — это и вовсе смешно. Самая очевидная причина противостояния Apple против флеша на айфонах лежит на поверхности, но сейчас не об этом.

Приближаемся к развязке терминологии. HTML — это язык разметки текста и расположения элементов на странице. Он не умеет выполнять никакие действия сам по себе. Под «новшествами HTML5» вместо Flash обычно понимают: проигрывание видео без Flash, анимации без Flash, мультизагрузка файлов без Flash и некоторые другие вещи.

Несмотря на дифирамбы, звучащие отовсюду, до сих пор не появилось ни одного вменяемого редактора анимации на «всемогущем» HTML5, пока Adobe не перелицевала Flash CC в Animate CC, добавив, по сути, только экспорт в HTML5.

Интерфейс

Сам интерфейс Animate CC вообще не отличается от Flash, в отличие от Edge Animate, который был дико непривычен. Больше сказать особо нечего, и я вообще не заметил разницы с CS6, которым я пользовался давно. Для баннеров не нужен AS3, а это была последняя версия, поддерживающая AS2. Конвертер Swiffy, который сделала Google, дружил только с AS2.

* AS2,3 — встроенный во Flash язык программирования Action Script, который позволяет делать всю неанимационную составляющую ролика — чтобы кнопки нажимались, чтобы на нужных кадрах ролик вставал на паузу, для того, чтобы информацию могли прочитать, чтобы запускались интерактивные сценарии взаимодействия с роликом. На самом деле, это достаточно мощный язык, и я использую лишь 0,000001% его функционала.

Движок отрисовки

Естественно, сами по себе объекты внутри ролика двигаться не могут, для этого нужно, чтобы их двигал, показывал и скрывал какой-то движок. В Animate CC для проектов формата HTML5 Canvas используется CreateJS, который приветствует каждый новый проект замечательным предупреждением

ПРЕДУПРЕЖДЕНИЯ:
Номера кадров в EaselJS начинаются с 0, а не с 1. В частности, это влияет на методы gotoAndStop и gotoAndPlay.

Приятно, что хоть предупредили. Видимо, это нереальная задача — отнимать по единичке от того кадра, на который нужно перейти.

Таймлайн и рабочая область

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

Теперь перейдем к тому, чем я постоянно пользуюсь:

Стандартные фильтры во Flash

Фильтры — одна из весьма частых составляющих любых баннеров, они позволяют очень быстро добиться нужного результата. Я рассмотрю 3 фильтра, которыми я раньше пользовался крайне часто. Во флеше фильтры — часть стандарта, и на моих работах они не оказывали какого-либо влияния на производительность, да и не могли в-принципе. Здесь и далее я буду использовать экспорт в GIF для понимания разницы

Тень — один из самых простых вариантов сделать части баннера объемнее и акцентировать внимание на нужных блоках. Естественно, я взял чрезмерно сильную тень, чтобы проиллюстрировать разницу
Сравниваю:

Flash	CreateJS

Да, анимация тени невозможна. Более того, если ролик длиннее того, что я представил для теста, тень превращается в неизвестно что.
Здесь также стоит упомянуть, что в редакторе и готовом html5 тени (да и вообще все эффекты) выглядят сильно разными.

Редактор	Результат

При экспорте в трейсе можно увидеть такую надпись:
Фильтры тени и свечения используют очень много системных ресурсов, кроме того, поддерживаются не все параметры. (4)
Ну спасибо, что хоть предупредили…

Производительность баннера с тенями оставляет желать лучшего, ну они же предупреждали. Стерев тени с этих подложек, я сократил нагрузку до 40%. Флеш все это рисовал с 23% загрузки вместе с тенями, разумеется

Свечение

Один из самых простых способов выделить текст на пестром фоне — добавить ему обводку, это просто делается с помощью свечения с большим процентом интенсивности.

Flash	CreateJS

В это самое время в редакторе все так же, «Видимость ноль, иду по приборам»:

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

Помимо этого, свечение — это не только обводка букв, но результат намекает, что его не будет

Flash	CreateJS	В редакторе

Размытие

Без комментариев. Размытие доступно только для статичных объектов, так что использовать этот фильтр для появления текстов невозможно

Flash	CreateJS

Как вышеперечисленные глюки могут существовать при повсеместном проникновении тех же самых SVG-фильтров и фильтров в CSS — я не представляю.

Проблемы экспорта и упаковки

Все привыкли к тому, что ролик во флеше — это самодостаточный файл. Экспорт в HTML5 порождает кучку файлов, вместо одного. Проект Swiffy, придуманный Google для конвертации SWF в HTML паковал всё внутрь одного HTML-файла. Видимо, такая задача оказалась непосильной ношей для создателей Animate CC. Подробную статью по поводу засовывания «всего» внутрь одного файла для Doubleclick можно прочесть здесь. Я сделал свой конвертер на лету, сгородив конструкцию из пары функций на php, но она далека не то, что до идеала — даже до черновика. Мои задачи решает — и ладно.

Резиновые баннеры

По умолчанию Animate вроде как поддерживает «резиновость» баннеров, но обычно под резиновыми баннерами имеются в виду те, которые тянутся по горизонтали, а не пропорционально по обоим осям. В шаблоне экспорта это называется responsive scaling, и в случае с баннерами, тянущимися только по оси X это приводило к забавным глюкам, пока я его не вырезал из шаблона

Вообще, можно вообще отказаться от идеи растягивания баннера, просто взять максимальный размер баннерного места, а ширину ролика указать равную минимальному размеру баннерного места и обрезать часть с помощью overflow: hidden, потом центрировать элемент CANVAS (указав его ширину равной максимальному размеру баннерного места) по горизонтали внутри ссылки, занимающей 100% ширины, здесь даже немного проще, чем было во FLASH и не требует никаких дополнительных скриптов внутри ролика, только css.

Предлагаем рассмотреть три совершенно разных софта для 2D-анимации, чтобы понять их различия.

Запрос «лучшие программы для 2d анимации» выдает десятки наименований. Любому новичку трудно сориентироваться в таком количестве информации. Форумы и обзоры пестрят противоречащими рекомендациями, плюсами и минусами каждого софта. Глаза разбегаются, пульс учащается… растерянность,тоска, уныние.

Для чего именно нужны эти программы?
Что у них общего и в чем разница?
Какие у софтов плюсы и минусы?

У каждого инструмента свое применение
Начнем с главного: для каких областей больше подходит Adobe Animate, Moho или Spine. Что-то удобнее при работе с коммерческими роликами, что-то для полнометражных мультиков, а что-то для видеоигр. Именно на вопрос, с чем вы хотите работать, и стоит опираться при выборе программы для анимации.

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

Adobe Animate активно используют в анимации игр и векторных мультиков. Например, в Adobe Animate анимировали сериал My Little Pony, часть проектов
студии Playrix, а также игры Wakfu и Don’t Starve.

Moho же в большинстве случаев используется в мультипликации для перекладной анимации. Примеры таких мультфильмов: «Песнь моря», «Тайна Келлс» и многие другие.

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

Особенности Spine

Как мы уже сказали, Spine в 99% случаев используется для анимации в играх. Эта программа экономит силы и время дизайнерам и разработчикам, благодаря скелету и сеткам. С помощью этих инструментов можно быстро задать персонажу необходимые движения, не потеряв при этом качество и плавность анимации. Количество деформаций и нестыковок текстур такой метод сводит к минимуму. Скелетная анимация позволяет дизайнеру меньше сосредотачиваться на технических деталях и больше — на движениях персонажа.

«Система костей (скелет) в комбинации с сетками позволяют сделать персонажа очень подвижным, избегая мелкой нарезки. Этого невозможно добиться в других редакторах, в том же Adobe Animate, например. Еще один его плюс в том, что после подготовки рига, сложные положения и ракурсы будут доступны аниматору. А при вставке в игру спайновые анимации легко интегрируются и обновляются в билды, что тоже экономит разработчикам много сил и времени», — Софья Фирсова, преподаватель курса по анимации в Spine, Animation Director в Playrix.

В программу все-таки заложен функционал под покадровую анимацию, но инструментов там немного и работать с фреймами в целом не очень удобно. Так что, если ваша цель — научиться делать покадровую анимацию, Spine точно не подойдет. Также в программе нет функций под 3D-пространство и изометрию, хотя добиться объемности движений персонажа легко, создавая 2,5D-эффект.

Из минусов стоит еще отметить, что непосредственно в Spine нет возможности дорисовать заплатку/редактировать текстуру. При этом каждая дополнительная заплатка утяжеляет риг.

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

Прежде, чем купить полную версию, вы можете скачать пробный вариант. Его действие бессрочно, но есть несколько существенных ограничений: нет возможности сохранить проект, невозможно экспортировать файл, и нет доступа к RTL. У платной версии есть два варианта. Spine Essential — подойдет независимым разработчикам и создателям казуальных игр. На июнь 2020 года стоит она $99 ($69 со скидкой). Spine Professional — позволяет создавать более сложные анимации и подойдет для профессиональных разработчиков. Стоит — $329 ($299 со скидкой).

Наша школа предоставляет всем студентам индивидуальную лицензию Spine Education. Пользователям этой версии доступен весь функционал программы с ограничениями на коммерческое использование.

Особенности Adobe Animate

Adobe Animate — один из лучших софтов для перекладной анимации. Функционал программы позволяет работать с мультсериалами, играми и даже создавать анимации для веб, используя HTML5.

Интерфейс программы простой и понятный на интуитивном уровне. ПО обладает функционалом для перекладной и покадровой анимации с наглядной опцией наложения слоев.

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

«В Adobe Animate есть хорошие инструменты для векторного рисования. Чаще всего персонажей и даже окружение создают в нем. Опция импорта из Adobe Illustrator тоже настроена удачно, так что рисовать можно и там. А вот с растровыми файлами работать в АА не очень удобно, поэтому для анимации растровых изображений лучше использовать другой софт», — Екатерина Максимова, преподаватель курса «2D-анимация на экспорт» .

Adobe Animate предназначена только для создания 2D анимации. В программе есть камера, которая позволяет масштабировать сцены, а еще вращать их или делать панорамный вид в кадре. Но эта функция не является сильной стороной софта.

Программа входит в пакет Adobe. У пользователей есть возможность купить по ежемесячной подписке весь пакет или отдельно Adobe Animate. В июне 2020 года в купе с другими продуктами стоит около 3500 рублей в месяц, отдельно программа стоит около 1300 рублей в месяц. При первой покупке вы получаете скидку 40%. Также есть пробный период: в течение недели можно попробовать программу бесплатно без ограничения функционала.

Особенности Moho

Moho очень популярен в создании анимационных сериалов и полнометражных мультиков. Гибкая работа с моделью позволяет создать ощущение классической анимации, а разнообразие дополнительных скриптов значительно расширяет функционал этой программы. Студия Cartoon Saloon, например, создает свои мультфильмы именно в Moho. Кстати, многие из них оценены не только зрителями, но и критиками.

Moho — программа, очень дружелюбная к пользователю. Она не настолько простая, как Adobe Animate, но освоиться в ней будет несложно. Главное преимущество здесь — риггинг персонажей. В отличие от перекладки АА, в Moho объекту задаются физика и вес, что делает движение более реалистичным и гармоничным.

Еще одно преимущество перед АА — более широкие возможности использования 3D- эффектов для пространства и окружения. Это делает сцены более глубокими и интересными.

Рисовать растр в Moho не очень удобно, но есть набор векторных инструментов. В любом случае программа позволяет импортировать картинку, сделанную в сторонних программах.

«Moho это очень интересный софт для 2D анимации. В нем можно создать модель для всех случаев жизни. Достаточно один раз заложить в него нужный функционал: начиная от смены эмоций через экшены и заканчивая полным вращением персонажа. В эту программу заложены широкие возможности перекладки, которые можно оптимизировать до очень высокого уровня», — Евгений Борщъ, риггер в Moho.

На июнь 2020 года существует две версии софта: Moho Pro 13 и Moho Debut 13. Вторая стоит значительно дешевле первой ($400 против $60), но и функционал у нее уже. Вы можете скачать пробную версию на месяц, чтобы почувствовать программу, поучиться и решить, стоит ли она своих денег. У софта, кстати, тоже есть обучающий раздел. Правда, не такой хороший, как у Spine.

Подведем итоги

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

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

Adobe Animate используется для создания перекладной анимации в играх и мультсериалах. Крупнейшие мировые компании, такие как Netflix и DreamWorks Animation Television используют этот софт для производства своих сериалов. Кроме того, программу используют для создания игровой анимации такие студии, как Playrix и Klei.

«В целом я бы рекомендовала использовать Spine в проекте, где для персонажа планируется много анимаций, так как деформацией одной текстуры добиться нужного результата проще, чем при его подробной нарезке для перекладки.
Это не значит, что анимации, которые мы можем реализовать перекладкой в Adobe Animate, невозможно реализовать в спайне скелетной анимацией, и наоборот. Тут важно понимать какие задачи какой инструмент решает лучше или проще и использовать более оптимальный для конкретной задачи», — Софья Фирсова, преподаватель курса по анимации в Spine, Animation Director в Playrix.

Moho — другая крайность нашего списка. Этот софт уже не очень подходит для создания игр, но зато пользуется популярностью у мультипликаторов. Программа обладает продвинутым риггингом персонажей, который значительно ускоряет процесс анимации. Возможность внедрения в сцену 3D-объектов делает ролики Moho гораздо сбалансированнее, чем в Adobe Animate.

«Это программа с топовыми возможностями перекладки. Множество инструментов, экшены и гибко настраиваемая работа с моделями позволяют сделать работу аниматора проще и создать эффект классической анимации. В Moho можно делать анимацию для игр, благодаря той же гибкости настройки и таким инструментам, как 2D-mesh сетка. Но, к сожалению, на данный момент Moho не может конкурировать со Spine из-за невозможности интегрировать анимацию в игровые движки», — Евгений Борщъ, риггер в Moho.

Выражаем благодарность за помощь в написании статьи нашим преподавателям: Софье Фирсовой, Екатерине Максимовой, Яну Богородецкому и Евгению Борщъ.

Сегодня интернет начал разрываться от статей на тему "Adobe прощается с Flash".

UPD 6 Декабря 2015:
Продукт менеджер Flash Runtime и Adobe AIR сказал, что они не имеют планы на прекращение работы по Flash Runtime и AIR и переименование продукта для создания контента никак не связано с судьбой Flash Player и смежной экосистемы.

Все бы ничего, кроме одного нюанса, который сильно меняет смысл — техническая безграмотность и всеобщий copy-paste. Издания перепечатывают друг друга, добавляя всё новые и новые «факты», которых нет в оригинале. Одним словом — испорченный телефон.

На сегодня слово Flash воспринимается как плагин для браузеров. Технически это Flash Player. Но существует средство создания содержимого — Flash Professional. Если бы Microsoft переименовали Word в TextMachine — кричали бы люди, что «Microsoft прекратили разработку ворда?». Даже несмотря на то, что черным по белому написано, что создание содержимого будет поддерживаться и данные можно будет редактировать?

Из своих же примеров могу продемонстрировать яркую картину. Местные клиенты спрашивают меня, на чем будем делать анимацию для презентации под iOS. Я гордо сообщаю, что во Flash Professional. И у клиента ступор. Через мгновение он выдает:

«Но на хабре же пишут, что флеш умер да и он не работает на планшете»

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

Вернемся к оригиналу статьи. Они сообщают, что html5 созрел и уже поддерживает большинство возможностей Flash. Спускаясь ниже мы видим, что Adobe сами рассматривают Flash как ключевое средство доставки премиум контента — веб игры и премиум видео. Но ни слова о том, что они прекращают поддержку Flash.

Более того… Они четко пишут, что работают в партнерских взаимоотношениях с Microsoft и Google для улучшения совместимости и безопасности Flash Player. И не забыли добавить, что тесно сотрудничают с Facebook для улучшения надежности и безопасности работоспособности игр во Flash Player. Так где хоть слово о том, что они отказываются от Flash?

Если говорить о развитии Flash в целом — да, оно остановилось давно. Осуществляются лишь мелкие (но весомые) улучшения и устраняются ошибки в безопасности. Но так ли это плохо? С моей точки зрения у Flash есть все, что ему требуется. Конечно, хотелось бы больше. Но зачем?

За большим следует идти на Standalone формат игр. А там есть Adobe AIR (если рассматривать Flash). Отказ от поддержки Adobe AIR не зафиксирован. У меня есть информация о наличии планов на 2016 год. А вот умрет ли браузерный флеш? Конечно. Но точно не завтра.

А для любителей говорить шаблонами, что Flash сажает батарею — покажите мне, как её заряжает Canvas.

Стоит так же отметить, что Adobe Edge Animate проект больше не будет активно развиваться. Но т.к. я являюсь приближенным к разработке Flash Professional — уверяю, что Edge Animate вообще не будет разрабатываться (кроме критических ошибок). Такое решение принято в пользу Adobe Flash Professional (будущий Animate CC).

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