Flash с видео

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

Описание

Баннер фиксированного размера, произвольного дизайна, в рамках которого воспроизводится видео.

Flash с видео - баннер произвольного дизайна, в рамках которого воспроизводится видео. Позволяет показывать видео-ролик внутри обычного flash-баннера.
Состоит из двух частей: flash-ролика (.swf) и самого видео файла (.flv или *.swf).
Воспроизведение видео происходит по нажатию на кнопку «play» или «начать просмотр» или же автостартом, т.е. при загрузке баннера.
Кроме этого, пользователь должен иметь возможность в любой момент остановить и возобновить показ видео.

Пример

Посмотрите как выглядит flash с видео на сайте. Пример

Подготовка

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

1. Flash-ролик (*.swf) – до 300 Кб.
2. Видео файл (*.flv, *.swf) – до 1 Мб в формате *.flv и до 300 Кб в формате *.swf.
3. Картинку-заглушку (*.jpg, *.png, *.gif) с размерами по ширине и высоте, как у flash-ролика.

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

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

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

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

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


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

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

Процесс подготовки flash-ролика отличается в зависимости от того, в каком формате будет видео файл.

Подготовка Flash-ролика с видео в формате flv

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

Переменная vlink передается из JavaScript через FlashVars, поэтому во flash-ролике нужно использовать ее как: _root.vlink.

2. Создайте объект Video, расположите его на сцене и задайте нужные размеры.

3. Задайте имя (Linked Video) для объекта видео, например: my_video.

4. Скопируйте и вставьте код в первый кадр:

var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
my_video.attachVideo(stream_ns); //где my_video - имя объекта видео
stream_ns.onStatus = function(status:Object){ //код, чтобы не было повторного запроса на сервер
    if(status.code == "NetStream.Play.Stop"){
        stream_ns.seek(0);
    }
}
stream_ns.play(_root.vlink);

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

on (release)
{
  getURL(_root.link1, "_blank");
}

Обязательно используйте переменную link1 для подсчёта кликов. Для того, чтобы открывать ссылку баннера в том же окне, укажите во flash-ролике "_top", для открытия ссылки в новом окне - "blank".

6. Расположите кнопки управления воспроизведением видео выше кнопки для перехода на сайт рекламодателя. Присвойте кнопкам имена.

Например, добавим кнопку "старт" и "пауза", присвоим им имена: bplay и bpause.

7. В первом кадре пропишите код для событий клика по кнопкам управления воспроизведением, например так:

bplay._visible = false;
bplay.onRelease = function(){
stream_ns.pause(false);
bplay._visible = false;
bpause._visible = true;
}
bpause.onRelease = function(){
stream_ns.pause(true);
bplay._visible = true;
bpause._visible = false;
}

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

Скачайте для примера исходник баннера flash с видео

Подготовка Flash-ролика с видео в формате swf

1. Для вызова видео в основном ролике пропишите код:

loadMovieNum(_root.vlink + '?link1=' + escape(_root.link1), 300);

Переменная vlink содержит ссылку на видео, загруженное в AdFox. В GET-параметре передаем экранированную ссылку для перехода, чтобы и по второму ролику можно было совершить клик.

2. Для подсчета количества переходов на сайт рекламодателя поместите прозрачную кнопку в верхний слой основного flash-ролика или ролика с видео. На кнопке пропишите следующий код:

on (release)
{
  getURL(_root.link1, "_blank");
}

Обязательно используйте переменную link1 для подсчёта кликов. Для того, чтобы открывать ссылку баннера в том же окне, укажите во flash-ролике "_top", для открытия ссылки в новом окне - "blank".

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

Возможен учет событий, таких как: количество просмотров видео (начало воспроизведения), количество просмотров видео до конца (конец воспроизведения) и количество повторных просмотров видео. Чтобы учитывать эти события, нужно:

1) На кнопке "начало воспроизведения" прописать:

on (release)
{
//………..
getURL('javascript:adfoxTrackingEvents' + _root.bannerID + '("start");');
}

2) Для учета событий "конец воспроизведения" (сколько человек досмотрели видео до конца), нужно прописать:
для видео в формате flv

stream_ns.onStatus = function(status:Object){
    if(status.code == "NetStream.Play.Stop"){
        getURL('javascript:adfoxTrackingEvents' + _root.bannerID + '("end");');
    }
}

3) На кнопке повторного просмотра:

on (release)
{
//………..
getURL('javascript:adfoxTrackingEvents' + _root.bannerID + '("repeat");');
}

4) Если нужно посчитать какие-либо дополнительные события, то используйте переменные начиная с event_4 по event_30.

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

loadMovieNum(_root.event_N,300); 

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

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

При добавлении баннеров Flash с видео в AdFox выберите нужный тип баннера и шаблон Flash с видео [Sync] - для размещения баннера на синхронных кодох вставки, Flash с видео [Async] - для размещения на асинхронных кодах вставки.

  1. Flash ролик - загрузите flash-ролик или укажите ссылку на файл, размещенный на стороннем сервере.

  2. Изображение - загрузите картинку-заглушку или укажите ссылку на файл, размещенный на стороннем сервере.

  3. Видео файл - загрузите видео файл или укажите ссылку на файл, размещенный на стороннем сервере.

  4. URL перехода - полная ссылка для перехода на сайт рекламодателя.

  5. Параметр передачи перехода - по умолчанию link1. Параметр передачи перехода должен совпадать с параметром, указанным при подготовке flash-ролика: getURL(_root.link1, "_blank");.

  6. Ширина и Высота - размеры flash-ролика в пикселях.

  7. "ALT" изображения - текст, отображаемый в том случае, если не было показа flash-ролика и отключена загрузка изображений.

  8. "TARGET" ссылки - параметр, определяющий в каком окне открывать ссылку. "_top" - в текущем окне, "blank" - в новом окне (или вкладке, в зависимости от настроек браузера).

  9. Ссылка на промерочный пиксель - укажите ссылку на промерочный пиксель.

  10. Прозрачность Flash-ролика - будет ли flash-ролик прозрачным на странице: transparent – прозрачный, opaque – непрозрачный.

  11. Параметр передачи видео файла - по умолчанию vlink. Параметр передачи видео файла должен совпадать с параметром, указанным при подготовке flash-ролика в части переменной, содержащей ссылку на видео файл.

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