Здесь мы продолжим начатый в главе 5 разговор о слоях и их использовании. А поскольку данная часть полностью посвящена анимации, то и разговор пойдет о создании анимированных изображений с помощью слоев.

Как мы помним из главы 12, трансформационная анимация может быть применена только к экземпляру, находящемуся на своем собственном слое. На первый взгляд, это серьезное ограничение: невозможно анимировать сразу два или более экземпляров. Но его легко преодолеть, если разнести эти экземпляры по нескольким слоям и анимировать их по отдельности (многослойная анимация).

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

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

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

Ну что ж, начнем с самого простого — с многослойной анимации, т. е. анимации, состоящей из нескольких анимированных элементов, находящихся на разных слоях.

Создадим новый документ Flash и нарисуем на рабочем листе круг. Преобразуем его в графический образец и дадим ему имя Круг. В результате этих действий мы получим на рабочем листе экземпляр этого образца.

Теперь можно приступать к созданию анимации. Давайте заставим наш экземпляр двигаться по горизонтали, слева направо. Продолжительность анимации пусть составляет 10 кадров. Проверим готовую анимацию в действии и убедимся, что она работает.

Теперь давайте добавим на рабочий лист еще один экземпляр образца круг и заставим его двигаться по вертикали, сверху вниз. Для этого сначала создадим новый слой, а уже на него и поместим новый экземпляр. (О создании слоев см. главу 5.) Анимируем его и запустим воспроизведение готовой анимации. Вот и все.

Таким образом мы можем создавать сколько угодно слоев, помещать на них экземпляры и анимировать их. (Главное только — не переусердствовать, не то у зрителей зарябит в глазах. Но это так, шутка…)

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

Как сделать фон во Flash? Очень просто!

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

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

Все! Если мы теперь запустим воспроизведение созданной ранее анимации, наши элементы будут двигаться на красивом графическом фоне. Неплохо, правда?

Разумеется, фоном может служить не только импортированное растровое изображение, но и любая векторная графика, нарисованная в самом Flash. Фон также может быть анимированным, но это уже, на взгляд автора, перебор.

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

Клипы — замечательная штука. Мы можем применить к ним фильтры (см. главу 9), чтобы наше кино выглядело эффектнее. Но в таком случае возникнет одна проблема, о которой нужно поговорить.

Если фильм включает в себя множество анимированных фрагментов, проигрывателю Flash может не хватить процессорных ресурсов, чтобы отобразить анимацию плавно, без рывков. В самом деле, при выводе каждого кадра фильма ему придется извлечь из файла Shockwave/Flash описания каждого анимированного образца, вычислить его координаты и нарисовать его в той позиции, в которой он должен быть в данный момент. А ведь анимированные элементы могут перекрывать друг друга, быть полупрозрачными, обрабатываться с помощью фильтров и даже управляться сценариями ActionScript. И, кроме проигрывателя Flash, на компьютере могут выполняться другие программы, тоже требующие "внимания" со стороны процессора. Так что ничего нет удивительного в том, что воспроизводимая анимация будет постоянно дергаться, а то и застывать на несколько секунд.

Но Flash 8 предоставляет способ хоть как-то решить эту проблему. Он позволяет включить кэширование выбранных клипов в оперативной памяти компьютера. То есть проигрыватель Flash после считывания образцов-клипов из файла Shockwave/Flash, где хранится фильм, и помещения их экземпляров на рабочий лист поместит их также в оперативную память. Тогда, если ему понадобится нарисовать какой-либо клип в другой позиции, он возьмет его именно из оперативной памяти вместо того, чтобы снова лезть в файл Shockwave/Flash.

Преимущество у этого подхода одно, и оно очевидно — ускорение воспроизведения анимации. А вот недостатков несколько:

□ кэшироваться в оперативной памяти могут только клипы, не содержащие встроенной анимации (хотя такие клипы могут быть анимированы);

□ при кэшировании множества клипов сильно возрастает потребность в системных ресурсах;

□ проигрыватель Flash в любой момент может посчитать, что клип не должен кэшироваться (например, если он слишком велик или если не хватает оперативной памяти).

Включить кэширование клипа очень просто. Выделяем на рабочем листе нужный клип и обращаемся к панели Properties. В нижней ее части, прямо под раскрывающимся списком наложений, находится отключенный по умолчанию флажок Use runtime bitmap caching. Включаем этот флажок — и клип будет кэшироваться при выводе.

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

А теперь поговорим о специальных слоях. Это слои-направляющие и маскирующие слои.

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

Средствами, изученными в главе 12, добиться этого невозможно или слишком трудоемко. Поэтому специально для таких случаев Flash предлагает особую разновидность специальных слоев — слои-направляющие. И сейчас мы выясним, как их создать и как использовать.

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

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

Чтобы создать слой — направляющую и привязать к нему анимированный элемент, сначала выделим в списке слоев панели Timeline тот, что содержит анимированный элемент. Далее выберем пункт Motion Guide подменю Timeline меню Insert. Также можно выбрать пункт Add Motion Guide контекстного меню выделенного слоя. Созданный нами слой — направляющая появится над выделенным слоем (рис. 14.1) и будет иметь имя вида Guide: <имя выделенного слоя>. Также он будет помечен особой пиктограммой.

Теперь выделим слой — направляющую и нарисуем в нем нужную нам траекторию. Для этого можно пользоваться инструментами "карандаш", "перо", "линия", "прямоугольник", "эллипс" и "кисть". Нужно только проследить, чтобы слой — направляющая не содержал больше никакой графики, кроме траектории.

Осталось привязать наш анимированный элемент к нарисованной траектории. Для этого выделим первый ключевой кадр нашей анимации и включим флажок Snap панели Timeline. Точка вращения анимированного элемента после этого должна "приклеиться" к траектории. Переместим анимированный элемент в самое начало траектории, если он почему-либо оказался в ее середине. Наконец, выделим второй ключевой кадр анимации и переместим анимированный элемент в конец траектории.

Все! Можно проверить готовую анимацию (рис. 14.2).

Единственное, что портит картину — сама линия траектории. Нам нужно скрыть содержащий ее слой — направляющую, для чего достаточно щелкнуть в соответствующей строке списка слоев по колонке, помеченной значком "глаз".

В панели Properties есть еще один полезный нам флажок — Orient to path. Если его включить, Flash будет автоматически ориентировать анимированный элемент по линии траектории. На рис. 14.3 показана анимация, использующая автоматическое ориентирование по траектории.

Создать слой-направляющую можно и другим способом. Создадим обычный слой, выделим его, нарисуем на нем траекторию и выберем пункт-выключатель Guide контекстного меню этого слоя. Еще можно выбрать пункт Properties в контекстном меню, включить в появившемся на экране диалоговом окне Layer Properties (см. рис. 5.2) переключатель Guide и нажать кнопку ОК. Обратим внимание, что слой-направляющая, к которому не привязан ни один слой, обозначен значком в виде молотка.

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

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

"Отвязать" же слой с анимацией от слоя-направляющей можно также тремя способами. Первый способ: перетащить слой с анимацией так, чтобы он оказался выше слоя-направляющей. Второй способ: выделить слой с анимацией, выбрать пункт Properties в контекстном меню, включить в появившемся на экране диалоговом окне Layer Properties переключатель Normal и нажать кнопку ОК. Третий способ: отключить флажки Snap и Orient to path, "отклеив" тем самым анимированный элемент от линии траектории.

Чтобы превратить слой-направляющую в обычный слой, нужно отключить пункт-выключатель Guide в контекстном меню этого слоя. Можно также вызвать на экран диалоговое окно Layer Properties, включить переключатель Normal и не забыть нажать кнопку ОК.

Маскирующий слой позволяет скрыть содержимое лежащего под ним маскируемого слоя, показав только его часть. Он содержит особое изображение, называемое маской; она задает размеры и форму фрагмента маскируемого слоя, который будет виден. Мы можем представить себе, что маска — это "дырка" в маскирующем слое, сквозь которую видно содержимое маскируемого слоя. Эта "дырка" может быть анимирована, что позволит получить весьма интересные и забавные эффекты, вроде "светового пятна", высвечивающего разные фрагменты маскируемого слоя.

Как же создать и использовать маскирующий слой? Очень просто — даже проще, чем слой-направляющую.

Создадим новый документ Flash. По умолчанию он будет содержать единственный слой — его-то мы и превратим в маскируемый. Нарисуем на нем что-нибудь, а еще лучше — импортируем любое достаточно большое растровое изображение и поместим его на этот слой.

Так… Маскируемый слой у нас готов. А как насчет маскирующего?

Создадим над маскируемым слоем новый пустой слой. В нем нарисуем изображение, которое станет нашей маской.

При этом будем иметь в виду следующее:

□ любой контур и любая заливка станут прозрачными частями маски;

□ пустое пространство на рабочем листе станет непрозрачной частью маски;

□ цвета и стили линий и заливок будут проигнорированы. Так что не стоит увлекаться красивыми градиентными и графическими цветами — никакого эффекта это не даст, а результирующий файл Shockwave/Flash заметно увеличится в размерах.

Пусть наша маска имеет вид круга. Преобразуем ее в образец, который так и назовем — маска. Заставим ее перемещаться, скажем, из левого верхнего угла рабочего листа в правый нижний. Растянем единственный ключевой кадр слоя, содержащего маскируемое изображение, так, чтобы он "покрыл" всю анимацию. Теперь все готово к созданию маскирующего слоя.

Выделим в списке слой, содержащий маску, и выберем пункт Mask в контекстном меню этого слоя. Также можно выбрать пункт Properties в контекстном меню, включить в появившемся на экране диалоговом окне Layer Properties переключатель Mask и нажать кнопку ОК. После всех произведенных действий список слоев будет иметь вид, показанный на рис. 14.4.

Как видим, кроме всего прочего, и маскирующий, и маскируемый слои были заблокированы. Блокировка обоих слоев — важное условие их нормальной работы во Flash. Если мы не заблокируем хотя бы один слой, маскирование работать не будет. Если же нам понадобится что-то изменить, то мы сначала разблокируем нужный слой, изменим, что хотим, а потом не забудем заблокировать его снова.

Все — наша анимация готова! Можно запускать ее воспроизведение.

Мы можем маскировать одним маскирующим слоем несколько слоев, содержащих графику. Для этого мы создадим нужные слои, наполним их графикой, перетащим их и "бросим" под маскирующим слоем. Мы также можем выбрать пункт Properties контекстного меню слоя, который нужно сделать маскируемым, включим в появившемся на экране диалоговом окне Layer Properties переключатель Masked и нажмем кнопку ОК.

"Вынуть" же слой с графикой из-под маскирующего слоя можно двумя способами. Первый способ: перетащить слой с маскируемой графикой так, чтобы он оказался выше маскирующего слоя. Второй способ: выделить слой с графикой или маскирующий слой, выбрать пункт Properties в контекстном меню, включить в появившемся на экране диалоговом окне Layer Properties переключатель Normal и нажать кнопку ОК. В результате маскирующий или маскируемый слой станет обычным слоем.

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

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

2. Возвращаемся в сам документ. Помещаем экземпляр созданного на первом шаге образца-клипа в слой. Создаем еще один слой и делаем его маскирующим — он станет маской второго уровня.

3. Создаем всю анимацию и смотрим готовый фильм.

На этом разговор о применении слоев в непростом труде Flash-аниматора закончен.

Наш опыт работы во Flash пока еще очень невелик. И нам совсем не помешала бы сейчас любая помощь. Хотя бы помощь от самого Flash. Давайте выясним, может ли он помочь нам хотя бы создать за нас пару-тройку "красивостей" вроде анимированной тени. И займемся мы этим в следующей главе.