Rich-media

1. Карточка баннера

2. Подготовка баннера

2.1. Flash Rich-Media на коде JavaScript

2.1.1. Flash-ролик на ActionScript 2

В каждом Flash-ролике обязательно должна быть кнопка закрыть, причем она должна появляться как можно ближе к началу, чтобы всегда была возможность закрыть ролик, даже если он проигран не полностью.

Если пользователь нажимает на кнопку закрыть, или показ ролика прекращается по каким-либо другим причинам, то в систему передается команда kill с параметром номер_текущего_ролика. Это номер ролика, в котором произошло нажатие на кнопку. Если ролик всего один, то всё равно нужно указывать его номер — 0 (ноль). Пример:

getURL('javascript:fl_Command("kill",0)');

Если после завершения каждой части Flash-ролика (таймаут, конец ролика или действие пользователя) необходимо запустить следующую (произвольную) часть ролика, то в управляющий скрипт нужно передать команду start c параметром номер_ролика.

Важно: Передача осуществляется двумя аргументами — отдельно команда, отдельно номер ролика. Ролики нумеруются в порядке загрузки, первый ролик имеет номер 0 (ноль).

Пример: команда для запуска второго ролика.

getURL('javascript:fl_Command("start",1)');

Примечание: Используйте только одну команду. Например, если надо открыть вторую часть ролика, то не надо сначала делать kill, а потом start — управляющий скрипт всё сделает сам.

Когда пользователь кликает по области, с которой происходит переход на сайт рекламодателя, ролик передаёт следующие команды:

getURL(_root.link1,  "_blank");
getURL('javascript:fl_Command("kill",0)');

Элементов типа button может быть несколько. В зависимости от того, на какой из элементов кликнули, посетитель может быть направлен на разные адреса. В этом случае можно явно указать, на какой адрес должен быть направлен посетитель. Этот адрес необходимо обязательно кодировать функцией escape(). Например:

getURL(_root.link1+escape("http://alternative.url.to.go/path?search#hash"),  "_blank");
var id:Number;
       id = setInterval(function ()
       {
        clearInterval(id);
        getURL('javascript:fl_Command("kill",0)');
       }, 300);

2.1.2. Flash-ролик на ActionScript 3

Команда для элемента button для учёта клика:

function callLink(event:MouseEvent):void {
     try {
        var ie:String = ExternalInterface.call("function(){return !!window.ActiveXObject}");
         var url:String = LoaderInfo(this.root.loaderInfo).parameters['link1'];
         if(ie)ExternalInterface.call('window.open',url);
        else navigateToURL(new URLRequest(url), '_blank');

        ExternalInterface.call("fl_Command", "kill", 0);
     }catch (e:Error){}
}
click_button.addEventListener(MouseEvent.CLICK, callLink)

Команда для кнопки закрытия:

flash.external.ExternalInterface.call("fl_Command", "kill", 0); 

Пример команды запуска второго ролика:

flash.external.ExternalInterface.call("fl_Command", "start", 1);

Элементов типа button может быть несколько. В зависимости от того, на какой из элементов кликнули, посетитель может быть направлен на разные адреса. В этом случае можно явно указать, на какой адрес должен быть направлен посетитель.

В описании каждой кнопки для перехода по альтернативной ссылке нужно прописать следующий скрипт:

import flash.utils.*;
var id:uint;
function callLink(event:MouseEvent):void {
	var url:String LoaderInfo(this.root.loaderInfo).parameters['link1'];
	var url1:String = 'http://alternative.url.to.go/path?search#hash';
	if (url1 && url1 != ''){
		if(!url || url == '') url = url1;
		else url += escape(url1);
	}
	try {
		var ie:String = ExternalInterface.call("function(){return !!window.ActiveXObject}");
	 	if(ie)ExternalInterface.call('window.open',url);
		else navigateToURL(new URLRequest(url), '_blank');
		id=setInterval(kill, 300);
		
	}catch (e:Error){}
}
btn.addEventListener(MouseEvent.CLICK, callLink);

function kill():void {
	ExternalInterface.call("fl_Command", "kill", 0);
	clearInterval(id);
	}

Баннер готов к загрузке.

Размер загружаемых файлов должен соответствовать спецификации.

2.2. Flash Rich-Media на коде Ajax

2.2.1. Flash-ролик на ActionScript 2

1. Скачайте библиотеку rich.adriver.as
2. Разместите ее в одной папке с исходным файлом создаваемого баннера (.fla роликом). Файл rich.adriver.as обязательно должен находиться в той же папке
3. В первом кадре Flash-ролика пропишите скрипт, подключающий скачанную библиотеку:

   #include "rich.adriver.as"

4. При компиляции Flash-файла код библиотеки rich.adriver.as подгрузится в файл
5. После компиляции полученный Flash-файл можно загружать в систему (при наличии кнопки закрытия и кнопки клика).

Для кнопки закрытия пропишите следующий скрипт:

on (release) {
    richClose();
}

Если после завершения каждой части Flash-ролика (таймаут, конец ролика или действие пользователя) необходимо перейти к следующей панели (например, в последнем кадре), то используйте следующий скрипт:

richNext();

В описании кнопки клика пропишите следующий скрипт:

on (release) {
    richClick();
} 

Элементов типа button может быть несколько. В зависимости от того, на какой из элементов кликнули, посетитель может быть направлен на разные адреса. В этом случае можно явно указать, на какой адрес должен быть направлен посетитель.

В описании каждой кнопки для перехода по альтернативной ссылке нужно прописать следующий скрипт:

on (release) {
	var id:Number;
       id = setInterval(function ()
       {       
        clearInterval(id);
	richClick("http://alternative.url.to.go/path?search#hash");	
       }, 300);	
}

Баннер готов к загрузке.

Размер загружаемых файлов должен соответствовать спецификации.

2.2.2. Flash-ролик на ActionScript 3

1. Скачайте библиотеку RichMedia_ajaxAS3.0
2. Разместите файл rich.adriver.as в одной папке с исходным файлом создаваемого баннера (.fla роликом). Файл rich.adriver.as обязательно должен находиться в той же папке
3. В первом кадре Flash-ролика пропишите скрипт, подключающий скачанную библиотеку:

   #include "rich.adriver.as"

4. При компиляции Flash-файла код библиотеки rich.adriver.as подгрузится в файл
5. После компиляции полученный Flash-файл можно загружать в систему (при наличии кнопки закрытия и кнопки клика).

Для кнопки закрытия пропишите следующий скрипт:

close_button.addEventListener(MouseEvent.CLICK,closeHandler);
function closeHandler(e:MouseEvent):void
{richClose();}

В описании кнопки клика пропишите следующий скрипт:

click_button.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(e:MouseEvent):void
{richClick();}

Баннер готов к загрузке.

Размер загружаемых файлов должен соответствовать спецификации.

Примечание: Следует помнить, что ActionScript3.0 – это объектно ориентированный язык. Все обращения к объектам происходят по имени экземпляра. В коде для кнопки из наших ТТ слушателем события CLICK является экземпляр с именем click_button. Это имя взято для примера. Необходимо, чтобы имя экземпляра (instancename) совпадало с именем, указанным в коде. Для того, чтобы флэшка скомпилировалась без ошибок, необходимо указать в свойстве instancename экземпляра объекта значение click_button. Аналогичные правила действуют и для кнопки закрыть.

2.3. HTML Rich-Media

В HTML-креативах необходимо подключить файл html.js:

<script type="text/javascript" src="//content.adriver.ru/html.js"></script>

Ниже подключения файла html.js вставьте следующий код для HTML-креатива:

<script type="text/javascript">
	function ar_postMessage(command){parent.postMessage('{"id":"' + ar_bid + '","command":"' + command + '"}', '*');}
</script>

Для кликовой кнопки пропишите следующий код:

ar_callLink({event: event});
ar_postMessage('close');

Для кнопки закрытия, если она реализована, пропишите следующий код:

ar_postMessage('close');

Указанный код должен вызываться при клике по соответствующим элементам.

2.4. Подготовка Flash-ролика для конвертации в Swiffy

2.4.1. Креатив с кнопкой Закрыть

Flash-ролик на ActionScript 2

Для кликовой области пропишите код:

on (release){
	getURL(_root.link1,  "_blank");
	getURL('javascript:ar_postMessage("close")', '_iframe_'+ _root.ar_bid);
}

Для кнопки Закрыть пропишите код:

on (release) {
	getURL('javascript:ar_postMessage("close")', '_iframe_'+ _root.ar_bid);
}

Flash-ролик на ActionScript 3

Для кликовой области пропишите код:

function callLink(event:MouseEvent):void {	
	var url:String = LoaderInfo(this.root.loaderInfo).parameters['link1'];
	try {
		var ie:String = ExternalInterface.call("function(){return !!window.ActiveXObject}");
		if (ie == "true") ExternalInterface.call('window.open',url);
		else navigateToURL(new URLRequest(url), '_blank');
	}catch (e:Error){
		navigateToURL(new URLRequest(url), '_blank');
	}
	
        var ar_bid:String = LoaderInfo(this.root.loaderInfo).parameters['ar_bid'];
	navigateToURL(new URLRequest('javascript:ar_postMessage("close")'), '_iframe_'+ ar_bid);
}
click_button.addEventListener(MouseEvent.CLICK, callLink);

Для кнопки Закрыть пропишите код:

function closeLink(event:MouseEvent):void {
	var ar_bid:String = LoaderInfo(this.root.loaderInfo).parameters['ar_bid'];
	navigateToURL(new URLRequest('javascript:ar_postMessage("close")'), '_iframe_'+ ar_bid);
}
close_button.addEventListener(MouseEvent.CLICK, closeLink);

После конвертации Flash-ролика в HTML-креатив с помощью Swiffy, HTML-креатив нужно подготовить для загрузки в систему следующим образом:

1. Откройте текстовым редактором полученный в результате конвертации HTML-файл
2. Подключите в HTML-файле плагин html.js удобным для вас способом:
   • Если файлы баннера будут загружены в Адривер, используйте для подключения следующий код:

     <script src="/html.js"></script>

   • Если HTML-файл баннера размещен на стороннем сервере, укажите полный путь до плагина html.js

     <script src="//content.adriver.ru/html.js"></script>

     Примечание: Не рекомендуется указывать протокол в явном виде (http или https), символы // в начале абсолютного пути позволят определить протокол автоматически.

3. Ниже кода, подключающего плагин html.js, добавьте следующий код:

   <script type="text/javascript">
   	function ar_postMessage(command){parent.postMessage('{"id":"' + ar_bid + '","command":"' + command + '"}', '*');}
   </script>

4. Объявите переменную link1 следующим образом:

   var link1 = encodeURIComponent(ar_redirect);

5. После вызова функции stage.start() добавьте следующий код:

   stage.setFlashVars('link1='+link1);

6. Ниже добавьте следующий код:

   stage.setFlashVars('ar_bid='+ar_bid);

2.4.2. Креатив без кнопки Закрыть

HTML-креатив, полученный в результате конвертации подготовленного Flash-ролика без кнопки Закрыть, редактируется аналогично п. 2.4.1, код для кнопки Закрыть не используется.

При загрузке такого креатива в систему в форме закачки необходимо поставить галку Использовать стандартную кнопку закрытия. Кнопка Закрыть будет добавлена в креатив автоматически (красный крестик в правом верхнем углу креатива).

3. Загрузка баннера

1. Добавьте баннер:
   • для баннеров на коде Ajax — special—>AjaxJS—>Rich-Media-AjaxJS
   • для баннеров на коде JavaScript — special—>javascript—>rich-media
2. Укажите ссылку на сайт рекламодателя в поле Линк Баннера. При необходимости, укажите другие параметры.
3. Нажмите на кнопку Добавить баннер. Вы попадете на страницу редактирования параметров баннера.
4. Включите баннер (галочка Вкл.), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных настроек нажмите на кнопку Сохранить.
5. Кликните по ссылке Загрузить баннер. Заполните форму:

   

   Описание полей:

6. После заполнения формы нажмите Загрузить

4. Полезные ссылки

• Типы кодов в AdRiver
• Баннер CatFish