Рассмотрим четыре варианта применения механизма слоев при создании фильма:
· использование слоев для создания фонового изображения;
· использование ведущего слоя для управления движением объекта;
· использование слоя-маски для управления видимостью маскированных слоев;
· включение в сцену нескольких анимированных объектов.
Создание фона. Под фоном во Flash понимаются статичные изображения,
«декорации», которые не изменяются в процессе фильма. Фон может быть расположен как позади (с точки зрения наблюдателя), так и перед анимированным объектом.
Фоновый слой ничем не отличается от любого другого, и если, например, надо сделать фон подвижным, то вполне можно анимировать тот или иной объект фонового слоя.
Управление движением объекта. Во Flash существует понятие «ведущего слоя»
- Guide Layer. При выборе этого термина разработчики Flash воспользовались своеобразной игрой слов английского языка. Дело в том, что ведущий слой имеет два предназначения:
· во-первых, вы можете поместить на него какие-либо комментарии (даже с иллюстрациями), которые видны только в режиме редактирования фильма, но не экспортируются в формат SWF. В этом смысле слово Guide можно перевести как
«руководство», «инструкция»;
· во-вторых, с помощью ведущего слоя можно управлять траекторией перемещения объекта, анимированного с помощью tweened-анимации движения.
Чтобы создать слой-инструкцию, необходимо в списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на любом слое и в контекстном меню выбрать команду Insert Layer. Щелкнуть правой кнопкой мыши на вновь созданном слое и в контекстном меню выбрать пункт Guide. В результате в списке слоев возле имени слоя появится значок в виде молоточка. Он говорит о том, что содержимое данного слоя предназначено исключительно для разработчиков.
Второй тип ведущего слоя - это слой, описывающий траекторию, по которой движется объект. Особенность такого применения ведущего слоя состоит в том, что предварительно требуется создать tweened-анимацию прямолинейного движения объекта.
Чтобы заставить двигаться объект по произвольной траектории, необходимо выполнить следующие действия:
1. Щелкнуть правой кнопкой на имени слоя, содержащего анимированный объект.
2. Выбрать в контекстном меню команду Add Motion Guide (Добавить слой, управляющий движением). В результате в списке слоев появится ведущий слой, помеченный специальным значком, а имя слоя с анимацией сдвинется вправо - это признак того, что он является ведомым слоем.
3. Щелкните на имени ведущего слоя, чтобы сделать его активным.
4. С помощью любого инструмента рисования (Pen, Pencil, Oval, Brush, Rectangle)
изобразите траекторию движения объекта.
5. Щелкните левой кнопкой мыши в ячейке первого кадра анимации и в панели инспектора свойств кадра установите один из двух флажков: Orient to Path (Ориентировать по маршруту), если вы хотите, чтобы по нарисованному вами маршруту была сориентирована ось симметрии объекта; Snap (Привязать), если требуется привязать к траектории точку трансформации или точку регистрации объекта. После установки любого из флажков Flash автоматически позиционирует объект в кадре требуемым образом.
6. Щелкните левой кнопкой мыши в ячейке последнего кадра анимации и в панели инспектора свойств кадра установите тот же флажок, что и для первого кадра.
7. Снимите выделение с анимированного объекта и воспроизведите фильм.
Если вы построите траекторию, которая содержит пересекающиеся или соприкасающиеся участки, то объект будет двигаться по кратчайшему маршруту, соединяющему начальную и конечную точки траектории.
После того, как траектория будет создана, вы можете сделать ее невидимой. Для этого требуется сделать невидимым ведущий слой.
Маскирование слоев
Слой-маска позволяет создавать эффект отверстия, через которое видно содержание одного или большего числа нижележащих слоев.
Маска может быть создана на основе следующих типов объектов слоя:
· заливки;
· текстового поля (любого типа - Static, Dynamic либо Insert);
· экземпляра графического символа;
Маску можно заставить перемещаться, используя любой тип анимации: покадровая и tweened-анимация. С помощью tweened-анимации можно создать динамическую маску на основе текстового поля, заливки, графического символа или клипа. Причем для клипа можно с помощью ведущего слоя задать произвольную траекторию движения. С помощью tweened-анимации трансформации можно «оживить» маску, созданную на основе заливки. Кроме того, для анимирования масок можно применять сценарии на ActionScript. Нельзя маскировать слои внутри кнопок.
Создание маски. Маска представляет собой обычный слой, за исключением того, что любая заливка на нем интерпретируется Flash как отверстие, через которое виден нижележащий слой. При этом цвет заливки (в том числе растровой), наличие градиента, контур заливки и его тип полностью игнорируются Flash. Слой-маска закрывает (маскирует) по умолчанию только тот слой, который расположен непосредственно под ним.
Чтобы маскировать слой, необходимо выполнить следующие действия:
· Щелкните правой кнопкой мыши на имени слоя, который вы хотите маскировать (закрыть маской), и в контекстном меню выберите команду Insert Layer (этот новый слой впоследствии будет служить маской).
· Поместите на слой-маску заливку (или заливки), которые вы хотите использовать в качестве «смотровых окон». При анимировании маски на ней должна присутствовать только одна заливка.
· Щелкните правой кнопкой мыши на имени слоя-маски и в контекстном меню выберите пункт Mask (Маска), при этом в списке слоев произойдут следующие изменения: слева от имени слоя-маски появится соответствующий значок; имя маскируемого слоя сдвинется вправо, и возле него также появится новый значок; оба слоя будут автоматически заблокированы.
Всегда можно изменить расположение, форму и количество «смотровых окон» маски. Для этого ее надо сделать доступной для редактирования, достаточно снять с нее блокировку, щелкнув на значке замка (маскируемый слой можно не разблокировать). При этом автоматически снимается и режим маскирования.
Переход между режимами редактирования и просмотра маски может также выполняться с помощью команд контекстного меню слоя.
Чтобы включить режим редактирования, необходимо щелкнуть правой кнопкой мыши либо на имени слоя-маски, либо на имени маcкированного слоя и в контекстном меню выбрать команду Show All (Показать все).
Чтобы включить режим просмотра маски, необходимо щелкнуть правой кнопкой мыши либо на имени слоя-маски, либо на имени маскированного слоя и в контекстном меню выбрать команду Show Masking (Показать маскирование).
Анимирование маски. Как уже было сказано, «смотровые окна» маски могут быть анимированы одним из способов, рассмотренных ранее. При использовании автоматической анимации движения или трансформации маска должна содержать только одно «смотровое окно». При анимировании «смотрового окна» маскированный слой играет роль фона.
Лабораторная работа №3
Работа со слоями
Цель работы: Научиться использовать слои для создания мультипликации.
Основные теоретические сведения
Слой (Layer) - это часть сцены фильма, для которой могут быть установлены
некоторые индивидуальные атрибуты. Каждый слой может содержать произвольное
число различных объектов, учитывая ограничения на создание tweened-анимации.
Применение механизма слоев позволяет автономно работать с различными объектами,
подлежащими включению в фильм, и за счет этого создавать сложные многоплановые
сцены. Например, один из слоев может использоваться в качестве фона, на котором
разворачиваются события фильма, другой - анимированные объекты, а третий - элементы
звукового сопровождения фильма. Кроме того, с помощью слоев могут быть получены
специальные эффекты, такие как перемещение объекта по произвольной траектории,
маскирование объектов и некоторые другие.
Свойства слоев
В обычном режиме все слои абсолютно прозрачны, в том смысле, что объекты,
расположенные на различных слоях, визуально воспринимаются как элементы единой
сцены. Вместе с тем, объект, находящийся на верхнем слое, заслоняет объекты,
находящиеся в той же позиции на нижних слоях. Всегда возможно изменить порядок
расположения слоев, а также редактировать объекты одного слоя независимо от
элементов других слоев. Однако при необходимости можно выбрать одновременно
объекты из разных слоев и работать с ними как с единым целым. Например, можно
изменить их цвет или сгруппировать. Число слоев, которые вы можете создать,
ограничено только объемом оперативной памяти компьютера, и не влияет на размер
файла публикуемого фильма. Для удобства работы со слоями во Flash реализована
возможность хранения каждого набора взаимосвязанных слоев в отдельной папке слоев
Создание и удаление слоев. Для создания нового слоя требуется выполнить одно
из следующих действий:
на том слое, над которым надо поместить новый и в контекстном меню выбрать
команду Insert Layer (Вставить слой);
В списке слоев на панели временной диаграммы выбрать слой, над которым
требуется поместить новый, щелкнув на нем левой кнопкой мыши; щелкнуть
кнопку Insert Layer, расположенную ниже списка слоев.
Когда вы создаете новый слой, он появляется на столе над выбранным слоем; в
списке слоев его имя также помещается над именем выбранного слоя. Добавленный слой
автоматически становится активным слоем. Это означает, что создаваемый на столе
объект будет принадлежать данному слою. При этом видимость нового объекта будет
зависеть от расположения ранее созданных объектов других слоев. По умолчанию
новому слою присваивается имя Layer с указанием порядкового номера внутри сцены.
Впоследствии это имя может быть заменено любым другим, поясняющим его
предназначение.
Для удаления слоя следует выполнить одно из следующих действий:
В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши
на том слое, который надо удалить и в контекстном меню выбрать команду Delete
Layer (Удалить слой);
Delete Layer, расположенную
ниже списка слоев.
После удаления слоя активным становится слой, расположенный под ним.
Операции создания и удаления слоя можно отменить (как и многие другие), щелкнув на
кнопке Undo (Отмена).
Создание и удаление папок слоев. Для создания папки слоев требуется выполнить
одно из следующих действий:
В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши
на любом слое и в контекстном меню выбрать команду Insert Folder (Вставить
В списке слоев на панели временной диаграммы выбрать любой слой, щелкнув на
нем левой кнопкой мыши и щелкнуть кнопку Insert Layer Folder, расположенную,
ниже списка слоев.
По умолчанию новой папке присваивается имя Folder с указанием порядкового
номера внутри сцены. Впоследствии это имя может быть заменено любым другим,
поясняющим ее предназначение.
В отличие от слоев, для папки на временной диаграмме не отображается
последовательность кадров. Новая папка не содержит ни одного слоя. Чтобы поместить в
папку какой-либо из существующих слоев, достаточно перетащить с помощью мыши
строку с именем слоя на строку с именем папки. Все слои, включенные в папку,
расположены в списке ниже ее. Кроме того, имена слоев папки смещаются вправо
относительно имени папки. Чтобы «вынуть» слой из папки, достаточно перетащить его в
списке слоев выше строки с именем папки. При работе с папками следует учитывать, что
они имеют чисто организаторские функции и непосредственно не влияют на другие
свойства слоев, в частности, на видимость объектов в разных слоях. Тем не менее,
закрывая и открывая папку можно управлять отображением входящих в нее слоев в
списке временной диаграммы. При этом на столе объекты слоев остаются видимыми.
Еще одно достоинство в применении папок слоев состоит в том, что они позволяют
быстро установить одни и те же значения атрибутов для всех включенных в папку слоев.
Разрешается создавать вложенные папки с неограниченным числом уровней
вложенности.
Чтобы создать вложенную папку, необходимо в списке слоев на панели временной
диаграммы щелкнуть правой кнопкой мыши на любом слое, входящем в папку более
высокого уровня и контекстном меню выбрать команду Insert Folder.
При удалении папки удаляются также и входящие в нее слои, поэтому при попытке
удаления папки Flash выводит на экран предупреждающее сообщение.
Для удаления папки следует выполнить одно из следующих действий:
В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши
на имени папки, которую вы хотите удалить и в контекстном меню выбрать
команду Delete Folder (Удалить папку);
В списке слоев на панели временной диаграммы выбрать удаляемый слой, щелкнув
на нем левой кнопкой мыши и щелкнуть кнопку Delete Layer, расположенную
ниже списка слоев.
Установка атрибутов слоя. Каждому слою может быть назначена некоторая
совокупность атрибутов. Значения этих атрибутов отображаются в списке слоев в виде
специальных значков.
Атрибутами слоя являются:
Уровень слоя - объекты самого верхнего слоя при воспроизведении фильма
находятся как бы на переднем плане сцены и не заслоняются объектами
нижележащих слоев. Имя верхнего слоя является верхним и в списке;
Активность - на активном слое можно редактировать или создавать объекты, если
для него не установлены атрибуты «скрыт» или «заблокирован». Активный слой
отображается в списке инверсным цветом и помечается значком карандаша;
Видимость (Show/Hide - Показать/Скрыть) - объекты скрытого слоя (Hide) не
видны на столе и слой помечается в списке красным крестом. На скрытом слое
нельзя редактировать или создавать объекты, даже если он активен;
Блокировка (Locked/Unlocked - Заблокирован/Открыт) - на заблокированном слое
нельзя редактировать или создавать объекты, даже если он активен, такой слой
помечается в списке значком замка;
Контурность (Outlines) - объекты на контурном слое заменяются их контурами.
Включение такого режима позволяет видеть объекты, заслоненные объектами
данного слоя. Для контурного слоя можно дополнительно выбирать цвет контура
его объектов, поскольку данный атрибут может быть установлен для нескольких
Ведущий/ведомый (Guide/Guided) - ведущий слой может использоваться в качестве
шаблона при создании других слоев, а также для описания траектории движения,
он виден при воспроизведении фильма;
Маска/маскированный (Mask/masked) - использование слоя-маски позволяет
динамически изменять видимость маскированных слоев, что обеспечивает
интересные визуальные эффекты.
Назначение слою требуемых атрибутов может быть выполнено одним из
следующих способов:
− с помощью команд контекстного меню, вызываемого щелчком правой кнопки
мыши на имени слоя;
− с помощью трех кнопок установки атрибутов, расположенных выше списка
слоев. Щелчок на любой из них приводит к установке соответствующего
атрибута для всех слоев сцены;
− с помощью панели свойств слоя, для ее открытия следует дважды щелкнуть
мышью на значке, расположенном левее имени слоя, либо выбрать в
контекстном меню слоя пункт Properties.
Для последнего варианта следует отметить, что слой - это один из немногих
объектов, для которого в Flash отсутствует собственный инспектор свойств. Поэтому
установка атрибутов слоя выполняется с помощью диалогового окна Layer Properties ,
который имеет следующие элементы управления:
Текстовое поле Name (Имя), предназначенное для ввода и/или редактирования
имени слоя. По умолчанию создаваемым слоям присваиваются имена Layer I, Layer
произвольное имя. Flash не препятствует использованию кириллицы в названиях
слоев, что делает структуру фильма более понятной;
Флажок Show (Показать), состояние которого определяет видимость слоя;
Флажок Lock (Блокировать), с помощью которого устанавливается
соответствующее состояние слоя;
Группа переключателей Туре (Тип), позволяющих указать тип слоя: Normal -
обычный; Guide - ведущий; Guided - ведомый; Mask - маска; Masked -
маскированный; Folder - папка;
Кнопка Outline Color (Цвет контура), щелчок на которой открывает окно палитры
для выбора цвета контуров объектов слоя, если для него установлен вид
«контурный»;
Флажок View layer as outlines (Отображать слой как контурный), с помощью
которого можно установить/снять соответствующее свойство слоя;
Раскрывающийся список Layer Height (Высота слоя), предназначенный для
указания высоты строки слоя на панели временной диаграммы (в том числе и
высоты ячеек кадров). Такая возможность может оказаться полезной для слоев,
кадры которых содержат специальные значки (например, значок звукового
символа); список содержит всего три варианта (100%, 200% и 300%).
Использование слоев в анимации
Рассмотрим четыре варианта применения механизма слоев при создании фильма:
Использование слоев для создания фонового изображения;
Использование ведущего слоя для управления движением объекта;
Использование слоя-маски для управления видимостью маскированных слоев;
Включение в сцену нескольких анимированных объектов.
Создание фона. Под фоном во Flash понимаются статичные изображения,
«декорации», которые не изменяются в процессе фильма. Фон может быть расположен
как позади (с точки зрения наблюдателя), так и перед анимированным объектом.
Фоновый слой ничем не отличается от любого другого, и если, например, надо
сделать фон подвижным, то вполне можно анимировать тот или иной объект фонового
Управление движением объекта. Во Flash существует понятие «ведущего слоя»
- Guide Layer. При выборе этого термина разработчики Flash воспользовались
своеобразной игрой слов английского языка. Дело в том, что ведущий слой имеет два
предназначения:
Во-первых, вы можете поместить на него какие-либо комментарии (даже с
иллюстрациями), которые видны только в режиме редактирования фильма, но не
экспортируются в формат SWF. В этом смысле слово Guide можно перевести как
«руководство», «инструкция»;
Во-вторых, с помощью ведущего слоя можно управлять траекторией перемещения
объекта, анимированного с помощью tweened-анимации движения.
Чтобы создать слой-инструкцию, необходимо в списке слоев на панели временной
диаграммы щелкнуть правой кнопкой мыши на любом слое и в контекстном меню
выбрать команду Insert Layer. Щелкнуть правой кнопкой мыши на вновь созданном слое
и в контекстном меню выбрать пункт Guide. В результате в списке слоев возле имени
слоя появится значок в виде молоточка. Он говорит о том, что содержимое данного слоя
предназначено исключительно для разработчиков.
Второй тип ведущего слоя - это слой, описывающий траекторию, по которой
движется объект. Особенность такого применения ведущего слоя состоит в том, что
предварительно требуется создать tweened-анимацию прямолинейного движения
Чтобы заставить двигаться объект по произвольной траектории, необходимо
выполнить следующие действия:
1. Щелкнуть правой кнопкой на имени слоя, содержащего анимированный объект.
2. Выбрать в контекстном меню команду Add Motion Guide (Добавить слой,
управляющий движением). В результате в списке слоев появится ведущий слой,
помеченный специальным значком, а имя слоя с анимацией сдвинется вправо -
это признак того, что он является ведомым слоем.
3. Щелкните на имени ведущего слоя, чтобы сделать его активным.
4. С помощью любого инструмента рисования (Pen, Pencil, Oval, Brush, Rectangle)
изобразите траекторию движения объекта.
5. Щелкните левой кнопкой мыши в ячейке первого кадра анимации и в панели
инспектора свойств кадра установите один из двух флажков: Orient to Path
(Ориентировать по маршруту), если вы хотите, чтобы по нарисованному вами
маршруту была сориентирована ось симметрии объекта; Snap (Привязать), если
требуется привязать к траектории точку трансформации или точку регистрации
объекта. После установки любого из флажков Flash автоматически
позиционирует объект в кадре требуемым образом.
6. Щелкните левой кнопкой мыши в ячейке последнего кадра анимации и в панели
инспектора свойств кадра установите тот же флажок, что и для первого кадра.
7. Снимите выделение с анимированного объекта и воспроизведите фильм.
Если вы построите траекторию, которая содержит пересекающиеся или
соприкасающиеся участки, то объект будет двигаться по кратчайшему маршруту,
соединяющему начальную и конечную точки траектории.
После того, как траектория будет создана, вы можете сделать ее невидимой. Для
этого требуется сделать невидимым ведущий слой.
Маскирование слоев
Слой-маска позволяет создавать эффект отверстия, через которое видно
Маска может быть создана на основе следующих типов объектов слоя:
Заливки;
Текстового поля (любого типа - Static, Dynamic либо Insert);
Экземпляра графического символа;
Маску можно заставить перемещаться, используя любой тип анимации: покадровая
и tweened-анимация. С помощью tweened-анимации можно создать динамическую маску
на основе текстового поля, заливки, графического символа или клипа. Причем для клипа
можно с помощью ведущего слоя задать произвольную траекторию движения. С
помощью tweened-анимации трансформации можно «оживить» маску, созданную на
основе заливки. Кроме того, для анимирования масок можно применять сценарии на
ActionScript. Нельзя маскировать слои внутри кнопок.
Создание маски. Маска представляет собой обычный слой, за исключением того,
что любая заливка на нем интерпретируется Flash как отверстие, через которое виден
нижележащий слой. При этом цвет заливки (в том числе растровой), наличие градиента,
контур заливки и его тип полностью игнорируются Flash. Слой-маска закрывает
(маскирует) по умолчанию только тот слой, который расположен непосредственно под
Чтобы маскировать слой, необходимо выполнить следующие действия:
Щелкните правой кнопкой мыши на имени слоя, который вы хотите маскировать
(закрыть маской), и в контекстном меню выберите команду Insert Layer (этот
новый слой впоследствии будет служить маской).
Поместите на слой-маску заливку (или заливки), которые вы хотите использовать в
качестве «смотровых окон». При анимировании маски на ней должна
присутствовать только одна заливка.
Щелкните правой кнопкой мыши на имени слоя-маски и в контекстном меню
выберите пункт Mask (Маска), при этом в списке слоев произойдут следующие
изменения: слева от имени слоя-маски появится соответствующий значок; имя
маскируемого слоя сдвинется вправо, и возле него также появится новый значок;
оба слоя будут автоматически заблокированы.
Всегда можно изменить расположение, форму и количество «смотровых окон»
маски. Для этого ее надо сделать доступной для редактирования, достаточно снять с нее
блокировку, щелкнув на значке замка (маскируемый слой можно не разблокировать).
При этом автоматически снимается и режим маскирования.
Переход между режимами редактирования и просмотра маски может также
выполняться с помощью команд контекстного меню слоя.
Чтобы включить режим редактирования, необходимо щелкнуть правой кнопкой
мыши либо на имени слоя-маски, либо на имени маcкированного слоя и в контекстном
меню выбрать команду Show All (Показать все).
Чтобы включить режим просмотра маски, необходимо щелкнуть правой кнопкой
мыши либо на имени слоя-маски, либо на имени маскированного слоя и в контекстном
меню выбрать команду Show Masking (Показать маскирование).
Анимирование маски. Как уже было сказано, «смотровые окна» маски могут быть
анимированы одним из способов, рассмотренных ранее. При использовании
автоматической анимации движения или трансформации маска должна содержать только
одно «смотровое окно». При анимировании «смотрового окна» маскированный слой
играет роль фона.
3.1KВ рамках этой статьи мы объединим все, что узнали раньше, чтобы освоить несколько новых методов анимации в Фотошопе. Рассмотрим, как применять различные комбинации корректирующих слоев и фильтров для анимации, как создавать сложное перемещение слоев анимации и естественно выглядящие эффекты.
Так как смарт-объекты могут содержать несколько слоев, то мы можем создавать временные слои, что помогает нам создавать более сложную анимацию. Например, в приведенном ниже эффекте анимации я создал красную точку, которая перемещается по кругу. Обычно такой эффект создается непросто, и для этого требуется много ключевых кадров. С помощью смарт-объектов мы можем использовать слои — шаблоны и упростить весь процесс.
Давайте рассмотрим, как это делается:
В приведенной ниже сцене я создал два слоя: один с красной точкой (“Dot” ), и второй с большим серым кругом (“Template Shape” ). Я добавил к большому серому кругу метки-разделители, чтобы нагляднее продемонстрировать эффект перемещения:
Шаг 1: Сцена, состоящая из двух слоев: красной точки и большого серого круга. (Увеличенная версия )
Сначала я выделяю оба слоя и преобразую их в смарт-объект, кликнув правой кнопкой по одному из выделенных слоев и выбрав из контекстного меню пункт «Преобразовать в смарт-объект »:
Шаг 2: Преобразование слоев в смарт-объект. (Увеличенная версия )
Теперь мы можем анимировать оба слоя как один. Так как это смарт-объект, у меня есть доступ к свойству «Преобразования » в панели шкалы времени, которое позволяет задать ключевой кадр для вращения. Я добавил кадр для каждой половины вращения, чтобы создать один полный оборот. В результате я получил вращающийся вокруг своей оси круг:
Шаг 3: Оба слоя вращаются как одно целое
Теперь, когда наша анимация работает, нужно удалить фигуру шаблона. Для этого дважды кликните по миниатюре смарт-объекта в палитре слоев. Открыв смарт-объект, мы можем скрыть слой “Template Shape” :
Шаг 4: Скройте слой » Template Shape». (Увеличенная версия )
До того, как сделать анимированный баннер в Фотошопе полностью, нам осталось лишь сохранить документ смарт-объекта и вернуться к исходному документу. Мы увидим, что красная точка движется по кругу без серой фигуры:
Красная точка движется по кругу
Смарт-объекты могут состоять из слоев любого типа (или нескольких типов ). В том числе слоев, которые уже содержат ключевые кадры анимации. Давайте рассмотрим, как это реализуется:
Анимация подпрыгивающей точки создана с использованием нескольких наборов ключевых кадров
В приведенной ниже сцене я уже создал простую анимацию желтой точки, вращающейся на синем фоне:
Шаг 1: Желтая точка, вращающаяся на холсте
Шаг 2: Преобразование слоя желтой точки в смарт-объект. (Увеличенная версия )
У нас есть новый слой смарт-объекта, и мы можем добавить в него новый набор кадров. В приведенной ниже сцене я добавил набор для создания анимации перемещения смарт-объекта вверх и вниз. В ней мы можем видеть в действии оба набора ключевых кадров, которые создают эффект подпрыгивания:
Шаг 3: Новые ключевые кадры создают эффект подпрыгивания
Преобразуйте этот слой смарт-объекта в другой смарт-объект, который сможем редактировать. Далее мы добавим к этому смарт-объекту свойство «Преобразование ». Перейдите в Редактирование> Произвольная трансформация , и с помощью опорных точек измените форму смарт-объекта так, чтобы он появлялся с учетом перспективы.
Шаг 4: Преобразование анимации. (Увеличенная версия )
Теперь при воспроизведении анимации будет отображаться трансформация смарт-объекта. Это один из основных способов того, как сделать анимированную картинку в Фотошопе:
Воспроизведение анимации с трансформацией
Если мы добавим фильтр к смарт-объекту, который содержит анимированный слой, то получим анимацию, которая воспроизводится через фильтр. Давайте рассмотрим, как это работает.
В приведенной ниже сцене я уже создал простую анимацию точки (внутри смарт-объекта ), движущуюся на красном фоне:
Шаг 1: Анимация смарт-объекта, желтая точка, движущаяся на красном фоне
Так как наша анимация уже находится внутри смарт-объекта, я могу добавить фильтр непосредственно к нему. Я перехожу в Фильтр> Искажение> Скручивание :
Шаг 2: Применение фильтра «Скручивание» к анимации смарт-объекта. (Увеличенная версия )
Когда вы просмотрите эту анимацию, то увидите, что происходят интересные вещи. Фильтр был применен к самому смарт-объекту, а не к пикселям его содержимого. Благодаря этому перемещение анимированных пикселей через фильтр приобретает уникальный эффект:
Анимация фильтра «Скручивание»
В приведенной ниже сцене у меня уже есть смарт-объект, который содержит простую анимацию точки движущейся на белом фоне:
Шаг 1: Простая анимация смарт-объекта
Я хочу применить к этой точке стиль слоя «Тиснение ». Но если я сейчас попытаюсь применить стиль слоя к смарт-объекту, это повлияет на все его содержимое:
Шаг 2: Стили слоя, примененные к изображению в целом
Чтобы исправить это, мне нужно удалить белый фон. Ранее я рассказывал, что мы можем изменять смарт-объект, чтобы скрыть дополнительные слои. В этом примере я хочу продемонстрировать другой способ.
Пока между слоями существует выразительный контраст тонов, мы можем использовать для удаления фона параметр «Наложить если ». Дважды кликните по слою смарт-объекта, чтобы открыть панель стилей слоя, и переместите ползунок параметра «Наложение, если », по фон не исчезнет:
Шаг 3: Настройка слайдера «Наложение, если». (Увеличенная версия )
После этого кликните правой кнопкой мыши по слою в палитре слоев и выберите пункт «Преобразовать в смарт-объект». Мы получим новый смарт-объект, который сохранит внесенные нами изменения:
Шаг 4: Преобразование в смарт-объект. (Увеличенная версия )
Когда мы добавим к анимации набор стилей слоя, эффект будет применяться только к этому объекту:
Стили слоя, добавленные к анимации смарт-объекта
Корректирующие слои действуют на анимированные слои таким же образом, как и на обычные. Если корректирующий слой располагается поверх слоя, содержащего ключевые кадры, то анимация наследует коррекции. Учитывая это, мы можем использовать корректирующие слои, чтобы создать уникальные эффекты.
В приведенной ниже сцене я создал простую анимацию с двумя точками, одна из которых движется мимо другой.
Экспресс-план модуля:Слой-маска не может использоваться в одиночку, а должен быть связан с одним или несколькими обычными слоями, в отношении которых он даёт эффект маски. То есть, содержимое связанных слоёв видно только через «дырки» в маске, а вся остальная их часть остается невидимой. Более того, маска может иметь анимацию (кроме анимации, использующей направляющую для движения), что позволит создавать весьма необычные эффекты.
В ходе работы на слое маски, для создания «дырок», чаще всего используется графический примитив — заливка. В этом случае она играет роль очень ядовитой краски или кислоты разъедающей поверхность слоя. Линии таким свойством не обладают!
Итак, маска может быть создана на основе:
При работе с этими элементами следует учитывать, что на маскирующем слое одновременно можно помещать объекты только одного типа — либо только заливки, либо только текст, либо символы типа Graphic, либо символы типа Movie Clip. Причём «обычных» заливок может быть сколько угодно, а вот текстовой блок или символ может быть только один! Последовательность действий при создании маски следующая:
Если слой-маска уже существует, с ним можно связать дополнительные слои. Это можно сделать несколькими способами.
Поэкспериментируйте со слоями. Создайте маскирующие слои на основе заливки, блока текста, символа типа Graphic и Movie Clip и убедитесь в правоте изложенных выше утверждений.
Маску можно заставить перемещаться, используя как покадровую, так и расчётную анимацию.
С помощью расчётной анимации типа Motion можно «оживить» маску, созданную на основе текстового поля, заливки представленной в виде группы, символа типа Graphic или Movie Clip. Причём для символа типа Movie Clip можно с помощью ведущего слоя задать произвольную траекторию движения. Но сделать это нужно будет «внутри» самого символа!
С помощью расчётной анимации типа Shape можно «оживить» маску, созданную на основе графического примитива — заливки.
Кроме того, для анимирования масок можно применять сценарии ActionScript.
Нельзя маскировать слои внутри кнопок — символов типа Button. Кроме того, кнопка не может выступать в роли маски.
Рассмотрим несколько вариантов создания анимированной маски.
Создайте новый документ и сохраните его на диске. В ходе работы над роликом вам нужно будет создать на палитре Timeline три слоя:
Слой text . На этом слое разместите текстовой блок. Для того чтобы у вас появилась возможность применить к тексту градиентную заливку, «разбейте» текст, дважды обратившись к команде Break Apart меню Modify.
Слой shadow. Этот слой позволит вам создать эффект тени для текста. Для этого перейдите на слой с текстом и скопируйте его в буфер обмена. Затем, вернувшись на слой shadow, используйте команду Insert > Paste in Place, примените для этого текста заливку типа Solid (сплошной) тёмного цвета и немного сместите этот текст, используя управляющие клавиши клавиатуры. Получилась густая тень.
Слой mask. На этом слое вам предстоит создать анимированную маску. Для этого на первом кадре этого слоя, используя инструмент Oval, нарисуйте круг сравнительно небольшого радиуса. Расположите круг по центру относительно сцены (не забывайте о прекрасной палитре Align). Затем перейдите к 25 кадру этого слоя и сделайте его ключевым. В этом кадре размер круга следует увеличить таким образом, чтобы он полностью закрывал ваш текст. Вернитесь к первому кадру и в палитре Properties задайте тип анимации Shape. Для того чтобы зафиксировать на некоторое время последний кадр анимации, перейдите на 40 кадр и используйте команду Insert > Frame.
Используя эту же команду, «растяните» до 40 кадра слой text и слой shadow.
Протестируйте свой ролик.
Если разорвать связь со слоем-маской и слоем shadow можно получить ещё один очень интересный эффект! Поэкспериментируйте с роликом — поменяйте зависимость слоёв, форму маски...
Создайте новый документ и сохраните его на диске. В ходе работы над этим роликом вам также нужно будет создать на палитре Timeline три слоя.
Слой text. На этом слое разместите текстовой блок. Можно использовать текст из предыдущей работы.
Слой image. На этом слое также размещён текст, при этом, как и в предыдущей работе, использована команда Insert > Paste in Place. Примените для этого текста заливку типа Solid, прозрачность которой уменьшите, используя палитру Color Mixer до 1%—10%. Вы должны создать иллюзию того, что в темноте виден некий образ.
Слой mask. На этом слое вам предстоит создать анимированную маску — смоделировать движение луча прожектора. Роль прожектора будет «исполнять» символ типа Graphic. Итак, создайте новый символ New Symbol типа Graphic. Внутри символа нарисуйте круг, диаметр которого немного превышает высоту букв в вашем тексте. Используя палитру Align, поместите круг в центр символа. Вернитесь на сцену, откройте библиотеку ролика и поместите на неё экземпляр, созданного вами символа, таким образом, чтобы он лишь касался левого края сцены. Затем перейдите к 30 кадру, сделайте его ключевым и переместите экземпляр-прожектор к правому краю сцены, как показано на рисунке. Вернитесь к первому кадру и в палитре Properties задайте тип анимации Motion. Для того чтобы зафиксировать на некоторое время последний кадр анимации и дать прожектору некоторое время «погулять» вне сцены, перейдите на 40 кадр и используйте команду Insert > Frame.
Используя эту же команду, «растяните» до 40 кадра слой image и слой text.
Затем перейдите на слой mask и, используя контекстное меню Mask, превратите его в маску.
Протестируйте свой ролик и полюбуйтесь полученным результатом.
Позвольте себе смелый эксперимент. Обязательно попробуйте использовать в качестве анимированной маски блок с текстом!
Создайте новый документ и сохраните его на диске. Создайте новый символ типа Movie Clip, внутри которого вы должны будете организовать движение маски по заданной траектории. Для этого на палитре Timeline вашего символа создайте временный слой interim , на котором поместите некий пейзаж. Превратите пейзаж в группу, выровняйте группу относительно центра сцены, используя палитру Align. Этот слой в последующем будет удалён, но на этапе разработки ролика он сослужит нам добрую службу, позволив откорректировать движение «подзорной трубы» — маски.
Создайте новый слой binoculars , в котором нарисуйте круг (именно он в последующем будет играть роль динамической маски). Не забудьте превратить его в группу, так как анимация типа Motion не будет работать с графическим примитивом! Затем создайте для этого слоя слой Guide , на котором определитесь с траекторией движения маски. Обратите внимание на палитру Timeline этого символа. Для того чтобы уменьшить скорость движения маски ключевой кадр, на котором будет определено конечное положение маски, можно сдвинуть правее (например, в ролике, использованном в этой лекции это не 40 как на рисунке, а 100 кадр). Определившись с конечным положением маски, вернитесь к первому кадру и задайте в палитре Properties тип анимации Motion. Не забудьте «посадить» круг на линию траектории. «Растяните» слои Guide: binoculars и interim, используя команду Insert Frame. Если нужно откорректируйте траекторию движения, используя инструменты палитры Tools — Subselection, Pen и Arrow.
Вернитесь на сцену. Обратите внимание, что на палитре Timeline моего ролика только два слоя и всего один кадр. В слой landscape поместите пейзаж. А на новый слой, который в последующем будет определён как маска, поместите экземпляр созданного вами символа. Откорректируйте положение экземпляра символа таким образом, чтобы расположение пейзажа символа полностью совпадало с расположением пейзажа на сцене. Теперь обратитесь к библиотеке ролика и отредактируйте символ, щёлкните по нему правой кнопкой мыши и выберите команду Edit (редактировать). Удалите слой interim, на котором у вас размещён пейзаж. Вновь вернитесь на сцену и превратите слой mask, на котором вы расположили экземпляр символа, в маску.
Протестируйте свой ролик, полюбуйтесь полученным результатом и, если это необходимо, произведите коррекцию анимации.
Я уже говорила вам о том, что анимацию можно откорректировать, используя дополнительные ключевые кадры. Сегодня я хотела бы дать вам ещё несколько практических советов по этому поводу.
Чтобы переместить кадр или последовательность кадров, просто «перетащите» их мышкой.
Чтобы «превратить» ключевой кадр в обычный кадр используйте команду Clear Keyframe. Очищенный ключевой кадр и все кадры до следующего ключевого кадра заменятся содержимым предшествующего очищенному ключевого кадра.
Чтобы «зеркально отразить» анимацию во времени (начало сделать концом, а конец началом, естественно, в начале и в конце должны быть ключевые кадры), выделите необходимые вам кадры и используйте команду Reverse Frames.
Работая в обычном режиме, Flash отображает на сцене содержимое только одного кадра анимации, в данный момент времени.
Чтобы лучше позиционировать относительно друг друга объекты, расположенные на разных кадрах при создании покадровой анимации или при коррекции расчётной анимации вы можете «вывести» на сцену изображения сразу нескольких кадров. Для того чтобы перевести Flash в этот режим работы следует обратиться к кнопочке Onion Skin, которую вы без труда найдёте в нижней части палитры Timeline. В этом режиме элементы текущего кадра будут отображены в полном цвете, а элементы соседних кадров будут полупрозрачными. Можно немного трансформировать этот режим с помощью кнопки Onion Skin Outlines позволяющей представить элементы соседних кадров в виде силуэтов. Чтобы увеличить область захвата кадров для любого из этих режимов необходимо «переместить» маркер режима вправо. Режим Onion Skinning позволяет редактировать только текущий кадр. В том случае если вам необходимо откорректировать сразу несколько слоёв включите режим Edit Multiple Frames.
Обратите внимание, что перечисленные выше режимы нельзя применить для блокированных слоёв. Чтобы не запутаться при многокадровом редактировании, закрывайте или отключайте не нужные в данный момент слои!
Во-первых, вам необходимо продублировать анимационные flash-ролики, представленные в материале этой лекции.
Во-вторых, создать ролик, позволяющий проиллюстрировать замечательные строки из стихотворения Сергея Александровича Есенина:
Синий май. Заревая теплынь.
Не прозвякнет кольцо у калитки.
Липким запахом веет полынь.
Спит черёмуха в белой накидке.
В деревянные крылья окна
Вместе с рамами в тонкие шторы
Вяжет взбалмошная луна
На полу кружевные узоры…
Попробуйте соединить в своём ролике два эпизода — два четверостишия, используя знания, полученные в рамках изучения способов анимации. Для того чтобы обеспечить плавный переход от одного эпизода к другому используйте маску.
Итого: с вас четыре файла в формате fla (если суммарный размер файлов превысит 150 Кб, пожалуйста, упакуйте файлы в архив) и вышлите учителю.
Желаю Вам успехов в самостоятельном изучении Macromedia Flash MX!
