Движение по траектории в adobe flash cs6
Обновлено: 07.07.2024
Направляющая анимации в Adobe Animate (ранее Adobe Flash Professional CC) облегчает создание анимации, указывая траекторию движения анимируемых объектов. Эта функция особенно удобна при анимации объектов, передвигающихся не по прямой линии. В процессе создания такой анимации необходимы два слоя:
- слой, содержащий объект, перемещающийся в ходе анимации;
- слой с заданной траекторией перемещения объекта в ходе анимации.
Направляющая анимации работает только в режиме классической анимации.
Подробная информация о направляющих анимации приведена в разделе Работа с классической анимацией движения.
Есть возможность задавать анимацию объекта на основе траектории с переменной шириной штриха.
Помимо ключевых кадров начального и конечного положений объекта, не требуется дополнительных ключевых кадров для обозначения перемен в ширине линии.
- Чтобы задать анимацию объекта на основе линии с переменной шириной, вначале создайте траекторию и задайте анимацию движения объекта вдоль этой траектории, как описано в предыдущих разделах этого документа.
- Выбрав первый ключевой кадр анимации на временной шкале, установите флажки «Масштаб» и «Масштаб вдоль контура» в инспекторе свойств. Теперь объект готов к изменению размеров соответственно ширине линии.
- Задайте ширину линии одним из следующих способов.
- Выберите инструмент «Ширина» (U) в наборе инструментов, щелкните в любой точке линии и перетащите маркеры для изменения ширины линии.
- Выберите линию с помощью инструмента «Выделение» (V) из набора инструментов, затем в инспекторе свойств выберите нужный профиль ширины в поле «Ширина».
Подробная информация о функции переменной ширины приведена в разделе Обводки с переменной шириной.
Назначив линию с переменной шириной в качестве траектории движения и запустив анимацию, вы увидите, что объект не только перемещается по линии, но и меняет свой размер пропорционально ее ширине.
Посмотрите пример анимации по направляющей с переменной шириной штриха.
Направляющая анимации движения может иметь несколько сегментов, каждый из которых имеет собственный профиль переменной ширины, как показано ниже. В процессе анимации принимается в расчет профиль ширины каждого сегмента, при этом не требуется дополнительных ключевых кадров.
Функция направляющих анимации также дает возможность перемещать объект по направляющей линии, изменяя цвет объекта в зависимости от цвета самой линии. Для такой смены цвета траектория должна включать в себя по меньшей мере два сегмента, то есть минимум три точки или узла. Для этого в процессе создания классической анимации и проведения линии траектории, как описано в предыдущих разделах этого документа, воспользуйтесь инструментом «Перо» и проведите направляющую следующим образом. Эта траектория имеет четыре точки/узла и три сегмента.
Помимо ключевых кадров начального и конечного положений объекта, не требуется создавать дополнительных ключевых кадров для обозначения перемен в цвете.
- После создания классической анимации выберите первый ключевой кадр анимации на временной шкале. В инспекторе свойств установите флажок «Цвет по контуру». Объект теперь готов к перемене цвета согласно цвету направляющей линии.
- Далее, выбрав инструмент «Выделение» (V) из набора инструментов, щелкните второй сегмент направляющей линии и выберите для него другой цвет. Повторите эти действия и для третьего сегмента траектории.
Запустите анимацию и посмотрите, как цвет направляющей отражается на самом объекте в ходе анимации. Вы заметите, что оказывает влияние не только цвет, но и значение прозрачности (альфа-канал) сегментов траектории.
Создание персонажа и распределение по слоям
Мы возьмем в качестве персонажа вот такого кота. Он будет следить за появлением мыши в кадре, и размахивать хвостом.
Персонаж состоит из следующих объектов, находящихся на разных слоях:
Хвост я рекомендую нарисовать одной линией. Просто задать ей большую толщину, например, 10. Так будет удобнее его анимировать.
Анимация движения с использованием линий скорости
Анимация глаз для него уже готова в отдельном символе. Сейчас нас интересует анимация хвоста. Так что мы смело можем продлить на них анимацию до нужно количества кадров, например, 20 ( используем f5) и блокировать ненужные нам слои, чтобы они не мешались.
Теперь хвост. На первом кадре у нас находится первая позиция хвоста, на 10 сделаем вторую позицию.
Я просто отразила хвост слева направо – Модификация – Преобразовать – Отразить слева направо .
На слое « Хвост » на 5 кадре создайте пустой ключевой кадр. Для этого щелкните по нему левой клавишей мыши и нажмите F6 .
Далее нажмите Delete , чтобы удалить все содержимое.
Здесь у нас будут располагаться линии скорости.
Для удобства включите под временной шкалой функцию « Многослойная структура » или как по-другому ее называют «луковая шелуха», настройте ее диапазон между двумя состояниями нашего хвоста.
На пятом кадре кисточкой нарисуйте линии скорости, при этом имейте ввиду, что реалистичнее они будут в цвете самого объекта, ну у нас он черный, можно добавить и немного серого для разнообразия.
Сделайте линии так, чтобы они не выходили за границы объекта.
Теперь нам надо придать большей реалистичности.
Для этого зададим в начале небольшую анимацию формы для хвоста.
Сделайте 3 кадр ключевым, поменяйте форму хвоста кошки и немного наклоните вправо.
Затем щелкните правой клавишей мыши по первому кадру и добавьте анимацию формы.
Теперь сделаем тоже самое для второго состояния хвоста.
На 13 кадре создайте ключевой кадр (F6).
Перейдите на 10 кадр, немного измените хвост, и наклоните влево.
Затем для 10 кадра создайте анимацию формы.
Теперь немного отредактируем кадры. Удалим лишние.
Чтобы сделать движение более естественным.
И повторим кадры в обратном порядке.
- Нормальное состояние хвоста слева,
- Трансформированное состояние хвоста слева,
- линии скорости,
- трансформированное состояние хвоста справа,
- Нормальное состояние хвоста справа.
Теперь в тех кадрах, где у нас есть анимация формы, изменим скорость.
Можно добавить сюда мышку.
Подписывайтесь на обновления блога «Дизайн в жизни»
по e-mail или социальных сетях
и мы обязательно опубликуем для вас еще больше полезных бесплатных уроков!
Рисование, Дизайн и Разработка игр
Главная » Анимация движения в Adobe Flash по направляющей (guide)
Анимация движения в Adobe Flash по направляющей (guide)
В предыдущих уроках мы рассматривали рисование кнопки и простую анимацию движения окружности. В этом уроке рассмотрим, что такое анимация движения объекта по заданной направляющей траектории (guide). Создадим условный объект и нарисуем для него путь, по которому он будет проходить.
Создания нового документа ActionScript 3.0
Должно получиться два таких слоя:
Размещаем объект для создания анимации движения
Тоже самое нужно проделать для пятидесятого кадра, возьмите объект и разместите его на правом крае линии.
В итоге мы должны получить два таких слоя:
Запускаем анимацию движения объекта
Выберите пятидесятый кадр на слое, где расположен объект, и также как в первом кадре немного поверните его.
Чтобы посмотреть, что получилось, нажмите ctrl+enter.
Рисование, Дизайн и Разработка игр
Главная » AdobeFlash: Программные эффекты анимации движения, масштабирования, вращения объекта и другое при помощи функции ActionScript3 sin()
AdobeFlash: Программные эффекты анимации движения, масштабирования, вращения объекта и другое при помощи функции ActionScript3 sin()
Во многих языках программирования имеется функция синуса sin(), которая может быть полезна в различных вычислениях. В этом уроке рассмотрим, как добавить мувиклипу в Adobe Flash эффекты движения, масштабирования, вращения используя эту функцию, то есть создадим программную анимацию.
Функция синуса в ActionScript 3 принимает значение в виде радиан и возвращает значение от -1 до 1, которое можно присваивать или прибавлять свойствам мувиклипа. Для передачи значения в функцию будем использовать переменную angle , которую будем увеличивать в обработчике события enter_frame и вызывать эффект колебания свойства.
Для начала создадим какой-нибудь объект на сцене, допустим, это будет окружность. Преобразуем ее в символ и поместим в центр с координатами x = 275 , y = 200 . Как это сделать можете посмотреть в следующем видео:
Теперь нужно добавить код на первый кадр панели Timeline.
Запустите флэш-приложение, нажав на ctrl+enter, чтобы посмотреть, что получилось.
В нашем коде есть некоторая особенность, которая мало кем рассматривается, это постоянное увеличение переменной angle . После запуска приложения она будет увеличиваться, пока не достигнет предела, определенного типом переменной. Хотя для этого должно пройти не мало времени и даже если переменная достигнет максимального значения, то просто обнулится, тем не менее, это может привести к скачку параметра и к тому же это не совсем хорошая практика в программировании.
Поэтому добавим функцию, которая будет обнулять угол в радианах при его предельном увеличении.
Допишем в обработчик события enter_frame следующую строчку для обнуления значения угла.
Теперь попробуем изменить масштаб шарика, используя такой же способ, что и для его движения. Добавьте следующую строчку кода:
Давайте разберем код. Вместо числовых значений вы можете все также использовать переменные. Для наглядности рассмотрим просто числа, вместо переменных. Единица означает первоначальный масштаб объекта, т.е. 100% , 0.2 указывает, что объект будет растягиваться и стягиваться на 20%.
Таким же образом можно вращать объекты, присваивая свойству rotation значение функции sin() . Чтобы это проверить, создадим другой объект, так как круг не совсем подходит. Нарисуем прямоугольник и конвертируем его в символ. Дайте ему любое имя, например, rect_mc . Код для вращения прямоугольника будет следующим:
При помощи функции сунуса sin() в Adobe Flash можно создавать и другие различные эффекты. В этом уроке мы рассмотрели самые простые, которые вы можете усовершенствовать, поменяв различные параметры и условия.
Исходный код примера вы можете скачать здесь. Если вам понравился урок и вы хотите его сохранить или поделиться с друзьями, то добавьте его в закладки социальной сети (значки внизу), это также поможет продвижению сайта.
Читайте также: