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, определяющий в каком окне открывать ссылку (в текущем или в новом).
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
При добавлении баннера в AdFox выберите нужный тип баннера, и шаблон Expansion Wallpaper (для синхронного кода вставки) или ExpansionWallpaper [Async] (для асинхронного кода вставки).
Укажите следующие параметры баннера:
Flash ролик - загрузите flash-ролик или пропишите ссылку на файл, размещенный на стороннем сервере.
URL перехода - полная ссылка на рекламируемый сайт. При размещении с помощью ссылок сторонних систем допишите в конце ссылки: %random%.
Параметр передачи перехода - по умолчанию link1. Параметр передачи перехода должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, _root.target);.
Параметр передачи "target" - по умолчанию target. Параметр передачи "target" должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, _root.target);.
Ширина и Высота - размеры flash-ролика в пикселях (целое число без указания размерности px).
"Target" ссылки - в каком окне открывать ссылку: _blank - в новом окне или вкладке, _self - в текущем окне/фрейме, _parent - в родительском фрейме, _top - отменяет все фреймы и открывает в текущем окне.
Отступ сверху - размер видимой части баннера сверху от контента сайта в пикселях (целое число без указания размерности px).
Отступ слева - размер видимой части баннера слева от контента сайта в пикселях (целое отрицательное число без указания размерности px. Например "-100"). Если необходимо сделать видимую часть баннера справа от контента сайта, то укажите 0, а flash-ролик должен быть по ширине равен ширине контента сайта + ширина видимой части справа.
Ширина сайта - ширина контента сайта в пикселях (целое число без указания размерности px).
Положение сайта - укажите фактическое расположение контента сайта относительно окна браузера: left | center | right. Необходимо для правильного позиционирования баннера относительно контента.
Ожидание загрузки страницы - yes | no. "yes" - баннер ожидает полной загрузки страницы, а потом отображается. "no" - баннер отображается сразу, как это возможно, не зависимо статуса загрузки страницы.
Время задержки перед расхлопом (в миллисекундах) - время, через которое произойдет расхлоп баннера, после наведения на него мыши. Значение по умолчанию 0 - значит задержки перед расхлопом не будет. Значение указывается в миллисекундах, 1 секунда = 1000 миллисекунд.
Последнее обновление: 01.04.2013