Как в adobe animate повернуть объект
Сегодня мы расскажем, как в 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 – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.
Сжатие/растяжение таймлайна.
Для этого есть отличный скрипт. Ссылка на страницу разработчика. Мы его используем регулярно. Принцип работы предельно прост – выделяем нужный участок фреймов на таймлайне, запускаем скрипт, задаем коэффициент для сжатия или растяжения. Готово.
Animate позволяет создавать трехмерные эффекты, перемещая или вращая фрагменты ролика в трехмерном пространстве рабочей области. Animate представляет трехмерное пространство, добавляя ось z к свойствам каждого экземпляра фрагмента ролика. Эффекты 3D-перспективы можно добавить в экземпляры фрагментов роликов, переместив их вдоль соответствующей оси x или повернув вокруг оси x или y с использование инструментов «Перемещение 3D-объекта» и «Поворот 3D-объекта». Используя терминологию трехмерной графики, перемещением объекта в трехмерном пространстве называется его параллельный перенос, а поворотом объекта в трехмерном пространстве называется его преобразование. После применения любого из этих эффектов к фрагменту ролика Animate рассматривает его как трехмерный фрагмент ролика, и при выделении на него накладывается разноцветный указатель осей.
Чтобы объект отображался ближе к зрителю или дальше от него, переместите объект вдоль оси z с помощью инструмента «Перемещение 3D-объекта» или инспектора свойств. Чтобы создать впечатление, что объект расположен под углом к зрителю, поверните фрагмент ролика вокруг его оси z с помощью инструмента «Поворот 3D-объекта». Комбинируя использование этих инструментов, можно создавать реалистичные эффекты перспективы.
Оба инструмента — и «Перемещение 3D-объекта» и «Поворот 3D-объекта» — позволяют работать с объектами в глобальном и локальном трехмерном пространстве. Глобальное трехмерное пространство в пространстве рабочей области. Глобальные преобразования и параллельные переносы выполняются относительно рабочей области. Локальное трехмерное пространство — это пространство фрагмента ролика. Локальные преобразования и параллельные переносы выполняются в пространстве фрагмента ролика. Например, если имеется фрагмент ролика, содержащий несколько вложенных фрагментов ролика, локальные трехмерные преобразования вложенных объектов происходят относительно области рисования в объекте-контейнере. По умолчанию для инструментов «Перемещение 3D-объекта» и «3D-вращение» задается глобальный режим работы. Чтобы использовать их в локальном режиме работы, щелкните переключатель «Глобально» в разделе «Параметры» на панели «Инструменты».
Используя трехмерные свойства экземпляров фрагмента ролика в FLA-файле, можно создавать разнообразные графические эффекты без дублирования фрагментов ролика в библиотеке. Но если фрагмент ролика вызывается для редактирования из библиотеки, примененные 3D-преобразования и переносы не будут видны. При редактировании содержимого фрагмента ролика видны только 3D-преобразования вложенных фрагментов ролика.
После того как в экземпляр фрагмента ролика добавлено 3D-преобразование, его родительский символ фрагмента ролика нельзя редактировать в режиме «Редактировать на месте».
Если в рабочей области есть трехмерные объекты, можно добавить определенные трехмерные эффекты ко всем таким объектам в группе, настроив свойства «Угол перспективы» и «Точка исчезновения» для FLA-файла. Свойство «Угол перспективы» оказывает эффект масштабирования при просмотре рабочей области. Свойство «Точка исчезновения» оказывает эффект панорамирования на трехмерные объекты в рабочей области. Эти параметры влияют только на представление фрагментов ролика, к которым применялись и 3D-преобразование или 3D-перенос.
В средстве разработки Animate можно контролировать только точку обзора или камеру. Ракурс камеры в FLA-файле совпадает с ракурсом рабочей области. Каждый FLA-файл имеет только один параметр угла перспективы и точки исчезновения.
Чтобы использовать трехмерные функциональные возможности Animate, для настройки «Параметры публикации» в FLA-файле должно быть задано значение «Flash Player 10 и ActionScript 3.0». Вдоль оси z можно поворачивать или перемещать только экземпляры фрагмента ролика. Некоторые трехмерные функции доступны в языке ActionScript, который нельзя напрямую вызывать в пользовательском интерфейсе Animate, например несколько точек исчезновения и отдельные камеры для каждого фрагмента ролика. С помощью ActionScript 3.0 можно применить 3D-свойства не только к фрагментам роликов, но и к таким объектам, как текст, компоненты воспроизведения FLV и кнопки.
3D-инструменты нельзя использовать для объектов, находящихся в маскирующих слоях, а слои, содержащие 3D-объекты, нельзя использовать в качестве маскирующих. Дополнительные сведения о маскирующих слоях см. в разделе Использование маскирующих слоев.
Перемещение объектов в трехмерном пространстве
Экземпляры фрагмента ролика в трехмерном пространстве перемещаются с помощью инструмента «Перемещение 3D-объекта» . Если выбрать фрагмент ролика с помощью этого инструмента, его три оси (X, Y и Z) отображаются в рабочей области над объектом. Ось X показана красным цветом, Y — зеленым, а ось Z — синим.
По умолчанию для инструмента «Перемещение 3D-объекта» задается глобальный режим работы. Перемещение объекта в глобальном трехмерном пространстве равносильно перемещению его относительно рабочей области. Перемещение объекта в локальном трехмерном пространстве равносильно перемещению его относительно родительского фрагмента ролика, в котором он содержится. Чтобы переключить инструмент «Перемещение 3D-объекта» из глобального в локальный режим работы, нажмите переключатель «Глобально» в разделе «Параметры» на панели «Инструменты», когда выбран инструмент «Перемещение 3D-объекта». Можно временно переключить режим работы из глобального в локальный, нажав клавишу «D» при перетаскивании инструментом «Перемещение 3D-объекта».
Инструменты «Перемещение 3D-объекта» и «Поворот 3D-объекта» вызываются одной и той же кнопкой на панели «Инструменты». Щелкните и удерживайте значок активного трехмерного инструмента на панели «Инструменты», чтобы переключиться на другой, неактивный в данный момент трехмерный инструмент.
По умолчанию выбранные объекты, для которых было применено перемещение 3D-объекта, в рабочей области отображаются с наложенными трехмерными осями. Это наложение можно выключить в разделе «Общие» в настройках Animate.
Изменение положения трехмерного фрагмента ролика по оси Z приведет к тому, что он изменит свое положение по осям Х и Y. Это вызвано тем, что движение по оси Z идет вдоль невидимых линий перспективы, которые исходят из точки исправления 3D-перспективы (заданной в инспекторе свойств экземпляра 3D-символа) до границ рабочей области.
Для преобразования графических объектов, а также групп, текстовых блоков и экземпляров применяется инструмент «Свободное преобразование» или элементы меню Модификация > Преобразование . В зависимости от типа выделенного элемента к нему может применяться трансформирование, поворот, наклон, масштабирование или искажение. Во время трансформации выделенную область можно изменять и добавлять к ней элементы.
При трансформации объекта, группы, текстового поля или экземпляра инспектор свойств отображает все изменения размера или положения для данного элемента.
Во время операций преобразования, выполняемых мышью, появляется ограничительная рамка. Ограничительная рамка имеет прямоугольную форму (если она не была изменена при помощи команды «Искажение» или модификатора «Огибающая») и ее края первоначально выравниваются параллельно границам рабочей области. Маркеры преобразования расположены по углам и в середине каждой из сторон рамки. По мере перетаскивания ограничительная рамка обеспечивает просмотр результата трансформации.
Перемещение, выравнивание, изменение и отслеживание точки трансформации
Во время трансформации в центре выделенного элемента появляется точка трансформации. Первоначально она выровнена по центру объекта. Можно переместить точку трансформации, вернуть в место по умолчанию, а также переместить точку начала координат по умолчанию.
Для масштабирования, наклона и поворота графических объектов, групп и текстовых блоков точкой начала координат по умолчанию является точка, противоположная точке перетаскивания. Для экземпляров точкой трансформации по умолчанию является точка начала координат. При преобразовании точка начала координат по умолчанию может быть перемещена.
Выберите инструмент «Свободное преобразование» или одну из команд в меню «Модификация» > «Преобразование».После начала преобразования положение точки преобразования можно отслеживать на панели «Информация» и в инспекторе свойств.
Чтобы переместить точку трансформации, перетащите ее внутри выделенного графического объекта.
Чтобы выровнять точку трансформации по центру элемента, дважды щелкните ее мышью.
Чтобы переключить точку начала координат для преобразования масштабирования или наклона, при перетаскивании опорной точки выделенного объекта удерживайте нажатой клавишу «Alt» (Windows) или «Option» (Macintosh).
На панели «Информация» можно переключать отображение точек регистрации и точек трансформации. Когда кнопка имеет вид , отображаются координаты точек регистрации. При нажатии этой кнопки она меняет вид на , указывая на отображение координат трансформации.
Когда экземпляр анимации размещается в рабочей области, отображается контур движения этой анимации. Траектория движения — это линия, которая представляет пространственное движение экземпляра анимации движения. Точки на линии (иногда называемые точками анимации движения или точками кадра) представляют позицию целевого объекта на траектории по кадрам на временной шкале. Положение целевого объекта представлено как отдельный кадр или группы кадров.
Можно редактировать или изменить траекторию движения анимации движения следующими способами:
Измените положение объекта в любом кадре диапазона анимации.
Переместите всю траекторию движения в другое место рабочей области.
Измените форму или размер траектории при помощи инструментов Выделение, Спецвыделение или Свободное преобразование.
Измените форму или размер траектории при помощи панели Преобразование или инспектора свойств.
Используйте команды в меню Модификация > Преобразовать.
Примените пользовательскую линию в качестве траектории движения.
Используйте редактор движения.
Чтобы показывать все траектории движения на всех слоях рабочей области одновременно, можно воспользоваться параметром Всегда показывать траектории движения. Такое отображение полезно при создании нескольких анимаций с различными взаимно пересекающимися траекториями движения. После выбора траектории движения или диапазона анимации, этот параметр можно выбрать из меню «Параметры» инспектора свойств.
См. также
Редактирование формы траектории движения с помощью инструментов «Выделение» и «Спецвыделение»
С помощью инструментов Выделение и Спецвыделение можно изменить форму траектории движения. С помощью инструмента Выделение можно изменить форму сегмента путем перетаскивания. Ключевые кадры свойств анимации движения отображаются на траектории в виде контрольных точек. Инструмент Спецвыделение позволяет открыть доступ к якорным точкам и маркерам Безье на траектории, соответствующем каждому положению ключевого кадра свойств. Эти маркеры можно использовать для изменения формы траектории с учетом точек в ключевых кадрах свойств.
Когда создается нелинейная траектория движения, например движение по окружности, возможно, потребуется добавить вращение анимируемого объекта во время его перемещения. Для поддержания постоянной ориентации относительно траектории перемещения выберите режим Ориент. по траектории в инспекторе свойств.
9.Перетаскивание и вращение объектов мышью в Adobe Edge Animate часть 2
Вы можете повернуть элементы в композиции Adobe Edge Animate, например, колеса автомобиля, который отличается от делая спин элемента. Здесь вы узнаете, как:
Используйте функцию «Поворот» на панели «Свойства», чтобы заставить текст поворачиваться.
Создайте анимацию вращения, как будто это происходит очень быстро или очень медленно.
Эта техника для поворота элементов также работает с импортированными изображениями.
Определите, как быстро заставить элемент вращаться
После того, как у вас есть текстовое поле или изображение, готовое к вращению, вам нужно определить, как долго вы хотите продлить анимацию.
Если вы хотите, чтобы вращение происходило быстро, отделите Playhead от Pin на временной шкале примерно на полсекунды или около того.
Если вы хотите, чтобы текст или изображение вращались медленнее, переместите Playhead дальше по временной шкале от Pin.
Чем короче продолжительность анимации, тем быстрее это происходит. Чем дольше длится анимация, тем медленнее она проигрывается. Для быстрой анимации создайте очень короткий ключевой кадр. Для медленной анимации создайте длинный ключевой кадр.
Используйте функцию поворота
Перейдите на панель «Свойства» и найдите функцию «Поворот», как показано на этом рисунке. Нажмите алмаз рядом с повернуть, чтобы установить положение вашего объекта в начале последовательности анимации. Затем настройте временную шкалу для создания последовательности анимации.
Есть два способа изменить поворот объекта на панели «Свойства»:
Нажмите и перетащите тонкую белую линию по кругу круга круговым способом
Введите значение градуса нажав оранжевый 0 и набрав число градусов, которое вы хотите, чтобы объект вращался.
Если вы набираете градусы вручную и нажимаете Enter, тонкая белая линия на круге поворачивается до указанного значения градуса. Это дает полезный визуальный ключ к углу, создаваемому количеством введенных градусов.
Для отображения ключевого кадра значок Секундомера на временной шкале должен быть красным.
После создания последовательности анимации вы можете нажать пробел, чтобы воспроизвести вращающуюся анимацию.
Если вы хотите изменить скорость вращающегося эффекта, поместите курсор в конец ключевого кадра на временной шкале, чтобы вы увидели курсор с двойной стрелкой. Затем нажмите и перетащите, чтобы создать один из следующих эффектов:
Читайте также: