Требования к Catfish

Описание Catfish

Catfish - интерактивный баннер, который отображается поверх содержимого страницы и располагается внизу экрана по всей ширине страницы.

При скроллинге не изменяет своего положения. На flash-ролике может быть расположена кнопка «Закрыть», при клике на которую баннер исчезает со страницы. Предусмотрена возможность загрузки дополнительного баннера, который будет расхлопываться при наведении курсора мыши на основной баннер.

Другие используемые названия данного типа баннера: BottomLine, Фиксированная перетяжка внизу страницы с расхлопом.

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

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

1. ActionScript 2.0 и выше.

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

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

Внимание! Размер Swf-файл (flash-ролик *.swf) не должен превышать 200 Кб. Для баннеров, состоящих из нескольких файлов, ограничения проверяются отдельно для каждого файла.

Пример подготовки на ActionScript 2.0

Основной Flash-ролик:

1. Создайте верхний слой, назовите его rontarTransitionButton, и разместите в нем прозрачную кнопку для перехода на сайт, которой присвойте имя экземпляра (Instance Name) transitionButton.

2. Вставьте код в первый кадр главного таймлайн:

Stage.scaleMode = 'noScale';

Stage.align = 'TL';

var listener = new Object();

listener.onResize = stageResizeHandler;

Stage.addListener(listener);

var currentWidth:Number = Stage.width;

var currentHeight:Number = Stage.height;

function stageResizeHandler()

{

currentWidth = Stage.width;

currentHeight = Stage.height;

resizeTransitionButton();

}

function resizeTransitionButton()

{

transitionButton._width = currentWidth;

transitionButton._height = currentHeight;

}

function initButtons()

{

transitionButton.onRelease = rontarClickHandler;

closeButton.onRelease = rontarCloseHandler;

}

function rontarCloseHandler()

{

flash.external.ExternalInterface.call('rontar.plugins.catfish.close');

}

function rontarClickHandler()

{

getURL(_root.link1, _root.target);

}

initButtons();

Расхлопывающийся Flash-ролик:

1. Создайте верхний слой, назовите его rontarTransitionButton, и разместите в нем прозрачную кнопку для перехода на сайт, которой присвойте имя экземпляра (Instance Name) transitionButton.

2. Разместите в слое transitionButton кнопку "Закрыть" и присвойте ей имя экземпляра (Instance Name) closeButton (кнопка должна располагаться выше кнопки для перехода).

3. Вставьте код в первый кадр главного таймлайн:

Stage.scaleMode = 'noScale';

Stage.align = 'TL';

var listener = new Object();

listener.onResize = stageResizeHandler;

Stage.addListener(listener);

var currentWidth:Number = Stage.width;

var currentHeight:Number = Stage.height;

function stageResizeHandler()

{

currentWidth = Stage.width;

currentHeight = Stage.height;

resizeTransitionButton();

}

function resizeTransitionButton()

{

transitionButton._width = currentWidth;

transitionButton._height = currentHeight;

}

function initButtons()

{

transitionButton.onRelease = rontarClickHandler;

closeButton.onRelease = rontarCloseHandler;

}

function rontarCloseHandler()

{

flash.external.ExternalInterface.call('rontar.plugins.catfish.close');

}

function rontarClickHandler()

{

getURL(_root.link1, _root.target);

}

initButtons();

Пример подготовки flash-ролика на ActionScript 3.0

Основной Flash-ролик:

1. Создайте верхний слой, назовите его rontarTransitionButton, и разместите в нем прозрачную кнопку для перехода на сайт, которой присвойте имя экземпляра (Instance Name) transitionButton.

2. Вставьте код и в первый кадр главного таймлайн:

import flash.external.ExternalInterface;

import flash.net.navigateToURL;

import flash.net.URLRequest;

if(stage)

{

init();

}

else

{

addEventListener(Event.ADDED_TO_STAGE, init);

}

function init(evt:Event = null):void

{

stage.scaleMode = 'noScale'; //Stretching banner;

stage.align = 'TL';

stage.addEventListener(Event.RESIZE, stageResizeHandler);

var currentWidth:Number = stage.stageWidth,

currentHeight:Number = stage.stageHeight,

flashVars:Object = this.root.loaderInfo.parameters;

function stageResizeHandler(evt:Event):void

{

currentWidth = stage.stageWidth;

currentHeight = stage.stageHeight;

resizeTransitionButton();

}

function resizeTransitionButton():void

{

transitionButton.width = currentWidth;

transitionButton.height = currentHeight;

}

function initButtons():void

{

transitionButton.addEventListener(MouseEvent.CLICK, rontarClickHandler);

closeButton.addEventListener(MouseEvent.CLICK, rontarCloseHandler);

}

function rontarClickHandler(evt:MouseEvent):void

{

navigateToURL(new URLRequest(flashVars.link1), flashVars.target);

}

function rontarCloseHandler(evt:MouseEvent):void

{

ExternalInterface.call('rontar.plugins.catfish.close');

}

initButtons();

}

Расхлопывающийся Flash-ролик:

1. Создайте верхний слой, назовите его rontarTransitionButton, и разместите в нем прозрачную кнопку для перехода на сайт, которой присвойте имя экземпляра (Instance Name) transitionButton.

2. Разместите в слое transitionButton кнопку "Закрыть" и присвойте ей имя экземпляра (Instance Name) closeButton (кнопка должна располагаться выше кнопки для перехода).

3. Вставьте код в первый кадр главного таймлайн:

import flash.external.ExternalInterface;

import flash.net.navigateToURL;

import flash.net.URLRequest;

import flash.utils.setTimeout;

if(stage)

{

init();

}

else

{

addEventListener(Event.ADDED_TO_STAGE, init);

}

var canCollapce:Boolean = false;

function init(evt:Event = null):void

{

stage.scaleMode = 'noScale'; //Stretching banner;

stage.align = 'TL';

stage.addEventListener(Event.RESIZE, stageResizeHandler);

var currentWidth:Number = stage.stageWidth,

currentHeight:Number = stage.stageHeight,

flashVars:Object = this.root.loaderInfo.parameters;

function stageResizeHandler(evt:Event):void

{

currentWidth = stage.stageWidth;

currentHeight = stage.stageHeight;

resizeTransitionButton();

}

function resizeTransitionButton():void

{

transitionButton.width = currentWidth;

transitionButton.height = currentHeight;

}

function initButtons():void

{

transitionButton.addEventListener(MouseEvent.CLICK, rontarClickHandler);

closeButton.addEventListener(MouseEvent.CLICK, rontarCloseHandler);

}

function rontarClickHandler(evt:MouseEvent):void

{

navigateToURL(new URLRequest(flashVars.link1), flashVars.target);

}

function rontarCloseHandler(evt:MouseEvent):void

{

ExternalInterface.call('rontar.plugins.catfish.close');

}

initButtons();

}

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

При добавлении баннера в систему Rontar выберите тип баннера "Catfish" и укажите следующие параметры:

1. Ссылка перехода – полная ссылка для перехода на сайт рекламодателя.

2. Flash-ролик — основной flash-ролик.

3. Картинка-заглушка — изображение для показа пользователям без установленного flash-плагина.

4. Ширина flash-ролика — ширина банера в пикселях, по умолчанию - 100%.

5. Высота flash-ролика — высота баннера в пикселях.

6. Показывать кнопку «Закрыть» — при показе баннер будет содержать кнопку «Закрыть». Если данное поле выключено, кнопка «Закрыть» должна быть реализована во flash-баннере, обработчик клика должен вызывать Javascript интерфейс, указанный в примере.

7. Альтернативная ссылка перехода по заглушке – ссылка перехода по заглушке.

8. Расхлопывающийся flash-ролик — дополнительный flash-ролик, который будет расхлопываться при наведении курсора мыши на основной flash-ролик.

9. Ширина расхлопывающегося flash-ролика — ширина дополнительного ролика в пикселях, по умолчанию - 100%.

10. Высота расхлопывающегося flash-ролика - высота дополнительного ролика в пикселях. Поле обязательно, если загружен расхлопывающийся flash-ролик.

11. Адрес стороннего счетчика — внешний проверочный zero-пиксель.

12. Открывать в новом окне – открытие целевой ссылки в новом или текущем окне. Flash-баннер должен поддерживать параметр FlashVars target.

Внимание! Ссылка перехода, flash-ролик и высота flash-ролика обязательные поля.