SideKick с видео

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

Описание

При наведении курсора на баннер происходит расхлоп до большего баннера и сдвигается контент сайта. В рамках баннера воспроизводится видео.

SideKick с видео - баннер, сдвигающий контент сайта влево по клику или наведению на него курсора мыши.
Представляет собой взаимодействие двух flash-баннеров. Flash-ролик №1 - это обычный формат, размещенный в контенте сайта. При наведении курсора или клике на flash-ролик №1, показывается flash-ролик №2, сдвигающий на свою ширину влево контент сайта. После показа ролика или нажатия на кнопку «Закрыть» контент сайта возвращается на прежнее место.
Во flash-роликах можно воспроизводить видео.

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

Минимальные требования к среде разработки:

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

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

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

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

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

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

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

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


Материалы:

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

Подготовка 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 (для русскоязычных версий редактора найдите строку Имя Объекта).
Использование кода на кнопках не допускается. Обработчики событий для кнопок уже прописаны в классах и дополнительный код для кнопки лишь вызовет ошибку.

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

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

stop(); 
globalObj = this; //имя объекта, в котором происходит вся анимация.
#include "flashreel1SideKick.as"

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

Вы не должны вносить каких-либо правок в файлы flashreel1SideKick.as и flashreel2SideKick.as.

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

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

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

5. Для flash-ролика №2 напишите следующий код на первом кадре:

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

Запись _root.globalObj = this.main; говорит о том, что вся анимация происходит в movieclip’е с именем main который лежит на главной сцене.

Пятую строчку оставьте без изменений, в ней подключается файл с 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 При клике на кнопку происходит только переход на сайт рекламодателя

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

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;
}

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. Подключены ли классы flashreel1SideKick.as и flashreel2SideKick.as (лежат ли они в той же папке, что и 2 flash-ролика).
2. Присутствует ли код из п3 и п5 требований на первых кадрах главного таймлайн.
3. Правильно ли названы кнопки для расхлопа и схлопа и расположены ли они с первого кадра (не важно с какого кадра они начинают показываться) см. п1 требований.
4. Какое имя присвоено переменной globalObj во flash-ролике №1 и flash-ролике №2.
5. Версия ActionScript 2.0. Версия FlashPlayer 8.0 и выше.

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

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

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

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

loadMovieNum(_root.event_N,300); 

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

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

При добавлении SideKick баннера через интерфейс AdFox выберите необходимый тип баннера и шаблон "SideKick баннеры с видео". Укажите следующие параметры:

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

  2. Ширина Flash-ролика №1, Ширина Flash-ролика №2, Высота Flash-ролика №1 и Высота Flash-ролика №2 – указать размеры можно только в пикселях. Если для flash-ролика №2 указать размеры 100%х100%, то высота и ширина flash-ролика №2 будет равна ширине и высоте окна браузера.

  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, lower_left_corner, right. Подробнее с иллюстрациями значения рассмотрены ниже.

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

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

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

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

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

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

"overhead_left_corner"

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

"lower_left_corner"

right – вправо

"right"

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