Как сделать кости в 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 – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.
Сжатие/растяжение таймлайна.
Для этого есть отличный скрипт. Ссылка на страницу разработчика. Мы его используем регулярно. Принцип работы предельно прост – выделяем нужный участок фреймов на таймлайне, запускаем скрипт, задаем коэффициент для сжатия или растяжения. Готово.
Каркасный объект - объект, состоящий из нескольких элементов, связанных друг с другом (линейно или разветвленно).
В каркасном объекте имеются родительские элементы и дочерние элементы.
Главный инструмент при анимации каркасных объектов - инструмент "Кость" (Bone).
При создании анимации этого типа применяется так называемая Обратная кинематика (IK). Обратная кинематика позволяет легко создавать естественные движения.
Для анимации с использованием обратной кинематики вы просто указываете начальную и конечную позицию костей на Шкале времени . Animate автоматически интерполирует положения костей в каркасе (арматуре) между начальным и конечным кадрами.
Вы можете использовать IK следующими способами:
• Соединяя Экземпляры символов. Например, вы можете связать видеоклипы, показывающие туловище, руку, предплечье, чтобы они двигаются реалистично по отношению друг к другу. Каждый экземпляр имеет только одну кость.
Стили костей
Есть 4 способа, которыми Animate может создавать кости на сцене:
• Сплошная (Wired). Полезно, когда стиль "Каркас" скрывает слишком много деталей под костью.
• Линия (Line). Полезно для небольших каркасов (арматур).
• Нет (None). Скрывает кости, чтобы показать только графические детали под ними.
Чтобы установить стиль кости, выберите интервал IK на временной шкале, а затем используйте Инспектор свойств - Параметры - Стиль .
Примечание. Если вы сохраняете документ со стилем кости «Нет», Animate автоматически меняет стиль кости на «Линия», когда в следующий раз вы откроете документ.Позы
Ключевые кадры на Шкале времени в слоях "Каркас" называются позы.
Создавая ключевые кадры на шкале времени и изменяя положение объектов каркасной фигуры в этих кадрах на Сцене, тем самым создается анимация каркасных фигур.
Программа самостоятельно создает все промежуточные кадры между различными позами (ключевыми кадрами).
Примечание: Вы также можете анимировать IK-арматуру с помощью ActionScript 3.0. Если вы планируете оживить арматуру с ActionScript, вы не можете анимировать ее на временной шкале. Каркас (Арматура) может иметь только одну позу в слое поз. Эта поза должна быть в первом кадре анимации, в котором арматура появляется в слое позы.
Позы слоев
Когда вы добавляете кости в Экземпляры символов или фигуры, Animate создает для них новый слой на временной шкале. Это новый слой называется "Каркас (или "слоем позы" - Pose layers).
Animate добавляет слой позы на временную шкалу между существующими слоями, чтобы сохранить предыдущий порядок размещения объектов на сцене.
Добавить кости к символам
Вы можете добавить кости IK к фрагментам ролика, графики и кнопки.
Чтобы использовать текст, сначала преобразуйте его в Символ.
Экземпляры символов могут быть на разных слоях, прежде чем добавлять кости. Animate добавляет их в слой позы.
При объединении объектов учитывайте отношения родитель-ребенок, которые вы хотите создать.
1. Создайте Экземпляры символов на Сцене . Расположите экземпляры в нужной конфигурации.
2. Выберите инструмент « Кость » на Панели инструментов.
3. Щелкните по экземпляру символа, который вы хотите установить в качестве корневой кости арматуры. Нажмите на точку, где вы хотите прикрепить кость к символу. Создаваемая кость имеет головку (место прикрепления к родительскому элементу) и хвост (место прикрепления к дочернему элементу)
По умолчанию Animate создает кость в месте щелчка мышью.
Для более точного способа добавления кости в настройках программы (меню Правка - Настройки - Рисунок ) откоючите опцию "Установить точку преобразования автоматически" для инструмента "Кость".
Кость привязывается к точке другого символа, когда вы щелкаете от одного символа к другому.
4. Перетащите на другой экземпляр символа и отпустите кнопку мыши в том месте, где вы хотите кость прикрепить.
5. Чтобы добавить еще одну кость в каркас (арматуру), перетащите курсор от конца первой кости до следующего Экземпляра символов.
Точное расположение хвоста легче выполнить, если отключить привязку к объектам (меню « Просмотр » > « Привязка » > « Привязка к объектам » - (View > Snapping > Snap To Objects).
6. Чтобы создать разветвленную арматуру, щелкните на головке существующей кости, где вы хотите, чтобы ветвь начиналась. Затем перетащите, чтобы создать первую кость новой ветви.
Каркас (Арматура) может иметь столько ветвей, сколько необходимо.
Примечание. Ветвь не может подключиться к другой ветви, кроме как в корне.
7. Чтобы переместить элементы готового каркаса (арматуры), перетащите либо кости, либо сами экземпляры символов.
• Перетаскивание кости перемещает связанный с ней экземпляр, не позволяя ему вращаться относительно своей кости.
• Перетаскивание экземпляра позволяет ему двигаться, а также вращаться относительно своей кости.
• Перетаскивание экземпляра в середине ветви приводит к тому, что родительские кости сочетаются с вращением сустава. Ребенок
кости движутся без совместного вращения.
После создания арматуры вы можете добавлять новые экземпляры из разных слоев в арматуру. Перетащите новую кость
в новый экземпляр, и Animate перемещает экземпляр в слой позы арматуры.
Добавить кости к фигурам
Вы можете добавить кости к одной фигуре или к группе фигур, которые находятся на одном слое. В любом случае вы должны выбрать все
фигуры перед добавлением первой кости. После добавления костей Animate преобразует все фигуры и кости в объект формы IK и перемещает объект в новый слой позы.
После добавления к фигуре костей форма имеет следующие ограничения:
• Вы не можете вращать, масштабировать или наклонять форму с помощью инструмента «Свободное преобразование» (Free Transform too).
• Редактирование контрольных точек фигуры не рекомендуется.
1. Создайте заполненную фигуру на сцене.
Форма может содержать несколько цветов и штрихов (линий). Измените формы так, чтобы они были как можно ближе к их окончательной форме.
После добавления к форме костей параметры редактирования формы становятся более ограниченными.
Если форма слишком сложная, Animate предложит вам преобразовать ее в фрагмент ролика перед добавлением костей.
2. Выберите всю фигуру в рабочей области.
Если фигура содержит несколько цветовых областей или штрихов, перетащите выделенный прямоугольник вокруг фигуры, чтобы убедиться, что вся форма выбрана.
3. Выберите инструмент «Кость» на Панели инструментов.
4. С помощью инструмента «Кость» щелкните внутри фигуры и перетащите в другое место внутри фигуры.
5. Чтобы добавить еще одну кость, перетащите ее из хвоста первой кости в другое место внутри фигуры.
Вторая кость становится потомком корневой кости. Свяжите области фигуры с костями в том порядке, в котором вы хотите создать родительские отношения. Например, связь от плеча до локтя на запястье.
6. Чтобы создать разветвленную арматуру, щелкните на головке существующей кости, где вы хотите, чтобы ветвь начиналась. Затем перетащите, чтобы создать первую кость новой ветви.
Арматура может иметь столько ветвей, сколько необходимо.
Примечание. Ветвь не может подключиться к другой ветви, кроме как в корне.
Как только форма становится IK-формой, она имеет следующие ограничения:
• Вы больше не можете преобразовывать (масштабировать или наклонять) форму.
• Вы не можете добавлять новые штрихи (линии) к фигуре. Вы все еще можете добавлять или удалять контрольные точки из существующих линий
формы.
• Вы не можете редактировать фигуру на месте (дважды щелкнув ее в рабочей области.)
• Форма имеет собственную точку регистрации, точку трансформации и ограничивающую рамку.
Управление каркасной фигурой
Выделите интервал кадров на Шкале времени .
Щелкните по нему правой кнопкой мыши, в контекстном меню выберите нужную команду - добавить позу, дублировать позу, добавить или удалить кадры, копировать позу, вставить позу, удалить каркас и другое.
Управление на сцене
Средства управления на сцене позволяют легко регулировать поворот и перемещение на сцене с помощью направляющих, которые показывают диапазон вращения и точный контроль. Контроль за состоянием также позволяет вам продолжать работать на сцене без необходимости возвращаться к Инспектору свойств для настройки вращения.
Элементы управления сценическим инструментом (см. рисунок выше) работают следующим образом:
1. Чтобы начать работу с элементами управления на сцене, выберите кость и используйте головку кости.
2. Чтобы просмотреть элементы управления на сцене, переверните головку кости. Голова превращается в четырехстороннюю стрелку или символ плюс (ось X и Y) внутри круга. Стрелки представляют атрибуты перевода, а круг представляет атрибуты вращения.
3. Нажмите на головку кости и выберите круг, чтобы редактировать вращение, или выберите символ плюс, чтобы редактировать перевод. атрибутов.
4. Чтобы увидеть наличие интерактивных маркеров для вращения и перемещения в любое время, переверните головку кости.
5. Когда вы щелкаете опцию поворота или перевода, элементы управления отображаются. на сцене для установки ограничений.
Использование элементов управления вращением
Для работы с элементами управления вращением выполните следующие действия:
1. Нажмите на головку кости, чтобы увидеть инструменты поворота и перемещения.
2. Перевернитесь и щелкните круг, который представляет инструмент вращения. Круг становится красным.
3. Нажмите на значок замка, чтобы включить свободное вращение. Значок замка превращается в точку.
4. Перемещение курсора от центра показывает один конец радиуса вращения. Нажмите на точку, на которой вы
хочу, чтобы вращение началось.
5. Снова переместите курсор в круг, чтобы выбрать другой конец радиуса вращения. Нажмите, где вы хотите установить эту точку.
6. Подтвердите определение радиуса, нажав на круг.
на линии и перетаскивая.
Использование элементов управления переводом
Вы можете использовать элементы управления переводом следующим образом:
1 Переместите знак «плюс» с помощью четырехсторонних стрелок и нажмите на него, чтобы выбрать элементы управления переводом.
2 Нажмите на замок, чтобы включить элементы управления переводом. Значок замка превращается в точку.
3 Нажмите на наконечник стрелки и перетащите его в точку, до которой вы хотите расширить диапазон перемещения.
Редактировать ИК арматуру и предметы
Вы не можете редактировать IK-арматуру, если слой поз включает позы после первого кадра временной шкалы. Перед редактированием удалите любые дополнительные позы после первого кадра якоря на временной шкале.
Если вы просто перемещаете арматуру для анимации, вы можете изменить положение в любом кадре позы.
Animate преобразует кадр в кадр позы.
Дополнительные справочные материалы
Авторская справка - раздел " Using Bone tool animation in Animate CC (Использование инструмента "Кость" Animate CC)" - стр. 103.
В частности, справка содержит следующие дополнительные разделы:
В Adobe Flash Professional есть возможность создать каркасные фигуры (объекты), отдельные части которых могут двигаться относительно друг друга. К таким фигурам можно применить анимацию.
На рисунке слева - кран, в котором создано три звена.
Первый шаг при создании анимации каркасных фигур - определить звенья вашего объекта.
Образно говоря, звенья - это как кости в скелете, которые связаны друг с другом и одновременно могут перемещаться относительно друг друг друга.
Редактор показывает такие созданные кости в виде вытянутых треугольников.
При создании каркасных фигур основной инструмент - Кость (Bone) на панели инструментов.
Также при создании анимации каркасных фигур задействованы Временная шкала , список слоев , Инспектор свойств и другое.
Технологию анимации каркасных фигур можно применить к любым объектам, которые даже не имеют никакого каркаса (скелета).
На рисунке слева - применение этой технологии для создания анимации движения щупалец осьминога.
Вы легко можете создать простую мультипликацию, используя инструменты Bone ( Кость) и Bind (связь).
Создайте несколько простых геометрических фигур (например эллипсов).
Преобразуйте их в символы .
Щелкните по инструменту "Кость" на Панели инструментов и последовательно соедините центры всех фигур, начиная с первой - появятся соединительные линии в виде костей (рис. слева).
 |  |
) на панели инструментов.
Элементы каркасной фигуры можно перемещать курсором (к которому добавиться значок кости) - рис. справа.
Определите нужное число кадров мультипликации на графике времени.
Программа автоматически оформит ваши перемещения как мультипликацию
Примечание: Созданная в Adobe Flash Pro анимация Flash преобразована в GIF-анимацию.В приведенном выше примере показан только принцип создания каркасных фигур. Используя этот принцип, можно создавать сложные движения объектов.
Слой (Уровень), на котором располагается каркасная фигура, обозначается отличительным значком ().
При создании анимации каркасных фигур используются так называемые "позы". Позы очень похожи на ключевые кадры (keyframes) при создании мультипликации плавных изменений, и они сохраняют отдельные позиции на Временной шкале.
Вначале Вы создаете позы и затем анимируете изменения между каждой позой.
Пример :
Создадим движение танцующего человека.
Фигура человека создана из нескольких отдельных элементов (голова, руки, ноги, туловище). Все эти элементы преобразованы в отдельные символы.
После того, как Вы используете инструмент "Кость", программа автоматически создает новый слой под названием "Armature" (Арматуры) и обозначает его значком ().
Выберите кадр 10 на уровне "Armature"
Щелкните правой кнопкой мыши (Windows) или Control+click (Mac OS) на отобранном кадре и выберите Insert Pose из контекстного меню.
Маркер (который напоминает обозначение ключевых кадров) будет вставлен в кадре 10.
Нужно изменить позу танцора в 10-м кадре. Выберите инструмент выделения () и измените положение отдельных частей тела танцора.
Программа создает промежуточные кадры автоматически.
Возвратите красный движок (playhead) к началу Временной шкалы, и нажмите клавишу Enter (Windows), чтобы просмотреть мультипликацию.
Вы можете создать новую позу - щелкните в кадре 20, в контекстном меню снова выберите Insert Pose . Измените положение отдельных частей тела танцора.
Затем можно создать позы в 30, 40 кадре и т.д.
Читайте также: