Обновлено: 08.12.2021

Создание персонажа и распределение по слоям

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

Персонаж состоит из следующих объектов, находящихся на разных слоях:

Хвост я рекомендую нарисовать одной линией. Просто задать ей большую толщину, например, 10. Так будет удобнее его анимировать.

Анимация движения с использованием линий скорости

Анимация глаз для него уже готова в отдельном символе. Сейчас нас интересует анимация хвоста. Так что мы смело можем продлить на них анимацию до нужно количества кадров, например, 20 (используем f5) и блокировать ненужные нам слои, чтобы они не мешались.

ЧИТАЙТЕ ТАКЖЕ

Основы анимационного дизайна. Узнайте новые возможности анимационного motion дизайна, интересные эффекты и примеры

Теперь хвост. На первом кадре у нас находится первая позиция хвоста, на 10 сделаем вторую позицию.

Я просто отразила хвост слева направо – Модификация – Преобразовать – Отразить слева направо.

На слое «Хвост» на 5 кадре создайте пустой ключевой кадр. Для этого щелкните по нему левой клавишей мыши и нажмите F6.

Далее нажмите Delete, чтобы удалить все содержимое.

Здесь у нас будут располагаться линии скорости.

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

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

Сделайте линии так, чтобы они не выходили за границы объекта.

Теперь нам надо придать большей реалистичности.

Для этого зададим в начале небольшую анимацию формы для хвоста.

Сделайте 3 кадр ключевым, поменяйте форму хвоста кошки и немного наклоните вправо.

Затем щелкните правой клавишей мыши по первому кадру и добавьте анимацию формы.

Теперь сделаем тоже самое для второго состояния хвоста.

На 13 кадре создайте ключевой кадр (F6).

Перейдите на 10 кадр, немного измените хвост, и наклоните влево.

Затем для 10 кадра создайте анимацию формы.

Теперь немного отредактируем кадры. Удалим лишние.

Чтобы сделать движение более естественным.

И повторим кадры в обратном порядке.

1. Нормальное состояние хвоста слева,
2. Трансформированное состояние хвоста слева,
3. линии скорости,
4. трансформированное состояние хвоста справа,
5. Нормальное состояние хвоста справа.

Теперь в тех кадрах, где у нас есть анимация формы, изменим скорость.

У кадра 1, сделаем замедление -100 (см. панель свойств), у 5 — +100, у 26 — — 100, у 30 — +100.

Получится следующее.

ЧИТАЙТЕ ТАКЖЕ

Эффектное появление объекта во Adobe Flash (Adobe Animate) Узнайте о еще одном способе показать скорость объекта просто и быстро!

Можно добавить сюда мышку.

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

Похожие статьи

Анимация движения на камеру в Adobe Animate (Flash) Контурная анимация в Adobe Flash (Adobe Animate) Squigglevision — дрожащая анимация в Adobe Flash (Adobe Animate) Эффектное появление объекта в Adobe Flash (Adobe Animate) Движение по траектории в Adobe Flash (Adobe Animate) Анимация снега в Adobe Animate CC Работа с градиентом в Adobe Flash (Adobe Animate) Где взять шаблоны для FLASH анимации