1. Що необхідно для самостійного створення флеш банера.
2. Створення флеш банера в Adobe Flash Professional.
3. Створення флеш банера в Aleo Flash Intro Banner Maker.
4. Установка флеш банера на сайт WordPress

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

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

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

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

А ще є банери у форматі html5 , Які можна створити в безкоштовному редакторі Google Web Designer. Ці банери теж ефектно виглядають.

Матеріал статті досить об'ємний, тому відразу пропоную подивитися відеоурок, так буде легше розібратися з матеріалом.

Що необхідно для самостійного створення флеш банера.

1. Перш за все, вам знадобиться програма або оплачений рахунок у сервісі по створенню банерів. Як приклад програмного забезпечення розглянемо дві програми Adobe Flash Professional і Aleo Flash Intro Banner Maker.

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

Aleo Flash Intro Banner Maker я вибрав не просто так, на відміну від законодавця моди, ця програма дозволяє створювати банери в лічені хвилини. Досить перемикатися від розділу до розділу і вибирати відповідні ефекти.

1. Також знадобляться графічні заготовки. Ці елементи ви можете підготувати в графічному редакторі. А можете знайти і на просторах інтернету.
2. І третій момент, який не можна забувати - це наявність плану. Добре продуманий план дозволить створити привабливий банер, який зможе привернути увагу відвідувачів.

Створення флеш банера в Adobe Flash Professional.

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

Програма платна, але можна встановити 30 денну безкоштовну версію. Щоб завантажити останню версію програми, потрібно перейти на офіційний сайт Adobe і зареєструватися в Creative Cloud, натиснувши на посилання "Безкоштовна пробна версія». Після реєстрації програма автоматично скочується і буде готова до роботи.

Реєстрація в Adobe

Реєстраційна форма дуже проста.

Заповнення реєстраційної форми

Запустивши програму потрібно вибрати тип робочого документа. Так як в подальшому в банері буде посилання, то відразу можна вибрати «ActionScript 3.0».

Вибір робочого документа

Далі, потрібно вказати розміри майбутнього банера. Для цього на вкладці «Властивість» задайте параметри ширини і висоти.

Вказуємо розмір банера

Для того щоб додати зображення в банер просто перетягніть потрібне зображення з «Провідника» в робочу область програми. Тільки створюйте окремі шари для кожного зображення. Так буде простіше надалі працювати з кожним елементом банера.

Вставляємо зображення в банер

Розмістивши всі елементи банера, можна приступати до створення анімації (руху). В одному уроці неможливо показати всіх можливостей, тому розберемо створення простих рухів.

Наприклад, я хочу, щоб стрілка на фоновому зображенні з'являлася з-поза меж банера.

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

Створення анімації руху

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

траєкторія руху

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

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

Додавання порожнього ключового кадру

Після того як всі елементи налаштовані. Потрібно додати посилання. Як приклад розглянемо створення кнопки і додавання посилання.

Отже, вибираємо зображення кнопки і на закладці «Властивості» задаємо назву, вибираємо тип «Кнопка».

створення кнопки

Тепер прийшов час для створення посилання. Для цього встановлюєте курсор на перший кадр кнопки і натискаєте F9. У вікні, тиснемо на кнопку «Фрагмент коду». У наступному вікні, тиснемо на папку «ActionScript» - «Дії» - «Натисніть для переходу до веб-сторінці».

створення дії

З'явиться вже готовий код, в якому потрібно замінити посилання. Міняєте і закриваєте ці вікна.

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

Перевіряєте роботу банера Ctrl + Enter. І якщо все вас влаштовує. Можна публікувати банер.

Для того щоб зберегти банер і опублікувати його відриваємо пункт меню «Файл» - «Параметри публікації». Далі, вибираєте формати банера і зображень, папку для збереження і задаєте ім'я банера. Після чого тиснете на кнопку «Опублікувати».

Публікація банера в Adobe

Все банер готовий і його можна вставляти на сайт. Але про це після огляду другої програми, в кінці статті.

А так виглядає банер, який я зробив в якості прикладу:

Створення флеш банера в Aleo Flash Intro Banner Maker.

Даний програмний продукт платний. Повна версія коштує 39,95 $. Але, ви можете завантажити і пробну версію. Детальна інформація на офіційному сайті, тут .

Якщо вам необхідно створювати прості flash банери, то це те, що вам потрібно.

Завантаживши пробну версію, після установки програми, при запуску буде з'являтися вікно з пропозицією купити або зареєструвати вашу копію. Для початку роботи з програмою потрібно натиснути на кнопку «Continue Evaluation». Для оцінки можливостей програми у вас є 30 днів.

Запуск пробної версії

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

Насамперед потрібно вибрати розмір банера. Для цього переходите в розділ «Size and sound», де задаєте параметри ширини і висоти в пікселях.

Основні властивості банера

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

Далі, потрібно зробити фон для банера. Для цього відкриваєте розділ «Background», де можна відключити фон, вибрати однотонну або градієнтну заливку. А також вибрати зображення, які будуть представлені фоном для банера.

властивості фону

Для вибору графічних зображень потрібно натиснути на кнопку «Add». Зображень може бути кілька. Також в цьому розділі ви можете налаштувати і позицію кожного зображення.

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

ефекти фону

Якщо ефекти вам не потрібні, просто приберіть галочку «Add background effect» і ефекти зникнуть.

Наступний розділ «Text, image and SWF» дозволяє додавати в банер текст, зображення та інші анімації. Для додавання необхідного елемента потрібно натиснути на відповідні кнопки «Add image», «Add text», «Add SWF».

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

Вставка та налаштування елементів

Посилання ви можете додати на один з елементів банера, для цього в настройках елементів є спеціальна закладка «Web link», а також можете прикріпити посилання на весь банер. Зробити це можна в розділі «Web Links».

створення посилання

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

Після того як елементи банера налаштовані і посилання додана, можна переходити до публікації банера. Для цього відкриваєте розділ «Publish to Banner». І натискаєте на кнопку «Publish». Далі, потрібно вибрати формат банера, в нашому випадку це SWF. Інші параметри можна не чіпати, вони налаштовані оптимально. І для отримання банера натискаєте на кнопку «ОК».

Публікація банера в Aleo

Відразу після публікації ви побачите готовий банер та отримайте код для вставки на сайт. Правда, цей код можна скоротити в два рази. І далі я покажу як.

Код для розміщення банера на сайті

І ось готовий банер:

Установка флеш банера на сайт WordPress

Після того як банер готовий, є файл у форматі SWF. Можна приступати до розміщення банера на сайті.

Насамперед потрібно завантажити файл з банером на ваш хостинг. Зробити це можна через файловий менеджер хостингу або через ftp-з'єднання .

Примітка: при завантаженні через адміністративну панель WordPress з'являється помилка «Вибачте, тип цього файлу не дозволено з міркувань безпеки». Тому завантажуйте одним з вищевказаних способів.

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

Отже, для розміщення банера вам буде потрібно один з цих кодів:

<Object data = "Шлях до файлу / ban.swf" type = "application / x-shockwave-flash" width = "728" height = "90"> <param name = "movie" value = "Шлях до файлу / ban .swf "/> </ object> <embed src =" Шлях до файлу / aleo_ban.swf "type =" application / x-shockwave-flash "width =" 728 "height =" 90 "> </ embed>

Ви повинні змінити шлях до файлу банера і вказати розмір. У прикладі ці місця виділені помаранчевим кольором.

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

Вставка коду до статті

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

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

З повагою, Максим Зайцев .