Главная » Бизнес в Интернете

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

анимация движения по траекторииВы уже знаете, как в программе Macromedia Flash Professional 8 делать flash-ролики с анимацией движения, но это движение было по прямой. Теперь пора разобраться, как делать движение по заданной траектории. Для задания траектории нам понадобится дополнительный слой.

создать слой в программе Macromedia FlashОткройте программу Macromedia Flash Professional 8, и создайте в ней новый документ. Слои создаются на временной ленте с помощью нажатия иконки Insert Layer (вставить слой). Для создания нового слоя можно также выбрать в меню Insert — Timeline — Layer. Так создается обычный слой. Возможно, Вы это уже делали, когда создавали анимацию движения без траектории.

создать направляющий слой в программе Macromedia FlashНо теперь Вам понадобится направляющий слой. Он создается с помощью иконки Add Motion Guide (добавить направляющую движения), или с помощью меню Insert — Timeline — Add Motion Guide. Создайте его, он у Вас появится на временной ленте выше основного слоя. Если направляющий слой будет ниже — он не будет работать. В таком случае его нужно перетащить мышкой вверх.

импорт изображения в программе Macromedia FlashВыделяете в основном слое первый кадр, с которого начнется анимация движения, и если он не ключевой, делаете его ключевым с помощью меню Insert — Timeline — Keyframe (или с помощью нажатия на него правой клавишей мыши и выбора Insert Keyframe). Размещаете на этом кадре объект. Это может быть импортированная картинка, группа объектов, или текст. Если Вы импортируете картинку, сначала подготовьте ее в графическом редакторе, и затем в программе Macromedia Flash выберите в меню File — Import — Import to Stage. Если объект рисованный, то сгруппируйте его с помощью меню Modify — Convert into Symbol.

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

Выделяете первый кадр в направляющем слое, если он не ключевой, делаете его ключевым, и размещаете на нем траекторию движения: выделяете первый ключевой кадр в направляющем слое, и создаете траекторию любыми инструментами, которые создают линию. Это может быть ломаная, кривая, часть окружности и так далее.

слои в программе Macromedia FlashПосле этого выделите первый кадр, и перетащите объект на начальную точку траектории. Объект на начальной точке должен закрепиться. Вы увидите, как он притянется к начальной точке — контуры объекта станут жирнее.

притягивание объектов в программе Macromedia FlashЧтобы в программе Macromedia Flash Professional 8 объект притянулся, в меню View — Snapping должны быть включены пункты Snap to Guides (захват по направляющим) и Snap to Objects (захват по объектам). Также проверьте, включен ли пункт Snap Align (захват по выравниванию). Хотя последний пункт на притяжение объекта к траектории не влияет, все же его лучше тоже включить.

Теперь перейдите программе Macromedia Flash на конечный кадр. Выделите его в направляющем слое, и выберите в меню Insert — Timeline — Frame. Добавится обыкновенный кадр, не ключевой (для добавления можете также нажать правой клавишей мыши на кадр, и выбрать Insert Frame). Таким образом, у Вас будет на конечном кадре в основном слое ключевой кадр, а в направляющем слое простой кадр.

дополнительные свойства панели свойствфон на отдельном слое в программе Macromedia FlashПосле этого в последнем кадре притяните объект к конечной точке траектории. Далее делаете в программе Macromedia Flash анимацию движения: выделяете какой-нибудь промежуточный кадр между начальным и конечным, и в панели Properties выбираете в списке Tween (заполнение кадров) пункт Motion (движение). Если Вы хотите, чтобы объект поворачивался по направлению траектории, а не просто перемещался, включаете в панели свойств пункт Orient to Path (если этого свойства Вы не видите, нажмите на белый треугольник в правом нижнем углу панели свойств).

Также в панели свойств в программе Macromedia Flash Professional 8 Вы можете добавить следующие свойства для Вашей анимации движения:


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

Ease (замедление): используется, если нужно ускорить, или замедлить движение. Для применения опции передвиньте бегунок вверх или вниз, или впишите в окошко цифры от −100 до 100.

Rotate (вращение): объекты при движении вращаются по или против часовой стрелки, Количество оборотов объекта во время анимации движения прописывается в окошке.

Задание: сделать flash-ролик с анимацией движения по траектории. Вот, что получилось у меня:

В этом flash-ролике я использовал, кроме анимации движения (кораблик) также покадровую анимацию (слова)  и анимацию с изменением формы (волны).

Видео о том, как сделать анимацию движения по траектории в программе Macromedia Flash Professional 8


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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

4 комментария »

  • Кирилл пишет:

    Здравствуйте! Как на готовой картинке сделать анимацию движения по траектории?

  • Кирилл пишет:

    Александр, здравствуйте. Видимо я маленько туговат...но у меня не получается...

    Вобщем шарик движется сначало по пряой, потом вниз к конечной точки идет не по линии. Линяя получилась из 3 линий как бы буква (Z)и шарик вниз идет не по линяям...

    Направляющие линии делал на фоновом рисунке...а при запуске анимации рисунок не отображается... помогите пожалуйста разобратся.

  • Кирилл пишет:

    я делал на направляющим слое...

    только когда я рисую круг на вставленной картинке он у меня не отоброжается...

    что нужно сделать?

  • Людмила пишет:

    Обязательно воспользуюсь Вашим уроком, давно мечтаю научиться создавать анимацию

Оставьте свой комментарий и ответный визит Вам обеспечен