Малюємо мувіка в actionscript 3

Малюємо мувіка в ActionScript 3.0

Цей пост є продовженням одного з попередніх постів. в якому розглядалося динамічне малювання мувікліп засобами мови ActionScript 2.0. Тепер ми зробимо те ж саме, але вже на мові ActionScript 3.0. а як середовище розробки візьмемо програму Adobe Flash CS5.5 (підійдуть і інші версії, починаючи з 3-й, але даний урок робився саме на 5.5).

Спершу сформулюємо завдання. Чого ж ми хочемо? Ми хочемо, щоб після натискання лівої кнопки мишки (ЛФМ) кожна зміна координат курсору мишки супроводжувалося додаванням на сцену флеш-ролика нового екземпляра певного мувікліпа з бібліотеки проекту. Для цього нам треба виконати наступні два кроки.

1. Створюємо сам мувікліп.

Для початку малюємо заготовку майбутнього мувікліпа. Це може бути будь-який геометричний примітив, але не варто його робити занадто великим. У мене він буде 20Х20 px. Потім виділяємо вийшла заготовку і тиснемо F8 на клавіатурі (як варіант, можна, при виділеної заготівлі, перейти до пункту Модифікація головного меню програми і вибрати команду Перетворити в символ). З'явиться вікно налаштувань перетворення в символ.

На зображенні показано, як це вікно виглядає в Adobe Flash CS5.5. У цьому вікні ми даємо ім'я нашого майбутнього кліпу - mc (під цим ім'ям мувікліп буде зберігається в бібліотеці проекту). Обов'язково вибираємо тип мувікліп (фрагмент ролика). Крапку реєстрації бажано помістити в середину. Але найважливіше - поставити галочку у пункту Експорт для ActionScript і в поле введення Клас ввести ім'я нашого майбутнього класу - Mc (швидше за все, програма вже скопіювала в це поле ім'я нашого мувіка - mc, але варто змінити саме на Mc, так як імена класів прийнято писати з великої літери). Всі перераховані настройки продемонстровані на наведеному вище скріншоті.

Якщо все зробили правильно, то тиснемо Ok і програма автоматично створює клас Mc. Мувик mc з робочого столу тепер можна видалити, але він буде доступний для редагування в бібліотеці.

Якщо з якихось причин зробити перераховані настройки не вдалося або вони були зроблені неправильно, а мувікліп все ж був створений і з'явився в бібліотеці проекту, то настройки мувіка слід змінити. Для цього йдемо в бібліотеку і над нашим мувіка правим кліком мишки викликаємо контекстне меню. В даному контекстному меню вибираємо пункт Властивості. З'явиться розглянуте раніше вікно налаштувань. Редагуємо настройки.

2. Додаємо код ActionScript 3.0.

Йдемо в панель Дії програми та вставляємо туди наступний код:

/ * Змінна-прапор. Якщо вона має значення true, то малювання дозволено. Якщо змінна має значення false, то малювання заборонено. * / Var flag: Boolean = false; / * Cont - це спрайт-контейнер, всередині якого ми і будемо малювати. * / Var cont: Sprite = new Sprite (); cont.graphics.beginFill (0x333333,1); cont.graphics.drawRect (0,0,550,400); cont.graphics.endFill (); addChild (cont); / * Дозволяємо малювання. * / Cont.addEventListener (MouseEvent.MOUSE_DOWN, mDown); function mDown (event: MouseEvent): void / * Забороняємо малювання. * / Cont.addEventListener (MouseEvent.MOUSE_UP, mUp); function mUp (event: MouseEvent): void / * Починаємо малювати при затиснутою ЛФМ. * / Cont.addEventListener (MouseEvent.MOUSE_MOVE, mMove); function mMove (event: MouseEvent): void >

Звичайно, треба передбачити можливість очищення контейнера від намальованої раніше графіки. Тобто потрібен "ластик". Як гумки може виступати кнопка або клавіша клавіатури. Це вже за вашим бажанням. Тут набагато важливіше, яким кодом ми здійснимо видалення мувікліп з контейнера. А код дуже простий:

Я, наприклад, зробив так, що при затиснутою ЛФМ додаток малює, а якщо відпустити ЛФМ, програма стирає раніше намальоване (це не так і безглуздо, якщо врахувати відносну ресурсомісткість даного способу динамічного малювання).

/ * Змінна-прапор. Якщо вона має значення true, то малювання дозволено. Якщо змінна має значення false, то малювання заборонено. * / Var flag: Boolean = false; / * Cont - це спрайт-контейнер, всередині якого ми і будемо малювати. * / Var cont: Sprite = new Sprite (); cont.graphics.beginFill (0x333333,1); cont.graphics.drawRect (0,0,550,400); cont.graphics.endFill (); addChild (cont); / * Дозволяємо малювання. * / Cont.addEventListener (MouseEvent.MOUSE_DOWN, mDown); function mDown (event: MouseEvent): void / * Забороняємо малювання і стираємо раніше намальоване. * / Cont.addEventListener (MouseEvent.MOUSE_UP, mUp); function mUp (event: MouseEvent): void > / * Починаємо малювати при затиснутою ЛФМ. * / Cont.addEventListener (MouseEvent.MOUSE_MOVE, mMove); function mMove (event: MouseEvent): void >

Взагалі, у випадку з ActionScript 3.0, використовувати для малювання екземпляри класу MovieClip не надто розумно. Мувікліп, звичайно, мають багатющий набір можливостей (які нам не дуже й потрібні), але при цьому вони і більш вимогливі до ресурсів. Набагато розумніше в нашому випадку скористатися послугами класу Sprite або класу Shape. Далі приклад саме з використанням Shape.

Просто скопіюйте цей код в панель Дії вашого флеш-проекту. Нічого малювати і поміщати в бібліотеку проекту не треба. Крім усього іншого, даний код повинен працювати швидше попереднього варіанту.