Как сделать маску флеша

Добавил пользователь Евгений Кузнецов
Обновлено: 18.09.2024

На данный момент Flash, к сожалению, является официально похороненной технологией. Вместо нее с 2016-го года будет продвигаться другая программа с именем Adobe Animate CC, позволяющая создавать анимацию с последующим ее применением в HTML5.

Но данный пост посвящается тем, кто все-таки решил познакомиться с этой замечательной программой и научиться анимации на ее основе. Тем более, что принципы создания анимации похожи во многих программах. А Flash еще умеет и экспортировать анимацию в видеоформат -avi или mov (для последнего в системе нужно установить QuickTime Player).

Создание маски будем рассматривать на примере видеоурока. Приятного просмотра.

Создание простой маски

Создание маски с использованием графического символа

В этом видеуроке показано, как экспортировать анимацию, созданную во Flash в видеоформат. Досмотрите до конца 🙂

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

Если изображение замаскированного слоя спрятано под слоем-маской и невидимо, тогда видно изображение слоев , которые находятся еще ниже.

Чтобы лучше разобраться в работе со слоем-маской, проделайте практические действия. Откройте программу Macromedia Flash Professional 8, создайте новый flash-документ, и в первом кадре нарисуйте или импортируйте изображение.

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

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

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

Давайте теперь сделаем эффект замены одной картинки другой . Для создания такого эффекта проделайте следующие действия:

Подготовьте два изображения, которые будут сменять друг друга, например, в программе Photoshop.
Создайте два слоя в программе Macromedia Flash Professional 8, и в первые кадры этих слоев импортируйте подготовленные изображения с помощью меню File — Import — Import to Stage .
Над этими слоями создайте третий слой, который будет слоем-маской, с помощью меню Insert-Timeline — Layer , или с помощью нажатия правой клавишей мыши по названию верхнего слоя, и выбора команды Insert Layer .
Нарисуйте изображение, которое будет окном, через которое будет на фоне самого нижнего слоя проглядывать слой повыше.
Изображение в слое-маске можно анимировать. Если хотите применить анимацию формы, окно должно быть фигурой. Если хотите применить анимацию движения, сделайте фигуру группой: выделите изображения и выберите меню Modify — Convert to Symbol (или нажмите клавишу F8 ).
Для создания анимации на будущем слое-маске выделяете кадр, в котором анимация будет заканчиватьс, и делаете там ключевой кадр с помощью меню Insert — Timeline — Keyframe (или нажмите на кадр правой клавишей мыши, и выберите Insert Keyframe ).
В последнем ключевой кадре передвиньте, или трансформируйте изображение с помощью инструмента FreeTransform (если собираетесь делать анимацию движения), или сделайте новую фигуру (если собираетесь сделать анимацию с изменением формы). Это изображение нужно увеличить так, чтобы оно перекрыло всю рабочую область программы Macromedia Flash Professional 8.
Нажмите на будущем слое-маске на любой кадр в промежутке между первым и последним ключевыми кадрами, и выберите в панели свойств Properties в окошке Tween вид анимации: Motion (анимация движения), или Shape (анимация с изменением формы).
В анимации с изменением формы можете использовать направляющие формы (меню Modify — Shape — Add Shape Hint ), а в анимации движения можете использовать свойство вращения Rotate , которое Вы найдете в панели свойств. Если этого свойства не видно, нажмите на белый треугольник в нижнем правом углу панели. В свойстве Rotate можно задать, как будет происходить вращение — по или против часовой стрелки, а также, сколько оборотов будет сделано во время анимации.
Добавьте в последнем кадре в слои с изображениями обыкновенные кадры с помощью меню Insert — Timeline — Frame , или с помощью правой клавиши мыши и выбора Insert Frame , чтобы эти изображения были видны во время анимации.
Сделайте верхний слой маской: нажмите на его название на временной ленте правой клавишей мыши, и поставьте галочку напротив пункта Mask .
Все готово, можно сохранять flash-документ, а также делать flash-ролик с помощью меню File — Export — Export Movie .

Задание: сделать flash-ролик с использованием слоя-маски, в котором одно изображение будет заменяться другим. Вот что вышло у меня:

Видео о том, как делать в flash-ролике анимацию с использованием слоя-маски в программе Macromedia Flash Professional 8

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:

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

Macromedia Flash относится к разряду тех программ, о которых говорят: "Кто бы мог подумать!?" А ведь действительно: в далекие 90-е, когда все еще только зарождалось, никто и предположить не мог, что пройдет каких-нибудь пять лет, и на 90% всех компьютеров мира будет установлен Flash-плейер, позволяющий воспроизводить анимацию, созданную с помощью программы Macromedia Flash. Прошло немного времени, а Flash уже полным ходом используется для создания баннеров, логотипов, сайтов, мультфильмов, игр, презентаций… Flash используют и дизайнеры, и программисты, и мультипликаторы. Возможности программы воистину безграничны, а учитывая ее огромную популярность, ею просто невозможно не заинтересоваться. С каждой новой версией программы выразительных возможностей становится все больше и больше.

Но сегодня речь пойдет не столько о появившихся в программе инновациях, сколько о давно проверенных и надежных вещах. Сегодня поговорим о масках. Маски позволяют скрыть некоторые области рисунка из поля зрения. Их можно сравнить с трафаретом. Когда вы наносите поверх трафарета краску, она попадает только на те области, которые не были им закрыты. Остальная часть поверхности остается скрытой или замаскированной от краски. Маски позволяют создать целый ряд интересных эффектов, которые другими средствами делались бы как минимум гораздо дольше. Для создания маски необходимо не меньше двух слоев. Верхний будет маской (трафаретом), а на нижнем должно быть размещено скрываемое (маскируемое) изображение. Чтобы указать, какой слой будет выступать как маска, нужно щелкнуть правой кнопкой мыши в строке с именем слоя и в появившемся контекстном меню выбрать команду Mask. После выполнения этих пунктов возле слоев должны появиться специальные значки. Название нижнего слоя будет сдвинуто вправо, и слои окажутся заблокированными (см. рис. 1).

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

Пример №1. Разноцветный текст
Вообразите себе такую ситуацию: кто-то взял несколько различных красок и перемешал их на листе бумаги. В другом листе прорезал ряд
отверстий по форме букв текста и положил этот лист поверх первого. То, что после такого эксперимента будет видно в проделанном вырезе, и есть тот результат, который мы сейчас попробуем получить. Теперь о том, как подобную процедуру проделать во флэше.
1. С помощью кисточки создайте разноцветное пятно (рис. 2).

Рис. 2
2. Создайте новый слой над существующим и разместите на нем надпись "HELLO" так, чтобы она была поверх пятна (перекрывала пятно).
3. Превратите верхний слой в маску (выбор из контекстного меню слоя команды Mask). Должно получиться как на рис. 3.

Пример №2. Текст, наблюдаемый сквозь движущееся отверстие

Представьте себе такую ситуацию. На листе написан какой-то текст. Во втором листе прорезано круглое отверстие, и этот лист, не спеша, перемещается над первым листом. Текст, изображенный на нижнем листе, просматривается сквозь отверстие во втором. Вот такую ситуацию и смоделируем во флэше. Предполагается, что вы умеете создавать простейшую анимацию движения (Motion Tween). Анимацию перемещения отверстия будем размещать на первых 20 кадрах. Для ее создания понадобятся два слоя. На нижнем слое должна находиться надпись, а на верхнем — движущееся отверстие, сквозь которое будет проводиться наблюдение нижнего слоя. А теперь по шагам:
1. Создайте текстовую надпись "Hello World".
2. Продлите слой до 20-го кадра (щелчок левой клавишей мыши по 20-му кадру и нажатие на клавишу F5).
3. Создайте новый слой над существующим.
4. На созданном слое нарисуйте круг с заливкой (все равно, какого цвета), двигающийся от начала надписи к ее концу. Движение должно занимать 20 кадров.
5. Превратите верхний слой в маску (см. рис. 4).
6. Просмотрите созданный эффект (Ctrl+Enter).

Пример №3. Надпись, освещаемая прожектором

Для создания такого эффекта понадобятся три слоя. На нижнем будет неосвещенный вариант надписи. На слое выше — освещенный вариант надписи. На верхнем слое будет маска, сквозь которую будет просматриваться освещенная надпись:
1. Установите серый цвет сцены.
2. Создайте текстовую надпись "Hello World. " черного цвета.
3. Продлите слой до 20-го кадра (щелчок по нужному кадру и нажатие на клавишу F5).
4. Создайте новый слой над существующим. Он автоматически должен продлиться до 20-го кадра.
5. На этом слое нарисуйте светло-серый прямоугольник (светлее, чем сцена), полностью и даже с запасом закрывающий надпись, и на нем опять напишите: "Hello World. ", — но буквами белого цвета. Надпись должна располагаться точно над предыдущей. Такой точности можно добиться, скопировав нижнюю надпись и вставив ее с помощью команды Edit\Paste in Place.
6. Создайте третий слой над существующими.
7. На нем нарисуйте заполненный круг, двигающийся от начала надписи к ее концу. Движение должно занимать 20 кадров.
8. Превратите самый верхний слой в маску. Просмотрите созданный эффект (Ctrl+Enter).

Пример №4. Двухтоновое инвертирование надписи (рис. 6)

Рис. 6
Для создания подобного эффекта нужно, как и ранее, иметь два варианта изображения. Один из другого должен получаться при помощи
инвертирования. С помощью маски нужно прорезать отверстие в верхнем изображении, чтобы из-под него было видно нижнее. Вот и весь секрет фокуса. 1. Создайте надпись "HELLO" черного цвета.
2. На новом слое закройте сцену черным прямоугольником и поместите надпись "HELLO" белого цвета на том же месте, что и старая. Точного позиционирования надписи можно добиться, используя копирование и вставку на то же место с помощью команды Edit\Paste in Place.
3. Добавьте третий слой. На нем нарисуйте фигуру, которая будет выступать в качестве маски. Нарисованная фигура должна закрывать часть надписи (см. рис. 7).

Рис. 7
4. Превратите последний, верхний, слой в маску. Все готово.

Пример №5. Маскировка фотографии

Иногда интересный результат можно получить, маскируя фотографию (рис. 8).

Рис. 8
Для создания подобного эффекта понадобятся три слоя. На нижнем нужно будет разместить картинку, на среднем — маску в виде надписи "HELLO", на верхнем — ту же надпись с тенью и рельефом.

1. На нижний слой импортируйте какую-нибудь фотографию.
2. На новом слое поместите надпись "HELLO".
3. Создайте еще один слой и на него скопируйте уже существующий текст с предыдущего слоя так, чтобы буквы располагались точно над
оригиналом.
4. Разбейте скопированную надпись на отдельные символы с помощью команды Modify\Break Apart.
5. Выделите все разделенные символы и примените к каждому два фильтра: Drop Shadow и Bevel с настройками по умолчанию.
6. Выделите только первую букву и в настройках фильтра Bevel отметьте флажок Knockout, чтобы саму букву скрыть и оставить только эффекты применения фильтров.
7. Превратите средний слой в маску, и пример готов.

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

Виктор Терещук

Компьютерная газета. Статья была опубликована в номере 26 за 2006 год в рубрике софт

Читайте также: