Створення Flash ігор
спіраль, що обертається і змінює кольори
За допомогою ActionScript можна змінювати не тільки масштаб кліпу, але й майже будь-який інший параметр. Зміна масштабу є простим прикладом. Змінити колір кліпу трохи складніше. У цьому розділі ви навчитеся змінювати колір кліпу та повертати його.
Завдання цього проекту - створити ролик, який буде зображати спіраль, що обертається, з поступово мінливими кольорами. При цьому ви вивчите, як функціонують об'єкт Color та властивість кліпу _rotation.
За допомогою ActionScript можна змінити більшість властивостей кліпів, які знаходяться на робочому полі. У деяких випадках властивість можна змінити безпосередньо, в інших випадках, наприклад, при зміні кольорів, необхідно використовувати функції.
Об'єкт Color призначений для зміни кольорів кліпу. Його можна представити як набір функцій, що дозволяють пізнавати та керувати кольорами кліпу. Спершу потрібно створити об'єкт Color, пов'язаний з кліпом, який ви збираєтеся змінювати. Це можна зробити так:
myColorObject = новий Color("myMovieClipName");
Об'єкти на зразок Color побудовані на образі телевізійного пульта управління. Кліп можна представити як телевізор, а об'єкт Color як особливий пульт керування, призначений для налаштування параметрів кольору зображення. Методи об'єкта Color використовуються аналогічно кнопки пульта управління.
Існує два способи визначення та зміни колірного об'єкта. Перший – це безпосередньо визначити колір за допомогою двох рядків коду. Спочатку створіть новий flash-ролик і помістіть на робочому nole один кліп. Назвіть копію кліпу "myMovieClip". Потім помістіть наступний сценарій у головну часову шкалу:
myColorObject = новий Color("myMovieClip"); trace(myColorObject.getRGB()).toString());
Не забудьте про те, що існує різниця між іменем еталона кліпу в бібліотеці та ім'ям конкретного екземпляра кліпу на робочому полі. ActionScript завжди посилається на ім'я екземпляра кліпу. Ім'я в бібліотеці призначене виключно для організаційних цілей
Під час тестування ролика автоматично відкриється вікно Output, у якому буде містити значення "0". Це результат виконання команди trace.
Функція toString перетворює багато типів ActionScript, наприклад, числові в рядок тексту. Вона, наприклад, зручна для перетворення кольорів у числові значення для виведення за допомогою команди trace.
Можна отримати, змінюючи колір ролика. Щоб це зробити, виділіть кліп і на панелі Properties виберіть у випадаючому кеші меню Color пункт Advanced, після чого натисніть кнопку Settings. У вікні Advanced Effect, що з'явилося, введіть значення 128 в поля R, G і В. Введіть значення 128 в поля R, G і В (рис. 5.3) у правій колонці. У лівій колонці виставте значення 0.
Рисунок 5.3 Панель Advanced Effect призначена для зміни кольору кліпу
Тепер при тестуванні ролика у підсумкове вікно буде поміщено значення 8421504, що відповідає значенням 128 полів R, G і В. Трохи змінивши функцію tostring, ви замість десяткового значення отримаєте шістнадцяткове. Воно буде виглядати як значення RGB, яке використовується дизайнерами для завдання кольорів.
myColorObject = новий Color("myMovieClip"); trace((myColorObject.getRGB()).toString(16));
Опис new дозволяє створювати нові копії об'єктів на зразок об'єкта color. Воно також використовується для створення нових масивів та ваших власних об'єктних конструкцій. Якщо на цьому етапі воно не зрозуміло, нетурбуйтеся. Щоб використовувати опис new, повне розуміння не потрібно.
Результатом у даному випадку є значення 808080, шістнадцяткове число, що являє собою середній сірий колір (червона, зелена і синя складові, які мають значення 128, середнє між 0 і 255). Значення 16 як параметр функції toString () задає перетворення числових значень на шестнссшатеричні. Тепер, коли ви вмієте отримувати значення RGB кольору кліпу, наступним кроком буде його зміна. Це можна зробити за допомогою функції set RGB. Вона має лише один параметр: шістнадцяткове значення, яке ви хочете використати. Наведемо приклад із тим самим роликом, але з дещо зміненим кодом:
myColorObject = новий Color("myMovieClip"); myColorObject.setRGB(OxFFOOOO);
Поєднання Ox вказує, що за ним слідує шістнадцяткове число. Наведене у коді число FF0000 відповідає червоному кольору. При запуску колір ролика зміниться на червоний, незалежно від вихідного. Дія цих двох рядків коду продемонстровано на прикладі Color-change. fla
Більш універсальним способом зміни кольору є використання методу setTransform() об'єкта Color. Аргументом методу set-Transform є об'єкт, що містить вісім параметрів кольору. Параметри rb, gb та bb задають відносне зміщення у відсотках (від -100% до 100%) для червоної, зеленої та синьої складових кольору відповідно. Параметри rb, gb та bb задають абсолютне (від -255 до 255) значення кольорів. Останні два параметри – аа та ab визначають значення властивості _alpha (прозорість) кліпу. На рис. 5.3 зображені всі шість складових плюс два значення перетворюють альфа-канал (прозорість зображення). Об'єкт перетворення кольору може містити різні значення кожної з восьмискладових. Ці значення задаються шляхом створення нової змінної об'єкта. Наведемо приклад:
Даний об'єкт визначає зміну кольору будь-якого колірного об'єкта на червоний. Він включає три параметри: абсолютні значення червоного, зеленого та синього кольорів. Крім того, ви можете задавати відносне змішання за допомогою параметрів rа, gа та bа. За допомогою об'єкта перетворення кольору та об'єкта кольору можна змінювати колір кліпу. Наступні три рядки змінять колір кліпу на червоний:
myColor'= new Color("myMovieClip"); myColorTransform = (rb:255, bb:0, gb:0); myColor.setTransform(myColorTransform);
В даному прикладі виконується та ж дія, що і в попередньому, але в інший спосіб. Перевага функції setTransform над функцією setRGB полягає у більшому контролі над значеннями кольорів. Наприклад, цифри, що задають колір, можуть бути змінними ActionScript, а не жорстко закодованими числовими значеннями. Крім того, ці значення можуть періодично змінюватись, тим самим періодично змінюючи колір об'єкта. Наступний кліп змінює значення червоного кольору кліпу від 0 до 255. У результаті кліп починається із зображення чорного еліпса, який потім поступово змінює свій колір на червоний. Для створення об'єкта кольору та об'єкта трансформації кольору використовується подія load. Саме там створюється змінна n. Наступна за ним подія enterFrame використовується для перетворення кольору, застосування перетворення до кліпу та збільшення значення змінної n.
onClipEvent(load) myColor = new Color(this); myColorTransform = ; n = 0; onClipEvent(enterFrame) < myColorTransform.rb = n; myColor.setTransform(myColorTransform); n++; >
Оператор збільшує значення змінної на одиницю. Отже, якщо значення n дорівнює 7, то рядок n++збільшує його до 8. Для зменшення значення використовується оператор --.
У цьому прикладі значення змінної n, що описує червоний колір, змінюється від 0 до 255. При досягненні максимального значення 255 колір більше не змінюється. Застосування сценарію демонструється у ролику Gradualtransform.fla. Вся ця інформація про кольори та перетворення може використовуватись для створення спеціальних ефектів. Давайте спробуємо зробити щось цікавіше. Візьмемо основний приклад даного розділу і зробимо так, щоб кліп по черзі змінював свій колір на один із кольорів веселки. Для цього необхідно змінити червону, зелену та синю складові. Тут буде використовуватися та сама функція setTransform, проте алгоритм зміни значень порівняно з попереднім прикладом буде більш складним. Як вихідний для червоного, зеленого та синього кольорів береться значення 255, яке змінюється таким чином: 1. Значення червоного кольору зменшується до 0. 2. Значення синього кольору зменшується до 0. 3. Значення червоного кольору збільшується до 255. 4. Значення зеленого кольору зменшується до 0. 5. Значення синього кольору збільшується до 255. 6. Значення зеленого кольору збільшується до 255. При цьому кольори білий, ціан (cyan), зелений, жовтий, червоний, фуксин (magenta), білий плавно перетворюватимуться з одного в інший у зазначеній послідовності. У ній беруть участь усі кольори, крім чистого синього. Так ми створимо змінюючу колір спіраль.
У цьому ролику використовуватиметься один елемент - спіральна фігура. Помістіть його до центру робочого поля. Початковий колір спіралі має бути білим, а фоновий – чорним. Ролик складатиметься з одного сценарію, призначеного кліпу з винаходом спіралі. Змінна п, що бере участь у сценарії, містить спосіб зміникольори. Значення кольору буде відповідати числу попереднього списку. Так, наприклад, якщо n дорівнюватиме 3, значення червоної складової збільшиться. Значення змінної п спочатку 1, потім збільшується до 6 і далі цикл повторюється. Нижче наведено частину коду з послідовністю if. then, яка використовує значення змінної n та змінює об'єкт перетворення кольору.
if (n == 1) colorTransform.rb -= 5; if (colorTransform.rb ==0) n = 2; > else if (n == 2) colorTransform.bb -= 5; if (colorTransform.bb ==0) n = 3; > else if (n == 3) colorTransform.rb += 5; if (colorTransform.rb == 255) n = 4; > else if (n == 4) colorTransform.gb -= 5; if (colorTransform.gb == 0) n = 5; > else if (n == 5) colorTransform.bb += 5; if (colorTransform.bb == 255) n = 6; > else if (n == 6) colorTransform.gb += 5; if (colorTransform.gb == 255) n = 1; >
Оператор += використовується додавання до змінної певного числа. Наприклад, код n += 5 додає 5 значення n. той код аналогічний коду n = n + 5. Оператор = - використовується для віднімання певного числа змінної.
Значення змінної n перевіряється у кожній частині виразу if. then. У разі збігу одна з трьох колірних складових об'єкта colorTransform змінюється. Після закінчення змін, сама змінна змінює своє значення на наступні. Повна профама є звичайним кліпом ActionScript з функціями onClipEvent (load) і onClipEvent (enterFrame). Перша вводить об'єкти кольору та перетворення, друга виконує поступову зміну кольорів. Крім того, ми зробимо так, щоб кліп обертався. Обертання досягається поступовим збільшенням значення параметра _rotation.
onCIipEvent(1oad) // Створюємо об'єкт кольору та колірнийтрансформації. spiralColor = new Color(this); colorTransform = ; // Спочатку п дорівнює одиниці, n = 1; onClipEvent(enterFrame) // Визначаємо, яку складову необхідно змінити, if (n == 1) colorTransform.rb -= 5; if (colorTransform.rb ==0) n = 2; > else if (n == 2) colorTransform.bb -= 5; if (colorTransform. bb == 0) n = 3; > else if (n == 3) colorTransform.rb += 5; if (colorTransform. rb == 255) n = 4; else if (n == 4) colorTransform.gb -= 5; if (colorTransform. gb == 0) n = 5; else if (n == 5) colorTransform.bb += 5;
if (colorTransform.bb == 255) n = 6; else if (n == 6) colorTransform.gb += 5;
if (colorTransform. gb == 255) n = 1; // Задаємо новий колір. spiralColor.setTransform(colorTransform); // Обертаємо спіраль. this._rotation += 5; >
Об'єкт цього означає звернення кліпу до самого себе. Так як сценарій призначений кліпу, використання цього буде означати, що команда, наступна після цього, відноситься до самого кліпу, а не до іншого кліпу або ролика. Параметр кліпу _rotation використовується для повороту кліпу на певну кількість градусів. Він може мати як позитивні, і негативні значення. Якщо ви вкажете значення більше 360 градусів, Flash автоматично перетворює його. Наприклад, при введенні значення 370 градусів кліп буде повернутий на 10 градусів.
Хоча цей ефект можна отримати і засобами класичної анімації, ActionScript дозволяє зробити це набагато швидше.
Частота зміни кадрів ролика визначає швидкість обертання спіралі та зміни кольорів. Максимальна частота у Flash MX -120 кадр/с. Проте слід пам'ятати, що частота зміни кадрів безпосередньо залежить від швидкодії комп'ютера.
Рисунок 5.4 Спіраль змінює колір таобертається
Змінивши оператор += на -= в останньому рядку коду, ви змусите спіраль обертатись у зворотному напрямку. Ви можете також змінити спосіб зміни кольорів, змінивши значення червоної, зеленої та синьої складових.