1. Робимо найпростіший анімований банер

Робимо найпростіший анімований банер

Заощадив - вважай, заробив! Чому б бізнесменам і звичайним користувачам не навчитися робити флеш-банери самостійно? Це не так важко, і нерви нормальним флешерів заощадите :). Чому я так кажу? Добре, якщо трапляється замовник, який дає аніматору повну свободу дій. Набагато частіше намагаються втрутитися в процес - постійно потрібно щось поміняти і т.п. Загалом, що мені вам розповідати? Причому банерів потрібно завжди багато, це і акції, і якісь тонкі нюанси. Саме темі створення ми і присвятимо цей матеріал, пояснимо більш-менш простими словами, як робиться банер.

Чому Flash?

На цей час поширено кілька стандартів для створення барвистих анімованих банерів, при цьому найпопулярнішими вважаються GIF і Flash. За ними стоять абсолютно різні технології. Давайте опишемо цю різницю.

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

Що таке Flash? Якщо я вам скажу, що це векторна графіка у всіх її проявах, то напевно поставлю багатьох початківців в глухий кут. Справа в тому, що елементи флеш-анімації (крім використовуваних імпортованих зображень) зберігаються як сукупність кривих, тобто все представляється у вигляді якоїсь математичної моделі. Причому сам підхід до створення банерів / мультиплікації узятий з професійної сфери. Математична модель має ряд переваг, тобто, вона не займає багато пам'яті, в порівнянні з варіантом, коли кожен кадр зберігається у вигляді окремої картинки. По-друге, з'являється набагато більше анімаційних можливостей, плюс ви можете швидко переводити виготовлений банер з одного формату / розміру в інший без істотних спотворень і втрат в якості.

Єдиний недолік використання Flash'a полягає в тому, що такого роду анімація повинна відтворюватися за допомогою спеціального плеєра - Flash Player або плагін для браузера. Звичайно, далеко не кожен місцевий користувач такий плагін собі викачує і встановлює, хоча більшість серйозних ресурсів відчайдушно використовують флеш. Він більш барвистий, анімаційний.

Ви вирішили вступити в рекламну гонку ...

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

• конкретних майданчиків, тобто видається список ресурсів (сайтів), і ви самі вказуєте, де саме хочете рекламуватися;
• часу показів. Наприклад, вас цікавить тільки вечір з 20.00 до 22.00, при цьому ви вказуєте конкретні дні (наприклад, тільки будні).

Гроші зазвичай беруться або за кількість показів, або за кількість кліків (натиснень) на банери. Часто виникає питання про те, що краще? В принципі, тут можна провести явну паралель з тарифами для мобільних телефонів. Вони різні, але, по суті, ви платите практично одні і ті ж гроші.

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

Коли ви визначилися з розміщенням, починайте читати технічні характеристики, що пред'являються до банерів. Головним чином, це розміри, а на другому місці саме для Flash'а вказується "вага", тобто, наприклад, банер такого-то розміру повинен бути не більше 30 Кб.

Складаємо проект банера

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

Оскільки у нас на носі Різдво і Новий рік, як приклад ми зробимо найпростіший святковий вітальний банер. Пропоную такий варіант: темне небо, кілька зірок, в центрі - засніжена напис "З Різдвом і Новим роком", яка буде з'являтися, "танцювати" і ховатися. В принципі, особлива розкадровка тут і не потрібно. Приклад простий для того, щоб показати саму технологію.

Запускаємо Adobe Flash

Запускаємо нашу програму. Із запропонованого списку вибираємо Create New -> Flash Site (ActionScript 2.0). Програмувати ми практично не будемо, нам тільки в останній момент потрібно набрати (скопіювати) кілька рядків коду, які потім будуть використовуватися при опублікуванні. Іншими словами, помістимо посилання, на яку цей банер буде здійснювати перехід.

Тепер розглядаємо інтерфейс Flash'а. Зліва знаходиться меню інструментів (приблизно таке ж, як і в Photoshop). Зверху знаходиться панель анімації Timeline. Знизу - вікно з закладками Properties ( "Властивості"), Parameters ( "Параметри"), Actions ( "Програмний код"). По суті, нам знадобиться тільки Properties. Справа ще додаткове меню, але воно нам поки не потрібно.

У вікні Properties вказуємо розміри банера, наприклад, стандартний 468х60. У цьому ж вікні вказуємо колір фону, у нас темне небо, тому вибираємо або чорний, або темно-синій. Частота зміни кадрів за замовчуванням становить 12 fps (кадрів в секунду), залишаємо. Тепер для зручності збільшуємо масштаб перегляду до 200%.

Складаємо невелике технічне завдання

Графіка у флеші робиться по верствам (у вікні Timeline за замовчуванням у нас вже є один такий, називається Layer 1), причому наступний шар буде накладатися на попередній, але вони незалежні один від одного. Специфіка точно така ж, як і в Photoshop.

Щоб уникнути плутанини опишемо кожен шар окремо, тобто, продумаємо, що там буде розташовано. І це буде наше невелике технічне завдання. При цьому важливий момент: в рамках кожного шару можна використовувати безліч елементів, кожен з яких накладається на попередній. Але, щоб, знову ж таки, не заплутатися і якщо об'єктів не так багато, кожен з них краще розташовувати на своєму окремому шарі.

Отже:

• Layer 1: Синій фон з зірками
• Layer 2: Напис "З Різдвом і Новим роком!".

Тепер нам потрібно розрахувати хронометраж. Спочатку з'являється напис. На це витратиться 1 секунда (при 12 fps це 12 кадрів), напис скаче і спотворюється - приблизно 9 секунд (108 кадрів), і в кінці йде - 1 секунда (12 кадрів). Вся сцена триває 11 секунд (132 кадру). Зверніть увагу на те, що банер відтворюється циклічно, тому потрібно враховувати фрагменти початку / завершення.

Усе. Приступаємо до реалізації шарів.

Layer 1

Фон ми вже вибрали. Потрібно розставити зірки. Для цього скористаємося інструментом "Пензлик" (Brush Tool). Натиснувши на нього, підбираємо розмір, образ і колір (світло-жовтий).

Робимо точки.

Layer 2

Щоб створити новий шар, можна скористатися головним меню Insert> Timeline> Layer або просто піднести курсор миші в самому вікні Timeline до першого шару, натиснути праву кнопку. У контекстному меню вибрати пункт Insert Layer. З'явився новий шар. Він активний. Що це означає? Це говорить про те, що на першому шарі ми зараз не працюємо. Тепер потрібен текст.

Напис можна зробити з використанням інструменту "Text" або намалювати від руки.

Увага! Дуже часто зустрічається помилка! Якщо ви використовуєте "Text", то для подальшого відтворення банера він буде сприйматися як текстовий об'єкт, тобто, плеєру повідомляються координати розташування, шрифт, розмір, кодування і т.п., після чого він це відтворює своїми засобами. Якщо у користувача на комп'ютері немає в наявності такого шрифту або навіть стоїть інша кодування, то текст буде перетворений до його стандартам. Я думаю, багато хто бачив, як на банерах виводиться замість слів нісенітниця в іншому кодуванні - причина саме в цьому.

Щоб уникнути цього, а також у випадках використання ексклюзивних шрифтів, зберігайте текст як зображення на прозорому тлі (це можна зробити в будь-якому професійному графічному редакторі). Ми ж намалюємо текст від руки, тобто покажчиком миші, знову ж таки, з використанням інструменту "Пензлик" (Brush Tool). Натиснувши на нього, підбираємо розмір і образ. З фірмовими шрифтами може вийти і красивіше, але ми виберемо мультяшний стиль. Малювати зручніше не на банері, а у вільному просторі над ним в рамках робочої області.

Намалювали, розфарбували. Якщо не вклалися в розміри - не біда, підправимо. Тепер покажчиком миші об'єднуємо / виділяємо всю напис, після чого натискаємо F8. Що нам пропонується зробити в даному випадку? Зберегти всю цю сукупність ліній як один об'єкт. Ми вибираємо варіант Graphic. Тепер напис сприймається як єдине ціле, а об'єкт виділяється синім прямокутником.

Щоб підігнати розміри, використовуйте варіант виділення Free Transform Tool (панель інструментів), в результаті чого рамка стане активною. Ви можете обертати об'єкт, зменшувати / збільшувати по вертикалі або горизонталі, піднімати з однієї зі сторін (для чого піднесіть курсор миші до лінії, а не до квадратику, в результаті з'явиться стрілка).

Все зробили, переносимо об'єкт на банер.

анімуємо

Це питання викликає у новачків складності, але ми пояснимо все просто. Працювати будемо з автоматичною анімацією по ключовим кадрам (keyframes). Це ще повелося з Уолта Діснея. Професійні художники малювали головні (ключові) кадри, а звичайні потім домальовували те, що має відбуватися між ними. Роботу "звичайних художників" виконуватиме Flash.

Отже, ми помістили напис на форму, розрахували, що вся сцена буде триває 132 кадру, знаходимося на другому шарі. Насамперед в Timeline шукаємо 132-й кадр, виділяємо його, натискаємо праву кнопку миші і в контекстному меню вибираємо Insert Keyframe. З'явилася довга сіра смуга - все нормально. Таку ж операцію зробіть і з першим шаром, інакше зірки будуть видні тільки в першому кадрі.

Переходимо назад до Layer 2. За перші 12 кадрів наша напис повинен прилетіти. Тому виділяємо 12-й кадр і таким же чином робимо його ключовим. Він позначився точкою. Тепер переходимо до першого кадру і ставимо напис поверх видимої області банера. Залишилося тільки одну дію. У просторі між 1-м і 12-м кадром натискаємо праву кнопку миші і в контекстом меню вибираємо пункт Create Motion Tween. На сірій смужці з'являється зображення стрілки, а якщо ви перекладете курсор на перший кадр і натиснете клавішу Enter, то відтвориться анімація з прилетающей написом. Все дуже просто. Подальші дії ідентичні. Зробіть, щоб напис танцювала, розтягувалася і стискалася.

ставимо посилання

Після того, як банер готовий, потрібно зробити посилання. Як? Я опишу найпростіший спосіб. Для цього нам знадобиться ще один шар. У ньому поверх всього банера малюємо прямокутник, вибравши відповідний інструмент. Виділяємо цей прямокутник, натискаємо F8, але в даному випадку позначимо об'єкт не як Graphic, як ми робили раніше, а як Button (кнопка). Є. Тепер заходимо в вікно властивостей Properties для цієї кнопки. В поле Instance Name вводимо її назву, наприклад, bt1. У цьому ж вікні властивостей є віконце з списком, що випадає Color, в ньому вибираємо Alpha (прозорість), ставимо її в 0%. В результаті наша кнопка (прямокутник) вже не видно. Тепер натискаємо на перший кадр в Layer3 (вікно Timeline), натискаємо F9. В результаті з'являється вікно Actions, де вводимо наступні рядки:

Як ви можете помітити, посилання в даному випадку веде на сайт "Комп'ютерних Вістей", ви можете поставити свою. Після введення коду на першому кадрі третього шару з'явився значок альфи (це означає, що там є код).

Важливо розуміти: активні елементи в останньому шарі перекривають всі, що знаходиться під ними на нижньому. Якби ми розтягнули кнопку тільки на половину банера, то працювала б тільки ця половина.

На завершення

Експортуєте банер в swf. Усе. В даному матеріалі розказані тільки основи. Ви можете експериментувати з великою кількістю шарів, створювати більш складні сцени і так далі. Зі святами!

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