Описание ScreenGlide

Интерактивный баннер, расхлопывающийся в зависимости от  действий пользователя (клик, наведение и т.д.), в рамках которого воспроизводится видео.

 

Другие используемые названия данного типа баннера: Мультипанельные баннеры, MPU, FlyScreen, OverLay.

ScreenGlide  —  на странице размещается flash-ролик №1, при определённом действии или событии (наведение, клик) показывается flash-ролик №2 (поверх контента), в котором может воспроизводится видео.

 

Функциональные возможности шаблона на уровне подготовки flash-роликов:

 

 

Функциональные возможности шаблона на уровнедобавления баннеров:

 

 

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

 

Требования к среде разработки:

 

1. ActionScript 2.0;

 

2. FlashPlayer 8.0.

 

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

 

1. Flash-баннер (*.swf);

 

2. Flash-ролик №2 (*.swf), не более 300Кб.

 

Материалы:

 

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

 

http://www.rontar.com/manuals/classes/RichMediaScripts.zip

 

 

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

 

Последовательность показа flash-роликов и их расположение на странице определяется при добавлении баннера в интерфейс Rontar. Данные требования для работы с видео предполагают, что разработчик баннера самостоятельно реализует проигрыватель c видео в рамках баннера, выбирая при этом необходимый внешний вид проигрывателя, кнопки для контроля воспроизведения и самостоятельно назначает им названия.

 

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

1. Определите, по какому событию будет произведен расхлоп (показ) flash-ролика №2.

 

В случае автоматического расхлопа в определенный момент анимации достаточно расположить код, приведенный в пункте 4 в кадре анимации.

 

Типы кнопок flash-ролика №1

 

Название кнопки	Действие
clickOpen_rnt	При клике на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2
rollOverOpen_rnt	При наведении курсора на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2. При клике на эту же кнопку происходит переход на сайт рекламодателя
goURL_rnt	При клике на кнопку происходит только переход на сайт рекламодателя

 

Кнопки необходимо размещать в первом кадре, независимо от того, в каком кадре они начинают использоваться. Для скрытия кнопок используйте свойство MovieClip visible=false (пропишите этот код в первом кадре), для того, чтобы сделать кнопку доступной, измените свойство на visible=true. Также, возможно спрятать кнопку, поместив её за пределами области видимости, а потом поставить её на нужное место.

 

Внимание! В одном flash-ролике не должно быть двух кнопок с одинаковыми именами.

 

2. Расположите в верхнем слое прозрачную кнопку и присвойте ей имя, соответствующее событию для расхлопа из таблицы "Типы кнопок flash-ролика №1". Чтобы задать имя для кнопки нажмите Ctrl+F3, откроется панель properties для данного объекта, найдите строку InstansName (для русскоязычных версий редактора найдите строку Имя Объекта).

 

Использование кода на кнопках не допускается. Обработчики событий для кнопок уже прописаны в классах и дополнительный код для кнопки лишь вызовет ошибку.

 

Внимание! При подготовке flash-роликов для данного формата ActionScript код необходимо размещать только в кадрах.

 

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

 

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

 

globalObj  —  это имя объекта, в котором происходит вся анимация.

Если вся анимация проходит на главном timeline, то globalObj приравнять к this, если же вся анимация сделана в отдельном movieclip, то данному movieclip необходимо дать имя (по аналогии с именем кнопки) и globalObj приравнять к этому имени.

Третью строчку оставьте без изменений. В ней подключается файл с ActionScript кодом, который вы должны скачать с нашего сервера и положить в папку с проектом.

 

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

 

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

 

_root.sendCommand_rnt();

 

     Приведем пример:

     есть необходимость расхлопнуть баннер на третьей секунде, после синхронизации flash-роликов на странице. Для данной реализации, после подключения нашего "класса" flashreel1.as, во flash-ролике №1 необходимо написать следующий код:

 

setTimeout(_root.sendCommand_rnt,3000);

 

 

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

 

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

 

stop(); _root.globalObj = this.main;//вся анимация происходит в movieclip с именем **main**, который лежит на главной сцене. var rontarAutoShrink = false; //если по окончании анимации нужен автосхлоп, то true #include "flashreel2.as" function globalPlay(){ /*данная функция вызывается в момент расхлопа */ } function globalStop(){ /*данная функция вызывается в момент схлопа */ }

 

Четвертую строчку оставьте без изменений, в ней подключается файл с ActionScript кодом, который вы должны скачать с нашего сервера и положить в папку с проектом. Функции globalPlay и globalStop выполняются в момент показа и скрытия flash-ролика №2, и могут быть использованы для запуска дополнительных функций, привязанных к этим моментам (например, запуск/остановка видео).

 

Итак, анимация готова.

 

6. Определите, по какому событию будет произведен схлоп flash-ролика №2 и показ flash-ролика №1.

Для схлопа по окончании анимации используйте значение переменной rontarAutoShrink , подробнее в п.8.

Типы кнопок flash-ролика №2

 

Название кнопки	Действие
clickClose_rnt	При клике на кнопку вызывается JavaScript-функция, которая прячет на странице flash-ролик №2 и показывает flash-ролик №1
rollOutClose_rnt	При отведении курсора с кнопки вызывается JavaScript-функция, которая прячет на странице flash-ролик №2 и показывает flash-ролик №1. При клике на эту же кнопку происходит переход на сайт рекламодателя
goURL_rnt	При клике на кнопку происходит только переход на сайт рекламодателя

 

  7. Расположите в верхнем слое прозрачную кнопку и присвойте ей имя, соответствующее событию для расхлопа из таблицы "Типы кнопок flash-ролика №2".

 

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

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

 

_root.rontarStops();

 

Кнопки из таблицы "Типы кнопок flash-ролика №2" размещать в таком случае необязательно.

 

Пример 1: необходимо схлопнуть flash-ролик №2 на шестой секунде, после начала его показа (события расхлопа). Для данной реализации добавьте в функцию globalPlay() следующий код:

 

setTimeout(_root.rontarStops,6000);

 

Пример 2: необходимо схлопнуть баннер при наступлении какого-либо события (например, нажатие на клавишу Insert) во flash-ролике №2. Пропишите следующий код:

 

var keyListener:Object = new Object(); keyListener.onKeyDown = function() { if (Key.getCode() == 45) { _root.rontarStops();//вызов функции которая схлопнет баннер } }; Key.addListener(keyListener);

 

9. Теперь flash-ролик №2 готов.

 

Для локальной проверки синхронизации запуска анимации между двумя роликами запустите только flash-ролик №2, и, если всё сделано правильно, не должно быть ни анимации, ни видео, так как flash-ролик №2 ждет команду на воспроизведение от flash-ролика №1.

 

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

 

При добавлении баннера "ScreenGlide" выберите нужный тип баннера и шаблон "Screenglide", укажите следующие параметры:

 

1. Flash-ролик №1 и Flash-ролик №2 – загрузите flash-ролики.

 

2. Направление расхлопа – указываем, в какую сторону должен расхлопываться баннер.