MPU-баннер, меняющий фон страницы

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

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

2.1. Мастер

1. Скачайте пример комплекта файлов.
2. Сохраните в одну папку файл master1.as и исходники мастера.
3. В первый фрейм мастера пропишите следующий код:

   #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("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(); //Останавливаемся и ждем, пока все панели загрузятся

В нужном месте панели, где происходит смена фона страницы пропишит следующий код:

_root.sendToJS('showBG', 'panel1', n);

где n – порядковый номер фонового рисунка, начиная с 0.

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

on (release) {
 _root.makeClick()
}

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

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

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

 _root.ar_comppath + 'flash_name.swf'

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

2.3. Скрипт

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

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

var ar_gif		     = '0.gif';
var ar_gif_href		 = '';
var ar_pix		     = '';
var ar_content_width = 995;
var ar_bg_images	 = ["sf_banner_Brasil_woman.jpg", "sf_banner_Thailand_woman.jpg", "sf_banner_tibet_woman.jpg"];
var ar_bg_colors	 = ["#66cbdf", "#f4e3d1", "#296e69"];

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

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);

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

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

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

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

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

1. Страничка для тестирования на веб-сервере.
2. Откройте тестовую страничку в браузере. Баннер должен показываться корректно, согласно задуманной логике взаимодействия, наложениям, таймингам, позиционированию панелей относительно друг друга и т.п.
3. Кликните по баннеру, если происходит переход на сайт клиента или другой сайт, значит клик прописан неправильно.

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

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

• Типы кодов в AdRiver
• Мультипанельные баннеры