Rich-media



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

Описание:
интерактивные Flash-ролики или HTML-креативы, отображающиеся поверх страницы.
Тип кода:
Ajax, JavaScript.
Подробнее:
интерактивные Flash-ролики или HTML-креативы, отображающиеся поверх содержимого страницы. Классический Flash Rich-Media состоит из трёх Flash-роликов: тизера, ремайндера и основного ролика. В инструкции рассмотрено изготовление баннера, состоящего из двух Flash-роликов.

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. Кликните по ссылке Загрузить баннер. Заполните форму:

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

Flash-клип
файл Flash-клипа
HTML
файл HTML-креатива (HTML-креатив перезаписывает Flash-клип, если тот загружен)
Ширина
ширина креатива в пикселях
Высота
высота креатива в пикселях
Абсолютное положение по X в px
абсолютное положение креатива по горизонтали в пикселях
Абсолютное положение по Y в px
абсолютное положение креатива по вертикали в пикселях
Относительное положение по X
относительное положение креатива по горизонтали в пикселях
Относительное положение по Y
относительное положение креатива по вертикали в пикселях
Прозрачность (wmode)
поле заполняется при загрузке Flash-креатива. Указывается одно из стандартных значений: transparent – прозрачный, opaque – непрозрачный, window – в своём окне
Использовать стандартную кнопку закрытия
галка имеет отношение к HTML-креативу. Если галка включена, поверх HTML-креатива будет добавлена стандартная кнопка закрытия (красный крестик, расположенный в правом верхнем углу креатива). Если кнопка закрытия уже реализована в загружаемом HTML-креативе, галку ставить не нужно
Версия Flash-плеера
поле заполняется при загрузке Flash-креатива. Указывается версия Flash-плеера, необходимая пользователю для просмотра ролика
Вызов стороннего счетчика/ов
ссылка на сторонний счетчик, если нужен. Если необходимо указать несколько ссылок для счетчиков, нажмите еще под соответствующим полем. При указании ссылок следуйте инструкции
Дополнительная компонента
вы можете загрузить дополнительные файлы баннера, выбрав их с помощью кнопки Обзор
  1. После заполнения формы нажмите Загрузить

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