Как сделать промежуточные кадры в adobe animate

Обновлено: 01.07.2024

В Adobe Animate CC слово "Сцена" может пониматься двояко:

1. Сцена (Scene) - часть окна программы.
2. Сцена (Stage) - созданный файл FLA, т.е. сцена рассматривается как этап работы. В этом случает одна сцена может являться фрагментом одной большой анимации, которая является результатом создания и объединения нескольких сцен.

Примечания:
1. Кроме объединения нескольких сцен, для создания большой анимации также можно применять создание и объединение нескольких монтажных кадров ( См. Обзор Adobe Flash Pro - Монтажный кадр ).
Для добавления нового монтажного кадра используйте меню Вставка - Монтажный кадр .
2. Трудно понять, в чем отличие сцены от монтажного кадра.

В данном обзоре под словом "Сцена" понимается только часть интерфейса программы (см. Интерфейс)

Сцена (Stage) - часть Окна редактирования. По умолчанию это прямоугольник белого цвета (цвет сцены настраивается).
Окно редактирования содержит сцену и картон (пространство, окружающее сцену).

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

Настройки сцены

Вращение сцены
Для вращения (поворота) сцены на определенный угол используйте инструмент Поворот (см. Панель инструментов). Инструмент "Поворот" - в одной группе с инсрументом "Рука" .
Подробнее о вращении сцены

Масштабирование сцены
Используя инструменты настройки сцены , можно изменить масштаб сцены, выставить сцену по центру и другое.
Минимальное значение для уменьшения на сцене составляет 8%. Максимальное значение для увеличения - 2000%.
Замечания: Вы также можете использовать мультисенсорные жесты на совместимых устройствах.

с инструментом " Масштаб " ( Zoom) - (см. Панель инструментов). .
используя меню Просмотр - Увеличить масштаб (Zoom In), Уменьшить масштаб (Zoom Out).

используя инструмент " Рука " (см. Панель инструментов). .
используя полосы прокрутки (горизонтальную и вертикальную).

щелкните по сцене (но не по объектам на сцене)
в Инспекторе свойств откроются все настройки сцены
выберите цвет сцены (на рисунке слева выбран зеленый цвет)

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

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

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

Вы можете установить холст в прозрачный режим, выбрав альфа-диапазоны цветов в процентах в ваших цветовых образцах.
Для этого выберите canvas > Properties > Stage > Alpha%.

Масштабирование содержимого в соответствии с размером сцены

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

Когда вы публикуете SWF-файл, временная шкала каждой сцены объединяется в единую временную шкалу в SWF-файле. После компиляции SWF-файла он ведет себя как так, как будто использовалась одна сцена при создании файла FLA.

Из-за этого поведения избегайте использования сцен по следующим причинам:

• Сцены могут вносить путаницу в документы, особенно если документ создается несколькими авторами. При поиске, чтобы найти код и ресурсы, приходится искать по нескольким сценам в файле FLA.
• Сцены часто приводят к большим SWF-файлам.
• Сцены вынуждают пользователей постепенно загружать весь SWF-файл, а не загружать содержание, которое они на самом деле хотят увидеть или использовать.
Одним из недостатков является управление большим количеством документов FLA.
• Сцены в сочетании с ActionScript могут привести к неожиданным результатам. Поскольку каждая временная шкала сцены сжата на одной временной шкале, вы можете столкнуться с ошибками, связанными с вашим ActionScript и сценами, что обычно требует дополнительной сложной отладки.

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

Есть много способов уменьшения веса анимации, одним из которых является — уменьшение количества кадров в анимации.
Это когда удаляются части кадров. Но иногда этим способом просто не возможно воспользоваться,что бы не испортит анимацию. По этом я решила написать этот урок и показать ещё один способ.
Пусть фотошоп сам просчитывает как это сделать. Начну с того, что уменьшать количество кадров нельзя до до бесконечности. Существует мнение, что анимация начинается после 6 кадров. Из моего личного опыта, анимация созданная больше 30 кадров начинает ужасно влиять на ФШ.И если у вас мало места на главном диске и созданный документ, большого размера, то и вес соответственно будет очень большим. Сохранить этот документ в GIF формате будет очень трудно или даже не возможно, ФШ может просто зависнуть. К тому же,если вы не сохранили работу в рабочем формате PSD работа может потеряться навсегда.
Хватит пояснений приступаем к делу. На примере футажа из 30 кадров я покажу как ещё можно уменьшить количество кадров.

1.0.Открываем Футаж в ФШ.
1.1.Собираем все слои в группу.а 1.2.Переходим во "Временную шкалу",нажав значок внизу панели "Анимация".(смотри Рис.1 и 2)

1.3.Затем идём в панель "Меню анимации" и выбираем "Задать скорость смены кадров на шкале времени. " В открытом окне видим два окошка, почти всегда стоят параметры 30 и 30; или 25 и 25. У меня было 30 кадр/сек. Во втором окошке 30 меняем на 10.(смотри Рис.3 и 4)

Сколько выставлять кадр/сек зависит от того,

сколько кадров имеет анимация и от того сколько кадров вы хотите получить в итоге. Чем больше кадров у анимации тем меньше я ставлю кадр/сек .

. Помните.
Чем меньше вы оставите кадров в анимации,тем больше пропадут мелкие детали анимации. Рекомендую оставлять
не меньше 9 кадров и не больше 20 кадров Это только мои личные рекомендации.Всё зависит от вашей работы.

1.4.Обратите внимание"Шкала времени" уменьшилась. Переходим опять в "Покадровую анимацию" нажимаем значок, в левом нижнем углу.(смотри Рис.5) Появится окно нужно нажать "Продолжить"(смотри Рис.6)

1.5.Теперь в "Покадровой анимации" теперь вместо 30 кадров получилась 10. Проигрываем анимацию,если всё устраивает переходим к следующему пункту объяснений. Если нет, кадров получилась слишком мало или много, начинаем всё сначала, но выставляем другое количество кадр/сек (смотри Рис.7)

1.6.В панели "Анимация" (Однократно) меняем на (Постоянно) После всех этих манипуляций я рекомендую создать слои из кадров. Или сохранить( Сохранить для Web. ) в GIF формате.
Для тех кто ещё не знает как создать слои из кадров.
Идём в "Меню анимации" значок справа, и выбираем пункт "Создать слои из кадров"(смотри Рис.8)
1.7.Теперь в панели "Слои" появились новые слои, а у группы "Футаж" закрыт глазик.Эта группа нам больше не нужна, её можно удалить.(смотри Рис.9)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

для тех, кто ищет курсы:

Войти в аккаунт

Чтобы воспользоваться всеми функциями сайта, вам необходимо зарегистрироваться/войти в свой аккаунт на сайте. Выберите вашу соцсеть для входа:

Если вы организация, проводящая курсы, то регистрация происходит по этой ссылке.

Уроки по Adobe Animate для начинающих: бесплатные видео для домашнего обучения

Adobe Animate CC простой в использовании программный продукт для рисования векторной графики и ее анимирования. В нем ограниченное количество инструментов для создания графики, но возможно импортировать контент из Photoshop, Fireworks. Будет интересна начинающим аниматорам, любителям 2D мультфильмов, дизайнерам игровых персонажей.

Все Курсы Онлайн подобрали лучшие бесплатные уроки по Adobe Animate CC, которые дадут представление об основах работы и возможностях программы.

Введение

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

Основы анимирования

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

Основные приемы

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

Мультяшный персонаж

Урок по созданию персонажа будет полезен тем, кто хочет сделать мультфильм или игровых героев. Для начала открывают в программе Action Script и задают разрешение рабочего поля. Это необходимо для правильного отображения будущих объектов. Необходимо загрузить рисунок, эскиз. Затем фигуру обводят по контуру с помощью карандаша. Для последующего оживления героя необходимо создавать каждую часть в новом слое. На таймлайне выделяют область для будущих сцен, и делают копии их содержимого из предыдущей сцены в следующую. После этого в главном кадре можно делать любые изменения.

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

Установить время отображения кадра и параметры цикла.

Создать второй кадр. На первом кадре шарик и тень под ним должны находиться с края изображения слева. На втором шарик и тень под ним нужно сдвинуть вправо в край. Чтобы шарик и тень находились на одном и том же уровне что на втором кадре, что на первом, перемещать слой на втором кадре нужно с нажатой клавишей Shift.

Далее нужно выделить два кадра: удерживая нажатой клавишу Shift, либо Ctrl нажать мышкой сперва по первому кадру, потом по второму. Кадры выделятся. Затем нажать на иконку создания промежуточных кадров.

В появившемся окошке задать количество промежуточных кадров.

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

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