Кроме вспомогательных опорных слоев и слоев траекторий в редакторе Flash очень часто применяются так называемые слои-маски, с помощью которых можно создавать очень интересные эффекты. Применение масок подразумевает наличие как минимума двух слоев, а именно маскируемого слоя, в котором может находиться максируемый объект и слоя маски. Что же такое маска? Маска используется для сокрытия определенной части изображения, расположенного в нижележащем слое. Графика, находящаяся в слое маске не просматривается в опубликованном ролике, но она выполняет роль отверствия или окна, через которое видно то, что нарисовано в прикрепленных маскируемых слоях.
Если применить к слою-маске или к маскируемому слою анимацию, то можно получить множество замечательных эффектов. Прежде всего вы должны знать какие объекты должны быть использованы в качестве масок. Это простые формы, т.е. заливки, статический текст и графические символы размещенный в одном слое и содержащие простые формы.
Линии или контуры, градиентные или растровые заливки, а также динамический текст не могут быть масками. В принципе в качестве масок можно применять и мувиклипы, но в этом случае есть большое но. Так Flash использует в качестве маскирующего элемента, только первый кадр нижнего слоя клипа. Поэтому в общем случае мувиклипы не являются лучшим выбором для создания масок. Зато они прекрасно подходят в качестве маскируемых элементов. а теперь перейдем к практическим примерам. Создадим эффект прожектора - это классический пример, котрый демонстрирует, когда хотят познакомит с маскированием.
Импортируем в проект подходящее изображение, выполнив команду File Import. Выберем нужный файл и щелкнем по кнопке Открыть. При необходимости с помощью панели Align разместим рисунок в центре полотна. Нажмем клавишу F8 и конвертируем его в графический символ или в мувиклип. Эту операцию мы сделали для того, чтобы в последующем применить к изображению цветовые эффекты. Теперь нам нужно создать слой маску. К сожалению разработчики программы не предусмотрели для этого специальной кнопки под списком слоев. Поэтому мы сначала создадим обычный слой и дадим ему имя Mask. Далее дважды щелкнув по пиктограмме
слоя или через контекстное меню откроем окно его свойств. Здесь установим тип Mask и щелкнем по кнопке ОК. Обратите внимание как изменилась пиктограмма слоя. Сделать из слоя маску можно и быстрее, установив в контекстном меню флажок на пункте Mask. Далее необходимо прикрепить нижний слой к слою маске, т. е. сделать его маскируемым.
Это можно реализовать двумя путями. Щелкнем правой кнопкой мыши по слою и откроем окно его свойств. Если установить сейчас тип Masked, то слой станет маскируемым, но мы пока этого делать не будем, поэтому щелкнем по кнопке Cancel - Отмена. И покажем более быстрый способ прикрепления слоя к маске. Просто перетащим нижний слой под слой маску.
Пиктограмма слоя изменится и он станет маскируемым. Заблокируем нижний слой и перейдем в слой маску. Затем с помощью иснтру мента Овал нарисуем круг. Цвет заливки круга значения не имеет. Инструментом Arrow выделим и удалим контур фигуры, поскольку линии в масках не используются. Если сейчас протестировать ролик, то на экране мы увидим только часть изображения нижнего слоя, которое находится под маской. Закроем тест. Кстати говоря принцип дефствия маски можно посмотреть и на основной сцене, для этого нужно заблокировать оба слоя. Снова разблокируем слой маски и создадим анимацию движения. Выделим круг, нажмем клавишу F8 и конвертируем фигуру в графический символ. Перетащим экземпляр символа за левую часть полотна, затем выдели 15 позицию слоя и клавишей F6 скопируем туда первый ключевой кадр. В этом кадре переместим объект вправо за пределы сцены. Используя клавишу F5 увеличим длительность нижнего слоя также до 15 кадров.
Щелкнем правой кнопкой мыши на первом кадре слоя Маски и назначим анимацию движения. Теперь протестируем фильм. Мы получили достаточно инстересный эффект, но это еще не эффект прожектора. Закроем тестовое окно и добавим к фильму небольшое усложнение. Создадим новый обычный слой и перетащим его вниз пакета слоев. Убедимся, что новый слой не является маскируемым. Сделаем невидимыми два верхних слоя, клавишей F11 откроем окно Библиотеки и поместим еще один экземпляр символа изображения на сцену. Используя панель Выравнивание отцентрируем объект. Не снимая выделения в списке цветовых эффектов панели Properties установи пункт яркость и установим ее значение - 60%.
Протестируем созданную анимацию еще раз. Теперь получился эффект настоящего прожектора. Закроем тестовое окно и приведем еще один пример, где с помощью маски попробуем создать анимацию вращающегося глобуса, которую часто можно увидеть на Web--страницах Internet. Создадим новый проект и отмасштабируем рабочую область. На этот раз маску сделаем статичной, а анимировать будем маскируемое изображение. Импортируем из файла или вставим из буфера обмена рисунок карты в виде прямоугольной области. Нажмем клавишу F8 и конвертируем рисунок в символ, что необходимо для создания анимации движения. Щелкнем дважды на названии нового слоя и дадим ему имя Map -карта. Теперь создадим новый слой, который в дальнейшем будем использовать в качестве маски. Выберем инструмент Овал, сбросим цвет контура и нарисуем круг любого цвета диаметром чуть меньшем ширины нашей карты.
Выделим его инструментом Arrow и разместим относительно карты в какой-нибудь характерной точке. Например, так, чтобы левый край фигуры касался крайней правой точки Африки на карте. Перейдем в слой карты, выделим 18 позицию слоя и создадим клавишей F6 ключевой кадр. Чтобы выровнять слои по длительности, отметим 18 позицию верхнего слоя и нажмем клавишу F5. Опять перейдем в 18 кадр нижнего слоя и спомощью клавиатуры сместим карту влево настолько, чтобы Африка оказалась снова у левого края круга. Этим мы добъемся того, что в первом и последнем кадрах анимации, под маской будет одинаковое изображение. Перейдем в первый кадр нижнего слоя и с помощью контекстного меню, назначим анимацию движения. Щелкнем правой кнопкой мыши по верхнему слою и в контекстном меню установим тип.
Mask. Теперь протестируем ролик, нажав CTRL+Enter. Анимация происходит но выглядит абсолютно плоской и мало похожа на глобус. Закроем тестовое окно и попробуем устранить отмеченный недостаток. Придадим нашей фигуре объемный вид. При активном слое Маске создадим новый обычный слой. Присвоим ему имя Shade - Тень. Здесь изобразим круг с полупрозрачной заливкой, которая будет выполнять роль тени. Чтобы не рисоват фигуру заново и совмещать ее с маской, поступим следующим образом. Снимем блокировку со слоя Маски, выделим круг, скопируем его в буфер обмена, перейдем в верхний слой и вставим из буфера копию фигуры командой Edit-Paste in Place - Вставить на место.
Снова заблокируем слой маски, чтобы случайно его не изменить. Зделаем также нижние слои временно невидимыми и поработем с фигурой в верхнем слое. Теперь нам нужно залить круг полупрозрачной градиентной заливкой. Выберем инструмент Paint Bucket и с помощью панели Mixer настроим нужную заливку. Установим на панели радиальную градиентную заливку, щелкнем по левому маркеру и введем непрозрачность цвета 0%. Добавим еще один маркер, щелкнув под линейкой перехода цвета. Выберем черный цвет, а непрозрачность установим равной 60%. Для третьего маркера также назначим черный цвет и сделаем непрозрачность равной 90%.
Щелкнем инструментом заливка, где-нибудь левее и выше центра круга. Фигура будет залита круговым полупрозрачным градиентом. Включим видимость всех слоев и заблокируем их, щелкнув по пиктограмме замка. Осталось только протестировать ролик, если сделать анимацию более плавной, т.е. увеличить скорость воспроизведения, то она будет неплохо смотреться на какой-нибудь WEB-страничке. А сейчас сделаем перерыв.
⇐I.3.3. примеры создания трехмерных эффектов с помощью слоев траекторий | TeachPro WEB-дизайн | З.5. примеры применения текста при маскировании (ii уровень)⇒