AdFox. Базовый курс
Видео-хелп
Пользователи
Сайты
Рекламные кампании
Баннеры
Таргетирование
Статистика
Частые вопросы
Требования к баннерам
Banner requirements
ГлоссарийТребования к screenglide / expandable баннерам с использованием видео
Описание формата
На странице размещается flash-ролик №1, при определённом действии или событии (наведение, клик) показывается flash-ролик №2 (поверх контента или сдвигая его), в котором может воспроизводится видео.
-
Для размещения необходимо подготовить следующие материалы:
- Flash-ролик №1 (swf);
- Flash-ролик №2 (swf);
- Заглушку для flash-ролика №1 (gif, jpg, png);
- Видео-файл (flv).
В данном материале подробнее описываются требования по подготовке swf-файлов для баннеров screenglide или expandable, в рамках которых используется видео. Базовые операции по обеспечению непосредственно смене двух flash-роликов описаны в материале «Требования к screenglide / expandable баннерам». Пожалуйста, прочтите их перед началом работы с видео.
Соответственно, при подготовке баннеров необходимо использовать те же классы и названия кнопок, которые представлены в требованиях к screenglide / expandable баннерам, реализующие большую часть функционала по показу и закрытию баннеров.
Ссылки на классы:
http://sites.help.adfox.ru/uploads/flashreel1.as
http://sites.help.adfox.ru/uploads/flashreel2.as
|
|
|
| clickOpen_af | При клике на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2 |
| rollOverOpen_af | При наведении курсора на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2. При клике на эту же кнопку происходит переход на сайт рекламодателя. |
| goURL_af | При клике на кнопку происходит только переход на сайт рекламодателя |
Типы кнопок flash-ролика №2:
|
|
|
| clickClose_af | При клике на кнопку вызывается JavaScript-функция, которая прячет на странице flash-ролик №2 и показывает flash-ролик №1 |
| rollOutClose_af | При отведении курсора с кнопки вызывается JavaScript-функция, которая прячет на странице flash-ролик №2 и показывает flash-ролик №1. При клике на эту же кнопку происходит переход на сайт рекламодателя. |
| goURL_af | При клике на кнопку происходит только переход на сайт рекламодателя |
ActionScript-код для добавления в первый кадр flash-ролика №1:
stop();
globalObj = this;
#include "flashreel1.as"
Если необходимо в любой произвольный момент вызвать расхлоп, достаточно в ActionScript-е flash-ролика №1 прописать следующий код:
_root.sendCommand_af();
Приведем пример: есть необходимость расхлопнуть баннер на третьей секунде, после сихнронизации flash-роликов на странице. Для данной реализации после подключения нашего "класса" flashreel1.as во flash-ролике №1 необходимо написать следующий код:
setTimeout(_root.sendCommand_af,3000);
ActionScript-код для добавления в первый кадр flash-ролика №2:
stop();
_root.globalObj = this.main;
#include "flashreel2.as"
function globalPlay(){
/*данная функция вызывается в момент расхлопа */
}
function globalStop(){
/*данная функция вызывается в момент схлопа */
}
Если необходимо в любой произвольный момент вызвать схлоп, достаточно в 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);
Данные требования для работы с видео предполагают, что разработчик баннера реализует самостоятельно проигрыватель c видео в рамках баннера, выбирая при этом необходимый внешний вид проигрывателя, кнопки для контроля воспроизведения и самостоятельно назначает им названия.
Подсчёт событий в баннере
Подсчет событий в баннерах реализован через вызов переменных event_1 … event_20. Событие №1 и событие №2 зарезервировано для подсчёта количества показов flash-ролика №2 (количество расхлопов) и flash-ролика №1 (количество схлопов). Вам для использования доступны события с 3-го по 20-е.
Для учета события в момент наступления действия, которое необходимо посчитать, вам нужно вызвать код: loadMovieNum(_root.event_N,300); где N это номер события, число от 3 до 20.
Дополнительные функции для работы с видео, упрощающие подготовку баннера
globalPlay: функция выполняется во flash-ролике №2 в момент его показа (расхлопа). Соответственно, при подготовке материалов для размещения к функции globalPlay можно привязать начало воспроизведения видео/включение звука и т.д.
globalStop: функция выполняется в момент закрытия flash-ролика №2 (cхлоп). К ней можно привязать такие функции как: остановка видео, выключение звука и т.д.
Пример использования дополнительных функций
Допустим, вся анимация находится в movieclip main, где есть movieclip video_mc, в котором создан видеопроигрыватель с именем stream. Для того, чтобы при расхлопе запустить показ видео, нужно написать в теле функции globalPlay вместо закомментированного текста следующее: main.video_mc.stream.play(_root.vlink);. Для остановки данного видео при схлопе в функции globalStop вместо закомментированного текста написать: main.video_mc.stream.close();.
Подробный пример screenglide / expandable баннера с использованием видео
Сценарий показа:
В контенте сайта размещается flash-ролик №1 с размерами 240х400. При клике на кнопку «показать видео» появляется flash-ролик №2 с размерами 600х400, в котором начинается показ видео. При клике на кнопку "Х" или при отведении курсора мыши с flash-ролика №2 прячется сам flash-ролик №2 и показывается flash-ролик №1. Перейти на сайт рекламодателя можно при клике на баннер в любом месте, кроме: кнопок управления видеовоспроизведением, кнопки "Х" и кнопки "Показать видео".
Подготовка flash-ролика №1
Исходя из сценария показа видим, что для flash-ролика №1 необходимо использовать две кнопки: для перехода на сайт рекламодателя (goURL_af), и для расхлопа по клику (clickOpen_af) (см. выше таблицу наименований кнопок). Для flash-ролика №2 также необходимо использовать две кнопки: для перехода на сайт рекламодателя, она же для схлопа баннера (rollOutClose_af), и кнопка только для схлопа по клику (clickClose_af).
Вся анимация во flash-ролике №1 будет проходить в первом кадре внутри movieclip с именем main. Поверх анимации в movieclip в главном timeline создаем прозрачную кнопку с именем goURL_af. Теперь поверх данной кнопки создаем кнопку «показать видео» и называем clickOpen_af. Если создать кнопку в главном timeline по каким-либо причинам не получается, то необходимо выполнить следующие действия:
- создать кнопку в любом месте, где это удобно;
- самостоятельно дать имя кнопке (например viewVideo);
- написать обработчик события, например:
viewVideo.onRelease = function(){
_root.sendCommand_af(); //именно так, данная функция описана во встраиваемом классе
}
Итак, flash-ролик №1 готов. Если всё сделано правильно, то при запуске не должно быть никакой анимации, т.е flash-ролик №1 должен стоять в ожидании flash-ролика №2.
Подготовка flash-ролика №2
Вся анимация, включая видео у flash-ролика №2 будет находится в отдельном movieclip'e с именем main. Видеопроигрыватель находится в movieclip с именем video_mc, который в свою очередь находится в movieclip main и имя видеопроигрывателя, допустим, stream.
Как создать видеопроигрыватель в ActionScript 2.0
var connection:NetConnection = new NetConnection();
connection.connect(null);
var stream:NetStream = new NetStream(connection);
my_video.attachVideo(stream);
Данный код сначала создает новый объект NetConnection, и использует его для создания нового объекта NetStream с именем stream. В панели дополнительного меню библиотеки (library) выберите New Video чтобы создать новый объект video и дайте его экземпляру в сцене имя my_video. Когда происходит показ flash-ролика №2 вызывается функция globalPlay. Для запуска видео пропишите следующий код:
function globalPlay(){
main.video_mc.stream.play(_root.vlink);
}Функция, которая выполнится в момент закрытия flash-ролика №2, выглядит следующим образом:
function globalStop(){
main.video_mc.stream.close();
}
Итак, анимация и видеопроигрыватель готовы. Далее необходимо разместить кнопки rollOutClose_af и clickClose_af на flash-ролике №2. Для этого на главном timeline поверх всего разместите кнопку clickClose_af.
Размещение кнопки rollOutClose_af : если не будет кнопок управления видео, то разместите ее под кнопкой clickClose_af. В противном случае необходимо принять решение, что для вас будет проще: управлять видеовоспроизведением с главного timeline, или разместить кнопки управления видео там же, где и сам проигрыватель, но тогда там ещё нужно будет разместить нашу кнопку rollOutClose_af , причём под кнопками управления видео.
-
Опишем подробнее оба варианта:
- Кнопки управления видео находятся в главном timeline над прозрачной кнопкой rollOutClose_af, в таком случае обработчик событий кнопок управления видео выглядит следующим образом:
main.video_mc.stream.pause() – это поставит видео на паузу. -
Кнопки управления видео находятся там же где и сам проигрыватель, в таком случае управление видео должно быть вам известно, а вот под кнопками управления нужно поместить прозрачную кнопку на весь flash-ролик, дать имя rollOutClose_af и в кадре написать обработчик:
clickClose.onRelease = function(){
_root.adFoxStops(); // именно так, данная функция описана в отдельном классе
};
Для предотвращения схлопа при наведении курсора мыши на дополнительные кнопки управления воспроизведением, нужно для этих кнопок прописать обработчик:
play.onRollOver = function(){ //вместо play - подставьте имя кнопки управления воспроизведением
_root.paramOfShlop = 1;
}
Теперь flash-ролик №2 готов. Для локальной проверки синхронизации запуска анимации между двумя роликами запустите только flash-ролик №2 и, если всё сделано правильно, не должно быть ни анимации ни видео, так как flash-ролик №2 ждет команду на воспроизведение от flash-ролика №1.
Для финальной проверки запускайте оба flash-ролика, теперь всё должно работать, за исключением видео, так как оно воспроизводится из переменной vlink, которая передаётся нашей системой, но при добавлении баннера в систему всё будет работать.
Финальная проверка производится после добавления баннера в систему с использованием соответствующего шаблона.
Последнее обновление: 16.06.2011
См. также: