В минулому уроці ми побіжно розглянули події миші і навіть звернулися до слухачів подій (Event Listeners). Це було необхідно для демонстрації можливостей методів Play та Stop. Сьогодні я більш детально зупинюся на згаданих аспектах ActionScript 3 і постараюся продемонструвати, в яких випадках це може бути застосовано на практиці. Окрім того, ми звернемося до координатів сцени (stage) та побачимо, яким чином можна рухати об’єкти по сцені, прив’язуючи їх до тих чи інших координатів.

1. Створіть новий файл у Flash, вибравши в опціях файл ActionScript 3 (в наступних публікаціях я не буду уточнювати версію ActionScript, тому що в рамках цього блога ми будемо працювати саме з третьою версією).

2. Створіть на сцені будь-який символ (movie clip). Для даного прикладу я використаю улюблений м’ячик, знайомий нам з багатьох попередніх уроків, але для спрощення ви можете просто намалювати круг чи квадрат, користуючись відповідними інструментами, і конвертувати його в символ (movie clip).

Дайте назву екземпляра (Instance name) «ball_1» щойно створеному символу. Потрібно пам’ятати, що назва символа, яку ви вводили при створені, та назва екземпляра – не ідентичні (хоча можуть співпадати) і назву екземпляра потрібно завжди вводити окремо.



Саме назвою екземпляра, а не назвою символа оперує код ActionScript

3. Створіть ще один шар (layer) у шкалі часу (timeline) і назвіть його AS (в цьому шарі ми будемо писати код ActionScript). Виберіть перший кадр і відкрийте панель ActionScript натиснувши F9 або вибравши вкладку Window -> Actions. Вставте туди наступний код:

addEventListener (MouseEvent.CLICK, moveBall);

function moveBall (event:MouseEvent):void {
x = x + 5;
}

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

Метод addEventListener() створює слухача подій (EventListener), який буде перевіряти, чи не відбулася якась подія на нашій сцені. Іншими словами, ви просто «говорите» програмі, що в будь-який момент може відбутися певна подія, і програма постійно стежить за тим, коли ця подія відбудеться.

Метод addEventListener() передбачає, що ви введете обов’язкові дані (вводяться в дужках після оголошення методу): тип події (в даному випадку це подія миші MouseEvent.CLICK); та ім’я функції, яка буде викликана, якщо подія відбудеться. Ім’я функції може бути будь-яким, але краще давати імена таким чином, щоб було зрозуміло, яку дію виконує функція. В коді вище я назвав функцію moveBall Вона описує, що при кліку мишкою на м’ячику, останній буде рухатися.

Отже, першою стрічкою коду ми додали слухача подій, тепер перейдемо до опису функції, яку він викликає:

стрічка function moveBall (event:MouseEvent):void ініціалізує виконання функції moveBall, яку ми щойно задали у слухачі. У дужках вказано тип події, яка викликає дану функцію. В нашому випадку це подія миші (MouseEvent). Ключове слово void вказує на те, що функція не повертає жодних значень (в майбутньому ми розглядатимемо функції, які повертають значення).

У фігурних дужках вказується тіло функції – що робитиме програма після виклику функції (коли відбудеться подія).

x=x+5 – зміна координатів положення нашого об’єкта (м’ячика).
Те саме можна записати більш коротко: x+=5 – даний вираз повністю ідентичний виразу x=x+5, але інтерпретується флешем швидше, тому його використання пріоритетне.

Параметри x та y є координатами об’єкта на сцені. Змінюючи значення x на п’ять одиниць, ми переміщуємо об’єкт на п’ять пікселів вправо. Зверніть увагу, що початкова точка з кординатами x = 0, y = 0, знаходиться у лівому верхньому кутку (а не у лівому нижньому, як у Декартовій системі координат).

Протестуйте програму (Ctrl+Enter). Якщо ви все зробили правильно, то тепер при кліку мишкою на м’ячику він буде рухатися.

Прив’язуємо події до кожного об’єкта окремо

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

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

1. Додайте на сцену ще один м’ячик, перетягнувши символ з бібліотеки.


Ось вам і приклад відмінності назви символа від назви екземпляра. Обидва м’ячики мають одну назву символа, тому що вони і є одним символом. Але назву екземпляра можна і потрібно дати кожному м’ячику окремо. Якщо пам’ятаєте, перший м’ячик має назву екземпляра ball_1. Дайте назву екземпляра ball_2 другому м’ячику, оскільки в програмі ми звертатимемось до кожного з них окремо.

2. У першому кадрі шару AS додайте необхідний код:

ball_1.addEventListener (MouseEvent.CLICK, moveBall1);
ball_2.addEventListener (MouseEvent.CLICK, moveBall2);

function moveBall1 (event:MouseEvent):void {
ball_1.x += 5;
}

function moveBall2 (event:MouseEvent):void {
ball_2.x -= 5;
}

Давайте проаналізуємо зміни. По перше, тепер ми додаємо слухача подій для кожного символа окремо, звертаючись до них за іменами їхніх екземплярів: ball_1.addEventListener та ball_2.addEventListener відповідно. Для кожного зі слухачів ми створюємо власну функцію moveBall1 та moveBall2. І, відповідно, ми створюємо два блока тіла функцій, у кожному з яких задаємо рух м’ячика у свій бік: ball_1.x+=5; – рухатиме перший м’ячик на п’ять пікселів вправо; а ball_2.x-=5; рухатиме другий м’ячик на п’ять пікселів вліво.

Протестуйте кліп, щоб переконатися, що саме так все й відбувається.

Для того, щоб не прописувати назву екземпляра у кожній функції, можна замінити її ключовими словами event.target. Вони означають, що дія буде виконуватися з тим об’єктом, до якого додано слухач події. Наприклад, функцію:

function moveBall1 (event:MouseEvent):void {
ball_1.x += 5;
}

Ми цілком спокійно можемо переписати так:

function moveBall1 (event:MouseEvent):void {
event.target.x += 5;
}

І вона працюватиме ідентично (по якому м’ячику клікаємо – той і рухається).

Пульт керування м’ячиком

Тепер, коли ми навчилися прив’язувати слухачі подій і функції до конкретних символів, можемо зробити логічний висновок, що слухачі подій і функції зовсім не обов’язково повинні бути прив’язані до одного і того ж об’єкта на сцені. А це дає нам можливість зробити «пульт керування» для м’ячика.

1. Видаляємо зайвий (другий) м’ячик і замість нього додаємо новий символ – стрілку. При конвертації малюнка у символ виберіть опцію не movie clip, а button – це означатиме, що даний символ виконуватиме роль кнопки. Робиться це для того, щоб можна було додати різні вигляди для кнопки, коли мишка наведена на неї, і в момент кліку.

Перейдіть в режим редагування символа і побачите, що у шкалі часу відображено всього чотири кадри, кожен з яких має свою назву:

- Up – вигляд кнопки у стані спокою;
- Over – вигляд кнопки, коли на неї навести мишку;
- Down – вигляд кнопки в момент кліку;
- Hit – зона реагування кнопки на клік. Якщо залишити цей кадр порожнім, то зона кліку дорівнюватиме розміру самої кнопки.


2. Тепер перетягніть кнопку з бібліотеки на сцену чотири рази, створивши чотири екземпляри символу. Створіть із них пульт, повертаючи та розміщуючи відповідно.


Дайте кожному екземпляру своє ім’я, в залежності від того, де він розташований: up_button, right_button, down_button і left_button.

3. Додайте код, який вказуватиме кожній кнопці виконувати свої дії щодо м’ячика:

up_button.addEventListener (MouseEvent.CLICK, moveUp);
right_button.addEventListener (MouseEvent.CLICK, moveRight);
down_button.addEventListener (MouseEvent.CLICK, moveDown);
left_button.addEventListener (MouseEvent.CLICK, moveLeft);

function moveUp (event:MouseEvent):void {
ball.y -= 5;
}

function moveRight (event:MouseEvent):void {
ball.x += 5;
}

function moveDown (event:MouseEvent):void {
ball.y += 5;
}

function moveLeft (event:MouseEvent):void {
ball.x -= 5;
}

Як бачите, у цьому коді слухачі подій додаються до кнопок, а функції виконують дії над м’ячиком. Якщо ви уважно читали статтю, то даний код повинен бути вам повністю зрозумілий. Якщо це не так – не соромтесь задавати запитання у коментарях до статті.

Протестуйте кліп. Якщо все зроблено правильно – ви повинні отримати приблизно наступний результат:

Інші властивості об’єктів

У сьогоднішньому уроці ми використовували тільки одну властивість об’єктів – їх розташування на сцені. Дана властивість позначається координатами x та y. Втім, існує кілька інших властивостей, притаманних будь-яким екземплярам символів на сцені, і їх також можна змінювати методами ActionScript. Я лише опишу ці властивості, а їх використання у програмі нехай буде домашнім завданням.

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

А ось і перелік властивостей:

• x, y – вказує координати x та y об’єкта (власне, саме з цією властивістю ми сьогодні й працювали);
• alpha – вказує значення прозорості об’єкта. Допустимі значення знаходяться в діапазоні від 0 (повністю прозорий) до 1 (повністю непрозорий);
• height, width – вказує висоту та ширину об’єкта в пікселях;
• rotation – вказує поворот в градусах. Значення від 0 до 180 свідчать про поворот за годинниковою стрілкою, а значення від 0 до -180 – проти годинникової стрілки. Значення, які виходять за межі цього діапазону додаються чи віднімаються від 360. Наприклад, значення rotation = 450 прирівнюється до rotation = 90.
• scaleX, scaleY – вказує горизонтальне (вертикальне) масштабування об’єкта від точки реєстрації (у відсотках). Точка реєстрації за замовчуванням (0, 0). 1,0 дорівнює масштабу 100%

Що ж, сподіваюся сьогоднішній урок сподобався вам і ви стали трішки ближчими до розуміння принципів функціонування мови ActionScript 3. Щоб не пропустити наступних публікацій та уроків, підпишіться на оновлення.

UPD: Один з читачів зіткнувся з проблемою створення кнопки. Коли він змінює колір у режимах Over та Down – при тесті відео кнопка просто блимає. Я зняв короткий скрінкаст, в якому детально показано, як робити кнопки.

Інші записи на цю тему:

• Розуміння слухачів подій (Event Listeners) у ActionScript 3. Детальний огляд подій миші (Mouse Events)
• Урок 3. Програмна анімація вибуху. Використання циклів та масивів у ActionScript 3
• Глобальна система звуків у Flash-грі. Створення власного Soundmanager з допомогою класу Singleton
• Умовні вирази (conditionals) та оператори в ActionScript 3. Використання конструкцій if … else та switch … case
• Змінні (variables) у ActionScript 3. Типи змінних