Даний випуск в основному сформований за результатами приходить пошти. Справа в тому, що ваш покірний слуга колись дозволив собі опублікувати кілька практичних матеріалів по роботі в анімаційний-програмному середовищі розробки Adobe Flash, включаючи серію з програмування для Flash / Flex і окремі уроки по створенню анімаційних роликів. Вони стали досить популярні і досить широко поширилися. Наприклад, деякі свої уроки я бачив на піратських дисках з Flash'ем. А як на пострадянському просторі оцінюють популярність? Питання риторичне. Загалом, прохання по "чогось ще" звучать постійно, хоча це і окремий пласт роботи. Загалом, час знайшлося тільки зараз, причому сформувалися досить цікаві завдання.

Окремо варто відзначити, що Adobe Flash, як середовище для початківців програмістів, схоже Бейсік для дітей мого покоління. Все просто, зручно, швидко в реалізації, а в даному випадку і дуже барвисто. На флеші можна навчитися не тільки всім основним принципам сучасного програмування , А й отримати повноцінні знання про роботу сучасних анімаційних пакетів, програм моделювання і так далі. Тому багатьом представникам сучасної молоді настійно рекомендую починати свій шлях з флеш.

Отже, приступимо. Завантажуйте Flash, закочуйте рукава і поїхали! Думаю, що запропонований приклад вам сподобається. Спочатку займемося проектуванням. Придумаємо гру і назвемо її, наприклад ...

"Гангстери і інопланетяни"

Жанр: гонки, шутер

Опис: Інопланетяни викрали з-під носа у гангстерів броньовик з грошима. Його потрібно наздогнати, що насправді не так вже й просто.

Мета: знищення броньовика за певну дистанцію.

Складність: легка.

Графіка: "легка" емуляція 3D в 2D.

Вид: від третьої особи, камера посередині дороги за машиною гангстерів.

Платформи: PC, мобільники.

Мови: російська, англійська, німецька, іспанська, французька ...

Розкадрування

В даному випадку для простоти і стислості ми не будемо робити головне меню, а передбачимо тільки ігрове вікно. Його розкадрування, також в силу швидкості і зручності, можна намалювати у флеші інструментом "пензлик" (Brush Tool).

Отже, у нас є фон, дорога, смуги розмітки на ній, ліхтарі по краях, машина гангстерів, броньовик інопланетян, індикатор пройденої дистанції, індикатор очок.

Планування ходу розробки

Для початку потрібно визначитися з емуляцією руху. Справа в тому, що дорога як така у нас буде статичною. Ефект відчуття швидкості буде досягатися рухом і масштабованим збільшенням смуг розмітки і ліхтарів. Це і буде першим етапом.

Після нього нам потрібно створити автомобіль гангстерів, показати на ньому ефект невеликого тремтіння (додамо реалістичності), забезпечити управління за допомогою стрілок клавіатури вправо-вліво. Це другий етап.

Далі малюємо броньовик інопланетян. Додаємо йому тремтіння, створюємо функцію плавної зміни напрямку вправо або вліво в випадковому режимі. Це третій етап.

Потім реалізуємо функцію стрільби після натискання клавіші "пробіл". Показуємо це анімацією і звуком, пов'язуємо координати машини і броньовика для визначення попадання в ціль. Створюємо систему підрахунку очок. Це четвертий етап.

Про додаткові етапах ми поговоримо окремо і пізніше.

Створюємо новий проект

Відкриваємо File а New ... вибираємо Flash File (Action Script 2.0). Передбачається, що багато хто вже знайомі з основними інтерфейсними елементами флеш - такими, як панель інструментів Tool, вікно Timeline, багатофункціональні вікна з закладками знизу і праворуч від робочої області.

Action Script 2.0 ми вибрали в силу його простоти і схильності до швидкого програмування.

Перший етап

Припустимо, що в рамках самої гри всі дії у нас будуть відбуватися вночі. Чому? Нам же потрібна барвистість. А поїздка в нічний час буде досить ефектно виглядати - коли ми зможемо зробити світ від фар і ліхтарів за рахунок напівпрозорих елементів з градієнтної заливкою.

Спочатку розміщуємо основні статичні елементи. За допомогою ліній (Line Tool) малюємо рівнобедрений трапецію (дорогу), зафарбовує її в темно-синій колір. Посередині цієї трапеції таким же чином малюємо розділову смугу (вузька рівнобедрена трапеція), зафарбовуючи її в білий колір, вона також буде статичною.

Наступним етапом стане створення рухається смуги з однієї зі сторін, наприклад, що розділяє ліву половину дороги. що потрібно для цього зробити? Мабуть, опишемо самий найпростіший варіант. Як і в попередньому випадку, малюємо лініями геометричну фігуру, в даному випадку, чотирикутник - з тим урахуванням, що він буде рухатися з лівого від камери боку, тобто передбачимо певні кути нахилу для його бічних сторін. Зафарбовуємо його в білий колір, виділяємо і натискаємо F8. З головного меню ви можете дізнатися, що це обумовлює виклик операції Convert to symbol ..., що насправді має на увазі присвоєння виділеному фрагменту властивостей одного з трьох типових об'єктів - Movie Clip, Button або Graphic. Movie Clip - це, якщо пояснювати простими словами, базовий і багатофункціональний об'єкт флеш; Button - за самим об'єктом закріплюються всі функції кнопок, при цьому на автоматі можна створювати варіанти реакції на ключові події, пов'язані з дією курсору миші; Graphic - виділений фрагмент перетворюється в звичайний графічний елемент без особливих додаткових функцій і властивостей.

У нашому випадку ми вибираємо MovieClip. В поле Name вікна Convert to symbol ... набираємо "road_line_left" або щось на ваш розсуд. Це ім'я в нашому випадку найчастіше використовуватиметься для того, щоб швидко добиратися до графічного наповнення об'єкта з бібліотеки проекту, тому тут можна чинити і як великі С-програмісти складних програм :).

А інше ім'я, яке буде використовуватися нами в рамках коду на ActionScript, вводиться у вікні властивостей Properties в поле Instance Name. Припустимо, "rl_left". У цьому ж вікні Properties ви можете поекспериментувати з об'єктом, змінюючи його прозорість, колірну гамму по співвідношенню до фонового кольору дороги і так далі. Розмістіть смужку в найдальше по нашій віртуальній трасі місце, при цьому дотримуючись пропорції і розташування.

Далі натискаємо F9 (це виклик вікна Actions, в якому ми будемо вводити код), а покажчиком миші у вікні Timeline клацаємо на першому фреймів (кадрі) нашого шару Layer 1. Цим самим проведена перспектива наступного дії: у вікні Actions ми вводимо код для першого кадру першого шару. Що ми введемо в першу чергу? Давайте зробимо просто - перенесемо вихідні дані про первісні координатах і розмірах об'єкта "rt_left" в код. Це вигідно, особливо у випадках, якщо ви щось випадково змістили і так далі.

Отже, вводимо щось типу:

rt_left._y = 1; rt_left._x = 177; rt_left._width = 5; rt_left._height = 40;

Зверніть увагу, що після введення цих рядків у вікні Timeline в першому фреймі Layer1 з'явився значок?. Це означає, що тут вже є код.

Тепер приступаємо до анімації. Робити ми її будемо чисто програмним способом, причому не виходячи з першого кадру.

Як ви розумієте, будь-яка анімація пов'язана зі змінами чогось в процесі часу. У Flash є кілька варіантів завдання тимчасових відліків. Самий рідко використовуваний, до того ж неефективний - використання циклів. Цю думку відкидаємо відразу. Також можна зробити таймер на базі функції setInterval (), яка викликає певну функцію або методи через виразно зазначений часовий інтервал.

Але, оскільки ми не тільки все намалювали, але і програмуємо в рамках одного кадру, він буде циклічно повторюватися знову і знову з частотою зміни кадрів в секунду (fps), яку можна змінювати в налаштуваннях проекту. Причому це відмінний "природний" таймер. До речі, саме такі специфічні моменти і методи відрізняють програмування у флеші від будь-якого іншого. Тому використовуємо подія onEnterFrame.

Під вже введеним кодом напишемо (самі коефіцієнти змін потрібно ставити свої):

rt_left.onEnterFrame = function () {rt_left._y = ddd._y + 20; rt_left._x = ddd._x-4; rt_left._width = ddd._width + 2; rt_left._height = ddd._height + 3; if (rt_left._y> 500) {rt_left._y = 1; rt_left._x = 177; rt_left._width = 10; rt_left._height = 40; }}

Пояснимо. Функція rt_left.onEnterFrame описує зміна станів при кожному оновленні цього кадру (в даному випадку першого). Тобто при кожному відліку ми зміщуємо нашу смугу на 20 точок по ординате, на 4 по абсциссе, збільшуємо довжину і ширину об'єкта. У разі, коли він виходить за видиму область (в рядку з умовою if (rt_left._y> 500) ми передбачили варіант положення, близького до крайнього), повертаємо нашу дорожню смугу в початкове положення, і потім всі дії повторюються наново. Виходить циклічний режим.

Продовження першого етапу

Оскільки місце в газеті обмежена, і наступні операції для першого етапу фактично повторюють вже описані, ви можете аналогічним способом самостійно зробити рухається смугу для правого боку, а також ліхтарі по краях дороги.

Малюючи останні, необхідно передбачити емуляцію освітлення дороги, адже мова йде про ліхтарях, для чого при їх створенні передбачте напівпрозорі графічні елементи (використовуючи альфа-канали), зафарбовані градієнтною заливкою з відтінками жовтого. Для того щоб отримати доступ до прозорості, дані проміжні елементи потрібно конвертувати в символи типу Graphic (F8). Варто відзначити, що якщо у вас малопотужні ПК, то особливо експериментувати з градієнтом не потрібно, тому як його наявність сильно завантажує комп'ютер.

І наостанок, для спрощення, скажімо про те, що оскільки загальна картина руху у нас передбачає синхронізацію зі зміною кадрів, то для кожного з елементів окрему функцію імя_об'екта.onEnterFrame створювати не потрібно, все зміни можна поміщати в уже сформовану rt_left.onEnterFrame. Не забувайте про рядках коментарів, в яких ви описуєте, що і як робите. В ActionScript вони вносяться як і в С-подібних за допомогою "//" для одного рядка або "/ * текст * /" для безлічі.

(Далі буде)

Крістофер, [email protected]