Как вы уже знаете из предыдущих уроков, при наложении графические объекты взаимно редактируют друг друга, чтобы этого не происходило объекты можно группировать или создавать Flash -символы. Еще один простой и удобный способ раположить в ролике множество независимых объектов - это использование слоев. Техника слоев применяется во многих популярных графических программах, например в Photoshop"е. Однако, в отличие от этой прогарммы увеличение слоев во Flash на влияет на размер опубликованного ролика. Поэтому вы можете создавать столько слоев сколько считаете необходимым. Фактически верхним пределом является 16000 слоев, н не думаю, чтобы вам может столько понадобиться. Традиционно слои принято сравнивать с листами прозрачно кальки, наложенных друг на друга. Рисунки расположенные в верхних слоях, закрывают собой графику в нижних. Там, где изображения нет будут просвечиваться рисунки нижних слоев.

На прошлых занятиях мы уже неоднократно использовали слои и теперь самое время разобраться с тонкостями работы с нимив редакторе Flash MX. Кроме того, в программе могут применяться специальные слои, которые мы начнем изучать на этом уроке. Выберем инструмент прямоугольник и нарисуем две фигуры в первом и пока единственном слое.

А теперь создадим новый слой, щелкнув по кнопке Insert Layer со значком +. Будет создан новый слой, который автоматически станет активным. О том, что слой является активным, говорит его выделение черным цветом и изображение карандаша. Выберем инструмент овал, изменим цвет заливки и нарисуем круг. Его изображение будет помещено в текущий активный слой.

Поскольку рисунок расположен в верхнем слое, то он будет перекрывать графику нижнего слоя. Создадим еще один слой, разумеется это можно сделать и с помощью меню, выполнив команду Insert - Layer. Новый слой окажется сверху текущего. Выберем инструмент Brush, изменим цвет заливки и сделаем мазок кистью поверх других фигур. Порядок расположения слоев, можно легко изменить, просто перетаскивая их мышью. Чтобы сделать слой активным, т.е. доступным для редактирования. щелкните по нему мышью. При этом произойдет выделение всех объектов, расположенных в этом слое.

Для редактирования какого-либо отдельного объекта нет необходимости сначала делать активным соответствующий слой. Это произойдет автоматически при выделении заданного объекта. Очень удобное свойство редактора Flash. Для облегчения работы слоям можно давать любые имена, в том числе и русские, для этого дважды щелкните на имени слоя и введите новое название. Всегда используйте при этом осмысленные имена. Теперь обратите внимание на три пиктограммы в верхней части списка слоев. Если

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

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

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

При щелчке на квадрате в соответствующем столбце, содержимое текущего слоя будет просматриваться в виде контуров одного цвета, в данном случае синего. Повторный щелчок вернет графике обычный вид. Контурная прорисовка объектов слоя бывает весьма полезна при работе со сложными изображениями и снижает нагрузку на процессор. Для каждого самостоятельного слоя можно выбрать свой цвет отображения контуров, но об этом чуть позже. Во Flash MX появилась новая возможность организовывать слои в папки. Перейдем в верхний слой и щелкним по кнопке Insert Layer Folder. Будет создана папка, которой также можно дать любое имя. Чтобы поместить наши слои в папку, необходимо мышью перетащить слой вверх и немного вправо. Пиктограмма слоя сместится вправо и теперь он находится в папке. Аналогичным образом разместим в папке два других слоя.

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

В мпку можно помещать другие папки и таким образом организовывать слои подобно дереву файлов на компьютере. Как то мне на глаза попался исходник, сделанный во Flash 5, который содержал более 30 слоев. Разобраться, что и где было крайне сложно. Представляю как обрадовался его автор, узнав о новой возможности редактора MX создавать папки для слоев. Таким образом, с помощью слоев и папок можно просто и эффективно расположить множество объектов на сцене, не беспокоясь о возможности их взаимного редактирования. Однако не будем забывать, что Flash, главным образом предназначена для анимации. Именно при создании анимации слои помогают больше всего и позволяет добиться того, чтобы объекты двигались одновременно в различных направлениях и были по-разному согласованы по времени. При создании банера мы уже использовали этот принцип, но я не акцентировал на нем внимание.

5.1.З.2. Слои траекторий. Принципы их использования На этом уроке мы познакомимся со слоями траекторий, который позволяют задавать маршруты движения объектов графически, просто рисуя их на экране. Специальные слои траекторий очень мощное средство создание аниамции в программе Flash. когда в процессе анимации необходимо заставить объект вращаться, двигаться прямолинейно или по окружности, то можно применить обычную раскадровку движения, указав в ключевых кадрах начальное и конечное положение объекта. Однако, что делать для реализации движения объекта по произвольному пути? Вот тут то нам и не обойтись без слоев-траекторий. Выберем инструмент Овал и нарисуем с его помощью соответствующую фигуру.

Выделим рисунок и, нажав клавишу F8 конвертируем в графический символ или мувиклип. Отметим на шкале 30 позицию и клавишей F6 вставим туда ключевой кадр. Вернемся в первый кадр и с помощью контекстного меню назначим анимацию движения. Теперь попробуем заставить двигаться наш объект по произвольному пути. Для этого необходимо создать спциальный слой и нарисоввать там нужную траекторию. Самы простой способ создания слоя траектории - это щелчок по кнопке Add Motion Guide.

Появится новый слой траектории с 30 пустыми кадрами. Одновременно нижний слой с объектом будет прикреплен к Guide-слою и изменит свой тип. Убедимся в этом, открыв диалог Свойства слоя. Кстати говоря, это можно сделать еще одним способом. Достаточно дважды щелкнуть по пиктограмме слоя. Как видите, теперь слой имеет тип Guided - Ведомый или направляемый. Кроме того, о том что первый слой прикреплен к слою траектории, говорит пунктирная линия на границе между ними.

Закроем окно свойств. Перейдем в Guide-слой и нарисуем здесь произвольную траекторию. Траектория должна быть незамкнутой и

представлять собой контур или заливку. Рекомендуется использовать только контур, поскольку применение заливки, иногда приводит к неожиданным результатам. Выберем инструмент Карандаш, включим модификатор Smooth для получения более плавной кривой и рисуем. Толщина и цвет контура значения не имеют, так как сама траектория в опубликованном ролике просматриваться не будет. Заблокируем слой траектории и перейдем в слой объекта. Выберем инструмент Стрелка и привяжем фигуру к начальной точке траектории.

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

Нажмем кнопку Play и убедимся, что наш объект движется точно по нарисованному пути. Затем нажмем сочетание CTRL+Enter и еще раз посмотрим, что результат достигнут, а сама траектория в опубликованном ролике не видна. Закроем тестовое окно и снимем на панели Инспектора флажок Snap, чтобы программа не лишала нас самостоятельности при выборе точек привязки. Слои-траектории также как и опорные слои не экспортируются вместе с другим содержимым фильма и следовательно не влияют на размер окончательного файла в формате *. swf.

Поэтому можно использовать их без ограничения. Если вы хотите, чтобы траектория движения объекта была видна, то используйте обычный слой с копией маршрута. К одному слою траектории можно привязывать несколько ведомых слоев с объектами. Покажем это. Сделаем текущим нижний слой и щелкнем по кнопке Добавить обычный слой. Появится новый слой, который будет автоматически прикреплен к нашему Guide-слою. Нарисуем в новом слое какой-нибудь объект, например, прямоугольник. инструментом Стрелка выделим его и, используя клавишу F8, конвертируем в символ. перейдем в 30 кадр и нажмем клавишу F6, создав там ключевой кадр. Выделим первый кадр и с помощью контекстного меню назначим анимацию движения.

Сделаем текущим Guide-слой, разблокируем его и с помощью Карандаша нарисуем в нем новую траекторию движения для прямоугольника. Выберем инструмент стрелка, выделим прямоугольник и привяжем его в первом кадре к начальной точке пути. Перейдем к заключительному кадру анимации и разместим объект в конечной точке траектории. Дополнительно, с помощью модификатора Scale изменим масштаб прямоугольника. Если мы хотим чтобы дополнительно объект при движении еще и вращался, то снова перейдем в первый кадр и на панели Инспектора Свойств установим в поле Rotate поворот по часовой или против часовой стрелки. А также введем полное количество оборотов объекта в процессе анимации.

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

Создадим новый ролик, щелкнув по кнопке New. И как обычно отмасштабируем рабочее полотно. Нарисуем в единственном слое или вставим из буфера обмена готовое изображение самолета времен второй мировой войны, созданное в другой программе. Теперь попробуем заставить его лететь по произвольной кривой, но сначала создадим анимацию движения. Нажмем клавишу F8 и конвертируем рисунок в символ, выделим 30 позицию на шкале и нажмем клавишу F6. В контекстном меню первого кадра установим анимацию движения. Теперь создадим слой траектории щелкнув по соответствующей кнопке.

Выберем инструмент Карандаш и нарисуем траекторию полета самолета. Рисовать начнем слева за пределами полотна, чтобы наш объект влетал слева в рабочую область ролика. Попробуем изобразить траекторию так, чтобы самолет при движении делал мертвую петлю. Инструментом стрелка выделим нарисованный путь и щелкнем несколько раз по модификатору Smoth, чтобы придать контуру более плавное очертание. При необходимости иснтру ментом Стрелка можно подкорректировать форму кривой. Теперь заблокируем Guide-слой, повесив на него замок. Выделяя объект поочередно в первом и последнем кадрах анимации, привяжем его к началу и к концу траектории соответственно. Чтобы сымитировать посадку самолета в конуе анимации, нарисуем земную поверхность.

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

Теперь посмотрим анимацию, нажав CTRL+Enter. Все бы ничего, но наш самолет летит все время направив нос в одну сторону, что выглядит совершенно неестественно. А хотелось бы, чтобы он поворачивался в процессе движения паралельно траектории. Оказывается в программе Flash сделать это не трудно. Выделим первый кадр анимации и на панели Properties установим галочку в пункте Orient To Path ориентировать по траектории.

В поле Easing установим положительное значение около 90%. анимация в этом случае пойдет с замедлением и наш самолет будет постепенно останавливаться при посадке. Щелкнем на пустом месте и на панели Инспектора Свойств установим светло-голубой цвет имитирующий небо. Посмотрим еще раз анимацию. Теперь наш объект двигается правильно. В заключении хотел бы отметить, что с помощью слоев траекторий и масштабирования можно добиться интересных эффектов, имитирующих движение объектов в трехмерном пространстве. Примеры таких эффектов будут рассмотрены на следующем уроке.

⇐Символы кнопок и их особенности, создание пульсирующей кнопки | TeachPro WEB-дизайн | I.3.3. примеры создания трехмерных эффектов с помощью слоев траекторий⇒