Мультипанельные баннеры (MPU, FlyScreen, OverLay)

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

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

2.1. Подготовка мастера

Скачайте пример комплекта файлов.

Сохраните в одну папку файл master1.as и исходники мастера (файлы master.fla, master.flv).

В первый фрейм мастера пропишите следующий код:

#include "master1.as" 

function startScene(panel, sync) { 
	switch (sync) { 
	  case "showPanel1" : 
		showPanel("panel1"); 
		sendToPanel("panel1","go","start"); 
		        break; 
	  case "showPanel2" : 
		showPanel("panel2"); 
		sendToPanel("panel2","go","start"); 
		        break; 

	  case "hidePanel1" : 
		hidePanel("panel1"); 
		       break; 
	  case "hidePanel2" : 
		hidePanel("panel2"); 
		       break; 
		} 
	} 

function initDone() { 
	  sendEvent(0); 
	  showPanel("panel1"); 
	  sendToPanel("panel1","go","start"); 
	} 

registerMaster(initDone,startScene,["panel1", "panel2"]); 
stop();

Описание:

Для создания собственного сценария взаимодействия панелей используйте команды showPanel, hidePanel, sendToPanel.

Иногда требуется учитывать разные события в баннере, например, загрузку видео, открытие вкладки и т.д. Всего доступно 10 событий с номерами от 0 до 9. Событие ноль (0) является служебным и сообщает о том, что ролик готов к воспроизведению. Перед тем, как регистрировать события 1 — 9, необходимо зарегистрировать событие ноль (0). Обычно это делается в функции initDone. Для регистрации событий используется команда sendEvent(eventId). Если учитывать события не планируется, то команду sendEvent(0) в функции initDone можно не использовать.

Подробнее об учёте событий в баннерах.

2.2. Подготовка панелей

Сохраните в одну папку файл panels1.as и исходники всех панелей.

При начальной загрузке панелей слои, в которые они загружены, открыты (значение visible), поэтому первый кадр панели обычно делается прозрачным.

В первом кадре Flash-ролика каждой панели пропишите команды:

#include "panels1.as"

registerPanel("panel1");	// регистрируем панель, сообщая мастеру её id
stop();				// останавливаемся и ждем дальнейших команд от мастера

panel1 – это имя панели, которое указывается в управляющем файле script.js и в мастере для отправки команд этой панели.

Чтобы сообщить мастеру о том, что нужно переходить к следующему этапу, пропишите в нужном кадре панели следующий код:

_root.sendSync("hidePanel1");
_root.sendSync("showPanel2");   // перейти ко второй панели 
stop();

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

#include "master1.as"

_root.deb.text = "";

var k=3; // количество показов 
var i=0;

function debug(txt){
    trace(txt);
    _root.deb.text += txt + "n";     
}
function startScene(panel, sync){
     debug ("received: " + sync + " from: " + panel);
     switch (sync){
         case "showPanel2": 		//пришла метка showPanel2
	     if (i<k) {
                showPanel("panel2");     //показать второй элемент panel
                sendToPanel("panel2","go","start");
                                         //просим второй элемент panel перейти к метке start
                } i++;
	     break;
        case "playPanel1": 
             sendToPanel("panel1", "go", "continue");
             break;
        case "hidePanel2":		//пришла метка hidePanel2
             hidePanel("panel2");	//прячем второй элемент panel
	     break;
	}	
}
function initDone(){
       debug ("initDone");
	sendEvent(0);		        //сообщить системе AdRiver, что ролик полностью загружен
	hidePanel("panel2");	        //спрятать элемент panel2
	showPanel("panel1");	        //открыть элемент panel1
	sendToPanel("panel1","go","start");	
                                        //просим первый элемент panel перейти к метке start. 
}
registerMaster(initDone, startScene, ["panel1", "panel2"]);
stop();                                 //Останавливаемся и ждем, пока все панели загрузятся

Для учёта клика создайте в нужном кадре Flash-ролика элемент button, для которого напишите следующий код:

on (release) {
 _root.makeClick()
}

Эта функция может также использоваться с параметром – альтернативным адресом перехода: _root.makeClick(“http://www.example.com”) , где http://www.example.com – адрес перехода.

Если вы хотите подгружать в Flash-ролик дополнительные части, загруженные в баннер, то необходимо дописать к имени подгружаемого компонента перeменную _root.ar_comppath.

Например, для Flash-файлов:

_root.ar_comppath + 'flash_name.swf'

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

3.1. Подготовка мастера

Скачайте пример комплекта файлов.

Сохраните в одну папку исходники всех Flash-роликов и папку adriver, содержащую библиотеки masterAS3.as и panelsAS3.as.

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

import adriver.masterAS3;

var my_adriver:masterAS3 = new masterAS3(this);
my_adriver.startScene = function(panel, sync){
	with(this){
		switch(sync){
			case "showPanel1":
				showPanel("panel1");
				sendToPanel("panel1", "go", "start");
				break;
			case "showPanel2":
				showPanel("panel2");
				sendToPanel("panel2", "go", "start");
				break;
			case "hidePanel1":
				hidePanel("panel1");
				break;
			case "hidePanel2":
				hidePanel("panel2");
				break;
		}
	}
}
my_adriver.initDone = function(){
	with(this){
		sendEvent(0);
		showPanel("panel1");
		sendToPanel("panel1", "go", "start");
	}
}

Описание:

Для создания собственного сценария взаимодействия панелей, используйте команды showPanel, hidePanel, sendToPanel.

Иногда требуется учитывать разные события в баннере, например, загрузку видео, открытие вкладки и т.д. Всего доступно 10 событий с номерами от 0 до 9. Событие ноль (0) является служебным и сообщает о том, что ролик готов к воспроизведению. Перед тем, как регистрировать события 1 — 9, необходимо зарегистрировать событие ноль (0). Обычно это делается в функции initDone. Для регистрации событий используется команда sendEvent(eventId). Если учитывать события не планируется, то команду sendEvent(0) в функции initDone можно не использовать.

Подробнее об учёте событий в баннерах.

3.2. Подготовка панелей

При начальной загрузке панелей слои, в которые они загружены, открыты (значение visible), поэтому первый кадр панели обычно делается прозрачным.

В первом кадре Flash-ролика каждой панели пропишите команды:

import adriver.panelsAS3;
var my_adriver:panelsAS3 = new panelsAS3('panel1', this);
stop();

panel1 – это имя панели, которое указывается в управляющем файле script.js и в мастере для отправки команд этой панели.

В панелях вызов команд осуществляется следующим образом:

my_adriver.sendSync("showPanel2");

Для учёта клика создайте в нужном кадре Flash-ролика элемент button, для которого напишите следующий код:

function cl(event:MouseEvent):void {
	 my_adriver.makeClick();
}
_click.addEventListener(MouseEvent.CLICK, cl);

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

my_adriver.ar_comppath + 'flash_name.swf'

Вызов событий в панелях осуществляется следующим образом:

my_adriver.sendEvent(2);

где 2 – это пример отправляемого номера события.

4. Подготовка скрипта

Откройте текстовым редактором файл script.js.

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

var ar_gif	      = '0.gif';
var ar_gif_href	  = '';
var ar_pix	      = '';

Переменные:

Дополнительные переменные, которые можно редактировать:

var m_html  = a.makeFlash('master.swf'),
    p1_html = a.makeFlash('panel1.swf', {wmode: 'transparent'}),
    p2_html = a.makeFlash('panel2.swf');
			
a.MPU.addPanel("master", {width:"240px", height:"400px"}, m_html);
a.MPU.addPanel("panel1", {width:"800px", height:"400px", position:"absolute", left:"0px", top:"0px", zIndex:2}, p1_html);
a.MPU.addPanel("panel2", {width:"240px", height:"400px", position:"absolute", left:"0px", top:"0px", zIndex:1}, p2_html);

a.p.innerHTML = a.makeImage(ar_gif, ar_gif_href, 240, 400);

Переменные:

При необходимости, измените другие параметры отображения баннера: position, zIndex.

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

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

1. Подготовьте баннер согласно п. 2 или п. 3, а также п. 4 инструкции.
2. Добавьте баннер special—>AjaxJS—>Generic AjaxJS
3. Укажите ссылку на сайт рекламодателя в поле Линк Баннера. При необходимости, укажите другие параметры.
4. Нажмите на кнопку Добавить баннер. Вы попадете на страницу редактирования параметров баннера.
5. Включите баннер (галочка Вкл.), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных настроек нажмите на кнопку Сохранить.
6. Кликните по ссылке Загрузить баннер.
7. Выберите с помощью кнопки Обзор все файлы баннера – подготовленный в п.4 файл script.js, флэш-файлы мастера и панелей, а также заглушку.
8. Нажмите на кнопку Загрузить.

6. Проверка работоспособности

1. Скачайте страничку для тестирования на веб-сервере.
2. Распакуйте LocalTest.zip и скопируйте в эту папку креативы баннера (все .swf файлы), а также заглушку .gif
3. Откройте файл index.html через ваш локальный веб-сервер. Баннер должен показываться корректно, согласно задуманной логике взаимодействия, наложениям, таймингам, позиционированию панелей относительно друг друга и т.п.
4. Кликните по баннеру, если происходит переход на сайт клиента или другой сайт, значит клик прописан неправильно.

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

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

• Типы кодов в AdRiver