BannerLine
HTML5(Swiffy)/flash/image

"Английская версия"

Описание

BannerLine - баннер, который отображается поверх контента страницы, как фиксированная перетяжка, которая располагается на заданную высоту/ширину экрана, при скроллинге не изменяет своего положения. Расположение баннера может быть зафиксировано относительно экрана в четырех направлениях внизу экрана, вверху, слева и справа.
Формат предполагает использование либо одного креатива, либо двух, когда нужен расхлоп. Расхлоп до креатива №2 происходит при наведении курсора мыши на креатив №1 без задержки (на десктопе), либо при таче по креативу №1 (на мобильной платформе). В случае расхлопа у креатива №2 может быть расположена кнопка "Закрыть", при клике на которую баннер исчезает со страницы. В случае отсутствия расхлопа кнопка закрыть может быть расположена у креатива №1.
На мобильной платформе кнопка "Закрыть" присутствует всегда либо у креатива №1 (без расхлопа), либо у креатива №2 (с расхлопом).

В баннер можно добавить от одного до трех типов креатива (HTML5(Swiffy)/flash/image). Каждый из типов креатива может быть заведен как самостоятельный фон или выступать в качестве заглушки для другого типа креатива.

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

- Если в браузере есть поддержка HTML5, тогда в приоритете покажется swiffy-креатив;
- Если браузер не поддерживает HTML5 или креатив swiffy не добавлен в параметрах баннера - будет показываться flash-креатив;
- Если в браузере заблокирован флеш плагин или в параметрах не добавлен flash-креатив - покажется изображение.

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

При клике по баннеру происходит переход на сайт рекламодателя. В баннере может быть несколько кнопок для перехода, ведущих на разные страницы.

Внимание, прекращена поддержка сервиса Swiffy. Новые SWF файлы сконвертировать в HTML5 код нельзя. Но ранее сконвертированные файлы будут продолжать работать.

Подготовка (для разработчиков)

1. Подготовка изображения

Подготовьте изображение (*.jpg, *.png, *.gif) с нужными размерами.

Требования к файлам

Ограничение на размер:
- Графические файлы (*.jpg, *.png, *.gif) — до 300 Кб.

Для загрузки в баннер файлов, свыше указанных ограничений предусмотрено специальное поле с пометкой (URL), в котором указывается полный путь к файлу, расположенному на стороннем сервере.

Названия файлов:
Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек, тире и специальных символов.


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

Что необходимо подготовить:

Flash-баннер (*.swf), размером до 300Кб;

Требования к файлам

Ограничение на размер:

  • Swf-файлы (flash-ролики *.swf) — до 300 Кб.

Для баннеров, состоящих из нескольких файлов, ограничения проверяются отдельно для каждого файла.

Для загрузки в баннер файлов, свыше указанных ограничений предусмотрено специальное поле с пометкой (URL), в котором указывается полный путь к файлу, расположенному на стороннем сервере.

Названия файлов:   Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек, тире и специальных символов.


Подготовка flash-баннера на ActionScript 3.0 с расхлопом

Требования к среде разработки: ActionScript 3.0 и FlashPlayer не ниже 9.0

Flash-ролик №1:

1. Создайте верхний слой.
2. Скопируйте код и вставьте его в первый кадр главного таймлайн:

import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 1);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Flash-ролик №2:

1. Создайте верхний слой и разместите в нем прозрачную кнопку для перехода на сайт, которой присвойте имя экземпляра (Instance Name)btn
2. Скопируйте код и вставьте его в первый кадр главного таймлайн:

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

btn.addEventListener(MouseEvent.CLICK, adFoxClickHandler); //для перехода

function adFoxClickHandler(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.af_link), flashVars.af_target); //для перехода
} //для перехода

if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 2);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Подготовка flash-баннера на ActionScript 3.0 без расхлопа

Требования к среде разработки: ActionScript 3.0 и FlashPlayer не ниже 9.0

Flash-ролик №1:

В ролике обязательно должен присутствовать следующий код:

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

btn.addEventListener(MouseEvent.CLICK, adFoxClickHandler); //для перехода

function adFoxClickHandler(evt:MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.af_link), flashVars.af_target); //для перехода
} //для перехода

if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function () {
        var status = ExternalInterface.call("af_bannerLineGetStatus_"+flashVars.af_rnd, 1);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Для создания нескольких кнопок перехода

Создание flash-ролика на ActionScript 3.0

Требования к среде разработки: ActionScript 3.0 и FlashPlayer не ниже 9.0

Допустим, на сцене есть три кнопки(мувиклипа) с именами btn_1, btn_2, btn_3. Создайте объект, содержащий переменные FlashVars:

var flashVars:Object = this.loaderInfo.parameters;

Добавьте обработчик событий клика по кнопкам:

btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton); 

Далее выберите, нужен ли подсчёт кликов по каждой кнопке получить в системе управления рекламой, и в зависимости от этого пропишите соответствующие обработчики кликов.

Первый вариант - без подсчёта переходов с каждой кнопки

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);   
//для перехода

function onClickFirstButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page1.html"), flashVars.af_target); //для перехода
} //для перехода

function onClickSecondButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page2.html"), flashVars.af_target); //для перехода
} //для перехода

function onClickThirdButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page3.html"), flashVars.af_target); //для перехода
} //для перехода

if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 2);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Второй вариант - с подсчётом переходов с каждой кнопки

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);   
//для перехода

function onClickFirstButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_1), flashVars.af_target); //для перехода
} //для перехода

function onClickSecondButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_3), flashVars.af_target); //для перехода
} //для перехода

function onClickThirdButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_3), flashVars.af_target); //для перехода
} //для перехода

if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 2);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}
Вместе с готовым flash-роликом и ссылками для перехода сообщите заказчику, какие номера событий используются в баннере для каждой кнопки перехода.

3. Подготовка Swiffy

Swiffy - это google конвертер flash в HTML5.

Внимание, прекращена поддержка сервиса Swiffy. Новые SWF файлы сконвертировать в HTML5 код нельзя. Но ранее сконвертированные файлы будут продолжать работать.

1. Flash баннер должен быть сделан по требованиям указанным выше.
2. Перейдите по ссылке и сконвертируйте Flash ролик в HTML5 код.
3. Полученный код необходимо преобразовать, для этого используйте Генератор кода

В связи с тем, что flash не поддерживается на мобильных устройствах и может быть выключен, а HTML5 поддерживается не во всех версиях браузеров, рекомендуется использовать в баннере все 3 креатива.

Подсчёт событий

Подсчет событий в баннерах flash реализован через вызов переменных event_1 … event_20.

Для кода swiffy события необходимо указать в исходном flash ролике.

Для учёта события в момент наступления действия, которое необходимо посчитать, вам нужно вызвать код:

- для ActionScript 2.0:

loadMovieNum(_root.event_N,300); 

- для ActionScript 3.0:

import flash.net.sendToURL;
import flash.net.URLRequest;
var flashVars:Object = this.root.loaderInfo.parameters;
sendToURL( new URLRequest(flashVars.event_N) ) , где N - это номер события, число от 1 до 20.

Информацию об используемых номерах событий и их названий (что считает данное событие) рекомендуем передавать вместе с готовым flash-роликом для установки в систему управления рекламой.

В случае подготовки flash-ролика с подсчетом событий по каждой кнопке нужно назначить ссылки перехода для каждой из кнопок на вкладке "События" при добавлении баннера в ADFOX, в поле "URL перехода" соответствующего события. Из поля "Cобытие 1" ссылка будет передаваться в качестве значения для event_1 в баннере.

События, которые уже используются в шаблоне

Нельзя использовать события с 21 по 30, так как они уже используются в шаблоне.

Баннер закрыт (Событие 21) - пользователь нажал на кнопку "Закрыть";
Для показа выбран swiffy (Событие 22) - добавлено 2 swiffy креатива и браузер "поддерживает" <canvas>;
Для показа выбран flash (Событие 23) - добавлено 2 flash креатива, отсутствуют swiffy креативы и в браузере включен flash-плагин (flash может быть на паузе);
Для показа выбрана картинка (Событие 24) - добавлено 2 картинки, отсутствуют flash и swiffy креативы;
Показан Swiffy (Событие 25) - означает что файлы с креативами загрузились, и правильно выгрузились на страницу, подразумевается что swiffy-ролики запустятся. В идеале должно совпадать с событием Для показа выбран swiffy;
Показан Flash (Событие 26) - означает что html с запросами за swf роликами попал на страницу, подразумевается что flash-ролики запустятся;
Показана картинка (Событие 27) - означает что html код с запросами за картинками попал на страницу, подразумевается что картинки отобразятся;
Количество авторасхлопов (Событие 28) - количество авторасхлопов данного креатива;
Количество расхлопов (Событие 29) - количество расхлопов креатива, суммируется из расхлопов по действию пользователей и авторасхлопов;
Количество схлопов (Событие 30) - количество схлопов креатива.

Добавление в ADFOX

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон BannerLine HTML5(Swiffy)/flash/image [Sync Async].
Если шаблон отсутствует в списке дополнительных шаблонов, то добавьте его из предзаданных. В разделе "Содержимое" баннера укажите значения для параметров:

  1. "TARGET" ссылки - параметр, определяющий в каком окне открывать ссылку;

    _blank - загружает страницу в новое окно браузера.
    _self - загружает страницу в текущее окно.

  2. Ссылка на промерочный пиксель - укажите ссылку на промерочный пиксель для подсчета показов в сторонней системе управления рекламой;

  3. Ссылка перехода - укажите ссылку на сайт рекламодателя;
  4. Подготовленный swiffy креатив №1 - ссылка на файл *.js, в схлопнутом виде, созданный с помощью Генератора кода;
  5. Подготовленный swiffy креатив №2 - ссылка на файл *.js, в расхлопнутом виде, созданный с помощью Генератора кода;
  6. Flash креатив №1 - ссылка на файл *.swf, в схлопнутом виде;
  7. Flash креатив №2 - ссылка на файл *.swf, в расхлопнутом виде;
  8. Изображение №1 - ссылка на изображение, в схлопнутом виде;
  9. Изображение №2 - ссылка на изображение, в расхлопнутом виде;
  10. Цвет фона подложки (#000000|rgba(0,0,0,0.4)|transparent) - цвет фона под креативом, заполняющий область полей баннера и плашку кнопки "Закрыть". Так же отвечает за область наведения при которой будет происходить схлоп/расхлоп (на десктопах);
    - если значение не указано, то для расхлопа необходимо наведение мыши на креатив, для схлопа необходимо, отведение указателя мыши с креатива или кнопки "Закрыть" (при ее наличии);
    - если значение указано, то для расхлопа необходимо наведение мыши на сам баннер или на его поля, для схлопа - отведение указателя мыши с баннера, полей баннера и панели кнопки "Закрыть" (при ее наличи);
    - если указано значение вида transparent, то поведение будет, как и в случае если значение указано, но поля и панель кнопки "Закрыть" будут прозрачны.
  11. Ширина креатива №1 (100% или px) - ширина креатива (одна для всех типов креатива);
  12. Высота креатива №1 (100% или px) - высота креатива (одна для всех типов креатива);
  13. Цвет фона креатива №1 (#000000 или transparent) - цвет фона который будет установлен как цвет фона креатива  №1;
  14. Ширина креатива №2 (100% или px) - ширина креатива (одна для всех типов креатива);
  15. Высота креатива №2 (100% или px) - высота креатива (одна для всех типов креатива);
  16. Цвет фона креатива №2 (#000000 или transparent) - цвет фона который будет установлен как цвет фона креатива  №1;
  17. Позиция (по умолчанию bottom) - сторона к которой будет "прижата" перетяжка (bottom, top, left, right). Сдвиг контента осуществляется автоматически при указании позиции top или bottom (при расхлопе сдвиг контента не осуществляется);
  18. Количество авторасхлопов (по умолчанию 0) - количество показов в расхлопнутом виде при загрузке страницы на время сессии в одном браузере;
  19. Время сессии авторасхлопа (по умолчанию 20) - время (в часах), в течении которого будет действовать настройка количества авторасхлопов, начиная с первого авторасхлопа;
    Пример. Указано 5 авторасхлопов, после того как появился первый, включается время сессии, например 20 часов, тогда в течении этого времени могут показываться остальные авторасхлопы но не больше указанного количества.
  20. Авторасхлоп всегда (по умолчанию no) (yes|no) - yes - баннер всегда будет показываться в расхлопнутом виде, счетчик авторасхлопов крутится не будет и сессия инициализирована тоже не будет;
  21. Показывать кнопку "Закрыть" (по умолчанию no) (yes|no) - наличие кнопки "Закрыть", поверх формата в расхлопнутом виде;
  22. Изображение кнопки "Закрыть" - файл-изображение, который будет использоваться в виде кнопки "Закрыть";
  23. Ширина кнопки "Закрыть" (px) (по умолчанию 40px) - ширина изображения кнопки "Закрыть";
  24. Высота кнопки "Закрыть" (px) (по умолчанию 40px) - высота изображения кнопки "Закрыть";
  25. Положение кнопки "Закрыть" (по умолчанию right) (left|right) - положение кнопки "Закрыть" над креативом, только для "Позиций" bottom и top. right - верхний правый угол, left - левый верхний угол;
  26. z-index (по умолчанию 9999999) - z-index, который будет применен формату.

Добавление кода вставки на сайт

Код вставки для баннера BannerLine разместите сразу после открывающего тега <body>.