FullScreen

"Английская версия" "Скачать в формате PDF"

Описание

Полноэкранный баннер, который появляется поверх основного контента сайта на короткий промежуток времени.

FullScreen - полноэкранный баннер, который появляется поверх основного контента сайта на короткий промежуток времени.
Баннер закрывается по окончании времени обратного отсчёта, при клике на кнопку "Пропустить рекламу", либо при переходе на сайт рекламодателя.

Обязательно наличие кнопки "Пропустить рекламу" и времени обратного отсчёта до закрытия баннера.
Этот функционал добавляется через уже разработанную стандартную панель управления (включается при добавлении баннера в AdFox), либо реализуется непосредственно во flash-ролике.

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

Есть возможность добавления видео в FullScreen.

Реализован механизм защиты от зависания или прочих ошибок, который принудительно закроет FullScreen через двойной интервал времени или через время, указанное в таймере автоматического закрытия.

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

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

1. Flash-ролик (*.swf).
2. Картинку-заглушку (*.png, *.jpg, *.gif).
3. Видео-файл (если в FullScreen с видео).

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

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

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

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

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


Минимальные требования к среде разработки:

- ActionScript 2.0 и FlashPlayer не ниже 8.0

Подготовка flash-ролика на ActionScript 2.0

Если включена стандартная панель управления (во flash-ролике нет кнопки "Пропустить рекламу" и таймера обратного отсчета)


1. В первый кадр главного таймлайн вставьте код:

transitionButton.onRelease = adFoxClickHandler;
flash.external.ExternalInterface.call("countDown"+_root.bannerID);
function adFoxClickHandler(evt)
{
    if(_root.target == "_blank")
    {
        getURL(_root.link1, _root.target);
        flash.external.ExternalInterface.call("closeFullScreen"+_root.bannerID);
    }
    else
    {
        getURL(_root.link1, _root.target);
    }
}

Чтобы код не исполнялся при каждом попадании flash на 1 кадр (если кадров > 1), на последнем кадре пропишите: gotoAndPlay(2).
Это требование не является обязательным, но желательно. Тем не менее, вы сами должны проследить за тем, что добавление этой команды не изменит сценарий показа ролика.

2. Создайте кнопку для перехода на сайт рекламодателя и присвойте ей имя экземпляра (Instance Name): transitionButton.

Если выключена стандартная панель управления (обратный отсчёт и кнопка "Пропустить рекламу" реализуется во flash-ролике)


  1. В первый кадр главного таймлайн вставьте код:

transitionButton.onRelease = adFoxClickHandler;
closeButton.onRelease = closeBanner;
function closeBanner(evt:Object)
{
    flash.external.ExternalInterface.call("closeFullScreen"+_root.bannerID);
}
function adFoxClickHandler(e)
{
    if(_root.target == "_blank")
        {
            getURL(_root.link1, _root.target);
            flash.external.ExternalInterface.call("closeFullScreen"+_root.bannerID);
        }
        else
        {
            getURL(_root.link1, _root.target);
        }
}

2. Создайте кнопку для перехода на сайт рекламодателя и присвойте ей имя экземпляра (Instance Name): transitionButton.

3. Создайте кнопку "Пропустить рекламу" в самом верхнем слое flash-ролика и присвойте ей имя экземпляра (Instance Name): closeButton.

4. После загрузки баннера на сайт должен включаться обратный отсчёт.

Значение обратного отсчёта должно показываться на экране, например так:
«До возврата на сайт осталось " + ... + "секунд».
Время обратного отсчёта передается во flash-ролик из AdFox.

Создайте мувиклип с именем fullscreenPanel. Кликните по нему два раза. Внутри мувиклипа создайте TextField с именем panelText и в его свойствах выберите динамический текст и оставьте пустым.

В первом кадре главного таймлайн вставьте код для обратного отсчёта:

var timerSeconds = _root.timerClose;
var adfoxTimerId;
function startTimer()
{
    adfoxTimerId = setInterval(showTimer ,1000)
}
function showTimer()
{
    _root.fullscreenPanel.panelText.text = "возврат на сайт через " + timerSeconds + " секунд";
    timerSeconds--;
    if(timerSeconds == 0) 
    {
            clearInterval(adfoxTimerId);
            flash.external.ExternalInterface.call("closeFullScreen"+_root.bannerID);
    }
}
function pauseTimer()
{
    clearInterval(adfoxTimerId);
}

Для старта обратного отсчёта вызовите функцию:

startTimer(); 

5. Добавление видео

Видео-ролик загружается в AdFox при добавлении баннера. Чтобы получить ссылку на видео во flash-ролике используйте параметр vlink из FlashVars.
Кнопки управления воспроизведением должны находиться на самом верхнем слое (над прозрачной кнопкой для перехода на сайт рекламодателя).

Если в баннере автостарт видео, то функцию startTimer(); нужно вызвать сразу после окончания видео.

Если видео воспроизводится по клику, то вызываем функцию startTimer(); на 1 кадре.
startTimer();

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

pauseTimer();

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

startTimer();

Обратный отсчёт продолжится с той секунды, на которой был приостановлен.

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

Несмотря на то, что таймер останавливается на время показа видео, суммарное время показа баннера не превысит принудительное время закрытия.

Подготовка flash-ролика на ActionScript 3.0

Если включена стандартная панель управления (во flash-ролике нет кнопки "Закрыть" и таймера обратного отсчета)


1. В первый кадр главного таймлайн вставьте код:

import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
var flashVars = this.root.loaderInfo.parameters;
transitionButton.addEventListener(MouseEvent.CLICK, adFoxClickHandler);
//transitionButton.buttonMode = true; //если в качестве кнопки используется мувиклип, раскомментируйте эту строку.
flash.external.ExternalInterface.call("countDown"+flashVars.bannerID);
function adFoxClickHandler(evt:MouseEvent)
{
    if(flashVars.target == "_blank")
    {
        navigateToURL(new URLRequest(flashVars.link1), flashVars.target);
        flash.external.ExternalInterface.call("closeFullScreen"+flashVars.bannerID);
    }
    else
    {
        navigateToURL(new URLRequest(flashVars.link1), flashVars.target);
    }
}

Чтобы код не исполнялся при каждом попадании flash на 1 кадр (если кадров > 1), на последнем кадре пропишите: gotoAndPlay(2).
Это требование не является обязательным, но желательно. Тем не менее, вы сами должны проследить за тем, что добавление этой команды не изменит сценарий показа ролика.

2. Создайте кнопку для перехода на сайт рекламодателя и присвойте ей имя экземпляра (Instance Name): transitionButton.

Если выключена стандартная панель управления (обратный отсчёт и кнопка "Пропустить рекламу" реализуется во flash-ролике)


1. В первый кадр главного таймлайн вставьте код:

import flash.utils.Timer;
import flash.events.TimerEvent;
var flashVars = this.root.loaderInfo.parameters;
transitionButton.addEventListener(MouseEvent.CLICK, adFoxClickHandler);
//transitionButton.buttonMode = true; //если в качестве кнопки используется мувиклип, раскомментируйте эту строку.
closeButton.addEventListener(MouseEvent.CLICK, closeBanner);
closeButton.buttonMode = true;
function closeBanner(evt:Object)
{
    flash.external.ExternalInterface.call("closeFullScreen"+flashVars.bannerID);
}
function adFoxClickHandler(evt:MouseEvent)
{
    if(flashVars.target == "_blank")
    {
        navigateToURL(new URLRequest(flashVars.link1), flashVars.target);
        flash.external.ExternalInterface.call("closeFullScreen"+flashVars.bannerID);
    }
    else
    {
        navigateToURL(new URLRequest(flashVars.link1), flashVars.target);
    }
}

2. Создайте кнопку для перехода на сайт рекламодателя и присвойте ей имя экземпляра (Instance Name): transitionButton.

3. Создайте кнопку "Пропустить рекламу" в самом верхнем слое flash-ролика и присвойте ей имя экземпляра (Instance Name): closeButton.

4. После загрузки баннера должен включаться обратный отсчёт.

Значение обратного отсчёта должно показываться на экране, например так:
«До возврата на сайт осталось " + ... + "секунд».
Время обратного отсчёта передается во flash-ролик из AdFox.

Создайте мувиклип с именем fullscreenPanel. Кликните по нему два раза. Внутри мувиклипа создайте TextField с именем panelText и в его свойствах выберите динамический текст и оставьте пустым.

В первом кадре главного таймлайн вставьте код для обратного отсчёта:

import flash.utils.Timer;
import flash.events.TimerEvent;
var flashVars = this.root.loaderInfo.parameters; // для локального тестирования закомментируйте эту строчку
//var flashVars = { 'timerClose':10 };  // для локального тестирования раскомментируйте эту строчку
var adfoxTimer:Timer = new Timer(1000, flashVars.timerClose);
adfoxTimer.addEventListener(TimerEvent.TIMER, executeTimer);
adfoxTimer.start();
fullscreenPanel.panelText.text = "Переход на сайт через " + flashVars.timerClose + " секунд";
function executeTimer(evt:TimerEvent)
{
    fullscreenPanel.panelText.text = "Переход на сайт через " +(flashVars.timerClose - evt.target.currentCount)+ " секунд";
    if(evt.target.currentCount == evt.target.repeatCount)
        flash.external.ExternalInterface.call("closeFullScreen"+flashVars.bannerID);
}

5. Добавление видео

Видео-ролик загружается в AdFox при добавлении баннера. Чтобы получить ссылку на видео во flash-ролике используйте параметр vlink из FlashVars.
Кнопки управления воспроизведением должны находиться на самом верхнем слое (над прозрачной кнопкой для перехода на сайт рекламодателя).
В момент начала воспроизведения видео (например, по событию нажатия кнопки плей) необходимо приостановить таймер обратного отсчёта. Для этого используйте следующий код:

adfoxTimer.stop();

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

adfoxTimer.start();

Обратный отсчёт продолжится с той секунды, на которой был приостановлен.

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

Несмотря на то, что таймер останавливается на время показа видео, суммарное время показа баннера не превысит принудительное время закрытия.

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

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

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

• для 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 до 30.

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

При добавлении баннера FullScreen выберите нужный тип баннера и шаблон FullScreen [Sync] - для размещения на синхронном коде вставки, и FullScreen [Async] - для размещения на асинхронном коде вставки.
Укажите следующие параметры:

  1. Flash ролик - загрузите flash-ролик или укажите ссылку на файл, размещенный на стороннем сервере.

  2. Изображение - загрузите картинку-заглушку или укажите ссылку на файл, размещенный на стороннем сервере.

  3. URL перехода - укажите ссылку на сайт рекламодателя.

  4. Параметр передачи перехода - по умолчанию link1. Параметр передачи перехода должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, _root.target);.

  5. Параметр передачи "target" - по умолчанию target. Параметр передачи "target" должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, _root.target);.

  6. "TARGET" ссылки - параметр, определяющий в каком окне открывать ссылку. "_top" - в текущем окне, "_blank" - в новом окне (или вкладке, в зависимости от настроек браузера).

  7. Ширина креатива (*px или 100%), Высота креатива (*px или 100%) - укажите ширину и высоту flash-ролика с добавлением размерности, например: 100% или 800px. При указании ширины и высоты 100%х100% обязательно укажите размеры для картинки-заглушки в параметрах Ширина заглушки (*px) и Высота заглушки (*px).

  8. Видео-файл (.swf или .flv) - если в баннере используется видео, загрузите видео-файл, или укажите ссылку на видео-файл, размещенный на стороннем сервере.

  9. Прозрачность Flash-ролика (wmode) - будет ли flash-ролик прозрачным на странице: transparent – прозрачный, opaque – непрозрачный.

  10. Цвет фона (#......) - укажите цвет фона баннера в формате HEX, например: #000000.

  11. Прозрачность фона (0 до 100) - целое число от 0 до 100; чем меньше число, тем прозрачнее цвет фона баннера.

  12. Таймер закрытия (сек.) - сколько секунд показывается баннер (целое число).

  13. Наличие панели управления (true/false) - true - показывать панель управления. false - скрыть панель управления, при этом во flash-ролике должна присутствовать кнопка "Закрыть" и обратный отсчёт до закрытия баннера.

  14. Запуск таймера закрытия из скрипта (true/false) - true - если flash-ролик подготовлен без учета требований (отсутствует код для запуска обратного отсчёта), то таймер запустит специальный скрипт, false - если flash-ролик подготовлен по требованиям, то таймер будет запущен из flash-ролика.

  15. Высота панели управления (*px) - укажите высоту панели управления с добавлением размерности px.

  16. Логотип (картинка) - загрузите логотип, который будет отображаться на панели управления в левом углу.

  17. Кнопка "закрыть" (картинка) - загрузите картинку кнопки "Закрыть", которая будет отображаться на панели управления в правом углу.

  18. Текст на панели управления - по умолчанию текст "Автоматический переход на сайт через .. секунд". Укажите свой собственный текст, он будет отображен взамен текста по умолчанию.

  19. Текст кнопки "закрыть" - по умолчанию текст "Пропустить рекламу". Укажите свой собственный текст, он будет отображен взамен текста по умолчанию.

  20. Цвет фона панели управления (#......) - укажите цвет фона панели управления в формате HEX, например #ffffff.

  21. Картинка фон для панели управления - загрузите картинку, которая будет фоном для панели управления.

  22. Цвет текста на панели управления (#......) - укажите цвет текста на панели управления в формате HEX, например #000000.

  23. fontFamily - по умолчанию "Serif". Шрифт текста на панели управления.

  24. fontSize - по умолчанию "15px". Размер шрифта на панели управления.

  25. fontWeight - насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают числовые значения 100-900 (в сотнях) для описания веса шрифта.

  26. padding - устанавливает значение полей вокруг панели управления.

  27. Ширина заглушки (*px), Высота заглушки (*px) - если размеры креатива указаны 100%х100%, то укажите ширину и высоту картинки-заглушки. Если размеры креатива заданы в пикселях, то размеры картинки-заглушки не обязательно указывать.

  28. Таймер автоматического закрытия - если значение не указано, то в случае зависания, длительного просмотра видео (когда обратный отсчет приостановлен) или прочих ошибок, FullScreen принудительно закроется через двойной интервал времени.
    Если необходимо (например, для FullScreen с видео) увеличить время до автоматического (принудительного) закрытия баннера, то укажите его в секундах.

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

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

Последнее обновление: 10.01.2013