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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2017-08-28
Добрый день. Так я и не разобралась с полем для пароля.
Сделала всё по уроку из интернета, но что-то не работает.
Выслала вам на почту исходник.
Буду очень рада, если подскажете в чём там ошибка.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-08-16
Ну, на самом деле, быстро находится по запросу CreateJSTextInput :-) Но, откровенно говоря, это не то, что хотелось бы иметь. А для многих проектов это просто не подходит.
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2017-08-16
Спасибо вам за ответ.
Я тоже в интернете долго искала способ реализации вводимого текста, но ничего не нашла, к сожалению.
Очень жаль!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-08-15
Да, тоже с этим столкнулся. С текстом всё очень плохо, а с полями ввода - совсем всё плохо. Есть два варианта. Во-первых, наложить обычное поле ввода поверх канваса. В сети есть даже готовые примеры. Но, честно говоря, это не очень удобно и совсем не красиво. Во-вторых, сделать свою клавиатуру, на которой пользователь будет набирать текст. А это просто сложно :-)
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2017-08-15
Спасибо вам огромное за ответ!
Пытаюсь перейти с AS3 на HTML5 Canvas в Animate CC. Пока только осваиваюсь с этим.
Подскажите пожалуйста, а как в Animate CC сделать поле ввода пароля? Чтобы пользователь ввёл пароль и перешёл к игре.В AS3 для этого использовался input text. А с помощью HTML5 Canvas это возможно как-то сделать?
Ещё раз спасибо за вашу помощь!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-08-07
Ну, например, так:
/* создаём маску */ var mask_shape = new createjs.Shape(); mask_shape.graphics.beginFill("#ff0000"); mask_shape.graphics.drawCircle(0, 0, 50); mask_shape.graphics.endFill(); /* mypic_mc - мувиклип, которому присваиваем маску */ this.mypic_mc.mask = mask_shape; /* отслеживаем событие stagemousemove
*/ this.stage.addEventListener("stagemousemove", onStageMouseMoveFunc, false); /* изменяем координаты маски */ function onStageMouseMoveFunc(event) { mask_shape.x = event.stageX; mask_shape.y = event.stageY; }

Результат:
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2017-08-05
А можно ли сделать такую динамическую маску в Adobe Animate cc, но не на AS3, а с помощью HTML5 Canvas?
Если можно, то подскажите, пожалуйста, как?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-04-12
Не знаю. Покажите исходник.
Комментатор
Комментарий добавил(а): Богдан
Дата добавления: 2017-04-12
А почему у меня маска квадратная вседа?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-03-31
В чём проблема?
Добавить комментарий:







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

Идиот-тест

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

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