BackOver

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

Описание

Меняет фон сайта, по наведению на баннер.

BackOver - баннер меняет фон сайта при наведении на него указателя мыши.

Внимание! Вы смотрите требования для обновленного шаблона BackOver. Ссылка на устаревшую версию технических требований (до 20.07.2012) здесь. Для обновления шаблона в вашем аккаунте напишите в службу технической поддержки.

При наведении курсора мыши на баннер у сайта меняется фон на картинку и/или на заданный цвет, а при отведении мыши - фон сайта принимает первоначальный вид. Переход на сайт рекламодателя осуществляется при клике на баннер. Параметры баннера позволяют указывать значения повторения и позиционирования фона.

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

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

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

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

1. Flash-ролик (*.swf), не более 300Кб.
2. Картинку-заглушку (*.jpg, *.png, *.gif).
3. Фоновое изображение (*.jpg, *.png, *.gif).

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

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

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

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

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


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

1. Создайте верхний слой, назовите его adfoxTransitionButton, и разместите в нем прозрачную кнопку, которой присвойте имя transitionButton.
При клике на кнопку будет произведен переход на сайт рекламодателя, при наведении курсора мыши на кнопку покажется фоновое изображение, при отведении курсора - фон сайта принимает первоначальный вид.

2. Скопируйте код и вставьте его в код на кнопке:

on (rollOver) 
{ 
    if(flash.external.ExternalInterface.available)
    {
        loadMovieNum(_root.event_1, 300);
        flash.external.ExternalInterface.call('ADFOX.BACKOVER.globals.applyBackground' + _root.adfoxBannerId);
    }
} 

on (rollOut) 
{ 
    if(flash.external.ExternalInterface.available)
    {
        flash.external.ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + _root.adfoxBannerId);
    }
}

on (release) 
{ 
    if(flash.external.ExternalInterface.available)
    {
        //IE driven hack;
        flash.external.ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + _root.adfoxBannerId);
        flash.external.ExternalInterface.call('window.open', _root.link1, _root.adfoxTarget);
    }
    else
    {
        getURL(_root.link1, _root.adfoxTarget);
    }
} 

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

1. Создайте верхний слой, назовите его adfoxTransitionButton, и разместите в нем прозрачную кнопку, которой присвойте имя transitionButton.
При клике на кнопу будет произведен переход на сайт рекламодателя, при наведении курсора мыши на кнопку покажется фоновое изображение, при отведении курсора - фон сайта принимает первоначальный вид.

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

import flash.events.Event;
import flash.external.ExternalInterface;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.sendToURL;

var flashVars = this.root.loaderInfo.parameters;

transitionButton.addEventListener(MouseEvent.MOUSE_OVER, adfoxMouseover);//для события наведения
transitionButton.addEventListener(MouseEvent.MOUSE_OUT, adfoxMouseout);//для события отведения
transitionButton.addEventListener(MouseEvent.CLICK, adfoxClick);//для клика

function adfoxMouseover(evt:Event):void
{
    if(ExternalInterface.available)
    {
        sendToURL( new URLRequest(flashVars.event_1) );
        ExternalInterface.call('ADFOX.BACKOVER.globals.applyBackground' + flashVars.adfoxBannerId);
    }
}

function adfoxMouseout(evt:Event):void
{
    if(ExternalInterface.available)
    {
        ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + flashVars.adfoxBannerId);
    }
}

function adfoxClick(evt:Event):void
{
    if(ExternalInterface.available)
    {
        //IE driven hack;
        ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + flashVars.adfoxBannerId);
        ExternalInterface.call('window.open', flashVars.link1, flashVars.adfoxTarget);
    }
    else
    {
        navigateToURL(new URLRequest(flashVars.link1), flashVars.adfoxTarget);
    }
}

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

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

Например, ширина сайта составляет 1000px. Создадим фоновое изображение размером 1800х1000px.

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

Для разрешения 1280х768:

"Для разрешения 1280х768"

Для разрешения 1280x900:

"Для разрешения 1280x900"

Для разрешения 1360х768:

"Для разрешения 1360х768"

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

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

Событие №1 (event_1) зарезервировано для подсчёта количества показов фона.

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

• для 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 - это номер события, число от 2 до 30.

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

При добавлении баннера BackOver выберите шаблон "BackOver". Укажите следующие параметры:

  1. Flash-ролик - загрузите flash-ролик.
  2. Изображение - картинка-заглушка, которая будет показана, если в браузере отключен flash-плагин.
  3. URL перехода - полная ссылка на сайт рекламодателя.
  4. Параметр передачи перехода - по умолчанию link1. Параметр передачи перехода должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, "_blank");.
  5. Ширина и Высота - размеры flash-ролика и картинки-заглушки в пикселях.
  6. "TARGET" ссылки - параметр, указывающий в каком окне открывать ссылку. Возможные значения: _top - в текущем окне, _blank - в новом.
  7. Ссылка на промерочный пиксель - ссылка для промера количества показов в сторонней системе.
  8. Фоновое изображение - загрузите фоновое изображение.
  9. Позиционирование фона по X - по умолчанию задано 50% - центр фона по горизонтали совпадет с центром в окне браузера. 0% - самая левая точка фона совпадет с левым краем окна браузера. 100% - самая правая точка фона совпадет с правым краем окна браузера.
  10. Позиционирование фона по Y - по умолчанию задано 0% - верх фона по вертикали совпадет с верхним краем окна браузера. 50% - центр фона совпадет с центром окна браузера. 100% - самая нижняя точка фона совпадет с нижним краем окна браузера.
  11. Повторение фонового изображения - фон повторяется/не повторяется/повторяется по горизонтали/повторяется по вертикали (repeat/no-repeat/repeat-x/repeat-y).
  12. Цвет фона - цвет фона сайта, указывается в формате HEX: #ffffff.
  13. Прозрачность Flash-ролика (wmode) - будет ли flash-ролик прозрачным на странице: transparent – прозрачный, opaque – непрозрачный.
  14. id блока замены body - если вся страница помещена в непрозрачный див, который имеет ширину 100%, то необходимо в данном параметре указать его id.

Возможные комбинации значений позиционирования фона по Х и Y:

top left = left top = 0% 0% (в левом верхнем углу)
top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left center = center left = 0% 50% (по левому краю и по центру)
center center = 50% 50% (по центру)
right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

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