Тип символів MovieClip, вочевидь, один з найрозповсюдженіших елементів, які використовуються у Flash. Саме з MovieClip-ів, як з цеглинок, розробники створюють свої аплікації: банери, кліпи, ігри чи інтерактивні веб-програми. Якщо ви читали попередні статті на цьому блозі, то повинні бути знайомі з основними характеристиками фрагментів кліпу (MovieClips) – про них згадувалося у статті про символи у Flash.

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

Динамічні можливості, які відкриває перед розробниками AS3 дозволяють більш ефективно працювати зі всіма типами символів, зокрема й MovieClip. Наприклад, якщо раніше будь-яку анімацію на сцену ми додавали вручну – тобто «перетягуючи» символи з бібліотеки на сцену або конвертуючи зображення на сцені в символи, – то ActionScript відкриває можливість додавати символи з бібліотеки динамічно, при цьому зберігаючи повний контроль над їхньою поведінкою. Більше того, коли ви зрозумієте принципи взаємодії символів з кодом – саме ActionScript стане найзручнішим методом контролю над ними. Сьогодні ж ми зробимо перший крок до такого розуміння.

Як програмно додати символ MovieClip на сцену?

Наша мета – додати символ MovieClip з бібліотеки на сцену. Насправді, ми вже робили це в уроці про анімацію вибуху. Настав час детально розібрати і зрозуміти, яким же чином працює програмне додавання MovieClip-ів.

1. Створіть на сцені будь-який об’єкт (я намалював зелену зірку).

2. Відконвертуйте щойно створене зображення у символ (MovieClip) з назвою greenStar. А оскільки цей символ додаватиметься на сцену динамічно методами AS3 – то не забудьте поставити галочку навпроти опції Export for ActionScript (навпроти Export in frame 1 ставити галочку не потрібно). Зверніть увагу, що назва класу автоматично «підхопилася» з назви символу – тобто клас, як і символ називається greenStar.


Зверніть увагу, що символ greenStar відобразився у бібліотеці (якщо бібліотека вимкнена, натисніть ctrl+L).

3. Тепер можна додати анімацію. Для цього зайдіть в режим редагування символу, клікнувши по ньому два рази і створіть класичну анімацію руху (classic tween). Детальніше про класичну анімацію руху можна прочитати у статті про створення автоматичної анімації (tweening) у Flash.

Я заставив зірку циклічно крутитися і змінювати свій розмір:

Тепер, коли символ (MovieClip) створено, ви можете видалити його зі сцени, оскільки додавати його ми будемо програмно (виберіть зірку і натисніть delete). Переконайтесь, що в бібліотеці символ залишився.

4. Переходимо до кодування. Передусім необхідно прив’язати створений MovieClip до змінної AS. Для цього потрібно оголосити нову змінну і з допомогою оператора «new» прив’язати до неї символ greenStar. Ось як це робиться:

var myStar:MovieClip = new greenStar();

У цьому коді:

• var – оголошення змінної;
• myStar – назва змінної;
• MovieClip – тип змінної;
• new greenStar() – прив’язка конкретного символу (а точніше, його класу) до змінної.

Запам’ятайте даний синтаксис, оскільки він часто використовуватиметься для оголошення змінних типу MovieClip та прив’язки до них конкретних символів.

5. Тепер символ прив’язаний до змінної, якою ми можемо керувати методами ActionScript. Наприклад – вказати точні координати розташування, розмір, параметри обертання чи прозороті тощо. Наступний код:

myStar.x = 20;
myStar.y = 20;

вкаже, що наша зірка буде розташована на сцені з координатами 20 по вісі X та Y (початок відліку у верхньому лівому кутку сцени).

6. Всі основні приготування здійснено. Останнє, що залишилося зробити – це додати символ, прив’язаний до змінної, на сцену. Це робиться з допомогою ключового слова addChild. Ось приклад такого коду:

addChild(myStar);

Тобто загальний код на даний момент виглядатиме так:

var myStar:MovieClip = new greenStar();
myStar.x = 20;
myStar.y = 20;
addChild(myStar);

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

Для того, щоб видалити об’єкт зі сцени, використовується ключове слово removeChild. Синтаксис такий самий:

removeChild(myStar);

7. ActionScript дозволяє додавати скільки-завгодно копій одного і того ж кліпу на сцену. Наприклад, якщо ви модифікуєте код наступним чином:

var myStar:MovieClip = new greenStar();
myStar.x = 20;
myStar.y = 20;
addChild(myStar);

myStar = new greenStar();
myStar.x = 120;
myStar.y = 20;
addChild(myStar);

myStar = new greenStar();
myStar.x = 220;
myStar.y = 20;
addChild(myStar);

myStar = new greenStar();
myStar.x = 320;
myStar.y = 20;
addChild(myStar);

То отримаєте чотири копії зірки, розміщення яких буде відрізнятися за параметром “X”.

8. Втім, найцікавіше починається тоді, коли ми починаємо привносити елементи інтерактивності у наш код. Адже попередній кліп з чотирма зірками можна було створити взагалі без участі використання AS. Давайте ж видозмінимо код таким чином, щоб зірки з’являлися при кліку мишкою.

Для цього нам потрібно згадати, як додаються події мишки.

Ось так виглядатиме новий код:

stage.addEventListener(MouseEvent.CLICK, AddStar);

function AddStar (e:MouseEvent):void
{
	var myStar:MovieClip = new greenStar();
	myStar.x = mouseX;
	myStar.y = mouseY;
	addChild(myStar);
}

Як бачите, ми додали нову подію мишки, яка при кліку на сцені викликає функцію AddStar. Єдине нововведення полягає в тому, що тепер координати ми задаємо не статичні, а динамічні:

myStar.x = mouseX;
myStar.y = mouseY;

де mouseX – це положення курсора мишки по вісі X, а mouseY – по вісі Y.

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

У сьогоднішньому уроці ми навчилися додавати символи (MovieClip) на сцену та керувати їхніми атрибутами (зокрема, координатами розміщення на сцені). Якщо у вас виникли будь-які запитання, пов’язані з роботою коду чи додаванням MovieClip – не соромтесь задавати їх у коментарях. І обов’язково підпишіться на оновлення блога, оскільки далі нас чекає ще багато цікавого.

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

• Округлення десяткових дробів (чисел з комою): Що робити з некоректними значеннями при роботі з Number?
• Умовні вирази (conditionals) та оператори в ActionScript 3. Використання конструкцій if … else та switch … case
• Вступ до ActionScript 3: Що таке вбудована мова програмування у Flash та чим AS3 відрізняється від AS2
• Великі числа у ActionScript 3. Коли виникають і чим пояснюються неточності типу даних Number?
• Організація візуальних об’єктів методами ActionScript 3: Display Object, Display Container та Display List