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

  1. Что такое SWF-контейнер?
  2. Как разместить SWF-контейнер на странице?
  3. Значения переменных flashVars
  4. Как загрузить баннер и получить ссылку на показ?
  5. Пример XML-баннера с пользовательским файлом index.xml
  6. HTML-баннер в SWF-контейнере
  7. События в 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.

  1. Скачайте последнюю версию библиотеки swfobject.js на странице проекта SWFObject в Google Code.
  2. Разместите библиотеку swfobject.js на сервере и подключите на странице строкой вида:
    
    <script type="text/javascript" src="http://example.com/swf-container/swfobject.js"></script>
    
    где src — путь до файла swfobject.js.
  3. Создайте HTML-контейнер с альтернативным контентом и задайте для него id:
    
    <div id="AdRiver_container">Альтернативный контент, если нет возможности показать SWF-контейнер</div>
    
  4. Разместите 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-генератор для автоматического создания кода.

  5. Пример:
    
    <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. Как загрузить баннер и получить ссылку на показ?

  1. Добавьте в AdRiver баннер типа xml banner (для flv, swf, image-баннеров) или generic xml (для flv, swf, image, html-баннеров).
  2. Укажите ссылку на сайт рекламодателя в поле Линк Баннера (обязательно для режима <клик осуществляет баннер>).
  3. Загрузите необходимые файлы для баннера. Для баннера generic xml обязательным является файл index.xml.
  4. Получите 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  -->
    
  5. Модифицируйте код, заменив значение случайного числа (выделено красным) на ![rnd].
    Пример:
    
    http://ad.adriver.ru/cgi-bin/erle.cgi?sid=168706&target=top&bt=54&pz=0&rnd=![rnd]
    
  6. Модифицированный код необходимо вставить как значение переменной 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 — имя файла, загруженного в AdRiver; locationUrl — ссылка на файл, расположенный на стороннем сервере. Должна начинаться с http://;
  • pixelCounter — блок данных для сторонних счетчиков;
  • counter1/2 — ссылка на сторонний счетчик (допускается два сторонних счетчика);

Наверх

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

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

  • <a href=»http://www.ru/» target=»_blank»>text</a> — ссылка. Имеет атрибуты target и href.
  • <b>text</b> — устанавливает жирное начертание шрифта.
  • <i>text</i> — устанавливает наклоное начертание шрифта.
  • <u>text</u> — устанавливает подчёркнутое начертание шрифта.
  • <br> — разрыв строки.
  • <font color=»#ff0000″ face=»Arial» size=»14″>text</font> — представляет собой контейнер для изменения характеристик шрифта, таких как цвет, гарнитура и размер.
  • <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> — список. Нумерованные списки не поддерживаются.
  • <p align=»justify» class=»class»>text</p> — параграф.
  • <span class=»class»>text</span> — позволяет изменять характеристики строковых элементов 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мс);

Наверх