[Вариация] Screenglide_new

Описание

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

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

Screenglide/expandable - используются два flash-ролика и картинка-заглушка, сначала показывается один flash-ролик, а затем по какому-либо событию показывается другой flash-ролик. Далее будем называть их flash-ролик №1 и flash-ролик №2. Если у пользователя не установлен flash, то показывается картинка-заглушка.

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

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

Пример

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

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

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

1. ActionScript 2.0;
2. FlashPlayer 8.0.

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

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

Материалы:

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

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

1. Подготовьте flash-ролик №1 по креативу, выданному заказчиком. Важно сделать так, чтобы анимацию во flash-ролике можно было запускать и останавливать одной функцией. При запуске flash-ролика анимация должна быть остановлена.

2. Далее необходимо определить имя класса для кнопки(ок).

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

Имя класса для кнопки
Описание кнопки
adfox.button.ClickOpen При клике на кнопку показывается flash-ролик №2.
adfox.button.RollOverOpen При наведении курсора на кнопку показывается на странице flash-ролик №2. При клике на эту же кнопку происходит переход на сайт рекламодателя. Если в параметрах баннера указано время задержки, то расхлоп произойдёт с задержкой.
adfox.button.GoURL При клике на кнопку происходит только переход на сайт рекламодателя.

3. Создание кнопки:

Все кнопки, описанные в данном руководстве, это экземпляры класса MovieClip, а не класса Button.

В примере рассматривается создание flash-роликов в программе Adobe Flash Professional

Допустим нужна кнопка, при наведении на которую произойдёт показ flash-ролика №2. Из таблицы "Типы кнопок flash-ролика №1" выбираем имя класса для этой кнопки (adfox.button.RollOverOpen).

Рисуем прямоугольник, жмём F8 (либо правой кнопкой по прямоугольнику и выбираем пункт Convert to Simbol). Обязательно тип должен быть MovieClip.

"1"

Точку регистрации объекта, имя объекта и идентификатор выбирайте произвольно, они на работу проекта не влияют.

"3"

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

4. В первом кадре главного таймлайна пропишите следующий код:

import adfox.ServerSE;//импорт библиотеки класса
var server:ServerSE = new ServerSE(onVerification,onExpand,onUnExpand);//создание экземпляра класса для синхронизации flash-роликов на странице 
function onVerification(){
    //тело функции, которая будет вызвана после синхронизации
}
function onExpand(){
    //тело функции, которая будет вызвана в момент расхлопа
}
function onUnExpand(){
    //тело функции, которая будет вызвана в момент схлопа
}

Описание:

  • функция onVerification – вызывается после того, как прошла синхронизация flash-роликов на странице. Использовать для старта анимации, если это предусмотрено креативом. Можно оставить пустой.

  • функция onExpand – вызывается при расхлопе. Использовать для остановки анимации во flash-ролике при расхлопе. Можно оставить пустой.

  • функция onUnExpand – вызывается в момент схлопа баннера. Использовать для повторного запуска анимации, если это предусмотрено креативом. Можно оставить пустой.

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

1. Подготовьте flash-ролик №2 (вид в расхлопе) согласно креатива, выданного заказчиком. Важно сделать так, чтобы анимацию в ролике можно было запускать и останавливать одной функцией.
При запуске flash-ролика анимация должна быть остановлена.

2. Далее необходимо определить имя класса для кнопки(ок).

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

Имя класса для кнопки
Описание кнопки
adfox.button.ClickClose При клике на кнопку скрывается flash-ролик №2 и показывается flash-ролик №1.
adfox.button.RollOutClose При отведении курсора с кнопки скрывается flash-ролик №2 и показывается flash-ролик №1. При клике на эту же кнопку происходит переход на сайт рекламодателя.
adfox.button.GoURL При клике на кнопку происходит только переход на сайт рекламодателя.

3. Создание кнопки точно такое же, как и для flash-ролика №1, с той лишь разницей что имена для классов выбирать в другой таблице.

3. В первом кадре главного таймлайна пропишите следующий код:

import adfox.ClientSE;
var client:ClientSE = new ClientSE(onVerification,onExpand,onUnExpand); //создание экземпляра класса для синхронизации flash-роликов на странице
function onVerification(){
    //тело функции, которая будет вызвана после синхронизации
}
function onExpand(){
    //тело функции, которая будет вызвана в момент расхлопа
}
function onUnExpand(){
    //тело функции, которая будет вызвана в момент схлопа
}

Описание:

  • функция onVerification – вызывается после того, как прошла синхронизация flash-роликов на странице. Использовать для подготовки к расхлопу. Можно оставить пустой.

  • функция onExpand – вызывается при расхлопе. Использовать для запуска анимации во flash-ролике, если предусмотрено креативом. Можно оставить пустой.

  • функция onUnExpand – вызывается в момент схлопа баннера. Использовать для остановки анимации при схлопе, если это предусмотрено креативом. Можно оставить пустой.

Подготовка flash-роликов закончена.
Тестируйте, запускайте оба ролика. Если что-то работает не так, как задумано, проверьте параметры публикации: версия FlashPlayer не ниже 8-ой, версия ActionScript строго 2.

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

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

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

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

loadMovieNum(_root.event_N,300); 

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

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

  1. Flash-ролик №1 и Flash-ролик №2 – загрузите flash-ролики, или укажите ссылки на файлы, размещенные на стороннем сервере. Оба файла должны обязательно располагаться на одном сервере.

  2. Ширина Flash-ролика №1, Ширина Flash-ролика №2, Высота Flash-ролика №1 и Высота Flash-ролика №2 – укажите размеры (целое число) в пикселях. Также есть возможность указать размер 100% (знак % обязателен) для ширины или высоты. Другие размеры в % указывать нельзя.

  3. Прозрачность Flash-ролика №1 (wmode) и Прозрачность Flash-ролика №2 (wmode) – будет ли flash-ролик прозрачным на странице: transparent – прозрачный, opaque – непрозрачный.

  4. Сдвиг по оси X Flash-ролика №2 (left) и Сдвиг по оси Y Flash-ролика №2 (top) – указываем, если необходимо, сдвиг flash-ролика №2 относительно flash-ролика №1.

  5. Направление расхлопа – в какую сторону должен расхлопываться баннер. Возможные значения: overhead_left_corner, overhead_right_corner, lower_left_corner, lower_right_corner, central_point, right, left, bottom, top. Подробнее с иллюстрациями значения рассмотрены ниже.

  6. Расхлоп со сдвигом контента (yes/no)yes – расхлоп со сдвигом контента, или no – без сдвига контента.

  7. Очередность показа (№ Flash-ролика 1/2) – номер flash-ролика (1 или 2), который будет всегда показываться при загрузке на странице первым, а далее по сценарию.

  8. Flash-ролик №1 всегда виден на странице (yes/no) – будет ли Flash-ролик №1 виден на странице даже во время расхлопа: yes – да, no – нет.

  9. Величина задержки при расхлопе (мс) – как долго по времени пользователь должен задержать указатель мыши на баннере, чтоб произошел расхлоп. Указывается значение в миллисекундах.

  10. Количество авторасхлопов – количество авторасхлопов для уникального пользователя, т.е. сколько раз один уникальный пользователь увидит баннер в раслопнутом виде.

  11. Картинка-заглушка – загрузите картинку, которая будет показываться, если у пользователя не установлен 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"

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