Expansion Wallpaper

Описание
Пример
Подготовка (для разработчиков)
Краткое описание по использованию маски
Подсчёт событий
Добавление в AdFox

Описание

Угловой баннер, расхлопывающийся на заданную часть экрана.

Expansion Wallpaper - представляет собой один flash-ролик, состоящий из видимой области и скрытой под контентом сайта. При событии расхлопа поверх контента страницы показывается скрытая часть баннера. При событии схлопа контент снова перекрывает часть баннера, скрывая её.

Событие для расхлопа: клик по кнопке на видимой области, наведение курсора мыши на видимую область или момент анимации.
Событие для схлопа: клик по кнопке на любой из областей, отведение курсора мыши или момент анимации (например, завершение анимации).

Способен нести любую визуальную информацию и/или интерактивные элементы как в закрытом, так и в раскрытом виде.

Пример

Посмотрите как выглядит Expansion Wallpaper на сайте. Пример

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

Требования к среде разработки:

1. ActionScript 2.0;
2. FlashPlayer 8.0.

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

1. Flash-баннер (*.swf). Скачайте пример исходника;

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

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

На части баннера, перекрывающей контент, на момент когда он скрыт, не должно быть ничего, в том числе никаких MovieClip, Button, Shape, Bitmap и прочего. Этого можно достичь путём использования одного из следующих методов или приёмов, например:
- маскирующие слои;
- вынос содержимого за пределы видимости на время, пока баннер схлопнут;
- использованием _visible = false;
и др.

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

В момент расхлопа баннера (когда нужно показывать содержимое) сделайте видимой ранее скрытую часть одним из способов (в зависимости от того, какой способ скрытия был выбран), например:
- путем увеличения площади маскирующего слоя;
- внесением содержимого в видимую часть баннера;
- установки _visible=true;

Краткое описание по использованию маски

1. Расположите поверх flash-ролика кнопку для перехода на сайт рекламодателя и пропишите для неё обработчик:

on (release)
{
    getURL(_root.link1, _root.target);
}

Переменная link1 - получает ссылку для перехода из AdFox.
Переменная target - получает параметр из AdFox, определяющий в каком окне открывать ссылку (в текущем или в новом).

2. В зависимости от сценария расхлопа выберите нужный пункт:

2.1 Показ скрытой части баннера осуществляется при клике на кнопку в видимой части баннера.

Расположите в самом верхнем слое кнопку и пропишите для нее обработчик:

on (release)
{
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
    //если есть анимация, добавьте здесь функцию запуска
}

2.2 Показ скрытой части баннера осуществляется при наведении курсора мыши на кнопку в видимой части баннера.

Расположите в самом верхнем слое кнопку и пропишите для нее обработчик:

on(rollOver){
    _root.adfox_timeoutId = setTimeout(function() {
            flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
            //если есть анимация, добавьте здесь функцию запуска
        },
        (_root.timeDelayBeforeShow?_root.timeDelayBeforeShow:0)
    );
}

2.3 Показ скрытой части баннера осуществляется в какой-либо момент анимации.

Вставьте код в определенный кадр анимации:

flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
//если есть анимация, добавьте здесь функцию запуска

или используйте функцию setTimeout, тогда нужно вставить код в первый кадр и указать своё количество миллисекунд во втором параметре вместо 5000:

setTimeout(function(){
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
    //если есть анимация, добавьте здесь функцию запуска
},5000);

3. В зависимости от сценария схлопа части баннера выберите нужный пункт:

3.1 Часть баннера скрывается под контентом при клике на кнопку.

Расположите в самом верхнем слое кнопку и пропишите для нее обработчик:

on (release)
{
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
    //если есть анимация, добавьте здесь функцию остановки анимации
}

3.2 Часть баннера скрывается под контентом при отведении курсора мыши от кнопки.

Расположите в самом верхнем слое кнопку и пропишите для нее обработчик:

on(rollOut){
    clearTimeout(_root.adfox_timeoutId);
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
    //если есть анимация, добавьте здесь функцию запуска
}

3.3 Часть баннера скрывается под контентом в какой-либо момент анимации.

Вставьте код в определенный кадр анимации (например, в последний):

flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
//если есть анимация, добавьте здесь функцию остановки анимации

или используйте функцию setTimeout, тогда нужно вставить код в первый кадр и указать своё количество миллисекунд во втором параметре вместо 5000:

setTimeout(function(){
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
    //если есть анимация, добавьте здесь функцию остановки анимации
},5000);

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

Во flash-ролике вызов заданных через flashvars событий производится через loadMovieNum.

Используются следующие названия flashvars: event_1 , event_2 и т.д. до event_30.

Пример вызова:

loadMovieNum(_root.event_N, 300)

где N - это номер события, число от 1 до 30.

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

При добавлении баннера в AdFox выберите нужный тип баннера, и шаблон Expansion Wallpaper (для синхронного кода вставки) или ExpansionWallpaper [Async] (для асинхронного кода вставки).
Укажите следующие параметры баннера:

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

2. URL перехода - полная ссылка на рекламируемый сайт. При размещении с помощью ссылок сторонних систем допишите в конце ссылки: %random%.

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

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

3. Ширина и Высота - размеры flash-ролика в пикселях (целое число без указания размерности px).

4. "Target" ссылки - в каком окне открывать ссылку: _blank - в новом окне или вкладке, _self - в текущем окне/фрейме, _parent - в родительском фрейме, _top - отменяет все фреймы и открывает в текущем окне.

5. Отступ сверху - размер видимой части баннера сверху от контента сайта в пикселях (целое число без указания размерности px).

6. Отступ слева - размер видимой части баннера слева от контента сайта в пикселях (целое отрицательное число без указания размерности px. Например "-100"). Если необходимо сделать видимую часть баннера справа от контента сайта, то укажите 0, а flash-ролик должен быть по ширине равен ширине контента сайта + ширина видимой части справа.

7. Ширина сайта - ширина контента сайта в пикселях (целое число без указания размерности px).

8. Положение сайта - укажите фактическое расположение контента сайта относительно окна браузера: left | center | right. Необходимо для правильного позиционирования баннера относительно контента.

9. Ожидание загрузки страницы - yes | no. "yes" - баннер ожидает полной загрузки страницы, а потом отображается. "no" - баннер отображается сразу, как это возможно, не зависимо статуса загрузки страницы.

10. Время задержки перед расхлопом (в миллисекундах) - время, через которое произойдет расхлоп баннера, после наведения на него мыши. Значение по умолчанию 0 - значит задержки перед расхлопом не будет. Значение указывается в миллисекундах, 1 секунда = 1000 миллисекунд.