Screenglide/Expandable с видео

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

Описание

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

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

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

Расхлоп - показ flash-ролика №2;
Схлоп - скрытие flash-ролика №2 и показ flash-ролика №1.

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

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

Пример

Расхлоп при наведении указателя мыши, воспроизведение видео начинается при клике на кнопку "Смотреть видео". Схлоп при отведении указателя мыши.
Пример 1

Расхлоп при наведении указателя мыши, воспроизведение видео начинается автоматически. Схлоп при клике на кнопку "Закрыть".
Пример 2

Расхлоп при наведении указателя мыши, воспроизведение видео начинается автоматически. Схлоп при клике на кнопку "Закрыть видео". Пример 3

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

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

- ActionScript 2.0 и FlashPlayer не ниже 8.0

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

1. Flash-ролик №1 (.swf);
2. Flash-ролик №2 (.swf);
3. Видео-файл (.flv);
4. Картинку-заглушку (.png, .jpg, .gif) с размерами, как у flash-ролика №1.

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

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

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

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

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


Материалы:

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

Скачайте классы и сохраните их в папку с проектом:
Класс для flash-ролика №1
Класс для flash-ролика №2

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

Последовательность показа flash-роликов и их расположение на странице определяется при добавлении баннера в интерфейс AdFox. Данные требования для работы с видео предполагают, что разработчик баннера самостоятельно реализует проигрыватель c видео в рамках баннера, выбирая при этом необходимый внешний вид проигрывателя, кнопки для контроля воспроизведения и самостоятельно назначает им названия.

Подготовка 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. Расположите в верхнем слое прозрачную кнопку и присвойте ей имя экземпляра (Instance Name), соответствующее событию для расхлопа из таблицы "Типы кнопок 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 кодом, который вы должны скачать с нашего сервера и положить в папку с проектом.

Вы не должны вносить каких-либо правок в файлы 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 напишите следующий код на первом кадре главного таймлайн (рекомендуем вставлять код adfox в начало):

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

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

6. Добавление видео

Видео файл обязательно должен вызываться с использованием переменной vlink. Использовать прямую ссылку или относительный путь к видео не допускается.

Допустим, вся анимация и видео у flash-ролика №2 будет находиться в отдельном movieclip с именем main.

Порядок добавления видео:
1. Создайте объект видео. В панели дополнительного меню библиотеки (library) выберите New Video, чтобы создать новый объект video;
2. Присвойте ему имя adfoxVideo;
3. При первом показе flash-ролика №2 необходимо инициализировать видеоплеер, для этого пропишите код на первом кадре мувиклипа main:

var videoPath : String = _root.vlink;
var netConnection : NetConnection;
var netStream : NetStream;

function initAndPlay():Void  //инициализирует видео и начинает проигрывать. 
//Должна вызываться только 1 раз (см.код на 1 кадре главного таймлайн)
{
    netConnection = new NetConnection();
    netConnection.connect(null);
    netStream = new NetStream(netConnection);
    adfoxVideo.attachVideo(netStream);

    netStream.onStatus = function(infoObject:Object)
    {
        if (infoObject.code == "NetStream.Play.Stop")
        {
            resetVideo();
        }
        else if (infoObject.code == "NetStream.Play.Start")
        {
        }
    };

    netStream.play(videoPath);
}

function playVideo():Void //вызывается впоследствии для воспроизведения видео
{
    netStream.pause(false);
}

function resetVideo():Void //ставит видео на паузу и перематывает его в начало
{
    netStream.pause(true);
    netStream.seek(0);
}

4. На последнем кадре мувиклипа main пропишите код:

stop();

Анимация и видеопроигрыватель готовы.

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

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

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

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

8. Расположите в верхнем слое прозрачную кнопку и присвойте ей имя экземпляра (Instance Name), соответствующее событию для расхлопа из таблицы "Типы кнопок flash-ролика №2".

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

Подробнее о расположении кнопок во flash-ролике №2.
Размещение кнопки rollOutClose_af совместно с clickClose_af:
1) Если кнопок управления видео в баннере нет, тогда управление видео происходит в коде flash-ролика №2. В этом случае кнопка clickClose_af располагается слоем выше кнопки rollOutClose_af.
2) Если кнопки управления видео есть, в таком случае, сначала необходимо принять решение об их размещении:
a. Вариант номер один, если кнопки управляются кодом с главного Timeline.
b. Вариант номер два, когда кнопки находятся в том же контейнере, в котором находится само видео. В этом случае размещение кнопки rollOutClose_af будет существенно отличаться.

В любом случае кнопки управления видео должны быть расположены поверх кнопки rollOutClose_af.

Опишем подробнее оба варианта:
1. Кнопки управления видео находятся в главном timeline над прозрачной кнопкой rollOutClose_af, в таком случае обработчик событий кнопок управления видео выглядит следующим образом:

main.netStream.pause(true) – это поставит видео на паузу.  

2. Кнопки управления видео находятся там же где и сам проигрыватель, в таком случае как управлять видео видео вам должно быть известно. При этом под кнопками управления нужно поместить прозрачную кнопку на весь flash-ролик, дать имя rollOutClose и в кадре написать обработчик:

rollOutClose.onRollOut = function(){ 
_root.adFoxStops(); // именно так, данная функция описана в отдельном классе
};

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

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

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

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

_root.adFoxStops();

Кнопки из таблицы "Типы кнопок flash-ролика №2" размещать в таком случае необязательно.

Пример 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);

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

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

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

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

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

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

Подсчет событий в баннерах реализован через вызов переменных event_1event_30.
Событие №1 и событие №2 зарезервировано для подсчёта количества показов flash-ролика №2 (количество расхлопов) и flash-ролика №1 (количество схлопов). Вам для использования доступны события с 3-го по 30-е.
Для учета события в момент наступления действия, которое необходимо посчитать, вам нужно вызвать код:

loadMovieNum(_root.event_N,300); 

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

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

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

  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. Количество авторасхлопов – сколько раз один уникальный пользователь увидит баннер в раслопнутом виде, то есть flash-ролик №2 первым покажется на странице. Первый раз при загрузке баннера в браузере пишется кука с количеством авторасхлопов. Пока в браузере есть кука, пользователь идентифицируется и ему будет показано столько авторасхлопов, сколько задано в параметре баннера. Если куку удалить (или отключить запись кук), то браузер снова будет уникальным и вновь будут показываться авторасхлопы.

  11. Картинка-заглушка – загружаем картинку, которая будет показываться, если у пользователя не установлен flash-плагин.

  12. FLV-ролик – загрузите видео. Если размеры видео превышают 1Мб можно разметить его на стороннем сервере, а в параметре FLV-ролик указать полную ссылку на видео.

  13. Уровень громкости (от 0 до 100) – указываем уровень громкости для видео. 0-нет звука, 100-максимальная громкость.

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

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