Screenglide/Expandable с расхлопом до FullScreen

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

Описание

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

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

Screenglide/Expandable с расхлопом до FullScreen - есть различные варианты использования данного шаблона для показа рекламы, общее у всех этих вариантов то, что используются два flash-ролика (далее flash-ролик №1 и flash-ролик №2) и картинка-заглушка, сначала показывается flash-ролик №1, а затем по какому-либо событию показывается flash-ролик №2 с размерами 100%х100%, т,е. FullScreen. Если у пользователя не установлен flash, то показывается картинка-заглушка. Есть возможность добавления видео.

Функциональные возможности шаблона на уровне подготовки flash-роликов:
- при наведении курсора, клике на кнопку или в определенный момент анимации во flash-ролике №1 открывается flash-ролик №2;
- при отведении курсора, клике на кнопку или в определенный момент анимации во flash-ролике №2 прячется flash-ролик №2 и показывается flash-ролик №1;
- по окончании анимации автоматическое закрытие flash-ролика №2;
- при клике на кнопку происходит переход на сайт рекламодателя.

Функциональные возможности шаблона на уровне добавления баннеров:
- ограничение показов в расхлопнутом виде баннера для уникального пользователя;
- задержка при наведении на flash-ролик №1;
- видимость flash-роликa №1 на странице;
- прозрачность flash-роликов на странице;
- очередность показов flash-роликов.

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

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

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

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

1. flash-ролик №1;
2. flash-ролик №2;
3. картинку-заглушку (*.png, *.jpg, *.gif) с размерами, как у flash-ролика №1.
4. видео файл (*.flv).

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

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

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

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

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


Материалы:

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

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

Последовательность показа flash-роликов и их расположение на странице определяется при добавлении баннера в интерфейс AdFox.

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

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

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

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

Название кнопки
Действие
clickOpen_af При клике на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2
rollOverOpen_af При наведении курсора на кнопку вызывается JavaScript-функция, которая показывает на странице flash-ролик №2. При клике на эту же кнопку происходит переход на сайт рекламодателя.
goURL_af При клике на кнопку происходит только переход на сайт рекламодателя
Кнопки необходимо размещать в первом кадре, независимо от того в каком кадре они начинают использоваться. Для скрытия кнопок используйте свойство MovieClip visible=false (пропишите этот код в первом кадре), для того чтобы сделать кнопку доступной измените свойство на visible=true.
Также возможно спрятать кнопку, поместив её за пределами области видимости, а потом поставить её на нужное место.
В одном flash-ролике не должно быть двух кнопок с одинаковыми именами.

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

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

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

stop(); 
_root.globalObj = this.main; //имя экземпляра (Instance Name), в котором происходит вся анимация. Если анимация на главном таймлайне, то *this*.
#include "flashreel.as"

globalObj - это переменная, в которой хранится ссылка на объект с анимацией.
Если вся анимация проходит на главном timeline, то напишите _root.globalObj = this;.
Если же вся анимация сделана в отдельном movieclip, то данному movieclip необходимо дать имя экземпляра main (по аналогии с именем кнопки) и написать _root.globalObj = this.main;. Третью строчку оставьте без изменений. В ней подключается файл с ActionScript кодом, который вы должны скачать с нашего сервера и положить в папку с проектом.

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

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

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

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

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

- если FullScreen без видео:

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

- если FullScreen с видео:

stop();
_root.globalObj = this.main;//вся анимация происходит в movieclip с именем **main**, который лежит на главной сцене.
var videoInited : Boolean = false;//флаг инициализации видео
var adfoxAutoShrink = false; //если по окончании анимации нужен автосхлоп, то true
#include "FullScreen.as" 
function globalPlay(){ 
/*данная функция вызывается в момент расхлопа */ 
    if(!videoInited)
    {
            videoInited = true;
            main.initAndPlay();
    }
    else
    {
            main.playVideo();
    }
}
function globalStop(){
/*данная функция вызывается в момент схлопа */
    main.resetVideo();
}

globalObj - это переменная, в которой хранится ссылка на объект с анимацией.
Если вся анимация проходит на главном timeline, то напишите _root.globalObj = this;.
Если же вся анимация сделана в отдельном movieclip, то данному movieclip необходимо дать имя экземпляра main (по аналогии с именем кнопки) и написать _root.globalObj = this.main;.

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

6. Добавление видео

Видео файл обязательно должен вызываться с использованием переменной vlink. Использовать прямую ссылку или относительный путь к видео не допускается.

Допустим, вся анимация и видео у flash-ролика №2 будет находится в отдельном movieclip с именем main.

Порядок добавления видео:
1. Создайте объект видео. В панели дополнительного меню библиотеки (library) выберите New Video, чтобы создать новый объект video;
2. Присвойте ему имя adfoxVideo;
3. При первом показе flash-ролика №2 необходимо инициализировать видеоплеер, для этого пропишите код на первом кадре мувиклипа main:

var videoPath : String = _root.vlink;
var netConnection : NetConnection;
var netStream : NetStream;

function initAndPlay():Void  //инициализирует видео и начинает проигрывать. 
//Должна вызываться только 1 раз (см.код на 1 кадре главного таймлайн)
{
    netConnection = new NetConnection();
    netConnection.connect(null);
    netStream = new NetStream(netConnection);
    adfoxVideo.attachVideo(netStream);

    netStream.onStatus = function(infoObject:Object)
    {
        if (infoObject.code == "NetStream.Play.Stop")
        {
            resetVideo();
        }
        else if (infoObject.code == "NetStream.Play.Start")
        {
        }
    };

    netStream.play(videoPath);
}

function playVideo():Void //вызывается впоследствии для воспроизведения видео
{
    netStream.pause(false);
}

function resetVideo():Void //ставит видео на паузу и перематывает его в начало
{
    netStream.pause(true);
    netStream.seek(0);
}

4. На последнем кадре мувиклипа main пропишите код:

stop();

Анимация и видеопроигрыватель готовы.

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

В случае автоматического схлопа в определенный момент анимации достаточно расположить код, приведенный в пункте 9, в кадре анимации. Для схлопа по окончанию анимации используйте значение переменной adfoxAutoShrink , подробнее в п.5.

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

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

Обработчики кликов для дополнительных кнопок должны быть выполнены по требованиям к flash с несколькими кнопками для перехода.

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

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

9. Если необходимо в любой произвольный момент вызвать схлоп, достаточно в 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);

Проверка работоспособности flash-роликов в Adobe Flash

Запустите flash-ролик №1 по ctrl+enter, анимация не должна воспроизводиться.   Запустите flash-ролик №2 по ctrl+enter, при этом в окне вывода должно быть написано: "синхронизация флешек на странице прошла успешно" и в первом ролике запускается анимация.

В зависимости от выбранного сценария рахлопа (клик по кнопке (clickOpen_af), наведение указателя мыши (rollOverOpen_af) или в определенный момент анимации (_root.sendCommand_af();) запустите расхлоп, при этом во flash-ролике №1 анимация останавливается, а во flash-ролике №2 начинает играть. 

В зависимости от выбранного сценария схлопа (клик по кнопке (clickClose_af) или в определенный момент анимации (_root.adFoxStops();) запустите схлоп, при этом во flash-ролике №2 анимация останавливается, а во flash-ролике №1 начинает играть.

Если что-то работает не так, то проверьте:   1. Подключены ли классы flashreel.as и FullScreen.as (лежат ли они в той же папке, что и 2 flash-ролика).   2. Присутствует ли код из п3 и п7 требований на первых кадрах главного таймлайн.   3. Правильно ли названы кнопки для расхлопа и схлопа и расположены ли они с первого кадра (не важно с какого кадра они начинают показываться) пункт 1 требований.   4. Правильное ли имя присвоено переменной globalObj во flash-ролике №1 и flash-ролике №2.   5. Версия ActionScript 2.0. Версия FlashPlayer 8.0 и выше. 

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

Подсчет событий в баннерах реализован через вызов переменных event_1event_30.

event_1 и event_2 зарезервировано для подсчёта количества показов flash-ролика №2 (количество расхлопов) и flash-ролика №1 (количество схлопов). Вам для использования доступны события, начиная с event_3 по event_30.

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

loadMovieNum(_root.event_N,300); 

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

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

При добавлении Screenglide/Expandable баннеров с расхлопом до FullScreen через интерфейс AdFox выберите необходимый тип баннера и шаблон "Screenglide/Expandable баннеры с расхлопом до FullScreen". Укажите следующие параметры:

  1. Flash-ролик №1 и Flash-ролик №2 – загрузите flash-ролики, или укажите ссылки на файлы, размещенные на стороннем сервере. Оба файла должны обязательно располагаться на одном сервере.

  2. Ширина Flash-ролика №1, Высота Flash-ролика №1 – укажите размеры (целое число) в пикселях без указания размерности px, например 240.

Если вы хотите добавить перетяжку, то можно указать размер ширины как 100% для обоих flash-роликов. Важно понимать, что ширина берется от ближайшего спозиционированного родительского элемента. Например, если ваш баннер находится в body, то ширина баннера будет равна ширине элемента body.
  1. Прозрачность Flash-ролика №1 (wmode) и Прозрачность Flash-ролика №2 (wmode) – будет ли flash-ролик прозрачным на странице: transparent – прозрачный, opaque – непрозрачный.

  2. Очередность показа (№ Flash-ролика 1/2) – номер flash-ролика (1 или 2), который будет всегда показываться при загрузке на странице первым, а далее по сценарию.

  3. Flash-ролик №1 всегда виден на странице (yes/no) – будет ли Flash-ролик №1 виден на странице даже во время расхлопа: yes – да, no – нет.

  4. Величина задержки при расхлопе (мс) – как долго по времени пользователь должен задержать указатель мыши на баннере, чтобы произошел расхлоп. Указывается значение в миллисекундах.

  5. Количество авторасхлопов – сколько раз один уникальный пользователь увидит баннер в раслопнутом виде, то есть flash-ролик №2 первым покажется на странице. Первый раз при загрузке баннера в браузере пишется кука с количеством авторасхлопов. Пока в браузере есть кука, пользователь идентифицируется и ему будет показано столько авторасхлопов, сколько задано в параметре баннера. Если куку удалить (или отключить запись кук), то браузер снова будет уникальным и вновь будут показываться авторасхлопы.

  6. Картинка-заглушка – загрузите картинку, которая будет показываться, если у пользователя не установлен flash-плагин.

  7. FLV-ролик – загрузите видео файл.

  8. Уровень громкости (от 0 до 100) – уровень громкости для видео, если во flash используется звук. 0 - нет звука, 100 - максимальная громкость.

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