У сьогоднішньому уроці ми приступаємо до вивчення основ вбудованої мови програмування Flash – ActionScript 3. В ньому ми дізнаємося про два найрозповсюдженіші методи керування анімацією (подіями) у Флеші – Play і Stop. Окрім того, для засвоєння матеріалу нам потрібно буде навчитися працювати зі ще однією можливістю ActionScript – подіями миші (Mouse Events). Нарешті – ми також розглянемо найпростішу структуру програм та виклик функцій.
Методи play та stop у ActionScript використовуються для контролю анімації, запускаючи та зупиняючи її. Попри їхню простоту – це один з найрозповсюдженіших методів, які можна зустріти практично у кожній програмі, зробленій на Flash. Саме тому ми починаємо вивчення ActionScript з цих методів.
Для демонстрації роботи подій Play та Stop ми використаємо анімацію стрибаючого м’ячика, яку навчилися створювати в одному з попередніх уроків. Ви можете використати вже готовий кліп, або, користуючись порадами зі статті створити власний стрибаючий м’ячик.
- Додайте додатковий шар (layer) шкали часу (timeframe) у основній сцені кліпу, яка відповідає за рух вашого м’ячика вгору та вниз. Виберіть перший кадр у щойно створеному шарі і натисніть F9 або виберіть вкладку Window -> Actions у панелі керування. При цьому відкриється панель редагування коду ActionScript.
- Для того, щоб ми мали змогу програмно контролювати поведінку символів, кожен з них повинен мати власне ім’я (instance name). Зверніть увагу, що ім’я символу не має нічого спільного з його назвою, яка відображається у бібліотеці. Ім’я (instance name) можна задати під час створення у відповідному вікні, або ж після створення, вибравши символ, та ввівши ім’я у стрічці
панелі Properties. - Отже, ми зупинили анімацію завдяки методу Stop мови ActionScript. Наступне наше завдання – зробити так, щоб м’яч починав рухатися при кліку на ньому мишкою.
- Ми змусили м’ячик реагувати на подію мишки, підстрибуючи при кліку на ньому. Цього достатньо, щоб зрозуміти дію методів Play та Stop, а також подій миші. Втім, у нашому кліпі є дві анімації – анімація стрибка та анімація обертання. При кліку мишею ми активували тільки одну з них.
Напишіть stop (); у першій стрічці коду. Ця функція зупинить програвання вашого відео у першому кадрі (тобто м’ячик перестане стрибати). Протестуйте відео і переконайтесь, що м’ячик не рухається вгору та вниз, хоча до сих пір обертається навколо своєї осі (обертання закладено у внутрішній символ самого м’ячика).
Перейдіть у режим редагування символу м’ячика, клікнувши два рази по ньому, і повторіть те саме всередині символу (додайте шар, виберіть перший кадр, відкрийте панель ActionScript та напишіть stop (); у першій стрічці). Протестуйте відео – тепер м’ячик повинен бути нерухомий (оскільки ми зупинили як анімацію руху, так і анімацію обертання).
Зверніть увагу, що у кадрах, до яких додано код ActionScript, на шкалі часу відображається маленька літера «а».
Дайте ім’я ball символу м’ячика, і ім’я rotation символу обертання м’ячика. Пізніше ці імена будуть використані у програмі.
Поверніться до основної сцени та кадру, до якого ми додавали перший код stop (); Додайте стрічку import flash.events.MouseEvent; перед командою stop (); Ця частина коду необов’язкова і відповідає за імпортування подій, пов’язаних з мишею (іншими словами, говорить середовищу Flash, що даний кліп буде інтерактивним і керуватиметься мишею). У більшості випадків Flash самостійно розпізнає необхідність виконання подій, пов’язаних з мишею, але для правильності коду краще додати цей рядок на самому початку програми.
Тепер, після стрічки stop (); в якій ми зупинили відтворення анімації, введіть наступний код:
ball.addEventListener (MouseEvent.CLICK, jump);
function jump (event:MouseEvent):void {
play();
}
Тепер спробуємо пояснити, що робить кожен з елементів коду:
ball.addEventListener – вказує, що об’єктом впливу буде символ з іменем ball (саме по м’ячику ми будемо клікати мишкою, щоб він підстрибував).
MouseEvent.CLICK, jump – вказує, яка саме подія повинна бути виконана для того, щоб запустити функцію jump. В даному випадку йдеться про клік мишкою на м’ячику. Назва функції може бути довільною, головне, щоб вона співпадала з назвою самої функції, яка буде ініційована пізніше.
function jump (event:MouseEvent):void – ініціація функції jump, яка запускається подією миші event:MouseEvent Ключове слово void вказує на те, що функція не повертає ніякого значення (в майбутньому ми побачимо, як функції можуть повертати значення і в яких випадках це використовується).
play (); – тіло функції. Яка дія повинна бути виконана при ініціації функції. В даному випадку ми наказуємо анімації програтися один раз (вона буде автоматично зупинена, коли програвання знов перейде до першого кадру, оскільки там прописано метод stop (); )
Отже, загальний код у першому кадрі виглядатиме так:
import flash.events.MouseEvent;
stop ();
ball.addEventListener (MouseEvent.CLICK, jump);
function jump (event:MouseEvent):void {
play();
}
Якщо ви все зробили правильно, то при тесті анімації, м’ячик буде підстрибувати при кліку на ньому мишкою.
Для активації другої анімації нам потрібно скопіювати код у кадр, куди ми раніше додавали друге слово stop (); Єдине, що потрібно зробити – це замінити ключове слово ball на назву іншого символу, який відповідає за обертання – rotation. Після нехитрих маніпуляцій код виглядатиме так:
import flash.events.MouseEvent;
stop ();
rotation.addEventListener (MouseEvent.CLICK, jump);
function jump (event:MouseEvent):void {
play();
}
Збережіть і протестуйте анімацію. Якщо все зроблено правильно – тепер вона повинна виглядати так:
Зверніть увагу на те, що в цьому прикладі тривалість анімації обертання повинна дорівнювати тривалості анімації стрибка. В іншому разі м’ячик перестане обертатися ще в повітрі, або навпаки – продовжуватиме обертатися після того, як впаде на землю.
Отже, у цьому уроці ми навчилися використовувати методи Play та Stop, а також керувати подіями миші. Таким нехитрим методом ми можемо запускати будь-які анімації, спершу зупиняючи їх ключовим словом stop (); а потім запускаючи методом play ();
Спробуйте запам’ятати структуру програми на Flash (оскільки всі інші будуть схожими на неї), та створіть кілька власних анімацій, які контролюватимуться подібним чином. Це дозволить краще засвоїти принципи кодування у ActionScript, а також play/stop методів.
Якщо у вас виникли запитання стосовно роботи коду – не соромтесь задавати їх у коментарях. І готуйтесь до наступних уроків – далі буде тільки цікавіше!