Створення Flash банера і gif заглушки

Сьогодні розберемося, як зробити не просто банер, а Rich flash банер з усіма наслідками, що випливають звідси наслідками.

Що ж являє собою Rich-банер (точніше rich media banner)?

rich media banner- це, перш за все, банер має багату медійну можливість (звукові та відео кліпи, інтерактивні ефекти і багато іншого чого немає в звичайних банерах).

Для таких банерів, особливо добре, підходить технологія Adobe Flash.

* В першу чергу ми торкнемося створення простого flash банера і проблемою як його розмістити на веб-сторінці і поставити gif заглушку.

* Ознайомившись трохи з Flash і мовою html, поекспериментуємо з флешварамі (FlashVars).

* Розглянемо, як за допомогою бібліотеки SwfObject поставити банер на веб-сторінку.

* Для любителів великих можливостей, зробимо такий же банер на AS3.

Почнемо!

Зробимо банер з допомогою Macromedia Flash 6-9, Adobe Flash CS3-CS4 (В принципі не критично) за даною схемою.

Создание Flash баннера и gif заглушки

  • geturl_mc - кліп (кнопка) після натискання на яку буде відбуватися перехід за вказаною URL адресою.
  • viewu - динамічний текст, який буде відображати наш URL.
  • close_mc - кліп (кнопка) після натискання на яку наш банер буде закриватися
  • Flash Banners - це просто статичний текст. (Називаємо як душа забажає)

Робота над візуалом закінчена, займемося активним скриптом (ActionScript).

Створюємо новий шар і тиснемо F9 (windows-> Action). Пишемо в вікні,

//Устанавливаем значение для текста(Test url) viewu
viewu.text=”http://www.domain.com”;
//Создаём обработчик событий для geturl_mc. клик по баннеру
geturl_mc.onRelease = function()
{
getURL("http://www.domain.com","_blank");
}
//Создаём обработчик событий для close_mc. закрытие баннера
close_mc.onRelease = function()
{
unloadMovie(_root);
getURL("javascript:kill();", "_self");
}
//Создание баннера на Флеш уровне закончено!

Деякі поястенія до даного скрипту.

getURL ( "http://www.domain.com", "_blank"); - За допомогою даного коду ми робимо навігацію на сайт http://www.domain.com.
unloadMovie (_root); - Вивантажуємо наш банер з пам'яті;
getURL ( "javascript: kill ();", "_self"); -убіраем div підкладку банера c допомогою Java-програми, яку буде описано нижче.

Отже, Компільо і банер готовий! Тепер перейдемо до кульмінації нашого проекту.

Як же вбудувати банер в веб-сторінку?

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

Спеціально для нього робимо gif-заглушку. т.е gif-банер, який буде лежати під флеш (природно про rich media для gif-банера говорити не доводиться).

Gif-заглушку можна зробити знявши скріншот з банера (Alt + Prt Scr) і відредагувати в будь-якому редакторі або отрендеріть (зберегти як картинку) в самому середовищі розробки (В даному випадку використовував середу Macromedia Flash 6-8).

Ось така gif -заглушка вийшла у мене.

Создание Flash баннера и gif заглушки

Коли все готово, складемо все до купи в веб-сторінку (html код).

<!—баннер +gif заглушка -->
<div id="loadruner1">
<object type="application/x-shockwave-flash" height="87" width="398" data="flash.swf">
<param name="movie" value="flash.swf">

<!—подкладываем gif заглушку -->
<a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="398" height="87" alt="" border="0"></a>

</object>
<script>
function kill()
{
document.getElementById('loadruner1').style.display='none';
};
</script>
</div>

Пояснення до html коду!

<div id = "loadruner1"> - це наша підкладка для flash банера c ім'ям "loadruner1"
flash.swf - наш банер
flash1-1.gif - наша gif заглушка
function kill () - ця функція для закриття підкладки і банера в цілому. (виконання її було описано у флеш так getURL ( "javascript: kill ();", "_self");)

В місце document.getElementById ( 'loadruner1'). Style.display = 'none'; Можна використовувати document.all [ 'loadruner1']. Style.display = "none";

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

Для цього я розбив gifку на з частини:

Создание Flash баннера и gif заглушки

І проставив їх в html таким чином. (Html ​​код)

<!—баннер +заглушка-->
<div id="loadruner1">
<object type="application/x-shockwave-flash" height="87" width="398" data="flash.swf">
<param name="movie" value="flash.swf">
<!— заглушка моего типа-->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><img src="close.gif" width="15" height="29" alt="Закрыть" border="0" onclick="document.getElementById('loadruner1').style.display='none';" style="cursor: hand"></td>
</tr>
</table>
<!— заглушка моего типа End-->
</object>
<script>
function kill()
{
document.getElementById('loadruner1').style.display='none';
};
</script>
</div>

Пояснення! Розташування картинок вийшло таке:

Создание Flash баннера и gif заглушки

onclick = "document.getElementById ( 'loadruner1'). style.display = 'none';" -подія для закривання нашого банера (тепер заглушка теж вміє закриватися)

В місце onclick можна використовувати <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (html код заглушки окремо)

<!— заглушка моего типа-->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"><img src="close.gif" width="15" height="29" alt="Закрыть" border="0"></a></td>
</tr>
</table>
<!— заглушка моего типа End-->

Замість document.getElementById ( 'loadruner1'). Style.display = 'none' можна завжди використовувати document.all [ 'loadruner1']. Style.display = "none";

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

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

Для цього ми будемо використовувати флеш змінні FlashVars. Змінні, які ми будемо віддавати нашому банеру із зовні.

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

//объявляем переменную для FlashVars
var genericURL:String;
//Устанавливаем значение для текста(Test url) viewu
viewu.text=genericURL;
//Создаём обработчик событий для geturl_mc. клик по баннеру
geturl_mc.onRelease = function()
{
getURL(genericURL, "_blank");
}
//Создаём обработчик событий для close_mc. закрытие баннера
close_mc.onRelease = function()
{
unloadMovie(_root);
getURL("javascript:kill();", "_self");
}
//Создание банера на Флеш уровне закончено!

І відредагуємо html код.

<!—Баннер + заглушка + FlashVars -->
<div id="loadruner">
<object type="application/x-shockwave-flash" height="87" width="398" data="flash.swf">
<param name="flashVars" value="genericURL=http://www.domain.com" />
<param name="movie" value="flash.swf">

<!—мой тип заглушки -->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><img src="close.gif" width="15" height="29" alt="закрыть" border="0" onclick="document.getElementById('loadruner').style.display='none';" style="cursor: hand"></td>
</tr>
</table>
<!—мой тип заглушки End -->

Ми додали <param name = "flashVars" value = "genericURL = http: //www.domain.com" />

Цей код позваляет перередать в змінну флеша genericURL наш урл адресу.

Тепер можна змінювати директ і текст банера простий правкою цього значення в html.

Деяких людей дратує таке явище, як рамка навколо банера.

Спробуємо позбудеться від неї за допомогою бібліотеки SwfObject.js - Пишемо такий html код:

<!—баннер + заглушка + FlashVars на SwfObject -->
<script type="text/javascript" src="svfobj.js"></script>
<div id="loadruner">

<!—мой тип заглушки -->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><img src="close.gif" width="15" height="29" alt="закрыть" border="0" onclick="document.getElementById('loadruner').style.display='none';" style="cursor: hand"></td>
</tr>
</table>
<!—мой тип заглушки end -->

<script type="text/javascript">
var fo = new FlashObject("flash.swf", "", "398", "87", 8, "");
fo.addParam("wmode", "transparent");
fo.addVariable("genericURL","http://www.domain.com");
fo.write('loadruner');
function kill()
{
document.getElementById('loadruner').style.display='none';
};
</script>
</div>

Тут вже включені FlshVars (fo.addVariable ( "genericURL", "http://www.domain.com");)

І прозорість самої флешки (fo.addParam ( "wmode", "transparent");). При бажанні їх можна прибрати!

Скриптова функція function kill (); була вшита в основний скрипт налаштування SvfObject.

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

+ Для любителів великих можливостей і нових технологій.AS3

AS3 банер

З появою AS3 у флеша з'являються воістину грандіозні можливості.

Спеціально для любителів всього нового той же самий банер, тільки з використанням AS3 (середа Adobe Flash CS3 і Adobe Flash CS4).

AS3 код для банера

//импортируем нужные объекты
import flash.net.*;
//Создаём переменную для FlshVars
var flashvars:String = new String(root.loaderInfo.parameters.genericURL);
//присваиваем мувиклипам свойства кнопок
geturl_mc.buttonMode = true;
close_mc.buttonMode = true;
//присваиваем тексту значение flashvars(наш урл)
viewu.text=flashvars;
//создаём обработчик события CLICK для geturl_mc(кнопка на директ)
geturl_mc.addEventListener(MouseEvent.CLICK, clickHandler);
//Создаём функцию для навигации и события CLICK для geturl_mc
function clickHandler(event:MouseEvent):void
{

navigateToURL(new URLRequest(flashvars), '_self');
}
//создаём обработчик события CLICK для close_mc(кнопка закрыть)
close_mc.addEventListener(MouseEvent.CLICK, closeHandler);
//Создаём функцию для закрытия банера и события CLICK для close_mc
function closeHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest('javascript:kill();'), '_self');
}
//Создание баннера на AS3 уровне закончено!

Ну а далі вставляєте його в веб-сторінку тим же способом, який описаний вище!

Різні аспекти з приводу flash rich media банерів:

* Вимоги до звичайних flash-банерів.

1. версія флеша не вище 7
2. Крім файлу .swf, необхідно підготувати .gif-заглушки, які будуть показуватися користувачам, які не мають можливості переглядати flash-банери.
3. наявність root.link1 (може бути будь-який) в getURL (_root.link1, "_blank");

* Вимоги до rich-media банерів.

1. версія флеша не вище 7
2. gif заглушка обов'язкове
3. обмеження за розміром
4. наявність root.link1 (може бути будь-який) в getURL (_root.link1, "_blank");
5. наявність кнопки "закрити" fscommand ( 'kill', ''); unloadMovie (_root);

Якщо ви збираєтеся використовувати в "Банерна мережах", то варто строго дотримуватися версію флеша для забезпечення кращої сумісності.

На щастя, ActionScript 3.0 навіть у Flash CS3 використовувати необов'язково. Можна обійтися 2.0, в якому все просто і досить надійно.

Але якщо вам, все ж, потрібно використовувати саме третю версію ActionScript, майте на увазі кілька речей.

По-перше, можна підстрахуватися, поставивши: <object type = "application / x-shockwave-flash" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 , 0,0,0 ">.

По-друге, FlashVars вказується за допомогою loaderInfo.parameters посилання буде має такий вигляд root.loaderInfo.parameters.link1 або повністю navigateToURL (new URLRequest (root.loaderInfo.parameters.link1), '_self');

По-третє, для виконання Яваскрипт функції "kill" замість fscommand ( 'kill', '');

Краще використовувати стародавній метод (javascript :) .Код Для кнопки закрити матиме вигляд navigateToURL (new URLRequest ( 'javascript: kill ();'), '_self');

відводи:

Такі елементи як getURL ( "javascript: kill ();", "_self"); і AS3 navigateToURL (new URLRequest ( 'javascript: kill ();'), '_self'); можуть бути заблоковані в браузері флешем, якщо їх запускати локально.

Через політику безпеки деякі функції працюють тільки на сервері.

У нашому випадку кнопка "закрити" (для флеша) локально працювати не буде!

У AS3 зовнішні змінні завантажуються так, root.loaderInfo.parameters.link1.

Де link1 це ім'я змінної.

Замість gif заглушки можна використовувати зображення і в інших форматах (jpg, png, tif, tga, bmp). Просто gif заглушка оптимальна по вазі, адже доводиться завантажувати флеш банер і gif-заглушку.Gif -заглушка повинна бути такого ж розміру, що і флешка.



PDF Tutorial (Flash.pdf) [ PDF Tutorial ] [ PDF Tutorial ] [ PDF Tutorial ] [ PDF Tutorial ]

Вихідні тексти скрипта (flashbaners.rar) [ Вихідні тексти скрипта ] [ Вихідні тексти скрипта ] [ Вихідні тексти скрипта ] [ Вихідні тексти скрипта ]