Intro to Flexible Flash Layouts
Flash movies are traditionally created to be viewed at a certain fixed pixel size. This pixel size is set in the html code used to embed the movies.
Recently there has been a trend in the flash comunity to create flash websites that take up 100% of the browser window.
The functionality to create movies that take up the full browser window, is nothing new, it has been included in flash since some of its earliest versions. However it was never really fully exploited because its poorly documented and there are some tricks involved in overcoming certain glitches.
This tutorial is an attempts to explain how to create flash sites with liquid layouts.
Here's an example of a Flash Liquid Layout Demo that I made . You can download the source files to look at how it was done.
Full Screen Flash Basics
Getting a flash movie to display full screen is pretty simple, all you have to do is change the height and width attributes in the HTML code used to display flash 100% as opposed to setting a pixel value for this data.
You can do this via the publish settings (File -> Publish Settings... ), or manually as shown in the example below. (make sure to change the attributes for both the object and embed tags if you do this manually)
Note: The size values you set in the properties box doesn't matter.
Sample<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="100%" height="100%" id="cool" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="cool.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#999999" /> <embed src="cool.swf" quality="high" bgcolor="#999999" width="100%" height="100%" name="cool" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
If you leave it at this all the elements within the flash movie will stretch to try and fit the fullscreen. But if you look at the example links, having all the elements in the flash movie resize is not the effect we are going for, and it usually ends up looking ugly.
If you look at the demo or the sample sites you will notice that the whole flash movie doesnt scale, only parts of the movie scale and get repositioned as the browser window is resized.
What we really need is control over how each of the elements (movieclips) in the flash movie reacts to browser window resizing.
Stop Scaling
To control the scaling and resizing for each individual movie clip you must first turn off the scaling for the movie as a whole.
Enter the following actionscript into Frame 1.
Stage.align = "TL"; Stage.scaleMode = "noScale";
The stage scale mode is set to no scale which means that by default the elements in the movie will not scale in recation to changes in the browser window size.
Notice that the Stage.align variable is set to 'TL' it means that the stage will be positined in the topleft corner of the stage.
Add a Listener to Check for resizing.
Now that you have the initial setup completed, all thats left is to add a listner for resizing. This creates a new listener object and assigns it to the 'Stage' (main flash movie).
sizeListener = new Object();
sizeListener.onResize = function() {
trace (Stage.width)
trace (Stage.height)
};
Stage.addListener(sizeListener);
The sizeListener.onResize function is the key to making this movie work . The code inside the on resize function will execute actions when the movie is resized. This function is the key to creating liquid flash layouts.
In the sample code above the onresize function just traces the stage.width and stage.height values but you can use the Stage.height and Stage.width values to adjust various elements in your movie
Practical Example
Stage.align = "TL";
Stage.scaleMode = "noScale";
sizeListener = new Object();
sizeListener.onResize = function() {
centered._x = Stage.width/2
centered._y = Stage.height/2
centered._width = Stage.width * .5
};
Stage.addListener(sizeListener);
This code adjusts the _x and _y values of the movie clip 'centered' when the browser window is resized so that the clip remains centered. And the width of the movie clip centered is changed to eaqual half the width of the browser window.
For a more complex example have a look at the source filesfor the Liquid Flash Layout demo.
