Маски бывают разными

Небольшое дополнение к уроку Динамическая маска на ActionScript 3.0. Но на этот раз задача следующая: делаем такую динамическую маску , чтобы при стирании одной картинки проступала другая. Конечный результат должен выглядеть примерно так:

Итак, приступим.

На главной временной шкале создаём мувиклип container_mc. Внутри мувика container_mc создаём три слоя. На двух нижних слоях располагаем разные растровые картинки (в моём случае это image_1.png и image_2.png), а на верхнем слое создаём пустой мувиклип mask_mc (на самом деле, он не совсем пустой, но об этом чуть позже). Мувик mask_mc объявляем маской для ближайшего к нему изображения. Результат должен выглядеть примерно так:

Динамическая маска на ActionScript 3.0

Потом возвращаемся на главную временную шкалу и пишем код...

Код ActionScript 3.0:

var flag:Boolean = false; container_mc.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDowns); container_mc.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves); container_mc.addEventListener(MouseEvent.MOUSE_UP, onMouseUps); function onMouseDowns(event:MouseEvent):void { flag = true; } function onMouseUps(event:MouseEvent):void { flag = false; } function onMouseMoves(event:MouseEvent):void { if (flag) { container_mc.mask_mc.graphics.beginFill(0x000000); container_mc.mask_mc.graphics.drawCircle(mouseX, mouseY, 40); container_mc.mask_mc.graphics.endFill(); } }

Вдаваться в объяснения не буду, так как код полностью позаимствовал из урока Динамическая маска на ActionScript 3.0, в котором код объяснён построчно. Изменены только пути до мувиков.

Если всё сделали правильно, то результат будет примерно такой:

Единственный момент, на котором стоит заострить внимание: использование масок может порождать множество проблем и с ними надо быть очень аккуратными. Именно поэтому в мувик mask_mc пришлось добавить немного "мусора", чтобы маска работала правильно. Увы, такова реальность :-(

Если что-то непонятно, то вот исходник - скачать исходники (под Adobe Flash CS6).

Автор: admin

Дата добавления: 2014-11-06

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2016-07-01
Думаю, самое простое и красивое: сделать несколько анимированных масок и случайным образом выбирать одну из этих масок. Что-то вроде этого: https://yadi.sk/d/eB-dtGERswSzy . В этом случае анимацию можно сделать более-менее реалистичной. Если это не устроит, то придётся сильно заморачиваться... Например, как-то так: случайным образом выбирать координаты на картинке и постепенно перемещаться в эти координаты; при этом с некоторым интервалом рисовать в мувике-маске круги с заливкой; когда координаты достигнуты, выбирать новые и продолжать постепенное передвижение с рисованием. Как-то так, наверное. Но такое рисование не обязано смотреться естественным...
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2016-07-01
А можно еще один вопросик? ;)
А как реализовать следующий сценарий: ластик стирает изображение? Но не курсором мыши, а сам собой.
Причем было бы здорово, если бы при каждой загрузке траектория движения ластика была бы разной.
Я понимаю, что в комментах на этот вопрос ответить сложно, но хотя бы направление изысканий...
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2016-06-28
Ой-ой, простите, ступил!
Спасибо вам огромное, все получилось. Сколько времени мучился, а ларчик то просто открывается. :)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2016-06-28
Сделайте валик курсором: http://edapskov.ru/pages.php?id=24
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2016-06-28
Спасибо!
Только вот насчет курсора, в виде валика, не понял. Это как?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2016-06-28
Здравствуйте. Задача абсолютно такая же. Просто сверху надо ещё положить курсор в виде валика и настроить толщину кисти под размер валика.
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2016-06-28
Большое вам спасибо за урок!
Пытаюсь понять работу с масками, но задача, которую я себе поставил - несколько в ином.
Вот посмотрите картинку: http://demiart.ru/forum/uploads17/post-487878-1464165317.jpg
Суть задачи: валик проходит над одним изображением, заменяя его другим. Подскажите, пожалуйста, реализуемо ли это?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-15
> Чтобы стиралось изображение, а на фоне осталась флешка... ?

Во-первых, это всё - это одна единая флешка. Картинка тоже в флешку встроена.

Во-вторых, это можно сделать точно также, как в этом уроке. Только на слое image_1 разместить не картинку, а MovieClip с нужной анимацией.
Комментатор
Комментарий добавил(а): Артур
Дата добавления: 2014-12-15
День добрый!
А как реализовать такое: https://www.elion.ee/docs/joulukaart/rus/swf/loader.swf ?
Чтобы стиралось изображение, а на фоне осталась флешка... ?
Заранее спасибо!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-11-16
Весьма рад :-)
Добавить комментарий:







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

Идиот-тест

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

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