В предыдущих уроках мы рассматривали рисование кнопки и простую анимацию движения окружности. В этом уроке рассмотрим, что такое анимация движения объекта по заданной направляющей траектории (guide). Создадим условный объект и нарисуем для него путь, по которому он будет проходить.
Создания нового документа ActionScript 3.0
Как обычно, создаем новый документ «Action Script 3.0» . На правой панели инструментов выбираем «Rectangle Tool» и размещаем его на сцене.
Полученый объект переводим в символ, выделив его инструментом «Selection tool» и нажав правую кнопку мыши.
Теперь на панели «timeline» нужно выбрать пятидесятый кадр и сделать его ключевым. Нажимаем правую кнопку мыши и вызываем контекстное меню, где выбираем «Insert Keyframe» .
Создадим направляющую, путь, по которому объект будет двигаться. Для этого нажимаем на слой правой кнопкой мышке и в появившемся контекстном меню выбираем «Add Classic Motion Guide» .
Должно получиться два таких слоя:
Теперь нужно на слое «Guide» нарисовать путь, по которому будет двигаться объект. При помощи инструмента «Pencil Tool» , который находится на правой панели, рисуем направляющую.
Если нарисованный путь получился немного неровным, то его можно сгладить при помощи инструмента «Smooth Tool» , который также как и карандаш находится на правой панели. Сначала используя инструмент «Selection Tool» дважды щелкните по направляющей, а затем нажмите «Smooth Tool» .
Размещаем объект для создания анимации движения
Теперь давайте разместим наш объект на нарисованном пути. Чтобы это сделать, встаньте на первый кадр слоя, возьмите объект при помощи «Selection Tool» и поднесите его к левому краю линии, он как бы «прилипнет» к нему, вернее присоединится опорная точка объекта к направляющей.
Тоже самое нужно проделать для пятидесятого кадра, возьмите объект и разместите его на правом крае линии.
Теперь нужно создать промежуточные кадры, чтобы программа сама разместила объект там где нужно в каждом кадре. Чтобы это сделать просто выбираем любой средний кадр на слое, где расположен объект, и нажимаем правую кнопку мыши, выбираем «Create Classic Tween» .
В итоге мы должны получить два таких слоя:
Запускаем анимацию движения объекта
Посмотрим, что получилось. Переходим в главное верхнее меню «File -> Publish Preview -> Flash» или нажимаем ctrl+enter на клавиатуре. Чтобы посмотреть прямо в программе — нажмите клавишу enter.
Давайте сделаем так, чтобы объект «поворачивал» , когда пробегает по пути. Для этого выберите первый кадр на слое, где расположен объект, и немного его поверните используя инструмент «Free Transform Tool» , который находится на правой панели.
Теперь в свойствах объекта, находясь на первом кадре, выберите «Orient to path» .
Выберите пятидесятый кадр на слое, где расположен объект, и также как в первом кадре немного поверните его.
Чтобы посмотреть, что получилось, нажмите ctrl+enter.
Если хотите сохранить анимацию в файл, то в главном верхнем меню выберите «File -> Export -> Export Movie… » .
Смотрите также:
ActionScript 3: Создание анимации при помощи класса Tween