Expansion Wallpaper

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

Description

Expansion Wallpaper - a flash-movie which is only part visible when loaded on the page. That is it has a visible part and a hidden part under the site content. When user mouses over the visible part of the banner the hidden part of the banner becomes visible as well and positions itself above the page contents. And vice versa, when the second part of the banner hides, the contents of the page becomes visible again.

Events triggering expand: click on a button in the visible part, mouse over the visible part, animation has reached a particular point;

Events triggering collapse: click on a button in any part of the banner, mouse out or again when animation has reached a particular point;

This banner type can carry any visual elements and can be interactive in both states, visible and hidden.

Example

Example

Preparation (for developers)

Requirements for the development environment:

1. ActionScript 2.0;
2. FlashPlayer 8.0.

What you need to prepare:

1. Flash-movie (*.swf). We add a working example. Download source here;

File size requirements

File size must not exceed the following
- Flash-movies (*. swf ) up to 300 Kb.

The limitations are checked separately for each file.   To use files that exceed those limits host them somewhere on your server and use URL field when creating the banner to provide a direct link to your file. (http://...)

File names
File names may only contain letters of English alphabet lower and upper case, numbers and ‘_’.   All other symbols such as russian letters,  space symbol and ‘“’ , ’”’, ‘-’ are not allowed.


Preparation of flash-movie

The part of your flash-movie that is going to be “hidden” under the content of the website must be empty when it is hidden. Thus it must NOT contain any MovieClips, Buttons, Shapes or Bitmaps or anything else. You can accomplish this task using one of the methods described below:
- using masks;
- move all elements out of view, when movie is hidden;
- use _visible property for all elements and set it to false;

Removing all elements is OBLIGATORY. Not following this step will lead to random errors.

When flash-movie appears in other words at the moment of expand show all element:
- widen mask;
- bring the elements into view;
- set _visible property to true;

How to use mask

1. Create a transparent transition button and place it in the top layer of your movie. Add the following action for your button:

on (release)
{
    getURL(_root.link1, _root.target);
}

Variable link1 gets transition url from AdFox.
Variable target gets the "target" link parameter from AdFox, which defines where to open the link (in current window, or blank).

Buttons for expand and collapse if used must be placed above the transition button!

2. Choose you desired scenario for expand and prepare the banner according to corresponding requirements:

2.1 The hidden part appears after a button in the visible part is clicked.

Place the button in the top layer and add an action to it:

on (release)
{
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
    //If you need to trigger some animation at this point, add your code here
}

2.2 The hidden part of the banner appears when user mouses over a button in the visible part

Create a button and place it in the top layer. Add the following action to your button:

on (rollOver)
{
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
    //If you need to trigger some animation at this point, add your code here
}

2.3 Show the hidden part when animation reaches a certain point. Add the following code in the appropriate frame:

flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
//If you need to trigger some animation at this point, add your code here

Or you can use setTimeout function, to specify the exact amount of time in milliseconds like in the following example (change the 5000 value to whatever value you need):

setTimeout(function(){
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOn'+_root.bannerID+'"]');
    //If you need to trigger some animation at this point, add your code here
},5000);

When using setTimeout place your code in the first frame.

3. Choose you desired scenario for collapse and prepare the banner according to corresponding requirements:

3.1 Collapse is triggered by click on a button.

Place your button in the top layer and add an action to it:

on (release)
{
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
    //If you need to stop some animation at this point, add your code here
}

3.2 Collapse is triggered on mouse out event.

Create a button, place it in the top layer and add an action to it:

on (rollOut)
{
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
    //If you need to stop some animation at this point, add your code here
}

3.3 Hide the banner when animation reaches a certain point:

Add the following code to a desired frame of your animation (presumably the last):

flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
//If you need to stop some animation at this point, add your code here 

Or you can use setTimeout function, to specify the exact amount of time in milliseconds like in the following example (change the 5000 value to whatever value you need):

setTimeout(function(){
    flash.external.ExternalInterface.call('ADFOX.WALLPAPER.globals["wallPaperOff'+_root.bannerID+'"]');
    //If you need to stop some animation at this point, add your code here
},5000);

How to use mask

1. create a new top layer;
""

2. draw a rectangle or as many as you need above the part of your banner that is always visible;
""

3. right click on the layer to open the context menu and choose mask;
""

4. by default it will mask the layer below it;
""

5. compile to see the difference: previously visible parts in the masked layer that are no under the rectangle will be invisible;
""

6. Now highlight all layer that you have left and drag them like shown on the picture;
""

7. If you’ve done everything correctly all your layer are now masked, consult the screenshot and compile your movie again to check the result;
""

8. If we now expand out rectangle in the masking layer and compile again we will see that all elements are visible.

""
""

Event counting

Event counting is implemented through AdFox variables event_1 ... 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.

Last Updated: 31.01.2013