Як flash-банер зробити посиланням

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

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

У цьому посібнику ми використовуємо Adobe Flash Professional CS5, і в даному випадку ми будемо працювати з банером стандартного розміру 468х60 пікселів.

Запустіть Flash Professional, і побачите те, що зображено на картинці нижче.
Запустіть Flash Professional, і побачите те, що зображено на картинці нижче

Перейдіть в меню File / New from Template, а далі Advertising / 468 x 60 Full Size.

Перейдіть в меню File / New from Template, а далі Advertising / 468 x 60 Full Size

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

У нас з'явиться етап - створіть власне рекламне оголошення (цього ви можете навчитися за допомогою багатьох посібників в інтернеті, це досить просто)

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

Потім виберіть цей шар

Використовуйте інструмент створення прямокутника і намалюйте прямокутник (колір не має значення) розміром більше, ніж саме робочий простір. Це і буде нашою кнопкою.

Це і буде нашою кнопкою

Правий клік по прямокутнику і вибирайте пункт Convert to symbol.

Правий клік по прямокутнику і вибирайте пункт Convert to symbol

В поле Type виберіть Button і тисніть ОК.

В поле Type виберіть Button і тисніть ОК

Зробіть подвійний клік по новій кнопці, щоб відредагувати її. Ви побачите, що тимчасова шкала змінилася на відображення положення кнопки: Up, Over і Down, а також Hit.

Ви побачите, що тимчасова шкала змінилася на відображення положення кнопки: Up, Over і Down, а також Hit

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

Вона прозора, тому ваш банер буде видно

Виберіть Scene 1 для того, щоб перейти до вашого ролика, і побачите щось на кшталт такого.

Виберіть Scene 1 для того, щоб перейти до вашого ролика, і побачите щось на кшталт такого

Тепер нам потрібно просто додати ActionScript, який буде реагувати на кліки. Спочатку нам потрібно налаштувати настройки публікації роликів на використання Flash 9 і ActionScript 2 - це буде простіше, ніж використовувати останні версії і, до того ж, це дасть нам кращу сумісність. Клацніть по порожній частині робочої області і поміняйте налаштування публікації, як показано з правого боку вікна.

Клацніть по порожній частині робочої області і поміняйте налаштування публікації, як показано з правого боку вікна

Клацніть по вашій кнопці для того, щоб вибрати її, і натисніть F9 для того, щоб побачити вікно ActionScript.

Вставте цей код в вікно:

on (release) {if (_root.targetURL.substr (0,5) == "http:") {getURL (_root.targetURL); } Else {getURL ( "http://www.default-url-here.com"); }}

Це повідомляє Flash про необхідність отримати URL, на який потрібно перейти, з HTML-параметра під назвою targetURL, який визначається разом з іншими параметрами, використовуваними для вбудовування флеш банера. Якщо код тут не зможе знайти нічого корисного, то він просто звернеться до заздалегідь виставленому URL.

Використовуйте getURL (_root.targetURL, "_blank") ;, якщо вам потрібно відкрити посилання в новому вікні, але це вікно може бути заблоковано вбудованими антивірусами або плагінами браузерів.

Тепер вам потрібно опублікувати ролик, який просто вибирається з меню File.

Тепер наша робота з Flash Professional завершена - і останнє, що нам залишилося зробити, це відредагувати HTML таким чином, щоб в ньому був URL, на який повинен посилатися ваш ролик. Ви також можете додати його до коду публікації, наданому в HTML-файлі, який був створений Flash Professional, або ви можете використовувати SWFObject.

Стандартний код, створений Flash Professional

Додайте його в кожен тег object

Щоб весь ваш блок виглядав наступним чином.

<Div id = "flashContent"> <object id = "flash-test" classid = "clsid: d27cdb6e-ae6d-11cf-96b8-444553540000" width = "468" height = "60" align = "middle"> <param name = "movie" value = "flash-test.swf" /> <param name = "quality" value = "high" /> <param name = "bgcolor" value = "# ffffff" /> <param name = " play "value =" true "/> <param name =" loop "value =" true "/> <param name =" wmode "value =" window "/> <param name =" scale "value =" showall "/ > <param name = "menu" value = "true" /> <param name = "devicefont" value = "false" /> <param name = "salign" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "flashvars" value = "targetURL = http: //www.your-url.com" /> <! - [if! IE]> -> <object width = "468" height = "60" data = "flash-test.swf" type = "application / x-shockwave-flash"> <param name = "movie" value = "flash-test.swf" /> <param name = "quality" value = "high" /> <param name = "bgcolor" value = "# ffffff" /> <param name = "play" value = "true" /> <param name = "loop" value = "true" /> < param name = "wmode" value = "window" /> <param name = "scale" v alue = "showall" /> <param name = "menu" value = "true" /> <param name = "devicefont" value = "false" /> <param name = "salign" /> <param name = "allowScriptAccess "value =" sameDomain "/> <param name =" flashvars "value =" targetURL = http: //www.your-url.com "/> <! - <! [endif] -> <a href = "http://www.adobe.com/go/getflash"> <img src = "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt = "Get Adobe Flash player" / > </a> <! - [if! IE]> -> </ object> <! - <! [endif] -> </ object> </ div>

Якщо ви використовуєте SWFObject, то він повинен виглядати наступним чином

<Script src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type = "text / javascript"> <! - mce: 0 -> </ script> < script type = "text / javascript"> <! - mce: 1 -> </ script>

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

Також можете подивитися відео-інструкцію, але вона може трохи відрізнятися від описаного в статті:

Олексій Повловскій

Як зробити так, щоб по Flash-банера можна було клікнути?