Продолжим разговор о динамическом маскировании визуальных объектов и рассмотрим ещё один интересный способ создания динамических масок. На этот раз мы объединим в единое целое маскирование и методы динамического рисования.
Я просто уверен, что вы не раз встречали в сети баннеры, на которых, при стирании курсором мышки верхнего непрозрачного слоя, проступает какой-либо рисунок. Вот что-то подобное мы сейчас и научимся делать.
А делается это довольно просто.
Сперва нам надо создать некоторые заготовки (отмечу, что пример сделан в среде Adobe Flash CS5.5), а именно:
- импортируем в наш проект изображение и помещаем его на рабочий стол проекта;
- выделяем изображение, жмём F8 и превращаем нашу картинку в MovieClip;
- созданный таким способом мувик (с картинкой внутри) называем mypic.
На этом подготовительный этап закончен и переходим к коду. Код тоже довольно простой.
Код ActionScript 3.0:
/*
Переменная-флаг.
Если она равна true, то пользователь может рисовать курсором.
Если она равна false, то пользователь не может рисовать курсором.
*/
var flag:Boolean = false;
/*
Спрайт-маска.
Именно внутри этого спрайта мы и будем рисовать.
*/
var mymask:Sprite = new Sprite();
addChild(mymask);
/*
Теперь для нашего мувика с рисунком назначаем в качестве маски спрайт mymask.
*/
mypic.mask = mymask;
/*
Слушаем события:
- нажатие ЛКМ;
- перемещение курсора мышки по сцене флеш-ролика;
- отпускание ЛКМ.
*/
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDowns);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUps);
/*
При нажатой ЛКМ разрешаем рисование.
*/
function onMouseDowns(event:MouseEvent):void
{
flag = true;
}
/*
Если ЛКМ отпущена, то запрещаем рисование.
*/
function onMouseUps(event:MouseEvent):void
{
flag = false;
}
/*
Рисуем новый круг чёрного цвета и с радиусом 40 px, если соблюдены следующие условия:
- переменная-флаг имеет значение true;
- курсор мышки перемещается по сцене флеш-ролика.
*/
function onMouseMoves(event:MouseEvent):void
{
if (flag)
{
mymask.graphics.beginFill(0x000000);
mymask.graphics.drawCircle(mouseX, mouseY, 40);
mymask.graphics.endFill();
}
}
Код подробнейшим образом прокомментирован - читайте.
А теперь давайте проверим наш пример в действии:
Зажмите ЛКМ и, продолжая её удерживать, перемещайте курсор по сцене флеш-ролика. При этом вы как-бы стираете непрозрачный слой белой краски (на самом деле это фон нашего флеш-ролика) и под ним проступает фотография. Что и требовалось. На этом всё.
Исходник к данному уроку под Adobe Flash CS5.5 скачать можно здесь.
Рейтинг поста: 
