Тип символів MovieClip, вочевидь, один з найрозповсюдженіших елементів, які використовуються у Flash. Саме з MovieClip-ів, як з цеглинок, розробники створюють свої аплікації: банери, кліпи, ігри чи інтерактивні веб-програми. Якщо ви читали попередні статті на цьому блозі, то повинні бути знайомі з основними характеристиками фрагментів кліпу (MovieClips) – про них згадувалося у статті про символи у Flash.
Якщо ви ознайомилися зі статтею за посиланням – то вже знаєте, як створювати символи MovieClip. Сьогодні ж нашою метою буде більш глибоке розуміння цього типу символів та робота з ними методами вбудованої мови програмування ActionScript 3.
Динамічні можливості, які відкриває перед розробниками AS3 дозволяють більш ефективно працювати зі всіма типами символів, зокрема й MovieClip. Наприклад, якщо раніше будь-яку анімацію на сцену ми додавали вручну – тобто «перетягуючи» символи з бібліотеки на сцену або конвертуючи зображення на сцені в символи, – то ActionScript відкриває можливість додавати символи з бібліотеки динамічно, при цьому зберігаючи повний контроль над їхньою поведінкою. Більше того, коли ви зрозумієте принципи взаємодії символів з кодом – саме ActionScript стане найзручнішим методом контролю над ними. Сьогодні ж ми зробимо перший крок до такого розуміння.
Як програмно додати символ MovieClip на сцену?
Наша мета – додати символ MovieClip з бібліотеки на сцену. Насправді, ми вже робили це в уроці про анімацію вибуху. Настав час детально розібрати і зрозуміти, яким же чином працює програмне додавання MovieClip-ів.
- Створіть на сцені будь-який об’єкт (я намалював зелену зірку).
- Відконвертуйте щойно створене зображення у символ (MovieClip) з назвою greenStar. А оскільки цей символ додаватиметься на сцену динамічно методами AS3 – то не забудьте поставити галочку навпроти опції Export for ActionScript (навпроти Export in frame 1 ставити галочку не потрібно). Зверніть увагу, що назва класу автоматично «підхопилася» з назви символу – тобто клас, як і символ називається greenStar.
- Тепер можна додати анімацію. Для цього зайдіть в режим редагування символу, клікнувши по ньому два рази і створіть класичну анімацію руху (classic tween). Детальніше про класичну анімацію руху можна прочитати у статті про створення автоматичної анімації (tweening) у Flash.
- Переходимо до кодування. Передусім необхідно прив’язати створений MovieClip до змінної AS. Для цього потрібно оголосити нову змінну і з допомогою оператора «new» прив’язати до неї символ greenStar. Ось як це робиться:
- var – оголошення змінної;
- myStar – назва змінної;
- MovieClip – тип змінної;
- new greenStar() – прив’язка конкретного символу (а точніше, його класу) до змінної.
- Тепер символ прив’язаний до змінної, якою ми можемо керувати методами ActionScript. Наприклад – вказати точні координати розташування, розмір, параметри обертання чи прозороті тощо. Наступний код:
- Всі основні приготування здійснено. Останнє, що залишилося зробити – це додати символ, прив’язаний до змінної, на сцену. Це робиться з допомогою ключового слова addChild. Ось приклад такого коду:
- ActionScript дозволяє додавати скільки-завгодно копій одного і того ж кліпу на сцену. Наприклад, якщо ви модифікуєте код наступним чином:
- Втім, найцікавіше починається тоді, коли ми починаємо привносити елементи інтерактивності у наш код. Адже попередній кліп з чотирма зірками можна було створити взагалі без участі використання AS. Давайте ж видозмінимо код таким чином, щоб зірки з’являлися при кліку мишкою.


Зверніть увагу, що символ greenStar відобразився у бібліотеці (якщо бібліотека вимкнена, натисніть ctrl+L).
Я заставив зірку циклічно крутитися і змінювати свій розмір:
Тепер, коли символ (MovieClip) створено, ви можете видалити його зі сцени, оскільки додавати його ми будемо програмно (виберіть зірку і натисніть delete). Переконайтесь, що в бібліотеці символ залишився.
var myStar:MovieClip = new greenStar();
У цьому коді:
Запам’ятайте даний синтаксис, оскільки він часто використовуватиметься для оголошення змінних типу MovieClip та прив’язки до них конкретних символів.
myStar.x = 20; myStar.y = 20;
вкаже, що наша зірка буде розташована на сцені з координатами 20 по вісі X та Y (початок відліку у верхньому лівому кутку сцени).
addChild(myStar);
Тобто загальний код на даний момент виглядатиме так:
var myStar:MovieClip = new greenStar(); myStar.x = 20; myStar.y = 20; addChild(myStar);
Протестуйте кліп. Якщо все зроблено правильно – то ви побачите зірку, яка крутиться, змінюючи розмір, у лівому верхньому кутку сцени.
Для того, щоб видалити об’єкт зі сцени, використовується ключове слово removeChild. Синтаксис такий самий:
removeChild(myStar);
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”.
Для цього нам потрібно згадати, як додаються події мишки.
Ось так виглядатиме новий код:
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 – не соромтесь задавати їх у коментарях. І обов’язково підпишіться на оновлення блога, оскільки далі нас чекає ще багато цікавого.
Березень 30, 2011 о 14:59
Завдяки таким прикладам, кожен може без великих зусиль навчатися програмуванню.
Дякую адміністрації сайту, адже мені дуже потрібне знання ActionScript а в книжках хоч і є потрібна мені інформація, але без наочності все не так і просто…