Screenglide/Expandable_fixed

Описание

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

Используется как баннер перетяжка размещенный в верхней части верстки страницы и при скроллинге остается в области видимости пользователя. В баннере два flash-ролика (далее - flash-ролик №1 и flash-ролик №2) и картинка-заглушка, сначала показывается flash-ролик №1, а затем по какому-либо событию показывается flash-ролик №2. Если у пользователя не установлен 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. картинку-заглушку (*.jpg, *.png, *.gif) с размерами, как у flash-ролика №1.

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

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

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

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

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


Материалы:

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

Последовательность показа 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 для данного объекта, найдите строку Instance Name (для русскоязычных версий редактора найдите строку Имя Объекта).
Использование кода на кнопках не допускается. Обработчики событий для кнопок уже прописаны в классах и дополнительный код для кнопки лишь вызовет ошибку.

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

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

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

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

Если анимация имеет программный вид, то присвойте _root.globalObj null. Анимация до момента синхронизации должна быть остановлена в обоих flash-роликах и запускаться (останавливаться) только через функции _root.globalPlay и _root.globalStop.
Код, который надо поместить в первый кадр главного таймлайна в случае использования программной анимации:

stop();
_root.globalObj = null;
#include "flashreel1.as"
function globalPlay(){
    /*данная функция вызывается в момент синхронизации и при схлопе flash-ролика №2
    здесь надо написать код, запускающий вашу анимацию
    */
}
function globalStop(){
    /*данная функция вызывается в момент расхлопа flash-ролика №2
    здесь надо написать код, останавливающий вашу анимацию
    */
}
Вы не должны вносить каких-либо правок в файлы flashreel1.as и flashreel2.as.

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

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

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

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

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

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

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

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

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

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

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

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

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

Если анимация имеет программный вид, то присвойте _root.globalObj null. Анимация до момента синхронизации должна быть остановлена в обоих flash-роликах и запускаться (останавливаться) только через функции _root.globalPlay и _root.globalStop.

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

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

play.onRollOver = function(){ //вместо play подставьте имя кнопки
    _root.paramOfShlop = 1;
}

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

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

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

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

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

Если все же что-то работает не так, то проверьте:
1. Подключены ли классы flashreel1.as и flashreel2.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_fixed [Sync_Async]". Укажите следующие параметры:

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

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

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

  2. Направление расхлопа – баннер расхлопывается только вниз, это значение bottom.

  3. Расхлоп со сдвигом контента (yes/no)yes – расхлоп со сдвигом контента, или no – без сдвига контента. (Сдвиг контента возможен только по горизонтали).

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

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

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

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

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

Добавление кода вставки на сайт

Код вставки баннера разместите сразу после открывающего тега <body>. Или в главном div. Баннер размещенный в середине страницы сайта при скроллинге будет оставлять пустое пространство размером ширины и высоты баннера.