Expansion Wallpaper

Описание

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

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

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

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

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

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

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

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

  1. ActionScript 2.0;
  2. FlashPlayer 8.0.

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

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

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

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

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

        on(rollOver){
                              _root.adfox_timeoutId = setTimeout(function() {
                              flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
                              //если есть анимация, добавьте здесь функцию запуска
                              },
                              (_root.timeDelayBeforeShow?_root.timeDelayBeforeShow:0)
                              );
                              }
      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. В зависимости от сценария схлопа части баннера выберите нужный пункт:
      1. Часть баннера скрывается под контентом при клике на кнопку.

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

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

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

        on(rollOut){
                              clearTimeout(_root.adfox_timeoutId);
                              flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
                              //если есть анимация, добавьте здесь функцию запуска
                              }
      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. Теперь необходимо скрыть все оставшиеся слои. Для этого выделите их и перетащите в маскирующий слой как показано на картинке. Если вы все сделали правильно, то у вас должно получиться, как на скриншоте.

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

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

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

    Например, чтобы показать содержимое в момент расхлопа используйте возможности 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%.
  3. Параметр передачи перехода — по умолчанию link1. Параметр передачи перехода должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, _root.target);.
  4. Параметр передачи target — по умолчанию target. Параметр передачи target должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, _root.target);.
  5. Ширина и Высота — размеры flash-ролика в пикселях (целое число без указания размерности px).
  6. Target ссылки — в каком окне открывать ссылку: _blank — в новом окне или вкладке, _self — в текущем окне/фрейме, _parent — в родительском фрейме, _top — отменяет все фреймы и открывает в текущем окне.
  7. Отступ сверху — размер видимой части баннера сверху от контента сайта в пикселях (целое число без указания размерности px).
  8. Отступ слева — размер видимой части баннера слева от контента сайта в пикселях (целое отрицательное число без указания размерности px. Например: -100). Если необходимо сделать видимую часть баннера справа от контента сайта, то укажите 0, а flash-ролик должен быть по ширине равен ширине контента сайта + ширина видимой части справа.
  9. Ширина сайта — ширина контента сайта в пикселях (целое число без указания размерности px).
  10. Положение сайта — укажите фактическое расположение контента сайта относительно окна браузера: left | center | right. Необходимо для правильного позиционирования баннера относительно контента.
  11. Ожидание загрузки страницыyes | no. «yes» — баннер ожидает полной загрузки страницы, а потом отображается. no — баннер отображается сразу, как это возможно, не зависимо статуса загрузки страницы.
  12. Время задержки перед расхлопом (в миллисекундах) — время, через которое произойдет расхлоп баннера, после наведения на него мыши. Значение по умолчанию 0 — значит задержки перед расхлопом не будет. Значение указывается в миллисекундах, 1 секунда = 1000 миллисекунд.