Размещение и настройка SWF-контейнера

1. Что такое SWF-контейнер?

SWF-контейнер — это универсальный инструмент для показа различных баннеров:

flash-баннеров фиксированного размера (swf-баннеры);
видеобаннеров: FLV, MPEG4 (flv-баннеры);
графических баннеров форматов JPG, GIF, PNG (image-баннеры);
html-баннеров.

Кроме того, в контейнере возможна настройка следующих параметров:

пользовательский порядок показа баннеров. Используя данный параметр можно ограничить контейнер для показа только определённого формата баннеров (например swf|html);
режим отображения видео (автоматическое воспроизведение / по наведению);
режим контроля клика swf-баннеров (клик осуществляет контейнер / клик осуществляет баннер);
режим масштабирования flv, swf и image баннеров (не масштабировать / масштабировать баннер по размерам контейнера по ширине / по высоте / по ширине и высоте);
ссылка на index.xml для локального тестирования (разработки) html (swf, image)-баннеров.

SWF-контейнер представляет собой swf-файл, исходный код которого свободно предоставляется для ознакомления.

SWF-контейнер размещается непосредственно на странице сайта, а не через AdRiver, что обеспечивает безопасный показ сторонних баннеров.
Файл SWF-контейнера может храниться непосредственно на сервере издателя и вставляется на страницу как обычный swf-файл. Необходимые для запроса баннера параметры передаются в SWF-контейнер через переменные flashvars.

Контейнер отправляет в AdRiver запрос на xml-баннер, который может быть как стандартный (загруженный через интерфейс AdRiver), так и с произвольным файлом index.xml, содержащим секцию информации для показа HTML-контента в контейнере.

SWF-контейнер поддерживает вызов событий для всех доступных баннеров (flv, swf, image и html-баннеров).

Наверх

2. Как разместить SWF-контейнер на странице?

Скачайте архив, в котором содержатся следующие файлы:

SWF-контейнер (container.swf);
файлы с исходным кодом контейнера (папки adriver, container);
пример flv-баннера (0.flv);
пример swf-баннера (0.swf);
пример image-баннера (0.gif);
пример html-баннера (test.html);
пример html-страницы с SWF-контейнером (index.html);
пример пользовательского xml-файла (index.xml);
пример файла стилей (test.css).

Вставьте SWF-контейнер на сайт как обычный swf-файл. Рассмотрим пример динамического размещения контейнера (когда альтернативный HTML-контент заменяется на Flash-контент в случае, если есть достаточная поддержка JavaScript и Flash) с использованием SWFObject.

Скачайте последнюю версию библиотеки swfobject.js на странице проекта SWFObject в Google Code.
Разместите библиотеку swfobject.js на сервере и подключите на странице строкой вида:
```

<script type="text/javascript" src="http://example.com/swf-container/swfobject.js"></script>
```
где src — путь до файла swfobject.js.

Создайте HTML-контейнер с альтернативным контентом и задайте для него id:


<div id="AdRiver_container">Альтернативный контент, если нет возможности показать SWF-контейнер</div>

Разместите SWF-контейнер с помощью JavaScript:


<script type="text/javascript">
	var flashvars = {};
	flashvars.request = escape("http://ad.adriver.ru/cgi-bin/erle.cgi?sid=1&ad=279793&bt=54&pid=636432&bid=1243230&bn=1243230&rnd=![rnd]");
	flashvars.showingOrder = "flv|swf|image|html";
	flashvars.videoMode = "playOnOver";
	flashvars.swfMode = "simple";
	flashvars.scaleMode = "scaleAll";
	var params = {};
	params.allowscriptaccess = "always";
	var attributes = {};
	swfobject.embedSWF("http://www.example.com/swf-container/container.swf", "AdRiver_container", "90%", "90%", "8.0.0", "http://www.example.com/swf-container/expressInstall.swf", flashvars, params, attributes);
</script>

Метод swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) имеет пять обязательных и четыре опциональных параметра.

Обязательные параметры
swfUrl	Путь до SWF-контейнера (файла container.swf) на вашем сайте. В примере это http://www.example.com/swf-container/container.swf.
id	id элемента, содержащего альтернативный HTML-контент, который должен быть заменен на SWF-контейнер. В примере это AdRiver_container.
width	Ширина SWF-контейнера. Принимает значение в px и %. В примере это 90%.
height	Высота SWF-контейнера. Принимает значение в px и %. В примере это 90%.
version	Версия Flash-плеера необходимого для SWF-контейнера (формат: “major.minor.release”). Если установлена более старая версия Flash-плеера, то SWFObject принудительно отображает альтернативный HTML-контент. В примере это 8.0.0.
Опциональные параметры
expressInstallSwfurl	Путь до файла expressInstall.swf на вашем сайте. Express install отображает стандартный диалог загрузки Flash-плагина вместо Flash-контента, если требуемая версия плагина не установлена. Обратите внимание, что express install срабатывает только один раз (при первом исполнении), требует Flash-плеер версии 6.0.65 или старшей на Win или Mac платформах, минимально возможный размер SWF для его работы 310x137px. Файл expressInstall.swf есть в архиве проекта SWFObject. В примере это http://www.example.com/swf-container/expressInstall.swf.
flashvars	Переменные передаются во Flash в виде пар имя : значение. В SWF-контейнере используются следующие переменные: request — запрос на XML-баннер в AdRiver. Ссылку необходимо получить из интерфейса AdRiver. Подробнее см. Как загрузить баннер и получить ссылку на показ? Внимание! Обязательно кодируйте запрос на баннер функцией escape. showingOrder — порядок показа баннеров. Используя данный параметр можно ограничить контейнер для показа только определенных баннеров (например swf\|html). Значение по умолчанию flv\|swf\|image\|html. videoMode — режим отображения видео (автоматическое воспроизведение /по наведению). Значение по умолчанию — autoPlay; swfMode — режим контроля клика swf-баннеров (клик осуществляет контейнер / клик осуществляет баннер). Значение по умолчанию — interactive; scaleMode — режим масштабирования flv, swf и image баннеров (не масштабировать / масштабировать баннеры по размерам контейнера по ширине / по высоте / по ширине и высоте). Значение по умолчанию — noScale;
params	Элементы params, вложенные в тег object в виде пар имя : значение. Обязательно указывайте params.allowscriptaccess = “always”. Это позволит SWF-контейнеру получить доступ к HTML-странице для корректной обработки клика в баннере.
attributes	Атрибуты элемента object в виде пар имя : значение.

Вы можете использовать JavaScript-генератор для автоматического создания кода.

Пример:


<head>
	 <title></title>
	 <script type="text/javascript" src="http://example.com/swf-container/swfobject.js"></script>
<script type="text/javascript">
	var flashvars = {};
	flashvars.request = escape("http://ad.adriver.ru/cgi-bin/erle.cgi?sid=1&ad=279793&bt=54&pid=636432&bid=1243230&bn=1243230&rnd=![rnd]");
	flashvars.showingOrder = "flv|swf|image|html";
	flashvars.videoMode = "playOnOver";
	flashvars.swfMode = "simple";
	flashvars.scaleMode = "scaleAll";
	var params = {};
	params.allowscriptaccess = "always";
	var attributes = {};
	swfobject.embedSWF("http://example.com/swf-container/container.swf", "AdRiver_container", "90%", "90%", "8.0.0", "http://www.example.com/swf-container/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="AdRiver_container">Альтернативный контент, если нет возможности показать SWF-контейнер</div>
</body>

Наверх

3. Значения переменных flashVars?

Переменная	Значение
flashvars.request	Ссылка на показ XML-баннера. Пример: flashvars.request = escape("http://ad.adriver.ru/cgi-bin/erle.cgi?sid=1&ad=279793&bt=54&pid=636432&bid=1243230&bn=1243230&rnd=![rnd]"); Впишите вашу ссылку на показ баннера. Обязательно кодируйте ссылку функцией escape. Как загрузить баннер и получить ссылку на показ?
flashvars.showingOrder	Порядок показа баннеров, если в баннер загружено несколько файлов разных форматов и какой-либо баннер не может показаться (flv, swf, image, html-баннеры). Значение по умолчанию — flv\|swf\|image\|html. Пример: flashvars.showingOrder = "html\|flv\|swf\|image"; Рекомендуется один раз выставить порядок показа баннеров и не менять его до окончания рекламной кампании.
flashvars.videoMode	Режим отображения видео. Возможные значения: autoPlay — видео запускается автоматически после загрузки; playOnOver — видео загружается и становится на паузу, запускает по наведению курсора. Значение по умолчанию — autoPlay. Пример: flashvars.videoMode = "playOnOver";
flashvars.swfMode	Режим контроля клика swf-баннера. Возможные значения: simple — клик осуществляет контейнер. В этом режиме могут показываться любые размерные swf-баннеры, не взаимодействующие с пользователем, так как все событя мыши перехватывает контейнер; interactive — клик осуществляет баннер. В этом режиме могут показываться любые размерные swf-баннеры, интерактивно взаимодействующие с пользователем. При этом swf-баннер должен соответствовать требованиям AdRiver к прошивке кнопки на клик; Значение по умолчанию — interactive. Пример: flashvars.swfMode = "simple";
flashvars.scaleMode	Режим масштабирования flv, swf, image-баннеров. Возможные значения: noScale — не масштабировать баннер; scaleWidth — масштабировать баннер по ширине контейнера; scaleHeight — масштабировать баннер по высоте контейнера; scaleAll — масштабировать баннер по ширине и высоте контейнера; Значение по умолчанию — noScale. Html-баннер принимает размеры контейнера. Пример: flashvars.scaleMode = "scaleAll";

Наверх

4. Как загрузить баннер и получить ссылку на показ?

Добавьте в AdRiver баннер типа xml banner (для flv, swf, image-баннеров) или generic xml (для flv, swf, image, html-баннеров).
Укажите ссылку на сайт рекламодателя в поле Линк Баннера (обязательно для режима <клик осуществляет баннер>).
Загрузите необходимые файлы для баннера. Для баннера generic xml обязательным является файл index.xml.

Получите HTML-код баннера (сайтовый код для издателей или код по кампании/баннеру для агентства). Вам понадобится часть кода Ролик.
Пример:


<!--  AdRiver code START. Type:xml banner Site: SWF-container PZ: 0 BN: 0 -->
Ролик:http://ad.adriver.ru/cgi-bin/erle.cgi?sid=168706&target=top&bt=54&pz=0&rnd=675706104
Клик:http://ad.adriver.ru/cgi-bin/click.cgi?sid=168706&bt=54&pz=0&rnd=675706104
<!--  AdRiver code END  -->

Модифицируйте код, заменив значение случайного числа (выделено красным) на ![rnd].
Пример:
```

http://ad.adriver.ru/cgi-bin/erle.cgi?sid=168706&target=top&bt=54&pz=0&rnd=![rnd]
```
Модифицированный код необходимо вставить как значение переменной flashvars.request.
Обязательно кодируйте запрос на xml-баннер функцией escape.
Пример:
```

flashvars.request = escape("http://ad.adriver.ru/cgi-bin/erle.cgi?sid=168706&target=top&bt=54&pz=0&rnd=![rnd]");
```

Наверх

5. Пример XML-баннера с пользовательским файлом index.xml

Скачать комплект файлов для загрузки баннера с пользовательским файлом index.xml.
Пример файла index.xml:


<root>
	 <content_flv>
		<localUrl>0.flv</localUrl>
		<locationUrl></locationUrl>
	</content_flv>

	<content_swf>
		<localUrl>0.swf</localUrl>
		<locationUrl></locationUrl>
	</content_swf>

	<content_image>
		<localUrl>0.gif</localUrl>
		<locationUrl></locationUrl>
	</content_image>
	
	<content_html>
		<localUrl>test.html</localUrl>
		<locationUrl></locationUrl>
	</content_html>

	<pixelCounter>
		<counter1></counter1>
		<counter2></counter2>
	</pixelCounter>
</root>

content_flv — блок данных для flv-баннера;
content_swf — блок данных для swf-баннера;
content_image — блок данных для image-баннера;
content_html — блок данных для html-баннера. Внимание! Для показа html-баннера блок обязательно должен называться content_html;

localUrl

locationUrl

pixelCounter — блок данных для сторонних счетчиков;

counter1/2

Наверх

6. Html-баннер в SWF-контейнере

В SWF-контейнере можно показывать HTML-файл, содержащий следующие теги:

<a href=”http://www.ru/” target=”_blank”>text</a> — ссылка. Имеет атрибуты target и href.
text — устанавливает жирное начертание шрифта.
text — устанавливает наклоное начертание шрифта.
text — устанавливает подчёркнутое начертание шрифта.
  — разрыв строки.
text — представляет собой контейнер для изменения характеристик шрифта, таких как цвет, гарнитура и размер.
<img src=”…” width=”100″ height=”100″ align=”left” hspace=”10″ vspace=”10″ id=”id” checkPolicyFile=”…”> — позволяет вставлять в HTML изображение (JPEG, GIF, PNG), SWF- файл или movieClip.
<ul><li>text</li></ul> — список. Нумерованные списки не поддерживаются.
text — параграф.
text — позволяет изменять характеристики строковых элементов HTML-документа. Используется только вместе с атрибутом class.
<textformat blockindent=”5″ indent=”5″ leading=”5″ leftmargin=”5″ rightmargin=”5″ tabstops=”[0,1,2]”>text</textformat> — специализированный тег. Позволяет использовать расширенные свойства форматирования.

Также можно использовать CSS1 стили.
Стили должны содержаться в отдельном файле и подключаться стандартным способом (тегом <link>).
Файл стилей может быть загружен вместе с баннером в AdRiver или размещаться на собственном сервере.

Если файл со стилями загружен вместе с баннером в AdRiver, то он подключается следующим образом:


<link rel="stylesheet" type="text/css" href="имя файла стилей">

Если файл со стилями размещаться на собственном сервере, то он подключается следующим образом:


<link rel="stylesheet" type="text/css" href="ссылка на файл стилей, должна начинаться с http://">

Доступные стили:

color — цвет текста. Поддерживается только цвет в шестнадцатеричном формате #RRGGBB.
display — свойство, которое определяет как элемент должен быть показан в HTML-документе. Принимает значения inline, block и none.
font-family — список названий шрифтов, разделённый запятыми.
font-size — размер ширфта в пикселях. Любая размерность (px, pt, em и т.д.) игнорируется.
font-style — стиль шрифта. Принимает значения normal и italic.
font-weight — насыщенность шрифта. Принимает значения normal и bold.
kerning — изменение интервала между буквами в зависимости от их формы для улучшения внешнего вида и удобочитаемости текста. Принимает значения true и false. Используется только для встроенных шрифтов.
leading — расстояние между линиями текста в пикселях. Отрицательные значения уменьшают растояние между строками текста. Размерность (px, pt и т.д.) игнорируется.
letter-spacing — расстояние между символами в строке. Отрицательные значения уменьшают растояние между символами. Размерность (px, pt и т.д.) игнорируется.
margin-left — отступ слева. Размерность (px, pt и т.д.) игнорируется.
margin-right — отступ справа. Размерность (px, pt и т.д.) игнорируется.
text-align — выравнивание текста. Принимает значения left, center, right и justify.
text-decoration — добавляет оформление текста в виде его подчеркивания. Принимает значения none и underline.
text-indent — отступ строки текста. Размерность (px, pt и т.д.) игнорируется.

Также можно использовать другие HTML-теги, но они будут отрисовываться только таким образом, как описано в CSS.
Если в CSS не описан стиль неизвестного тега, то его сожержимое выводится как обычный текст.

Пример html-баннера в SWF-контейнере.

Наверх

7. События в SWF-контейнере

Событие №0 — успешная загрузка xml-баннера (файла index.xml).

События в режиме отображения flv-баннера:

№1 — видео начало проигрываться;
№2 — наведение на баннер (мышь находится над баннером непрерывно более 500мс);
№6 — 25% воспроизведения;
№7 — 50% воспроизведения;
№8 — 75% воспроизведения;
№9 — просмотр до конца ролика.

События в режиме отображения swf-баннера:

№1 — swf-баннер успешно загружен и отрисован;
№2 — наведение на баннер (мышь находится над баннером непрерывно более 500мс) (только если выбран режим «клик осуществляет контейнер»).

События в режиме отображения image-баннера:

№1 — баннер успешно загружен и отрисован;
№2 — наведение на баннер (мышь находится над баннером непрерывно более 500мс).

События в режиме отображения html-баннера:

№1 — html-баннер успешно загружен и отрисован;
№2 — наведение на баннер (мышь находится над баннером непрерывно более 500мс);

Наверх