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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Описание: 

Урок хоть и маленький, но надеюсь полезный)

Шаг 1: Создаем новый документ размером 400х100рх (АС2 или АС3 без разницы – здесь скрипты не используются), fps 24.

Шаг 2: На рабочей сцене создаем надпись. В данном случае текст «easyflash.org», шрифт Arial Black, размер 42рх, цвет #666666.

Шаг 3: Выделяем надпись и преобразуем в мувиклип – F8.

Шаг 4:Заходим в этот мувиклип, выделяем надпись и еще раз преобразуем в мувиклип.

Шаг 5: Для этого мувиклипа с надписью во вкладке Filters устанавливаем фильтр Glow со следующими параметрами: цвет – черный, Blur x и Blur y = 25px; Strength = 150%.

Шаг 6: Над слоем с надписью создаем новый слой, на котором рисуем прямоугольник размеров 400х100рх с применяем к нему градиентную заливку – черный цвет в центре имеет alpha = 100%, по краям alpha = 0%.

Шаг 7: Преобразуем данный прямоугольник в мувиклип, выделяем этот мувиклип и во вкладке Display ставим смешение Blending Alpha.

Шаг 8: Перемещаем прямоугольник так, чтобы он находился полностью левее надписи.

Шаг 9: На 300 кадре для прямоугольника создаем ключевой кадр и прямоугольник перемещаем, чтобы он был правее надписи и задаем движение Motion Tween.

Шаг 10: Над надписью создаем еще одни слой, куда копируем все кадры со слоя с анимацией прямоугольника (copy frames и paste frames). Данный слой преобразуем в маску относительно слоя с надписью - правой кнопкой нажимаем на название слоя и выбираем Mask.

Шаг 11: Все три слоя содержат по 300 кадров (необходимо продлить видимость слоя с надписью до 300 кадра).

Шаг 12: Выходим на главную сцену, выделяем мувиклип, заходим во вкладку Display ставим смешение Blending Layer.

ВСЕ…

Исходник: 

Комментарии

Аватар пользователя rigamihail

krutoi effect !!!
A glavnoe ocheni nujnii

dance2

Аватар пользователя ВасЁк

может я баран конечно, но скажи

где меню display? у тя cs3 или больше, немогу найти и писец она есть вообще в 3?

Аватар пользователя demg

ВасЁк,
для CS3 - это будет на панели Properties - Blend

Аватар пользователя nadya.fd

yahoo

Супер, давно искала что-то такое, выкручивалась всякими кривыми способами.

СКажи, какая роль слоя над маской?

без него не работает, а зачем он никак не пойму.

Аватар пользователя demg

nadya.fd,
слой над маской задает прозрачноть тому, что лежит под ним )

Аватар пользователя nadya.fd

А я думала это маска задает прозрачность тому что лежит под ней :((((
чей-то никак не разберусь.

Аватар пользователя mitien

слишком сложно для столь простогой штуки:-р
намного проще вариант с несколькими строчками кода.. (для >8й версии плеера)

по шагам:

1. делаем мувик над которым будем измываться. делаем из него символ и даем имя. (clip_mc)
2. делаем маску ( пример: левый край прозрачный, центр залитый цветом, правый край прозрачный). делаем из нее мувик и даем имя (mask_mc)
3. ложим все на сцену и обоим инстансам ставим Cache as bitmap (во вкладке display)
4. пишем в кадре где начинается использование мувиков clip_mc.setMask(mask_mc).
5. тестируем мувик.

пример http://ifolder.ru/14328584

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

Аватар пользователя click

"пишем в кадре где начинается использование мувиков clip_mc.setMask(mask_mc)."

А есть какое то, так же простое решение в AS3?

Аватар пользователя den2276

click

Для AS3 эта строчка будет записываться вот так:

clip_mc.mask = mask_mc;

Аватар пользователя moisha

может я баран конечно, но скажи

где меню display? у тя cs3 или больше, немогу найти и писец она есть вообще в 3?


ВасЁк, есть  там же в propertis. Просто в cs4 propertis вертикально расположены(хотя я се горизантально поставил)  вот ты и не узнаёш.

Аватар пользователя p0okm

В качестве обучающего материала урок замечательный!

Но справедливости ради нужно поблагодарить и mitien  за его вариан, который очевидно более продвинутый.

Аватар пользователя peoplee

Шаг 4.Заходим в этот мувиклип, выделяем надпись и еще раз преобразуем в мувиклип.

Вот непонятно мне как ламеру, поясните плиз. Непонятно, ведь он же ранее был преобразован в мувиклип..

Аватар пользователя Fly

что бы зайти в мувиклип по нему надо 2 раза кликнуть, а дальше выделить внутри мувиклипа напдпись и ещё раз преобразовать, что тут не понятно то?))))))))

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя Rell

Текстовые уроки по Adobe flash Professional это борода.

Аватар пользователя Arakki

Так я и не понял, зачем нужно было создавать символ в символе(

Аватар пользователя demg

Arakki,
чтобы потом сделать этот шаг
Шаг 12: Выходим на главную сцену, выделяем мувиклип, заходим во вкладку Display ставим смешение Blending Layer.

Аватар пользователя sheva107

привет всем.
классный урок. спс

mitien, куда-то делся твой файлик... ((
перезалей плз. очень хочеться попробовать твоим методом