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 Animate дает возможность настраивать кисть, задавая такие параметры, как форма и угол наклона. Кисть можно настроить согласно своим художественным требованиям, а рисунки, созданные с помощью такой кисти, выглядят более естественно. Выбирать, редактировать и создавать пользовательские кисти можно на панели инспектора свойств Animate, выбрав инструмент «Кисть» в наборе инструментов.

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

Выбрав кисть из раскрывающегося списка «Кисть», начните создавать рисунок в рабочей области.

Теперь Animate предоставляет большой выбор размеров кистей с более детальным контролем и включает следующие улучшения.

Новые размеры кистей в диапазоне 1–200 пикселей
Интерактивный просмотр при настройке размеров кистей
Курсоры инструментов «Кисть» и «Ластик» используют вид контурного режима и не мешают в процессе рисования в контексте других графических объектов
Между сеансами Animate запоминаются настройки кистей, такие как последний использованный размер кисти, форма и режим.
Улучшен процесс рисования, особенно для более коротких мазков кистью

Инструмент «Ластик»: контуры курсора

Ползунок «Размер кисти»

Ползунок «Размер кисти»: динамический просмотр

Новые курсоры кистей

Коэффициент сглаживания в Animate теперь задается ползунком с числами от 0 до 100 вместо набора значений от «Низкого» до «Высокого».

Сглаживание

Для создания собственных кистей с определенным размером, углом наклона и спрямлением выполните следующие действия.

Выберите инструмент «Кисть» (B) в наборе инструментов и нажмите кнопку «Новый файл» рядом с параметром «Кисть» в инспекторе свойств.

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

Параметры кончика

При установке флажка «Масштабировать размер вместе с рабочей областью» размер кисти будет масштабироваться пропорционально изменению масштаба рабочей области. Также обеспечивается корректное рисование при изменении уровня масштабирования.

Снимите флажок «Масштабировать размер вместе с рабочей областью» в Инспекторе свойств кисти, чтобы вернуться к прежнему поведению кистей по умолчанию.

Изменить размер кисти можно с помощью параметра «Размер».

Используйте ползунок «Размер», чтобы изменить размер кисти до нужного значения. Можно предварительно просматривать и редактировать значение размера кисти рядом с ползунком.

Размер кисти

Спасибо за отзыв! Мы усердно работаем над исправлением проблем, о которых вы сообщили. Ниже приведен список неполадок, устраненных в последней версии Animate.

Максимальный размер стека вызовов превысил ошибку в Chrome для длинных покадровых анимаций.

[macOS] Сочетание клавиш SHIFT и TAB не перемещает текст обратно влево после использования вкладки в документах сценариев.

Звуковые файлы, отличные от MP3, не импортируются в Animate.
Текст становится невидимым для некоторых шрифтов при его редактировании на японском, китайском и корейском языках.
Приложение аварийно завершает работу при выходе, если оно было запущено путем открытия файла.
Некоторые ресурсы не отображаются на панели «Ресурсы», если не перезапустить приложение.

[macOS] Экспорт видео/мультимедиа не запускает Adobe Media Encoder 15.4.
[macOS] Перезапись слова, выбранного двойным щелчком мыши в редакторе кода, не работает.
[winOS] Некоторые сочетания клавиш не работают, когда фокус находится в редакторе кода.

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

Неверный номер первого и последнего кадров при преобразовании фрагмента ролика в графический символ.

Профиль переменной ширины не сохраняется при повторном открытии файла.
Режимы «Закраска выделения» и «Только закраска заполнением» не работают внутри графических объектов и групп.

Открытие или закрытие большого FLA-документа занимает много времени и потребляет почти в два раза больше памяти.

Исправлены ошибки, связанные с режимами кисти «Закраска заполнением» / «Закраска выделения».
Исправлены ошибки системы безопасности, связанные с чтением вне границ и уязвимостью UAF, которые могли привести к утечке конфиденциальных данных и выполнению произвольного кода в результате открытия вредоносного файла.

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

Файлы PNG, созданные вне JSAPI модуля экспорта атласа текстур, не являются прозрачными.
Animate аварийно завершает работу при попытке изменить первый кадр на панели «Выбор кадров» в группе.
Приложение аварийно завершает работу при добавлении нового слоя с помощью сочетания клавиш и переименовании этого слоя.
Отмена таких режимов кисти, как «Закраска выделения» и «Внутренняя закраска», не работает для графических объектов.

Анимация повреждается при выводе для объекта на направляемом слое с камерой.
[winOS] Расширение файлов Color Set и Color Table игнорируется при экспорте образцов цвета.
Копирование и вставка вложенных фрагментов ролика из одного документа в другой выполняются неправильно.

Сочетания клавиш для разных вариантов размера промежутка не работают.
[macOS] Набор цветов и файлы таблиц цветов Animate не распознаются в рабочих процессах добавления или замены цвета.

Ошибка компилятора в тестовом ролике, если используются API камеры, и в качестве имени одно из слоев используется слово stage.
Применение установки к объектам, ориентация которых отлична от источника, выполняется неправильно.

Диалоговые окна «Экспорт изображения» и «Экспорт анимированного GIF-файла» отображаются усеченными на маленьких экранах.
Вызов интерфейса jsapi importPublishProfileString() после изменения api-интерфейсов документов приводит к аварийному завершению работы Animate.
Вызов интерфейса jsapi addItem() для добавления символа после изменения активного документа приводит к аварийному завершению работы Animate.

Animate аварийно завершает работу вызове команды «Тестировать ролик» для файла с недопустимой оболочкой звука.
Animate перестает отвечать при перемещении точек в редакторе оболочки путем нажатия левой и правой кнопки мыши.

Функция заливки в режиме «Заполнять маленькие промежутки» приводит к тому, что при использовании пера Stylus Pen для перетаскивания заливки состояние зависает.
[macOS 11] На панели «Свойства» искажены раскрывающиеся меню «Стиль и ширина обводки».

[macOS 11] Образцы растровых, линейных и радиальных градиентов выглядят искаженными.
[macOS 11] Панель «Библиотека кистей» выглядит искаженной.

[macOS] Приложение аварийно завершает работу при запуске, если в системе установлен один или несколько поврежденных шрифтов.
Клавиши со стрелками для смещения выделения не работают должным образом в режиме редактирования нескольких кадров.
Сочетание клавиш для увеличения или уменьшения размера классической кисти не обновляет ее в реальном времени.
Перетаскивание кадров между папками слоев не делать работает на панели временной шкалы.

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

[macOS] Мазки кисти пропускаются во время быстрого рисования.
Задержка кисти при рисовании на рабочей области в увеличенном масштабе.
В режиме Windows Ink временные инструменты мерцают или не работают.
Режим маски в диалоговых окнах Экспорт изображения и Экспорт анимированного GIF отключен.
Цветные заливки рабочей области становятся прозрачными при генерации прозрачных файлов GIF.
В документе Canvas настройки параметра Сжатие в диалоговом окне «Свойства растрового изображения» отключены.

Animate не реагирует во время обработки предварительного просмотра миниатюр слоя в диалоговом окне импорта AI.
Высокий уровень использования процессора при нахождении Animate в состоянии ожидания или в фоновом режиме.
При использовании команды Сохранить как файл автоматического восстановления не удаляется.
Автоматическое восстановление срабатывает во время воспроизведения временной шкалы.
Параметры увеличения и уменьшения масштаба изображения не работают корректно с вложенными символами.
Флип-преобразование не работает корректно при выборе как родительского, так и дочернего объекта.

Инструмент «Подбор кадров» Viseme не открывается в диалоговом окне синхронизации губ.
Статический текст периодически публикуется как динамический, вызывая проблемы с отображением в выводе Canvas.
Не удается изменить цвет с помощью панели цвета для текста, примитивов или графических объектов.
Потоковый звук большой продолжительности рассинхронизируется в выводе Canvas.

При копировании трех и более ключевых кадров создается дополнительный кадр.
Инструмент «Ластик» запаздывает в автоматическом режиме ключевых кадров.
Расширение художественной кисти не создает группу после преобразования заливок из контура.

При публикации холста текстуры/спрайт-листы не создаются для нестандартных настроек изображения.
Вывод холста не воспроизводится в IE11.
Режимы наложения на фоне рабочей области не учитываются при выводе на холст.
Во время публикации холста эффект маски создает покадровый вывод и увеличивает размер выходного файла JS.
Экспорт элемента Canvas HTML5 производится медленно.

В режиме предварительного просмотра указатель воспроизведения временной шкалы останавливается на случайных кадрах.
Рамка приложения на мгновение исчезает при изменении рабочего пространства или переключении между вкладками «Главная» и «Анимация».
Сбой приложения при выходе из fl.quit () после продолжительного использования.
При перемещении диапазона анимации в настройке родительского слоя дочерний объект меняет свое положение.
Используйте четырехзначное число при именовании экспорта последовательности SVG.

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

Частота воспроизведения падает, когда курсор находится над временной шкалой или сценой во время воспроизведения временной шкалы.
Поворот не работает должным образом при применении к символу анимации движения.

Поле стиля шрифта отключено в Catalina.
Эффекты камеры и слоя, примененные к первому кадру, не сохраняются при выводе видео.

На панели Инструменты для изменения цвета заливки или обводки необходимо дополнительно щелкнуть.

В этом выпуске устранены некоторые проблемы стабильности продукта.

При переключении между вложенной шкалой времени и шкалой перемотки на растровом изображении появляется неправильный режим смешения.
В опубликованном выводе холста HTML5 свойство Имя для экземпляра символа не задается в JS.
Инструменты рисования рисуют за границами окна, если Animate запускается на дополнительном мониторе, для которого задан коэффициент масштабирования, отличный от основного монитора.

В опубликованном выводе компоненты HTML5 располагаются в начале шкалы времени.
У элементов панели «Библиотека» нет компактного вида.
При экспорте кадра в jpg/png в изображение также экспортируются скрытые слои.
В случае шкалы времени с несколькими кадрами компоненты HTML5 не загружаются должным образом в вывод.

Вращение и поворот выполняются недостаточно плавно во время анимации.
Символ дрожит или перемещается в конец анимации.
Инструмент выбора многоугольников не работает в режиме EditInPlace для символов.
Свойство функции плавности не обновляется при выводе, если оно изменяется после публикации холста.
Анимация формы не работает в выводе холста, когда используются цвета градиента.
Невозможно выбрать штрих с анимацией кривой внутри графического символа.
API library.addItemToDocument() добавляет элемент в неправильном положении на мониторе HiDPI.
Приложение аварийно завершает работу при публикации файла холста, если файл использует европейский десятичный формат.
Приложение аварийно завершает работу при экспорте изображения PNG с помощью диалогового окна «Экспорт изображения» или через JSAPI в определенном сценарии.

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

Маскируемые слои прикрепляются к камере в выводе холста.
Сочетание клавиш, установленное для одного инструмента в группе, влияет на другие инструменты в группе (лассо, многоугольник, волшебная палочка и другие).
Укажите сочетания клавиш для черно-белого и смены цвета.
<XML.UI> Цветовой чип не может получить свое значение при инициализации.
При публикации SWF-файлов для документа с несколькими сценами происходят ошибки компиляции, когда некоторые сцены используют эффекты слоя или камеры, но не все слои.
В файле SVG, экспортированном в Character Animator, отсутствует несколько штрихов.
Папка в библиотеке исчезает после вставки.
Частота кадров временной шкалы падает, если активен определенный инструмент.

Обновление 19.2.1 для Animate устраняет сбои при вставке с заменой внутри графического объекта или группы.

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