Динамическая маска на 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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): 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.: Если по клику мыши - все работает:)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-06-19
Может, так - http://edapskov.ru/content/watch_a_point.zip
Комментатор
Комментарий добавил(а): Алекс
Дата добавления: 2013-06-12
Здравствуйте! Я сам пробую делать первые шаги в flash и ваш сайт очень помог. Можете помочь мне небольшой консультацией:
Я написал вот такой код:
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.utils.*;

var Obgects:Array = new Array();
var num = 300;

var this_obgect = 200;
var add_obgect = 200;

stage.addEventListener(Event.ENTER_FRAME, addObgects);
// Добавление объекта
function addObgects(e:Event) {
// Если выполнено условие...
if(this_obgect == add_obgect) {
// ... то появляеться новый объект...
var obgect:Obgect = new Obgect();
// ... и помещается на экран
addChild(obgect);
// Где будет размещён
obgect.x = Math.random() * 500;
obgect.y = Math.random() * 400;
// Анулируем условие и всё сначала
this_obgect = 0;
} else {
// Если нет, то:
this_obgect++;
}
}

stage.addEventListener(Event.ENTER_FRAME, obgectsMove);
// Объекти размещаются в сторону главного объекта
function obgectsMove(e:Event):void {
/* Переменные, которые определяют, куда смотрят созданные
объекты*/
var dy1 = zv.y - Obgects.y;
var dx1 = zv.x - Obgects.x;
// Функция в радианах
var radians1 = Math.atan2(dy1,dx1);
// З радиан переводиться в градусы
var degrees1 = radians1 / (Math.PI / 180);
// Собственно сам поворот
Obgects.rotation = degrees1;
}

Собственно проблема: Есть главный объект, который двигается (код опущен) и есть просто объекты, которые постоянно создаються. Как сделать, чтобы объекты, которые постоянно создаються, всегда следили за главный объектом, и если он перемещается, то поворачивались вслед за ним? Я написал код с применением rotation, но он не работает.
Добавить комментарий:







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

Идиот-тест

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

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