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

http://specs.adfox.ru/page/70/

Описание

Интерактивный баннер, расхлопывающийся в зависимости от действий пользователя (клик, наведение и т.д.), со сдвигом контента или поверх его.

Другие используемые названия данного типа баннера: Мультипанельные баннеры, MPU, FlyScreen, OverLay.

Screenglide/Expandable – есть различные варианты использования данного шаблона для показа рекламы, общее у всех этих вариантов то, что используются два flash-ролика (далее – flash-ролик №1 и flash-ролик №2) и картинка-заглушка, сначала показывается flash-ролик №1, а затем по какому-либо событию показывается flash-ролик №2. Если у пользователя не установлен flash, то показывается картинка-заглушка (она не расхлопывается).

Функциональные возможности шаблона на уровне подготовки flash-роликов:
– при наведении курсора, клике на кнопку или в определенный момент анимации во flash-ролике №1 открывается flash-ролик №2;
– при отведении курсора, клике на кнопку, по окончанию анимации или по какому-либо событию во flash-ролике №2 прячется flash-ролик №2 и показывается flash-ролик №1;
– при клике на кнопку происходит переход на сайт рекламодателя.

Функциональные возможности шаблона на уровне добавления баннеров:
– показ flash-ролика №2 поверх контента или со сдвигом контента;
– ограничение показов в расхлопнутом виде баннера для уникального пользователя;
– задержка при наведении на flash-ролик №1;
– направление расхлопа;
– видимость flash-роликa №1 на странице;
– прозрачность flash-роликов на странице;
– очередность показов flash-роликов.

Пример

Расхлоп и схлоп по наведению указателя мыши:
Пример 1
Пример 2

Расхлоп и схлоп по клику на кнопку:
Пример 3

Расхлоп по клику на кнопку “Старт”, схлоп по окончанию анимации. Дополнительно размещен обычный flash-баннер (перетяжка).
Пример 4

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

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

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

1. ActionScript 2.0;
2. FlashPlayer 8.0.

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

1. flash-ролик №1;
2. flash-ролик №2;
3. картинку-заглушку (*.jpg, *.png, *.gif) с размерами, как у flash-ролика №1.

Требования к файлам (Скрыть)

Ограничение на размер:
– Графические файлы (*.jpg, *.png, *.gif) — до 300 Кб;
– Swf-файлы (flash-ролики *.swf) — до 300 Кб.

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

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

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


Материалы:

Для упрощения подготовки баннеров используются классы ActionScript, подготовленные для данного типа баннера. Необходимые действия прописаны уже в классе.
Скачайте классы и сохраните их в папку с проектом:
Класс для flash-ролика №1
Класс для flash-ролика №2

Скачайте пример исходника Screenglide/Expandable баннера

Последовательность показа flash-роликов и их расположение на странице определяется при добавлении баннера в интерфейс AdFox.

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

1. Определите, по какому событию будет произведен расхлоп (показ) flash-ролика №2.

В случае автоматического расхлопа в определенный момент анимации достаточно расположить код, приведенный в пункте 4 в кадре анимации.

Типы кнопок flash-ролика №1

Название кнопки Действие
clickOpen_af При клике на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2
rollOverOpen_af При наведении курсора на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2. При клике на эту же кнопку происходит переход на сайт рекламодателя.
goURL_af При клике на кнопку происходит только переход на сайт рекламодателя
Кнопки необходимо размещать в первом кадре, независимо от того в каком кадре они начинают использоваться. Для скрытия кнопок используйте свойство MovieClip visible=false (пропишите этот код в первом кадре), для того чтобы сделать кнопку доступной измените свойство на visible=true.
Также возможно спрятать кнопку, поместив её за пределами области видимости, а потом поставить её на нужное место.
В одном flash-ролике не должно быть двух кнопок с одинаковыми именами.

2. Расположите в верхнем слое прозрачную кнопку и присвойте ей имя экземпляра, соответствующее событию для расхлопа из таблицы “Типы кнопок flash-ролика №1”. Чтобы задать имя для кнопки нажмите Ctrl+F3 (для редактора Adobe Flash), откроется панель properties для данного объекта, найдите строкуInstansName (для русскоязычных версий редактора найдите строку Имя Объекта).
Использование кода на кнопках не допускается. Обработчики событий для кнопок уже прописаны в классах и дополнительный код для кнопки лишь вызовет ошибку.

При подготовке flash-роликов для данного формата необходимо ActionScript код размещать только в кадрах.

3. Для flash-ролика №1 напишите следующий код на первом кадре главного таймлайн (рекомендуем вставлять код adfox в начало):

stop(); _root.globalObj = this.main; //имя экземпляра (Instance Name), в котором происходит вся анимация. Если анимация на главном таймлайне, то *this*. #include "flashreel1.as"

globalObj – это переменная, в которой хранится ссылка на объект с анимацией.
Если вся анимация проходит на главном timeline, то напишите _root.globalObj = this;.
Если же вся анимация сделана в отдельном movieclip, то данному movieclip необходимо дать имя экземпляраmain (по аналогии с именем кнопки) и написать _root.globalObj = this.main;.
Третью строчку оставьте без изменений. В ней подключается файл с ActionScript кодом, который вы должны скачать с нашего сервера и положить в папку с проектом.

Если анимация имеет программный вид, то присвойте _root.globalObj null. Анимация до момента синхронизации должна быть остановлена в обоих flash-роликах и запускаться (останавливаться) только через функции _root.globalPlay и _root.globalStop.
Код, который надо поместить в первый кадр главного таймлайна в случае использования программной анимации:

stop(); _root.globalObj = null; #include "flashreel1.as" function globalPlay(){ /*данная функция вызывается в момент синхронизации и при схлопе flash-ролика №2 здесь надо написать код, запускающий вашу анимацию */ } function globalStop(){ /*данная функция вызывается в момент расхлопа flash-ролика №2 здесь надо написать код, останавливающий вашу анимацию */ }
Вы не должны вносить каких-либо правок в файлы flashreel1.as и flashreel2.as.

4. Если необходимо в любой произвольный момент вызвать расхлоп, достаточно в ActionScript flash-ролика №1 прописать следующий код:

_root.sendCommand_af();
Приведем пример: есть необходимость расхлопнуть баннер на третьей секунде, после синхронизации flash-роликов на странице. Для данной реализации после подключения нашего “класса” flashreel1.as во flash-ролике №1 необходимо написать следующий код:
setTimeout(_root.sendCommand_af,3000);

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

5. Определите, по какому событию будет произведен схлоп flash-ролика №2 и показ flash-ролика №1.

В случае автоматического схлопа в определенный момент анимации достаточно расположить код, приведенный в пункте 8, в кадре анимации. Для схлопа по окончании анимации используйте значение переменной adfoxAutoShrink , подробнее в п.7.

Типы кнопок flash-ролика №2

Название кнопки Действие
clickClose_af При клике на кнопку вызывается JavaScript-функция, которая прячет на странице flash-ролик №2 и показывает flash-ролик №1
rollOutClose_af При отведении курсора с кнопки вызывается JavaScript-функция, которая прячет на странице flash-ролик №2 и показывает flash-ролик №1. При клике на эту же кнопку происходит переход на сайт рекламодателя.
goURL_af При клике на кнопку происходит только переход на сайт рекламодателя

6. Расположите в верхнем слое прозрачную кнопку и присвойте ей имя экземпляра, соответствующее событию для расхлопа из таблицы “Типы кнопок flash-ролика №2”.

Использование кода на кнопках не допускается. Обработчики событий для кнопок уже прописаны в классах и дополнительный код для кнопки лишь вызовет ошибку.

7. Для flash-ролика №2 напишите следующий код на первом кадре главного таймлайн (рекомендуем вставлять код adfox в начало):

stop(); _root.globalObj = this.main; //имя экземпляра (Instance Name), в котором происходит вся анимация. Если анимация на главном таймлайне, то *this*. var adfoxAutoShrink = false; //если по окончании анимации нужен автосхлоп, то *true* #include "flashreel2.as" function globalPlay(){ /*данная функция вызывается в момент расхлопа здесь надо написать код, запускающий вашу анимацию */ } function globalStop(){ /*данная функция вызывается в момент схлопа здесь надо написать код, останавливающий вашу анимацию */ }

globalObj – это переменная, в которой хранится ссылка на объект с анимацией.
Если вся анимация проходит на главном timeline, то напишите _root.globalObj = this.
Если же вся анимация сделана в отдельном movieclip, то данному movieclip необходимо дать имя экземпляраmain (по аналогии с именем кнопки) и написать _root.globalObj = this.main;.

Четвертую строчку оставьте без изменений, в ней подключается файл с ActionScript кодом, который вы должны скачать с нашего сервера и положить в папку с проектом.
Функции globalPlay и globalStop выполняются в момент показа и скрытия flash-ролика №2 и могут быть использованы для запуска дополнительных функций, привязанных к этим моментам (например, запуск/остановка видео). В рамках этой статьи данный вопрос подробно не рассматривается.

Если анимация имеет программный вид, то присвойте _root.globalObj null. Анимация до момента синхронизации должна быть остановлена в обоих flash-роликах и запускаться (останавливаться) только через функции _root.globalPlay и _root.globalStop.

8. Если необходимо в любой произвольный момент вызвать схлоп, достаточно в ActionScript flash-ролика №2 прописать следующий код:

_root.adFoxStops();
Пример 1: есть необходимость схлопнуть flash-ролик №2 на шестой секунде, после начала его показа (события расхлопа). Для данной реализации необходимо написать в функции globalPlay() следующий код:
setTimeout(_root.adFoxStops,6000); 

Пример 2: необходимо схлопнуть баннер, при наступлении какого-либо события (например, нажатие на клавишу Insert) во flash-ролике №2. Пропишите следующий код:
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.getCode() == 45) {
_root.adFoxStops();//вызов функции которая схлопнет баннер
}
};
Key.addListener(keyListener);

9. Если во flash-ролике №2 схлоп осуществляется по отведению курсора мыши и присутствуют дополнительные кнопки (например, на сайты социальных сетей, либо на какие-то другие ресурсы), то нужно для этих кнопок прописать обработчик, который не даст произвести схлоп flash-ролика №2:

play.onRollOver = function(){ //вместо play подставьте имя кнопки _root.paramOfShlop = 1; }

Обработчики кликов для дополнительных кнопок должны быть выполнены по требованиям к flash с несколькими кнопками для перехода.

Проверка работоспособности flash-роликов в Adobe Flash

Запустите flash-ролик №1 по ctrl+enter, анимация не должна воспроизводиться.
Запустите flash-ролик №2 по ctrl+enter, при этом в окне вывода должно быть написано: “синхронизация флешек на странице прошла успешно” и в первом ролике запускается анимация.

В зависимости от выбранного сценария рахлопа (клик по кнопке (clickOpen_af), наведение указателя мыши (rollOverOpen_af) или в определенный момент анимации (_root.sendCommand_af();) запустите расхлоп, при этом во flash-ролике №1 анимация останавливается, а во flash-ролике №2 начинает играть.

В зависимости от выбранного сценария схлопа (клик по кнопке (clickClose_af), отведение указателя мыши (rollOutClose_af) или в определенный момент анимации (_root.adFoxStops();) запустите схлоп, при этом во flash-ролике №2 анимация останавливается, а во flash-ролике №1 начинает играть.

Если все же что-то работает не так, то проверьте:
1. Подключены ли классы flashreel1.as и flashreel2.as (лежат ли они в той же папке, что и 2 flash-ролика).
2. Присутствует ли код из п3 и п7 требований на первых кадрах главного таймлайн.
3. Правильно ли названы кнопки для расхлопа и схлопа и расположены ли они с первого кадра (не важно с какого кадра они начинают показываться) пункт 1 требований.
4. Правильное ли имя присвоено переменной globalObj во flash-ролике №1 и flash-ролике №2.
5. Версия ActionScript 2.0. Версия FlashPlayer 8.0 и выше.

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

Подсчет событий в баннерах реализован через вызов переменных event_1 … event_20.

event_1 и event_2 зарезервировано для подсчёта количества показов flash-ролика №2 (количество расхлопов) и flash-ролика №1 (количество схлопов). Вам для использования доступны события, начиная сevent_3 по event_20.

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

loadMovieNum(_root.event_N,300);

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

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

При добавлении баннера “Screenglade/Expandable баннеры” выберите нужный тип баннера и шаблон“Screenglade/Expandable баннеры”. Укажите следующие параметры:

  1. Flash-ролик №1 и Flash-ролик №2 – загрузите flash-ролики, или укажите ссылки на файлы, размещенные на стороннем сервере. Оба файла должны обязательно располагаться на одном сервере.
  2. Ширина Flash-ролика №1Ширина Flash-ролика №2Высота Flash-ролика №1 и Высота Flash-ролика №2 – укажите размеры (целое число) в пикселях без указания размерности px, например 240.
Если вы хотите добавить перетяжку, то можно указать размер ширины как 100% для обоих flash-роликов. Важно понимать, что ширина берется от ближайшего спозиционированного родительского элемента. Например, если ваш баннер находится в body, то ширина баннера будет равна ширине элемента body.
  1. Прозрачность Flash-ролика №1 (wmode) и Прозрачность Flash-ролика №2 (wmode) – будет ли flash-ролик прозрачным на странице: transparent – прозрачный, opaque – непрозрачный.
  2. Сдвиг по оси X Flash-ролика №2 (left) и Сдвиг по оси Y Flash-ролика №2 (top) – указываем, если необходимо, сдвиг flash-ролика №2 относительно flash-ролика №1.
  3. Направление расхлопа – в какую сторону должен расхлопываться баннер. Возможные значения: overhead_left_corner, overhead_right_corner, lower_left_corner, lower_right_corner, central_point, right, left, bottom, top. Подробнее с иллюстрациями значения рассмотрены ниже.
  4. Расхлоп со сдвигом контента (yes/no) – yes – расхлоп со сдвигом контента, или no – без сдвига контента.
  5. Очередность показа (№ Flash-ролика 1/2) – номер flash-ролика (1 или 2), который будет всегда показываться при загрузке на странице первым, а далее по сценарию.
  6. Flash-ролик №1 всегда виден на странице (yes/no) – будет ли Flash-ролик №1 виден на странице даже во время расхлопа: yes – да, no – нет.
  7. Величина задержки при расхлопе (мс) – как долго по времени пользователь должен задержать указатель мыши на баннере, чтоб произошел расхлоп. Указывается значение в миллисекундах.
  8. Количество авторасхлопов – сколько раз один уникальный пользователь увидит баннер в раслопнутом виде, то есть flash-ролик №2 первым покажется на странице. Первый раз при загрузке баннера в браузере пишется кука с количеством авторасхлопов. Пока в браузере есть кука, пользователь идентифицируется и ему будет показано столько авторасхлопов, сколько задано в параметре баннера. Если куку удалить (или отключить запись кук), то браузер снова будет уникальным и вновь будут показываться авторасхлопы.
  9. Картинка-заглушка – загрузите картинку, которая будет показываться, если у пользователя не установлен flash-плагин.

Направление расхлопа

overhead_left_corner – из левого верхнего угла открывать вправо – вниз

"overhead_left_corner"

overhead_right_corner – из верхнего правого угля открывать влево – вниз

"overhead_right_corner"

lower_left_corner – из нижнего левого угла открывать вправо – вверх

"lower_left_corner"

lower_right_corner – из нижнего правого угла открывать влево – вверх

"lower_right_corner"

central_point – из центральной точки открывать по центру

"central_point"

right – вправо

"right"

left – влево

"left"

bottom – вниз

"bottom"

top – вверх

"top"

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s