BackOver

"Русская версия"

Description

Changes the background of the page, when user mouses-over the banner.

BackOver - change the background banner site when you hover the mouse pointer.

When user mouses over the banner the website background is changed to a picture or filled with a single color. On mouse-out the background is turned back the way it was. Transition to advertiser's site occure by click on the banner. Options allow you to specify the values of banner repeat and positioning the background.

Example

Example

Preparation (for developers)

Requirements for the development environment (Authoring tool):

1. ActionScript 2.0 and FlashPlayer 8.0;
2. ActionScript 3.0 and FlashPlayer 9.0.

What you need to prepare:

1. Flash-banner (*.swf), up to 300Кб;
2. Default image (*.jpg, *.png, *.gif) up to 300 Kb, to display to users who do not have a flash-plugin installed. Default image must have the same dimensions as your flash-banner.
3. Background Image (*.jpg, *.png, *.gif) up to 300 Kb.

For loading files in a banner, over the specified restrictions provides the special field with a mark (URL) in which the full way to the file located on the foreign server is specified.
Names of files should contain only figures or letters of the English alphabet and underlining symbol.
Use in the name of the file Russian letters, gaps, quotes, dash and special symbols isn't allowed.

Preparation on ActionScript 2.0

1. Create a separate layer, name it adfoxTransitionButton

2. Create in this layer the transparent button and place it on the top layer. Appropriate to the button the name transitionButton

If user click on the button will be made transition to the advertiser's site, when user mouses over the banner the website background is changed to a picture or filled with a single color, and on mouse-out the background is turned back the way it was.

3. Copy a code and insert it into the button: on (rollOver) { if(flash.external.ExternalInterface.available) { loadMovieNum(_root.event_1, 300); flash.external.ExternalInterface.call('ADFOX.BACKOVER.globals.applyBackground' + _root.adfoxBannerId); } }

on (rollOut) 
{ 
    if(flash.external.ExternalInterface.available)
    {
        flash.external.ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + _root.adfoxBannerId);
    }
}

on (release) 
{ 
    if(flash.external.ExternalInterface.available)
    {
        //IE driven hack;
        flash.external.ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + _root.adfoxBannerId);
        flash.external.ExternalInterface.call('window.open', _root.link1, _root.adfoxTarget);
    }
    else
    {
        getURL(_root.link1, _root.adfoxTarget);
    }
} 

Preparation on ActionScript 3.0

1. Create a separate layer, name it adfoxTransitionButton

2. Create in this layer the transparent button and place it on the top layer. Appropriate to the button the name transitionButton

If user click on the button will be made transition to the advertiser's site, when user mouses over the banner the website background is changed to a picture or filled with a single color, and on mouse-out the background is turned back the way it was.

3. Copy a code and insert it into the first frame of the main timeline:

import flash.events.Event;
import flash.external.ExternalInterface;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.sendToURL;

var flashVars = this.root.loaderInfo.parameters;

transitionButton.addEventListener(MouseEvent.MOUSE_OVER, adfoxMouseover);//для события наведения
transitionButton.addEventListener(MouseEvent.MOUSE_OUT, adfoxMouseout);//для события отведения
transitionButton.addEventListener(MouseEvent.CLICK, adfoxClick);//для клика

function adfoxMouseover(evt:Event):void
{
    if(ExternalInterface.available)
    {
        sendToURL( new URLRequest(flashVars.event_1) );
        ExternalInterface.call('ADFOX.BACKOVER.globals.applyBackground' + flashVars.adfoxBannerId);
    }
}

function adfoxMouseout(evt:Event):void
{
    if(ExternalInterface.available)
    {
        ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + flashVars.adfoxBannerId);
    }
}

function adfoxClick(evt:Event):void
{
    if(ExternalInterface.available)
    {
        //IE driven hack;
        ExternalInterface.call('ADFOX.BACKOVER.globals.resetBackground' + flashVars.adfoxBannerId);
        ExternalInterface.call('window.open', flashVars.link1, flashVars.adfoxTarget);
    }
    else
    {
        navigateToURL(new URLRequest(flashVars.link1), flashVars.adfoxTarget);
    }
}

Preparation of a background image

When preparing a background for your banner take into consideration that the page may be viewed on screens with different resolutions. It will have an effect on how much of that background the user will actually see provided that the site-content has a fixed-width.
Let’s consider this example. Let the content of the website be 1000px wide. Thus we will create a background image with these dimensions 1800x1000px.
The edges of the background image are cut off when it is wider than the screen, see screenshots for more detail:

1280x768:

"To resolve 1280х768"

1280x900:

"To resolve 1280x900"

1360х768:

"To resolve 1360х768"

Our suggestion is to make the edges of the image unimportant for example a color-fill or a gradient. That way whenever they are cut of a little no viable information is lost.

Event counting

Event counting is implemented through AdFox variables event_2 ... event_30 which are also passed in FlashVars.
To count your particular event, you need to place this code whenever your event occurs:

loadMovieNum(_root.event_N,300);

where N-is the event number, N may be 1, 2 … 30.

Note that event_1 is reserved in this banner, to count the number times banner background appeared. You are free to use all the other events.

Last update: 14.08.2012