Expansion Wallpaper

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

Описание

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

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

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

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

Пример

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

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

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

1. ActionScript 2.0;
2. FlashPlayer 8.0.

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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);

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

Скрываем содержимое:

1. Создайте новый слой Mask Layer и поместите его на самый верх.
""
""

2. Кликните правой кнопкой мыши по слою и выберите пункт "Маска" (Mask). ""

3. В слое маска нарисуйте прямоугольники, которые будут покрывать видимую часть баннера.
""

4. Скомпилируйте, чтобы посмотреть изменения. Слой, который находился под маскирующим слоем, автоматически стал замаскирован. Все, что находилось в замаскированном слое теперь не видно, кроме той части, которая попала под нарисованные прямоугольники.
""

5. Теперь необходимо скрыть все оставшиеся слои. Для этого выделите их и перетащите в маскирующий слой как показано на картинке. Если вы все сделали правильно, то у вас должно получиться, как на скриншоте.

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

Показываем содержимое:

1. Расширьте прямоугольник в маскирующем слое на всю ширину и высоту баннера. Теперь при компиляции вы будете видеть все содержимое.

""
""

Например, чтобы показать содержимое в момент расхлопа используйте возможности ActionScript или создайте ещё один кадр, на котором в маскирующем слое будет закрашено всё.

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

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

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

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

loadMovieNum(_root.event_N, 300)

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

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

Код вставки установите сразу после открывающего тега body.

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

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

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

При добавлении Ссылки на промерочный пиксель также необходимо в конце ссылки дописать: %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 миллисекунд.

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