Roll-out / iLayer made of 1 file

This specification deals with information needed for correct preparation of creatives in Macromedia Flash format for Czech market, but should be usable on other markets too.

Term definitions

In the text below, the following terms will have these meanings:

Layer

such part of the creative, usualy bigger, which is visible only for a limited period of time. It is shown either automatically, or when the user moves his mouse pointer over the Starter. In the example at the bottom of this page, Layer is made in blue color.

Roll-out or iLayer

creative solution which consists of the Starter and the Layer and accompanying scripts, which allows for the following functionality:

1. if the user moves his mouse over the Starter and if he does not move it out before the given time elapses (usually 500 - 1000 ms), the Layer is displayed
2. if the user moves the mouse out of the Starter earlier, nothing happens
3. the Layer has to contain prominent label Zavřít (Close) accompanied with the icon of a close button ( X ), resambling the close button of operating system. After the user clicks on the label or the close button, the Layer is immediatelly hidden.
4. the Layer is hidden automatically after the end of the animation or after the specified time elapses
5. it is usually possible to clik on the Layer and the Starter which causes the redirection of the user to the advertisers site.

For the purpose of this document, both the Starter and the Layer are parts of the SINGLE flashe movie.

In the basic state (rolled up), only the Starter part is visible. The rest of the flash object area must be transparent! In the rolled out state, the whole movie area is visible (it may have transparent parts for creative reasons). If there is a gradual transition between rolled up and rolled out states, the area which is not rolled out yet has to be transparent.

Starter requirements

To be able to handle all the described functionalities, the Starter area has to implement the following ActionScript:

For the whole area of the Starter:

on (release) {
		if ( ! _root.clickthru && _root.clickTag ) { 
			_root.clickthru = _root.clickTag; 
        }
		if ( ! _root.clickTarget ) {
			_root.clickTarget = "_top";
		} else if (Key.isDown(Key.SHIFT)) { 
			_root.clickTarget = "_blank"; 
		} 
		getUrl( _root.clickthru, _root.clickTarget);
}


on (rollover) {		

		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_starterIn");
		} else {
			getUrl( "javascript:" + _root.prefix + "_starterIn()" );
		}
		
		if (! _root.rolloutdelay) _root.rolloutdelay = 500;
		if (doRollOut) rollOutTimer = setInterval(rollOutAction,_root.rolloutdelay);
}

on (rollout) {
	
		clearInterval(rollOutTimer);
		rollOutTimer = false;
	
		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_starterOut" );
		} else {
			getUrl( "javascript:" + _root.prefix + "_starterOut()" );
		}
		
}

In the ideal case simply place and invisible button over the whole area of the Starter and copy & paste the above ActionScript there.

For the last frame of Starter or a helper Control layer:

if (! _root.autoshow) {
	gotoAndPlay(0);
} else {
	_root.autoshow = false;
	rollOutAction();
}

This makes the starter animation to cycle and not show the Layer until we want to.

If the Starter animation commences at other frame than 0, please replace 0 with the actual frame number of Starter animation begining.

Last, but not least, do not forget to insert the following into the first frame of the animation. You can use the first frame of the helper Control layer.

if (! _root.domain1) domain1 = "*";
if (! _root.domain2) domain2 = "";
System.security.allowDomain(level0.domain, domain1, domain2, "*");

var rollOutTimer;
var layerTimer;
var doRollOut = true;

function closeCall() {
		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_close" );
		} else {
			getUrl( "javascript:" + _root.prefix + "_close()" );
		}
		doRollOut = true;
}

function rollBackAction() {
	clearInterval(layerTimer);
	layerTimer = false;
	// put an action here which rolls the movie up back to the Starter state. It can be either jump to first frame of the starter, or a gradual process similar to gradual rolling out
	// the action should be followed by the closeCall();
	gotoAndPlay(0)
	closeCall();	

}

function rollOutAction() {
	clearInterval(rollOutTimer);
	rollOutTimer = false;
	doRollOut = false;
	// put the actions here which take care of showing the Layer...
	gotoAndPlay(30);	
}

Do not forget to edit functions rollBackAction and rollOutAction appropriately to indicate, what should happen as roll-out and roll-back action.

Layer requirements

To be able to handle all the described functionalities, the Layer area has to implement the following ActionScript:

For the visible parts of the Layer, except for the label zavřít (Close) and closing button:

fon (release) {
		if ( ! _root.clickthru && _root.clickTag ) { 
			_root.clickthru = _root.clickTag; 
        }
		if ( ! _root.clickTarget ) {
			_root.clickTarget = "_top";
		} else if (Key.isDown(Key.SHIFT)) { 
			_root.clickTarget = "_blank"; 
		} 
		getUrl( _root.clickthru, _root.clickTarget);
}
 

on (rollout) {
	if (_root.inout) {
		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_layerOut" );
		} else {
			getUrl( "javascript:" + _root.prefix + "_layerOut()" );
		}
	}
}

on (rollover) {
	if (_root.inout) {
		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_layerIn" );
		} else {
			getUrl( "javascript:" + _root.prefix + "_layerIn()" );
		}
	}
} 

  

For the last frame of the Layer animation (or last frame of helper Control layer:

if (_root.closeatend) {
	rollBackAction();
} else {
	if (_root.autohide && !layerTimer) {
		if (!_root.layertime) {
			_root.layertime = 5000;
		}
		layerTimer = setInterval(rollBackAction, _root.layertime);
	}
	// replace frameNumber bellow with the actual frame number to go to so that the layer keeps open and uncomment the line below
	gotoAndPlay(50);
}

Do not forget to replace the frame number in gotoAndPlay to the frame which will keep the layer open.

For the label zavřít and the closing button:

on (release) {
	rollBackAction();
}

Transition requirements

If the transition between rolled up and rolled out states is gradual, ie. if there are more states than the full roll up and full roll out, then some further calls should be made which will tell JavaScript to act accordingly and reserve appropriate space on page. To achieve that, insert the following ActionScript into the transition frames:

		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_size" ,"width,height");
		} else {
			getUrl( "javascript:" + _root.prefix + "_size(width, height)" );
		}

Please replace width and height with the actual width and height ( in pixels ) of the visible part of the movie at the moment of the NEXT such call.

For example:

Let's assume you have a starter which has dimensions 120x600, which will gradually roll out to 350x600. You also know, that after 10 frames of transition effect, the size will be 130x600 for example, then, after another 10 frames it will be 140x600 etc.

So, to the first frame of transition, you will put this call:

		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_size" ,"130,600");
		} else {
			getUrl( "javascript:" + _root.prefix + "_size(130, 600)" );
		}

The, to the 10th frame of the transition, you will put:

		if ( _root.activex == 1 ) {
			fscommand( _root.prefix + "_size" ,"140,600");
		} else {
			getUrl( "javascript:" + _root.prefix + "_size(140, 600)" );
		}

and so on, until approximately the 10th frame before the end of transition, the parameters will be 350,600.

How often you will do this, whether each 10th frame or more or less often, depends only on you. As always, the more often you do, the more "clean" the transition is, but keep also the processor load in mind. So, let's say 10 calls per transition are just ok. Of course, if you use similar transition to roll up back to Starter, use the same approach.

Other general recommendations valid for both the Starter and the Layer

• Use low framerates (frames per second). Try to lower it as much as possible, while keeping acceptable quality of the result (Especially valid if you have many object animated or you animate large objects). High framerate = high processor load and slowdown of the users computer! High processor load may lead to rejection of the creative by the site. Please understand, that usually your creative is not the only one on the web page and if two processor intensive creatives appear on the same page at the same time, they may cause serous problems with the computer responsivnes and user experience.
• Where possible, make use of 1 pixel wide border of your creative. White Layer on white page background does not look great and it may be misleading to the users - they may think they are clicking on the page while they click on the creative! Again, if you don't make a border around your creative, it may lead to its rejection by the site.
• Any transparent part MUST NOT be clickable, ie. if the users clicks on it, he must not be redirected to the advertisers site. The reason is that the user believed he was clicking on the web page while he was clicking on the creative.
• Don't use special characters in the file names, spaces etc. On the other hand, it is very useful if the file name contains the information about the flash dimensions, for example starter468x60_layer468x200.swf.
• The label Zavřít (Close) should be made in such way that it works even if the user clicks outside the actual pixels of the text itself. For example, even click between the letters or in the close surroundings of the text should work as if it was a clik on the label.
• Export the SWF files for Flash Player version 6, if possible, with ActionScript version 1.
• When sending your Flash file, send us also a text file with the frame number to go to for: Starter animation start, Layer animation start

Example

This is the functional example of the common behaviour of iLayers. If you move your mouse over the Starter and stay there for a little while, the Layer is displayed.