Динамическая маска на ActionScript 3.0. Часть вторая.

Продолжим разговор о динамическом маскировании визуальных объектов и рассмотрим ещё один интересный способ создания динамических масок. На этот раз мы объединим в единое целое маскирование и методы динамического рисования.

Я просто уверен, что вы не раз встречали в сети баннеры, на которых, при стирании курсором мышки верхнего непрозрачного слоя, проступает какой-либо рисунок. Вот что-то подобное мы сейчас и научимся делать.

А делается это довольно просто.

Сперва нам надо создать некоторые заготовки (отмечу, что пример сделан в среде 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 Player

Зажмите ЛКМ и, продолжая её удерживать, перемещайте курсор по сцене флеш-ролика. При этом вы как-бы стираете непрозрачный слой белой краски (на самом деле это фон нашего флеш-ролика) и под ним проступает фотография. Что и требовалось. На этом всё.

Исходник к данному уроку под Adobe Flash CS5.5 скачать можно здесь.

Автор: admin

Дата добавления: 2011-12-01

Просмотров: 2849

Рейтинг поста: +4-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-12-04
Спасибо за похвалу.
Комментатор
Комментарий добавил(а): Татьяна
Дата добавления: 2015-12-04
Спасибо большое за помощь! Благодаря вашему сайту я надеюсь, у меня будут рождаться красивые и правильно анимированные ролики. Приятно когда нарисованные работы оживают!
Комментатор
Комментарий добавил(а): Татьяна
Дата добавления: 2015-12-04
Дмитрий, спасибо за ответ! А этот код размещать в конце публикуемого сценария или сразу после stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDowns);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUps);

или в конце после обозначения сценария мышки?
mypic.mask = null;
stage.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDowns);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUps);


Т.е. если понять логику, сначала мы прописываем то что срабатывает при включении действий мыши, а потом как эти действия должны быть остановлены.
И скрипт выключения необходимо в этот же сценарий или последним кадром?

Заранее благодарю за ответ!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-12-04
Прекратить отслеживать события:


stage.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDowns);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUps);


Отключить маску:


mypic.mask = null;
Комментатор
Комментарий добавил(а): Татьяна
Дата добавления: 2015-12-04
Подскажите, а что-то в action надо добавлять, если этот эффект я встраиваю в флеш ролик и в том момент когда он заканчивается, мне надо и этот эффект остановить.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-11-06
> Если я все правильно понял, то мы рисуем ту же маску, но к ней применяем еще одну маску - изображение.

Нет. Просто одно из изображений изначально скрыто, так как маска этого изображения пуста. Как только мы начинаем рисовать внутри маски, начинает проявляться ранее скрытое изображение. Если не поняли, то лучше посмотрите исходник. А то на словах это труднее понять.
Комментатор
Комментарий добавил(а): Алексей
Дата добавления: 2014-11-06
Да, это мне и нужно было, спасибо большое. Если я все правильно понял, то мы рисуем ту же маску, но к ней применяем еще одну маску - изображение.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-11-06
Там не фон стирается, а маска рисуется.

Если я вас правильно понял, то вам надо что-то такое - http://edapskov.ru/pages.php?id=260
Комментатор
Комментарий добавил(а): Алексей
Дата добавления: 2014-11-06
Здравствуйте. Подскажите как быть, если хочетья вместо стираемого белого фона использовать картинку ?
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика