Динамічна маска на ActionScript 3

До об'єктів списку відображення флеш-ролика можна використовувати так зване маскування.Маскування- це коли над одним видимим об'єктом розміщується інший об'єкт-маска, від якої і залежатиме відображення розташованого нижче об'єкта. Так, на словах це пояснити досить важко. Давайте краще звернемося до прикладу.

Код 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 FlashCSX (точніше, 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); functionmUp(event:MouseEvent):void

А ось і кінцевий результат:

Вистачаємо курсором за маску-зірку і перетягуємо її в межах малюнка. Погодьтеся, виглядає цікавіше, ніж попередні приклади. Але це далеко не все.

Наша маска – це мувікліп. А мувікліпи можна анімувати. Отже, можна зробитианімовану маску. Просто додамо у наш мувік-маску просту анімацію форми. Вийшло таке:

Звичайно, наведені мною приклади – це досить примітивне застосування маскування об'єктів. За наявності фантазії, ви легко зможете реалізувати за допомогою масок безліч цікавих ефектів. Все у ваших руках . та головах:-)

Вихідник до цього уроку підAdobe Flash CS5.5можна завантажити тут.

Дата завантаження: 2011-12-01

Рейтинг посту: 11

---