FullScreen HTML5(Swiffy)/flash/image

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

Описание

FullScreen - полноэкранный баннер, который появляется поверх основного контента сайта на короткий промежуток времени в виде swiffy-креатива, flash-креатива или изображения.

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

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

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

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

При клике по баннеру происходит переход на сайт рекламодателя.

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

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

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

Пример

Пример

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

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

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

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

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

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


Если изображение больше, чем размеры экрана, изображение не будет масштабироваться до размеров экрана. Оно позиционируется по центру окна браузера. окна браузера. При ресайзе окна браузера изображение будет масштабироваться пропорционально своим размерам.

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

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

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

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

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

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

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

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

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


Подготовка flash-баннера на ActionScript 3.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;

transitionButton.addEventListener(MouseEvent.CLICK, adFoxClickHandler); //для перехода
//transitionButton.buttonMode = true; //если в качестве кнопки используется мувиклип, раскомментируйте эту строку.

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

ExternalInterface.call("fullscreenStartTimer_"+flashVars.af_rnd);

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

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


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

import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;

transitionButton.addEventListener(MouseEvent.CLICK, adFoxClickHandler);
closeButton.addEventListener(MouseEvent.CLICK, adFoxCloseHandler);
//transitionButton.buttonMode = true; //если в качестве кнопки используется мувиклип, раскомментируйте эту строку.

function adFoxClickHandler(evt:MouseEvent) {
ExternalInterface.call("fullscreenClose_"+flashVars.af_rnd);
navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.af_link), flashVars.af_target);
}

function adFoxCloseHandler(evt:MouseEvent) {
ExternalInterface.call("fullscreenClose_"+flashVars.af_rnd);
}

if (ExternalInterface.call("fullscreenStartTimer_"+flashVars.af_rnd)) {
setInterval(function () {
panelText.text = 'Автоматический переход на сайт через ' + ExternalInterface.call("fullscreenGetSecond_"+flashVars.af_rnd) + ' секунд';
}, 90);
}

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

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

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

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

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

Также закрытие баннера и таймер можно реализовать с помощью следующих функций:

ExternalInterface.call("fullscreenClose_"+flashVars.af_rnd); - вызов функции в js осуществляет закрытие баннера.
ExternalInterface.call("fullscreenStartTimer_"+flashVars.af_rnd); - вызов функции в js запустит таймер обратного отсчета для автоматического закрытия баннера.
ExternalInterface.call("fullscreenGetSecond_"+flashVars.af_rnd); - вызов функции в js возвращает время, которое осталось для автоматического закрытия баннера.

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

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

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

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

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

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

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

Для кода 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 до 30.

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

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

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

  1. Подготовленный swiffy креатив - ссылка на файл *.js подготовленный с помощью Генератора кода
  2. Flash креатив - ссылка на файл *.swf
  3. Изображение - ссылка на изображение
  4. URL перехода - укажите ссылку на сайт рекламодателя.
  5. "TARGET" ссылки - параметр, определяющий в каком окне открывать ссылку.

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

  6. Ширина креатива (px или 100%) - ширина креатива (одна для всех типов креатива)

  7. Высота креатива (px или 100%) - высота креатива (одна для всех типов креатива)
  8. z-index формата – z-index который будет назначен креативу. По умолчанию задано: 9999999
  9. Наличие панели управления (yes/no) - yes - показывать панель управления, no - скрыть панель управления, при этом во flash-ролике должна присутствовать кнопка "Закрыть" и обратный отсчёт до закрытия баннера.
  10. Цвет фона панели управления (#......) - укажите цвет фона панели управления в формате HEX, например: #ffffff.
  11. Высота панели управления (*px) - укажите высоту панели управления с добавлением размерности px.
  12. Изображение кнопки закрыть (картинка) - загрузите картинку кнопки "Закрыть", которая будет отображаться на панели управления в правом углу.
  13. Высота изображения кнопки закрыть (px или 100%) – высота изображения кнопки закрыть (если задать в %, то рассчитывается от высоты панели управления). По умолчанию задано: 80%
  14. Текст на панели управления - по умолчанию задан текст: "Автоматический переход на сайт через .. секунд". Укажите свой текст, чтобы он отображался на панели управления взамен текста по умолчанию.
  15. Стили для текста на панели управления – здесь укажите все стили, которые нужно применить к тексту на панели управления. (Например: color:red;)
  16. Таймер закрытия (сек.) - сколько секунд показывается баннер (целое число).
  17. Цвет фона подложки для креатива (rgba) - укажите цвет фона баннера в формате HEX, rgba например: #000000 или rgba(0,0,0,0.4).
  18. Размер текста в "%" рассчитанный от высоты панели (по умолчанию 27%) - размер текста, рассчитанный в "%" от высоты панели управления.
  19. Показывать при отведении мыши из окна (yes|no) (по умолчанию работает со значением no) - показывать баннер при выводе указателя мыши из области видимости браузера, т.е. за пределы браузера. На тач-платформах (смартфоны/планшеты) fullscreen будет показан сразу при загрузке страницы, без учета данного параметра.

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

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