Параграф 5_2. Слой траекторий. Вспомогательный слой

Параграф 5_2. Слой траекторий. Вспомогательный слой.

В этом уроке мы узнаем

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

Итак, мы научились создавать анимацию движения. Безусловно, она исключительно плодотворна. Однако, пока мы научились организовывать перемещение объектов только по ломанной прямой или, в крайнем случае, по окружности. Такое положение нельзя считать удовлетворительным. Иногда необходимо, чтобы в процессе анимации объект двигался по более сложной кривой.

Оказывается, что Flash предоставляет нам такую возможность! Оказывается, что мы можем нарисовать любую кривую и сделать так, чтобы программа воспринимала ее, как траекторию для движения объекта анимации.

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

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

Чтобы создать такой «слой траекторий» нужно выделить слой, в котором уже создана (или будет создана) анимация и нажать вторую слева кнопку под изображением слоев на панели Timeline. Эта кнопка расположена справа от кнопки, которую мы используем для создания обычных слоев.

Можно поступить по-другому и создать «слой траекторий» не с помощью кнопки, а выбрав пункт Add Motion Guide (Добавить траекторию) в контекстном меню выделенного слоя, в котором уже создана (или будет создана) анимация.

В обоих случаях создается новый слой, который автоматически располагается над выделенным слоем. Это и есть «слой траекторий». Он автоматически получает такое же имя как у выделенного слоя, но с приставкой Guide (Направляющий). Слева от его имени помещается эмблема. Эта эмблема не такая, как у известных нам «обычных» слоев, а такая как на кнопке, с помощью которой этот слой был создан.

Созданный нами слой траекторий связан со слоем, расположенным под ним. Эта связь находит отражение в том, что эмблема слоя с анимацией сдвинута вправо относительно эмблемы «слоя траекторий». Сразу видно, в каком слое находится (или будет создана) анимация, для которой создан этот «слой траекторий».

Здесь следует заметить, что со «слоем траекторий» может быть связано несколько слоев с анимациями. При этом все слои с анимациями должны располагаться под «слоем траекторий». Чтобы подключить еще один слой анимации к «слою траекторий», достаточно просто перенести его под слой траекторий. Эмблемы всех слоев с анимацией должны быть сдвинуты вправо относительно эмблемы «слоя траекторий». Такой сдвиг является признаком возможного взаимодействия слоев. Если такого сдвига нет, то данный слой с анимацией и «слой траекторий» не являются взаимосвязанными.

Заметим также, что слоев с траекториями может быть несколько. Это позволяет создавать сложные фильмы со множеством объектов, движущихся по разным траекториям.

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

Траектория.

После того, как «слой траекторий» создан, на рабочем поле пустого ключевого кадра рисуются кривые (гладкие или ломаные), которые и будут выполнять роль траектории.

Здесь могут размещаться несколько разных траекторий, которые могут обслуживать множество различных анимаций. Именно по ним будут двигаться объекты анимации. Что же касается самих анимаций, то каждая из них должна проходить в своем слое. Об этом мы говорили в предыдущем параграфе.

Для рисования траекторий можно использовать любые инструменты для рисования, представленные на панели инструментов: карандаш, кисть, линия, эллипс или прямоугольник. Цвет или стиль рисуемой линии не имеют значения, поскольку траектория все равно не будет отображаться во время проигрывания. (Вообще все, что будет нарисовано на рабочем поле в этом слое, не будет видно при проигрывании.) Желательно, чтобы каждая нарисованная кривая не была замкнута (имела начало и конец). Иначе Flash может не понять в какую сторону по этой кривой должен двигаться объект.

Для того, чтобы траектории функционировали во все время анимации, слой траекторий должен иметь столько же кадров (или больше), как и слои с анимацией. Нет необходимости говорить, что эти кадры должны быть не ключевыми, а обязательно «дублирующими кадрами».

Привязка объекта анимации к траектории.

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

При этом в панели Properties следует подкорректировать параметры анимации таким образом, чтобы был включен флажок Snap (Привязать). (Для этого нужно предварительно выделить первый ключевой кадр анимации.) Полезно также выбрать команду меню View/Snap to Objects или нажать кнопку с изображением магнита.

Обеспечение правильной ориентации объекта относительно траектории.

Сказанного достаточно, чтобы создать анимацию скачущего мячика. Однако, если Вы хотите создать фильм, в котором будет показан полет самолета, выполняющего мертвую петлю, то нужно позаботиться о том, чтобы в ключевых кадрах (начало и конец анимации движения) самолетик был правильно ориентирован относительно траектории, а в панели Properties при создании анимации движения был включен флажок Orient to Path (Ориентация вдоль траектории). Только в этом случае заданная Вами в ключевых кадрах ориентация самолетика будет контролироваться программой Flash MX, а сам самолетик будет скользить по траектории не крылом или хвостом вперед, а так как и подобает самолету. И еще. Для того, чтобы «самолетик» отслеживал все петли траектории, он должен быть не слишком большим по сравнению с характерными размерами этих петель (по сравнению, например, с их радиусами кривизны).

А теперь создадим фильм, в котором над цветком летает некое насекомое.

Упражнение 1. Полет бабочки по заданной траектории над цветком. (Butterfly_1.fla).

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

Первый слой фильма назовем Flower (Цветок). В этом слое расположим импортированный с помощью команды меню File/Import пиксельный рисунок цветка. Во втором слое, который назовем Butterfly (Бабочка), создадим анимацию движения. Для этого в первом ключевом кадре слоя нарисуем бабочку. Выделим нарисованную бабочку и сгруппируем ее. (Если этого не сделать, то "анимация движения" не получится!). Оставаясь во втором слое, выделим кадр под номером 48 и нажатием клавиши F6 создадим завершающий анимацию ключевой кадр с копией первого кадра. В этом кадре перенесем бабочку на другую сторону рабочего поля. Выделим кадр под номером 60 и нажатием клавиши F5 создадим цепочку дублирующих кадров. Вернемся в начало анимации, для чего опять выделим первый ключевой кадр. Откроем панель Properties и в списке Tween выберем Motion. Выполним команду меню Control/Loop Playback (Управление/Зацикленное проигрывание).

Если Вы теперь нажатием клавиши Enter запустите просмотр анимации, то увидите, как бабочка за четыре секунды (48 кадров) перемещается с одной стороны рабочего поля на другую, а затем в течение секунды (12 кадров) отдыхает. Затем все повторяется. Где же обещанный "беспорядочный" полет бабочки над цветком - возмутитесь Вы и будете правы. Так что продолжим работу над нашим фильмом.

Выделим слой с анимацией и выберем в контекстном меню команду Add Motion Guide. Теперь над слоем с анимацией появился слой траекторий. Нарисуем на рабочем поле этого слоя (траекторий) кривую позамысловатей, но так, чтобы начало и конец этой кривой оказались рядом. Так, чтобы бабочка после отдыха вспархивала практически с того же места, где остановилась на отдых. Теперь, выделив первый ключевой кадр анимации, посадим бабочку на один конец траектории. Затем, выделив другой ключевой кадр анимации, посадим бабочку на другой ее конец. Позаботимся о правильной ориентации бабочки на линии, изображающей траекторию. Для этого выделим первый ключевой кадр анимации, откроем панель Properties и включим флажок Orient to Path. Ну, вот и все.

На рис.1 Вы можете увидеть как выглядит эта анимация в среде разработки Flash. Здесь видно все необходимое: по какой траектории (белая кривая линия) будет летать пчелка и какие настройки были сделаны в панели Properties (Свойства).

Рис. 1

Среди файлов сопровождения этого урока имеется несколько интересных фильмов. На одном из них мышка, бегает по полу и собирает кусочки сыра. На другом - Снеговик катается на Сноуборде.

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

Точно также, в одном фильме можно создать несколько пар анимация – траектория. Например, так, как это сделано в фильме zayka.swf. Хорошо видно, что солнышко там перемещается по одной траектории, а зайка - по другой.

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

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

Вспомогательный слой.

Если выделить какой-либо обычный слой (не «слой траекторий») и в контекстном меню этого слоя выбрать пункт - выключатель Guide, то этот слой будет преобразован во вспомогательный служебный слой, который имеет своей эмблемой изображение молотка. Повторный выбор пункта - выключателя Guide в контекстном меню этого слоя возвращает слою его прежний статус.

Содержимое вспомогательного служебного слоя, также как «слоя траекторий», не будет видно при проигрывании. Поэтому вспомогательный слой можно использовать для размещения «кривых направляющих» линий, которые также как и обычные, прямые направляющие линии, "извлеченные" из линеек, можно использовать для позиционирования элементов изображения. При этом желательно выбрать команду меню View/Snap to Objects или нажать кнопку с изображением магнита. Это необходимо для того, чтобы элементы изображения, находящиеся в других слоях, "прилипали" к кривым линиям, расположенным в слое направляющих

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

Преобразование «слоя траекторий» во «вспомогательный слой» и обратно.

Если перенести слой с анимацией (находящийся под слоем траекторий) и расположить его над слоем траекторий, то связь этих слоев будет разрушена. Ну, а если перенести все слои с анимациями, связанными с этим слоем траекторий, и расположить их над слоем траекторий, то слой траекторий перестанет быть таковым, поменяет свой статус и станет, только что описанным выше «вспомогательным слоем». Соответственно изменится и эмблема слоя. Теперь она имеет вид молотка.

Все, что находится на "вспомогательном слое", также как и на слое траекторий, не будет видно при проигрывании.

Для обратного преобразования вспомогательного слоя в слой траекторий нужно мышкой перетащить слой с анимацией, расположенный над ним, вниз. При этом нужно эмблему слоя чуть-чуть сдвинуть вправо. Так, чтобы взаимное расположение эмблем соответствовало паре «слой траекторий» – слой с анимацией. Это движение может не сразу получиться. Поэтому есть смысл немного потренироваться в этом.

Чтобы превратить слой траекторий или слой направляющих в обычный слой, можно просто отключить пункт - выключатель Guide в контекстном меню этого слоя.

Вопросы для самопроверки.

Для чего и как создается слой траекторий? Как осуществляется правильная ориентация движущегося экземпляра относительно траектории? Чем отличается слой траекторий от вспомогательного слоя? Каким образом слой траекторий можно преобразовать во вспомогательный слой и наоборот?