PeelDown (уголок)



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

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

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

Подготовьте два Flash-ролика:

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

2.1. PeelDown на коде JavaScript

2.1.1. Подготовка Flash-ролика


  1. В первом фрейме вашего первого Flash-ролика пропишите следующий код:
    function go_next () {
       getURL("javascript: ar_gonext();")
       }
    
  2. Далее создайте элемент button. Для этого элемента пропишите код:
    on( release ){
    _root.go_next()
    }
    
  3. Подготовьте второй Flash-ролик — большой баннер, демонстрирующий рекламную информацию. Он свободно растягивается.
  4. В первый фрейм вашего второго 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, с кодом:

on( release ){
_root.clk()
}

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

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

Вторая обязательная активная зона – кнопка закрытия ролика — элемент button, с кодом:

on( release ){
_root.kill()
}

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

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

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

 _root.ar_comppath + 'flash_name.swf'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

2.2. PeelDown на коде Ajax

Распакуйте пример.

2.2.1. Подготовка Flash-ролика


  1. Скопируйте файл библиотеки peelDown.adriver.as из распакованного ранее примера
  2. Разместите библиотеку в одной папке с исходными файлами создаваемого баннера (.fla роликами). Файл peelDown.adriver.as обязательно должен находиться в той же папке
  3. В первом кадре большого и малого flash-роликов пропишите скрипт, подключающий скачанную библиотеку:
    #include "peelDown.adriver.as"
    
  4. При компиляции Flash-файлов код библиотеки peelDown.adriver.as подгрузится в файлы роликов
  5. После компиляции полученные Flash-файлы можно загружать в систему (при наличии кликовых кнопок и кнопки закрытия)

Для перехода к большому Flash-ролику (например, при клике по уголку малого Flash-ролика), пропишите скрипт:

on( release ){
    peelDownNext();
}

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

on( release ){
    peelDownClick();
}

Для закрытия большого Flash-ролика в необходимом месте Flash-ролика (например, в последнем кадре) пропишите скрипт:

peelDownClose();

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

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

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

Откройте текстовым редактором файл script.js из скачанного в п. 2.2. архива . Внесите изменения в верхнюю часть скрипта, отмеченную как 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,
	ar_zeropixel	 = '';

Переменные:

swf
имя flash-ролика. Впишите ваше имя файла. Если flash-ролик должен загружаться со стороннего сервера, впишите полный адрес, начинающийся с «http://» или «https://». В последнем случае, загружать файл через интерфейс системы не нужно
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. Загрузка баннера

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

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