Liquid (stretching) layout banner

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

Description

Liquid (stretching) layout banner - is a flash banner that smartly resizes itself to fit the block that it is in. By smartly we mean that it is not stretching all of its elements (pictures, words etc.) as a normal flash-movie would do but rather repositioning some elements and leaving the others as they were and also extending background. Read on to find out just how it can be accomplished.

Preparation (for developers)

Download some example code to help you along the way.
Download

First add the code that will modify the size of your flash-movie to the first frame of your Main Timeline.

In our example for a movie 100%x90px we use this code:

Stage.scaleMode = "noScale";
Stage.align = "TL";
function setBorder(){
    this.clear();
    this.lineStyle(3,0xff0000);
    this.lineTo(Stage.width,0);
    this.lineTo(Stage.width,90);
    this.lineTo(0,90);
    this.lineTo(0,0);
    this.endFill();
}
var listener = new Object();
listener.onResize = function(){//calculate your new sizes here
    setBorder();
    goURL._width = Stage.width;
    goURL._x = 0;
}
Stage.addListener(listener);
goURL.onRelease = function(){//goURL – transition button name
    getURL(_root.link1,'_blank');
}
setBorder();

Which also adds a border to our movie. To implement any other manipulation with elements’ positioning or size add some code to this function listener.onResize = function(){}.

One last step is to create a transparent transition button, give it an instance name goURL and place it in the top layer of your flash-movie. The button will resize itself and allow a transition according to the code provided in our example. So you needn’t write anymore code yourself.

Last update: 28.11.2011