У цьому уроці ми навчимося створювати конструктор персонажа за допомогою as3, щоб при натисканні змінювалися частини тіла. А потім збережемо сподобався образ у вигляді картинки. Часто конструктори використовуються в іграх, коли користувач сам збирає головного героя, яким буде грати в подальшому. Наприклад, всілякі тамагоччі, по типу Pet Society.
Щоб створити конструктор персонажа за допомогою as3, спочатку потрібно підготувати графіком. У нашому випадку це ось такий ось щеня і його запчастини - по 3 види вух, очей, хвостів і т.д.
Графіком з різними варіаціями тієї чи іншої частини маємо послідовно в кадрах на часовій шкалі усередині символу. Наприклад, 3 типи очей розміщуємо в мувікліп в 3-х кадрах. Для очей тимчасова шкала виглядає так:
Кожен елемент розташовується на окремому шарі.
Ті елементи які будуть змінюватися обертаємо в кліпи і призначаємо їм instancename на панелі Properties (в нашому випадку це eyes, hair, ears, tail і neck).
Додаємо новий шар as3. І пишемо наступний код:
отримаємо ось такий результат:
Клікнувши на будь-яку частину тіла, для якої це передбачено, графіка змінюється. Даний код є дуже зручним для аніматорів, так як для того, щоб створити свій конструктор, потрібно назвати (привласнити instancename) всі кліпи які будуть змінюватися і, всього-лише, прописати їх імена в виклик функції addItems (). Це можливо завдяки специфічній особливості даної функції. Вона може приймати будь-яку кількість параметрів. А конструкція foreach<> обробляє всі ці параметри, в нашому випадку, додаючи слухачі подій кожному параметру.
Як бачимо, все дуже просто. Тепер трохи прикрасимо наш конструктор. Зробимо так, щоб частина, яку можна змінити підсвічувалася. Для цього додамо кілька рядків до попереднього коду:
Як бачимо, спочатку ми програмно створили фільтр і додали 2 додаткових слухача подій. А в відповідних функціях ми просто застосовуємо або прибираємо фільтр. Також, позбавляємося від маленького бага нетухнущіх очей Тепер, коли ми наводимо на змінюваний об'єкт він підсвічується:
У нас вийшов відмінний конструктор персонажів. Було б здорово якось зберегти отриманого персонажа, наприклад, у вигляді зображення. Стандартними засобами флеш це не можливо, але за допомогою одного з класів цієї бібліотеки це зробити дуже просто. Він знаходиться в папці src / com / adobe / images і називається PNGEncoder.as (там, також, є клас і для jpg зображень). Цей клас потрібно помістити в папку з проектом, потім відкрити його і прибрати com.adobe.images з рядка з package, або завантажити вже поправлений файл (про класи буде окремий пост-огляд найближчим часом):
Зробимо так, щоб після того, коли персонаж зібраний, після натискання на кнопку "save", він з'являвся в новому кадрі, при цьому можна було б зберегти картинку на диск. Також додамо кнопку "back", щоб була можливість повернутися до редагування персонажа.
Ось так виглядає фінальний результат:
Для того, щоб зробити таку красу потрібно 3 дні медитувати і танцювати з бубном обернём всю графіку нашого героя в кліп і дамо йому instancename, в нашому випадку -dog. При цьому, шар з кодом ми не обертаємо в кліп, а в функції addItems () враховуємо поява нового кліпу:
addItems (dog.eyes, dog.hair, dog.ears, dog.tail, dog.neck);
В принципі, обертати в кліп не обов'язково, тут просто акцентується увага, що так можна робити, та й шарів стає менше. Так на багато простіше працювати. В ідеалі, взагалі весь вміст розміщувати всередині кліпу - так простіше буде його повторно використовувати.
Додаємо дві кнопки, які розміщуємо на різних шарах, одну над іншою. Кнопки візьмемо з плавною анімацією зробленої за принципом, який описаний тут. Ці кнопки ми будемо по черзі показувати за допомогою параметра visible. Таймлайн виглядає так:
Як бачимо по картинці ніжно додати ще один кадр, а код зміниться наступним чином:
Попередній код доповнився новими елементами. Ми додали слухачів подій кнопок і відповідні їм методи. Метод onSave () приховує кнопки, викликає метод savePng (). який в свою чергу готує png зображення до збереження і відкриває вікно, в якому можна вибрати, куди зберегти зображення. Метод onSave () знову показує кнопку "back" на екрані і видаляє слухачі подій з усіх змінюваних елементів методом removeItems (). Цей метод влаштований так само, як і addItems (), тільки він видаляє слухачі подій, а не додає.
І це ще не все. На другому кадрі, як ви напевно помітили, присутній анімований фон. Він робиться дуже просто:
Малюємо один промінчик, і маємо в своєму розпорядженні його гострим кінцем до центру. Обертаємо його в кліп. Копіюємо його і вставляємо в теж місце. Потім за допомогою панелі трансформації міняємо кут повороту на 20 градусів:
попередньо встановивши точку повороту в гострий кут.
Залишаючи його виділеним, натискаємо на кнопочку "дублювати і перетворити виділені об'єкти":
Разом отримуємо третій, четвертий і т.д. промінчик, поки не отримаємо повне коло. Виділяємо всі промінчики і обертаємо їх в кліп, скажімо, rotator і дамо йому instancename "rot", і цей кліп ще в один кліп, container. Внутрінегонановомслоепішемкод:
Ще можна додати маску шару, щоб наші промінчики не вилазили за краю робочої області. Дивимося результат:
Копіюємо наш контейнер і вставляємо в те саме місце. Відображаємо його зліва на право. дивимося:
Якщо щось не зрозуміло - задавайте питання і скоріше розбирайтеся! Всі, хто дочитав так кінця і все зрозумів - ви супер :)
Графіка: flash-animated.com (використання графіки дозволено лише в навчальних цілях)
Андрій спасибі за урок)
У мене трохи питань: 1. де краще створювати графіку? в ілюстратора на окремих шарах?
2. Як використовувати маску соя. що б прибрати те, що виходить за межі поля? (Наприклад якщо задній фон - карта міста-переміщається. Але я не хочу що б то, що за межами в подальшому було видно на ролику.