Створення flash банера в Adobe Flash

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

Перше, що нам необхідно знати і розуміти - це програмне забезпечення, яке нам знадобитися. Всі приклади і зображення бралися з Adobe Flash CS4, яке є в даний час найпопулярнішим засобом для створення flash анімації. Якщо ж ви будите використовувати більш старі версії, наприклад Adobe Flash CS3, немає нічого страшного, просто деякі моменти можуть трохи відрізнятися в версіях, але сподіваюся з цим особливих проблем не буде.

Після запуску самої програми, Adobe Flash нам запропонує вибрати версію мови ActionScript, з якої ми хотіли б працювати. Якщо ви вже знайомі з будь-якої версією мови, слід вибрати її, ми ж спробуємо створити flash банер на платформі мови ActionScript2, тому як сам код кліка по банеру буде набагато простіше і зрозуміліше.

Якщо ви вже знайомі з будь-якої версією мови, слід вибрати її, ми ж спробуємо створити flash банер на платформі мови ActionScript2, тому як сам код кліка по банеру буде набагато простіше і зрозуміліше

Перше, що необхідно зробити - це створити кілька шарів, що можна зробити на панелі внизу. Кнопка зображена на скріншоті. Створюємо стільки шарів, скільки нам знадобитися для створення flash банера для сайту - у мене обрано 3 шару, що для мене цілком вистачить. Кожен шар буде містити своє зображення у форматі .jpg або .gif, які ми вже зарання підготували або створили в Adobe Photoshop (на жаль останнім вже не входить в тематику даної статті, а самі уроки Photoshop можна знайти).

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

Для початку варто виставити ті розміри банера, які нам необхідні.

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

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

Після того як ми закінчили всі налаштування ми вже отримали готовий flash ролик, який вже можна розміщувати на нашому сайту і рекламної майданчику. Єдиним недоліком стане відсутність можливості кликати по банеру і переходити на необхідну сторінку, для чого нам необхідно скористатися мовою програмування ActionScript, підтримка якого вже вбудована в AdobeFlash. Ми будемо використовувати версію мови ActionScript 2, саме тому на початку статті радилося виставити саме цю версію.

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

Після чого натискаємо по самому прямокутнику, що дуже важливо, правою кнопкою миші і вибираємо пункт Actions. Після чого нам відкривається вікно для введення ActionScript коду. Довго думати і пояснювати в даному випадку немає сенсу, ми просто поміщаємо туди ось цей код:

Виглядає це приблизно так:

Звичайно ж, міняємо нашу адресу сторінки, на яку необхідно перекинути користувача і прибираємо атрибут _blank, якщо нам немає необхідності відкривати нову сторінку в новому вікні.

Тепер необхідно перевірити працездатність коду, за що відповідає невелика блакитна галочка трохи вище панелі введення коду. Якщо вилазить позитивне повідомлення про вірність коду, сміливо закриваємо вікно.

Наступним кроком стане компіляція нашого коду, для чого необхідно відкрити пункт «Control -> Test Movie», після чого перед нами з'явиться вікно з програємо нашого flash банера. Тепер при натисканні на сам банер, нас перекине на необхідну сторінку.

Тепер при натисканні на сам банер, нас перекине на необхідну сторінку

Тепер просто зберігаємо наш файл у форматі .swf, що як раз і є «флешкою» і отримуємо готовий банер, який вже можна розміщувати на сторінці. Як бачите, немає нічого складного.

Тепер кожен з вас, хто не мав справу з flash банерами, задумається над питанням як же розмістити його на самій сторінці. Наприклад, вставити в той же шаблон WordPress. Для цього існує спеціальний код, який нам і допоможе.

Де рядок <EMBED src = "banner.swf» відповідає за адреса по якому якраз і розміщений ваш flash файл.

Просто вставляємо даний код в ту частину сторінки, на якій «не вистачає» реклами та отримуємо анімований flash банер. Якщо ж його не видно, то можливо, що у вас просто не встановлений flash player для перегляду анімації. Для цього необхідно його завантажити.

Після чого проблем бути не повинно. Сміливо викладаємо посилання на свої перші роботи в коментарях до статті - це тільки вітається.

Створення відео урок flash банера в Adobe Flash CS4

IRC-сервер - Irc.Online.com.ua

Створення flash банера в Adobe Flash