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

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

Код ActionScript 3.0:

/* спрайт, к которому будет применена маска */ var sprite:Sprite = new Sprite(); sprite.graphics.beginFill(0x333333,1); sprite.graphics.drawRect(0,0,550,400); sprite.graphics.endFill(); addChild(sprite); /* спрайт-маска */ var sprite_mask:Sprite = new Sprite(); sprite_mask.graphics.beginFill(0xff0000,1); sprite_mask.graphics.drawCircle(275,200,50); sprite_mask.graphics.endFill(); addChild(sprite_mask); /* применяем маску */ sprite.mask = sprite_mask;

Здесь мы сперва создали серый спрайт-прямоугольник размером 550 на 400 px. Затем мы создали красный спрайт-круг диаметром 50 px и поместили его над созданным ранее прямоугольником. А под конец мы с помощью свойства mask (именно оно отвечает за маскирование в языке ActionScript) объявили, что спрайт-круг будет маской для спрайта прямоугольника.

Какой же будет результат?

Если мы скомпилируем приведённый ранее код, то получим ролик в котором будет виден ... только серый круг. Это сработала наша маска.

Как видите, всё просто, но полезно.

Давайте усложним пример и сделаем нашу маску динамической. Например, разрешим пользователю перетаскивать маску по сцене флеш-ролика (о самом перетаскивании смотри пост Программное перетаскивание объектов в флеш-роликах).

Код ActionScript 3.0:

/* спрайт, к которому будет применена маска */ var sprite:Sprite = new Sprite(); sprite.graphics.beginFill(0x333333,1); sprite.graphics.drawRect(0,0,550,400); sprite.graphics.endFill(); addChild(sprite); /* спрайт-маска */ var sprite_mask:Sprite = new Sprite(); sprite_mask.graphics.beginFill(0x333333,1); sprite_mask.graphics.drawCircle(0,0,50); sprite_mask.graphics.endFill(); addChild(sprite_mask); /* делаем маску перетаскиваемой */ addEventListener(MouseEvent.MOUSE_DOWN, mDown); function mDown(event:MouseEvent):void { sprite_mask.startDrag(true, new Rectangle(0,0,550,400)); } addEventListener(MouseEvent.MOUSE_UP, mUp); function mUp(event:MouseEvent):void { sprite_mask.stopDrag(); } /* применяем маску */ sprite.mask = sprite_mask;

Результат:

Загрузить Adobe Flash Player

Хватаемся курсором мышки за торчащий край маски-круга и перетаскиваем туда-сюда по сцене флеш-ролика. Ещё раз напомню, что маска - это красный круг, а объект, к которому маска применена - серый прямоугольник.

Ладно, суть маскирования, думаю уловили:-) Давайте теперь сделаем что-то более полезное и симпатичное. Например, наложим маску на картинку. Для нашего удобства делать это будем в Adobe Flash CSX (точнее, 5.5).

Создаём новый проект под AS 3.0. На рабочий стол импортируем картинку, которую помещаем внутрь мувиклипа. Данный мувиклип мы назовём mypic и именно к нему будем применять маску. Теперь создадим саму маску. Для этого рисуем любую геометрическую фигуру (я нарисовал звезду) и превращаем её в мувиклип под именем mc. Всё. Теперь надо только добавить код.

Код ActionScript 3.0:

/* делаем мувик mc маской для лежащего ниже мувика mypic */ mypic.mask = mc; /* делаем мувик mc перетаскиваемым */ addEventListener(MouseEvent.MOUSE_DOWN, mDown); function mDown(event:MouseEvent):void { mc.startDrag(true, new Rectangle(0,0,550,400)); } addEventListener(MouseEvent.MOUSE_UP, mUp); function mUp(event:MouseEvent):void { mc.stopDrag(); }

А вот и конечный результат:

Загрузить Adobe Flash Player

Хватаемся курсором за маску-звезду и перетаскиваем её в пределах рисунка. Согласитесь, выглядит интереснее, чем предыдущие примеры. Но и это далеко не всё...

Наша маска - это мувиклип. А мувиклипы можно анимировать. Следовательно, можно сделать анимированную маску. Просто добавим в наш мувик-маску простую анимацию формы. Получилось следующее:

Загрузить Adobe Flash Player

Конечно, приведённые мною примеры - это довольно примитивное применение маскирования объектов. При наличии фантазии, вы без труда сможете реализовать с помощью масок множество интересных эффектов. Всё в ваших руках ... и головах:-)

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

Автор: admin

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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-04-12
Не знаю. Покажите исходник.
Комментатор
Комментарий добавил(а): Богдан
Дата добавления: 2017-04-12
А почему у меня маска квадратная вседа?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-03-31
В чём проблема?
Комментатор
Комментарий добавил(а): Rostislav
Дата добавления: 2017-03-31
function mDown(event:MouseEvent):void
{
// sprite_mask.startDrag(true, new Rectangle(0,0,550,400)); - это ошибка
sprite_mask.startDrag();
}
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-01-27
Думаю, в вашем случае нужна не маска, а спрайт, у которого есть участок полностью прозрачный, а вокруг него - полупрозрачная область. Вся суть маски именно в том, чтобы из-под неё ничего не торчало :-)
Комментатор
Комментарий добавил(а): Дархан
Дата добавления: 2014-01-27
А как сделать чтобы вне маски было прозрачно и черный прямоугольник чуть-чуть был виден?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-01-04
Я в таких случаях делаю следующее: создаю мувиклип-контейнер, в который помещаю мувик; над мувиком создаю маску; над маской создаю мувик, который чуть больше исходного мувика и прозрачный. События мышки вешаю на мувик-контейнер. Фактически, мышка реагирует на прозрачный мувик. Надеюсь, понятно объяснил :-)
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2014-01-04
А этого дерганья можно избежать? Маска у меня не анимированная.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-01-04
Причина простая: на мышку реагирует только та часть мувика, которая видна из-под маски + сама маска у вас анимированная.
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2014-01-04
Здравствуйте:) Почему эта маска начинает дергаться и исчезать, если заставить её появляться при наведении курсора мышки, а исчезать (т.е. object.mask = null;) при отводе курсора с маски?
P.S.: Если по клику мыши - все работает:)
Добавить комментарий:







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

Идиот-тест

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

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