3.1. Слои траекторий

Слои траекторий - очень мощное средство создания анимации в программе Flash. Тот, кто когда-либо анимировал объекты веб-страниц с помощью, например, JavaScript, наверняка знает, что одной из самых сложных задач при этом является вычисление траектории движения объекта. Ну, с линейным движением проблем особых, конечно, нет - постепенно увеличивай или уменьшай координаты. Но при появлении любого криволинейного движения начинаются, как правило, чисто математические проблемы. Кстати, именно поэтому большинство веб-страниц, использующих анимацию на основе JavaScript, "показывает" нам объекты, движущиеся прямолинейно, в крайнем случае - по дугам окружностей.

Технология Flash позволяет задавать траектории движения объектов графически, просто "рисуя" их на экране. Давайте посмотрим, как это делается.

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

Однако есть способ заставить этот объект двигаться по любой другой траектории. Для этого следует создать слой траектории (motion-guide layer) и нарисовать в нем желаемую траекторию движения. Траектория должна быть незамкнутой и представлять собой контур или заливку. Рекомендуется использовать именно контур, поскольку заливка может быть любой формы, и иногда программа выдает непредсказуемый результат.

В первом и заключительном ключевых кадрах анимации следует притянуть движущийся объект к концам траектории. Строго говоря, не обязательно привязывать объект именно к концам траектории, но нет смысла рисовать траекторию так, чтобы использовать ее не полностью. При этом режим Snap to Objects (Привязка к объектам) должен быть включен. Напомним, что для его включения и выключения можно использовать сочетание клавиш CTRL+SHIFT+/.

Слой, в котором расположена анимация (движущийся объект), должен быть "привязан" к слою траектории. Такой слой называют ведомым (guided). К одному слою траектории можно одновременно привязать несколько ведомых слоев. Ведомые слои можно привязывать и освобождать, просто перемещая их в списке слоев на шкале времени. На рис. 3.25 показано, как обозначаются слои траекторий и ведомые слои. Слой траектории всегда должен иметь хотя бы один ведомый слой, иначе он преобразуется в направляющий слой.

Рис. 3.25. Обозначение слоя-траектории и ведомого слоя

3.2. Применение траектории.

Давайте рассмотрим простой пример. Предположим, у нас есть растровое изображение и рисованный шарик (рис. 3.26), который нам нужно заставить скакать по дороге. Поместим импортированное растровое изображение и рисованный шарик (сгруппированный объект) в разные слои (можно назвать их Photo и Ball). В слое Ball создадим ключевой кадр в позиции 150, переместим изображение шарика вправо и вниз, а затем уменьшим его, чтобы шарик постепенно удаляйся от нас.

Рис. 3.26. Растровое изображение и рисованный шарик

Вернемся в первый ключевой кадр и создадим анимацию движения. Убедимся, что выделен слой Ball, и нажмем кнопку Add Guide Layer (Добавить слой траектории). Повесим "замочки" на слои Ball и Photo и нарисуем в слое траектории ломаную линию, соответствующую скачкам шарика (рис. 3.27).

Рис. 3.27. Траектория движения шарика

Повесим "замочек" на слой траектории и снимем его со слоя Ball. Убедимся в том, что включен режим Snap to Objects (Привязка к объектам) и переместим шарик на начало траектории. Затем перейдем в последний кадр и переместим шарик точно на конец траектории. Теперь можно нажать клавиши CTRL+ENTER, и мы увидим шарик, прыгающий по дороге, изображенной на фотографии.

Конечно, в действительности, прыгая по дороге, шарик не может двигаться все время с одинаковой скоростью. При движении вниз его скорость увеличивается, а при движении вверх уменьшается. Этого можно достичь, либо "разделив" анимацию на несколько фрагментов и настроив свойство Easing (Замедление) в панели Frame (Кадр), либо изменяя скорость программно с помощью ActionScript.

3.3. Управление ориентацией объекта

Предположим, что мы должны изобразить самолетик, летящий по произвольной кривой. Сам самолетик мы изобразим схематично (рис. 3.28 слева), нажмем клавиши CTRL+G, затем создадим ключевой кадр в позиции 50 (F6) и передвинем наш самолетик вправо и вверх за границу рабочей области. Вернемся в первый кадр и создадим анимацию движения. Если сейчас просмотреть ролик, мы увидим самолетик, плавно поднимающийся по диагонали.

Рис. 3.28. Такое движение "направленного" объекта по кривой траектории смотрится неестественно

Нажмем кнопку Add Guide Layer (Добавить слой траектории). На вновь созданном слое нарисуем траекторию движения самолетика (рис. 3.28 справа). Перейдем в слой с самолетиком и притянем его изображение к началу и концу траектории (в первом и последнем кадрах анимации соответственно). В последнем кадре немного повернем его, чтобы он смотрел параллельно траектории.

Просмотрим анимацию. Все бы хорошо, но наш самолетик летит, все время направив нос вправо, что совершенно неестественно (на рис. 3.29 слева показана схема этого движения). А хотелось бы, чтобы он все время поворачивался носом параллельно траектории. Оказывается в программе Flash это сделать очень легко - достаточно на панели Frame (Кадр) отметить галочкой пункт Orient to path (Ориентировать по траектории). Если теперь просмотреть анимацию, самолетик будет двигаться "правильно" (рис.3.29, справа).

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

Рис. 3.29. Объект можно ориентировать по траектории