Анимация движения в Adobe Flash по направляющей (guide)

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

Создания нового документа ActionScript 3.0

Как обычно, создаем новый документ «Action Script 3.0» . На правой панели инструментов выбираем «Rectangle Tool» и размещаем его на сцене.

создаем документ ActionScript 3.0

выбираем инструмент Rectangle Tool

Полученый объект переводим в символ, выделив его инструментом «Selection tool» и нажав правую кнопку мыши.

создаем объект при помощи инструмента Rectangle Tool

переводим объект в символ при помощи команды Convert to Symbol

Теперь на панели «timeline» нужно выбрать пятидесятый кадр и сделать его ключевым. Нажимаем правую кнопку мыши и вызываем контекстное меню, где выбираем «Insert Keyframe» .

Создаем ключевой кадр

Создадим направляющую, путь, по которому объект будет двигаться. Для этого нажимаем на слой правой кнопкой мышке и в появившемся контекстном меню выбираем «Add Classic Motion Guide» .

Создаем направляющую через контекстное меню

Должно получиться два таких слоя:

два слоя на анимационной панели timeline

Теперь нужно на слое «Guide» нарисовать путь, по которому будет двигаться объект. При помощи инструмента «Pencil Tool» , который находится на правой панели, рисуем направляющую.

используем инструмент Pencil Tool

рисуем направляющую инструментом Pencil Tool

Если нарисованный путь получился немного неровным, то его можно сгладить при помощи инструмента «Smooth Tool» , который также как и карандаш находится на правой панели. Сначала используя инструмент «Selection Tool» дважды щелкните по направляющей, а затем нажмите «Smooth Tool» .

сглаживаем направляющую инструментом Smooth Tool

Размещаем объект для создания анимации движения

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

размещаем объект используя инструмент Selection Tool

Тоже самое нужно проделать для пятидесятого кадра, возьмите объект и разместите его на правом крае линии.

Теперь нужно создать промежуточные кадры, чтобы программа сама разместила объект там где нужно в каждом кадре. Чтобы это сделать просто выбираем любой средний кадр на слое, где расположен объект, и нажимаем правую кнопку мыши, выбираем «Create Classic Tween» .

создаем промежуточные кадры через контекстное меню Create Classic Tween

В итоге мы должны получить два таких слоя:

два слоя с промежуточными кадрами на панели анимации

Запускаем анимацию движения объекта

Посмотрим, что получилось. Переходим в главное верхнее меню «File -> Publish Preview -> Flash» или нажимаем ctrl+enter на клавиатуре. Чтобы посмотреть прямо в программе — нажмите клавишу enter.

Давайте сделаем так, чтобы объект «поворачивал» , когда пробегает по пути. Для этого выберите первый кадр на слое, где расположен объект, и немного его поверните используя инструмент «Free Transform Tool» , который находится на правой панели.

немного поворачиваем объект при помощи инструмента Free Transform Tool

Теперь в свойствах объекта, находясь на первом кадре, выберите «Orient to path» .

устанавливаем в свойствах объекта Orient to path

Выберите пятидесятый кадр на слое, где расположен объект, и также как в первом кадре немного поверните его.

поворачиваем объект при помощи инструмента Free Transform Tool

Чтобы посмотреть, что получилось, нажмите ctrl+enter.

Если хотите сохранить анимацию в файл, то в главном верхнем меню выберите «File -> Export -> Export Movie… » .

Смотрите также:

Adobe Flash: Простая анимацияAdobe Flash: Простая анимация


ActionScript 3: Создание анимации при помощи класса TweenActionScript 3: Создание анимации при помощи класса Tween


AdobeFlash: Программные эффекты анимации движения, масштабирования, вращения объекта и другое при помощи функции ActionScript3 sin()AdobeFlash: Программные эффекты анимации движения, масштабирования, вращения объекта и другое при помощи функции ActionScript3 sin()


Комментировать

Почта не публикуется.Обязательные поля отмечены *