AdRiver - система управления интернет-рекламой
О компании Вход в систему Справочное руководство Контакты
Рекламным агентствам
Владельцам сайтов
Управление рекламой
Технические требования

PeelDown (уголок)

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

Номер: 36H049.
Краткое описание: баннер, имитирующий отгибание края страницы.
Тип кода: ajax, javascript.
Примеры: PeelDown на коде ajax, PeelDown на коде javascript.
Обсчёт внешними системами: пиксель-аудит в flash-баннерах.
Техническое описание: небольшой баннер, не привязанный к дизайну сайта, имитирующий отгибание края бумаги. Может располагаться в углу экрана браузера. Занимает мало места в свёрнутом состоянии. Когда по нему кликают — разворачивается и демонстрирует большой баннер, закрывая при этом контент страницы. Баннер этого типа состоит из двух flash-роликов. В первом flash-ролике реализуется отгибающийся уголок. Его можно закрыть, если кликнуть по нему, тогда он развернётся до большого баннера. Второй ролик (большой баннер) — свободно растягиваемый flash-ролик. Может быть на весь экран. По нему можно кликнуть и перейти на сайт рекламодателя, можно закрыть.
Другие названия формата: уголок.

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

Подготовьте два flash-ролика.

Первый flash-ролик — сам уголок, который видит посетитель сайта сначала. Размер этого ролика должен быть определён, например 100 px на 100 px (у вас может быть другой размер), он должен быть прозрачным на всей открытой части баннера.

2.1. Flash-ролик для PeelDown на коде javascript

В первый фрейм вашего первого flash-ролика впишите скрипт:

function go_next () {
   getURL("javascript: ar_gonext();")
   }

Далее сделайте элемент button. Для этого элемента напишите следующий скрипт:

on( release ){
_root.go_next()
}

Второй flash-ролик — большой баннер, демонстрирующий рекламную информацию. Он свободно растягивается.

В ПЕРВЫЙ фрейм вашего второго flash-ролика впишите скрипт:

function clk(url) {
	var href = _root.link1;
	if ((typeof (url) != "undefined") && (url != "null")) {
		if (url.toUpperCase().indexOf("HTTP://") == 0) {
			href += escape(url);
		}
	}
	if (_root.target == "_blank") {
		getURL(href, _root.target);
		getURL("javascript: ar_clearall();")
	}
	else {
		getURL("javascript: location.href='"+href+"';");
	}
}
function kill() {
	getURL("javascript: ar_kill();");
}

В самом баннере две активных зоны (их может быть больше, но, как минимум, две).

Переход на сайт рекламодателя — элемент button на нём ActionScript:

on( release ){
_root.clk()
}

Если нужно осуществить переход не на тот адрес, который указан в интерфейсе системы, то впишите необходимый URL в качестве параметра:

on( release ){
_root.clk("http://www.example.com")
}

Кнопка закрытия ролика — элемент button на нём ActionScript:

on( release ){
_root.kill()
}

Кнопка закрытия маленького ролика, при необходимости, делается по такому же принципу.

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

Например:

 _root.ar_comppath + 'flash_name.swf'

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

2.2. Flash-ролик для PeelDown на коде ajax

В первом кадре большого и малого flash-роликов пропишите скрипт:

#include "peelDown.adriver.as"

Когда надо перейти к большому flash-ролику, например, по клику по уголку (малому flash-ролику), пропишите скрипт:

on( release ){
    peelDownNext();
}

Для учёта клика по баннеру, пропишите следующий скрипт для элемента button:

on( release ){
    peelDownClick();
}

Когда надо закрыть большой flash-ролик, то в нужном месте flash-ролика (например в последнем кадре) пропишите скрипт:

peelDownClose();

В большом flash-ролике в том кадре, с которого должна начинаться анимация поставьте метку "start". При открытии большого flash-ролика скрипт будет автоматически слать команду перейти к метке "start".

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

2.3. Скрипт для PeelDown на коде javascript

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

Первый flash-ролик (уголок):

Ширина первого flash-ролика (уголка):

Высота первого flash-ролика (уголка):

Второй flash-ролик:

Ширина второго flash-ролика:

Высота второго flash-ролика:

Версия flash-плагина (необходима версия flash-плагина не ниже восьмой):

Идентификатор блока, к которому будет привязан баннер:

По какому атрибуту искать блок, в котором будет отображаться баннер:

Не скрывать уголок после показа большого баннера:

Вызов стороннего счётчика:

   

Нажмите на кнопку

   

Скрипт для вашего баннера:

Создайте новый текстовый файл. Для этого в операционной системе Windows:

  • нажмите на кнопку Пуск;
  • щелчком мыши последовательно выберите пункты Все программы — Стандартные — Блокнот.

Скопируйте текст скрипта для вашего баннера и вставьте в созданный файл. Сохраните файл с именем script.js.

Пояснения к полям формы.

  • Первый flash-ролик (уголок) — впишите ваше имя файла. Если вы загружаете flash-ролик со стороннего сервера, впишите полный адрес, начинающийся с «http://». В последнем случае, загружать файл через интерфейс системы не нужно.
  • Ширина первого flash-ролика (уголка) — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
  • Высота первого flash-ролика (уголка) — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
  • Второй flash-ролик — впишите ваше имя файла. Если вы загружаете flash-ролик со стороннего сервера, впишите полный адрес, начинающийся с «http://». В последнем случае, загружать файл через интерфейс системы не нужно.
  • Ширина второго flash-ролика — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
  • Высота второго flash-ролика — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
  • Версия flash-плагина — выберите минимальную версию flash-плагина, необходимую посетителю для просмотра flash-роликов. Необходима версия flash-плагина не ниже восьмой (8).
  • Идентификатор блока, к которому будет привязан баннер — впишите id блока или сlassname блока. Если вы хотите, чтобы баннер был привязан к <BODY>, то впишите null.
  • По какому атрибуту искать блок, в котором будет отображаться баннер — выберите id или сlassname блока.
  • Не скрывать уголок после показа большого баннера — выберите Не скрывать, если уголок остается видимым после показа большого баннера или Скрывать, если уголок скрывается после показа большого баннера.
  • Вызов стороннего счётчика — впишите ссылку на пиксель-аудит. Если не нужен, оставьте пустым.

Внимание! Если баннер привязан к блоку, то обязательно указывайте в параметрах блока position: relative или position: absolute, так как баннер позиционируется в правый верхний угол относительно блока.

2.4. Скрипт для PeelDown на коде ajax

Распакуйте пример. Откройте текстовым редактором файл script.js. Внесите изменения в верхнюю часть скрипта, отмеченную как Editable block.

var panels = [
		{swf: 'small.swf', width: '93', height: '200', x: '0', y: '0', align_x: 'right', align_y: 'top', wmode: 'transparent'},
		{swf: 'big.swf', width: '700', height: '700', x: '0', y: '0', align_x: 'right', align_y: 'top', wmode: 'transparent'}
	],
	ar_flashver	 = '8',
	ar_leave	 	 = true, //true - leave corner after click, false - hide
	ar_zeropixel	 = '';

Переменные:

  • swf — имя flash-ролика. Впишите ваше имя файла. Если flash-ролик должен загружаться со стороннего сервера, впишите полный адрес, начинающийся с «http://». В последнем случае, загружать файл через интерфейс системы не нужно.
  • width — ширина flash-ролика.
  • height — высота flash-ролика.
  • x — положение по X.
  • y — положение по Y.
  • align_x — положение на странице по х. Можно указать одно из значений:
    • right — выравнивание по правому краю окна.
    • left — выравнивание по левому краю окна.
  • align_y — положение на странице по y. Можно указать одно из значений:
    • top — выравнивание по верхнему краю окна.
    • bottom — выравнивание по нижнему краю окна.
  • wmode — прозрачность (wmode). Можно указать одно из значений:
    • transparent (прозрачный) — делает прозрачными области flash-ролика, не заполненные графикой, сквозь прозрачный фон видны другие элементы страницы.
    • opaque (непрозрачный) — все области flash-ролика становятся непрозрачными (значение по умолчанию), flash-ролик перекрывает другие элементы страницы.
    • window (в своём окне) — flash-ролик отображается в самом верхнем слое (в собственном окне), независимо от прочего контента на странице.
  • ar_flashver — версия flash-плагина. Выберите минимальную версию flash-плагина, которая необходима посетителю для просмотра вашего баннера.
  • ar_leave — скрывать (false)/не скрывать (true) уголок после показа большого баннера.
  • ar_zeropixel — вызов стороннего счётчика. Если не нужен, оставьте пустым.

Сначала указываются параметры малого flash-ролика, затем большого.

Сохраните файл script.js, баннер готов к загрузке.

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

Последнее обновление: 29.07.2011
← MultiScreen    PictContext →
Поиск