BackOver

Описание

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

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

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

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

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

  • actionScript 2.0 и FlashPlayer не ниже 8.0;
  • actionScript 3.0 и FlashPlayer не ниже 9.0.

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

  • flash-ролик (*.swf), не более 300Кб;
  • картинку-заглушку (*.jpg, *.png, *.gif);
  • фоновое изображение (*.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:

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

Для разрешения 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% (в правом нижнем углу).