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 удобным для вас способом:
    • Если файлы баннера будут загружены в Адривер, используйте для подключения следующий код: