Following another post regarding using stage listeners to dynamically resize and position MovieClips in Flash, I was asked to upload and FLA as an example. The previous code can just be pasted into the actions panel and will run without any MovieClips needed, and was designed to show the StageListener function rather than showcase a particular dynamic layout.
Download: Fluid Flash Layout Example
Anyway, here is a slightly amended version of this simple technique which uses MovieClips, and produces a fluid layout based on percentages (much like the classic CSS three column layout).
Again, this can be easily modified to include more elements, margins etc. Note – if you want to add content to the Movieclips (for example A menu in the left column), simply make the resizable elements a background MovieClip inside each parent MovieClip.
For instance, our left column would then be resized by using:
leftCol.backGround.pos(x, y, w, h);
The content inside the leftCol MovieClip would then maintain its size as the background resizes. Easy.
// Setup the Stage properties
Stage.scaleMode = "noScale";
Stage.align = "TL";
// Variables (in pixels)
var headHeight:Number = 100;
var footHeight:Number = 50;
// Variables (in percent)
var leftColWidth:Number = 25;
var mainColWidth:Number = 60;
var rightColWidth:Number = 15;
// Prototype function to position MovieClips
MovieClip.prototype.pos = function (x, y, w, h)
{
this._x = x;
this._y = y;
this._width = w;
this._height = h;
};
// Out main function
function setStage ()
{
var sw:Number = Stage.width;
var sh:Number = Stage.height;
// Calculate percentages based on Stage dimensions
var Lw:Number = sw / 100 * leftColWidth;
var Mw:Number = sw / 100 * mainColWidth;
var Rw:Number = sw / 100 * rightColWidth;
var Hp:Number = sh - (headHeight + footHeight);
// Position / resize our MovieClips
header.pos (0,0,sw,headHeight);
leftCol.pos (0,headHeight,Lw,Hp);
mainCol.pos (Lw,headHeight,Mw,Hp);
rightCol.pos (Lw + Mw,headHeight,Rw,Hp);
footer.pos (0,sh - footHeight,sw,footHeight);
}
// Add a listener
var stageListener:Object = new Object ();
Stage.addListener (stageListener);
// When the Stage dimensions change...
stageListener.onResize = setStage;
// Call our function to set it all up right!
setStage ();
Sweet! Just what I was looking for – some nice actionscript for me to sink my teeth into :D
hmm yes
is there anyway to set the center box a static width say 500, and have the sides just fill out to the ends of the browser? this way your main content only grows hight wise not width butthe screen always looks full because the two outside cols will adapt..
Hey,
Awesome script! Just was I’ve been looking for, I was doing it a much longer harder way so this is saving me lots of time and well frankly it’s much more efficent then how I was doing it.
I do have a question or two though, I’m going to give you a website which I believe is using this or something very similar (beautifully done website too)
http://www.stylusmodels.com/
My first question is how to-do a background that dosn’t scale, but repeats the way this site is done. You can resize the window but the background always looks beautiful.
The second is the menu at the top. It dosn’t resize scale (the middle of it) it stays the same, the only part that resizes or scales are the far outsides to give it the faded off effect…
and thrid, as someone else above asked, how do I create a liquid textfield that keeps fontsize while resizing the window?
If you (or anyone else) is able to provide some type of quick answer that would be amazing. Hope to hear from someone soon. Thanks.
-Mike
sorry one more,
is there also any way to have the center box a fixed width and the outside fluid?
Hi Mike, Chris and Ruggero,
You can download another example here which hopefully addresses your questions.
Stage listeners update
In the source is an example of a texfield which resizes its height to the stage. If the stage height is not big enough to display all the text, it will scroll into another column. I have also put a switch in there which will let you add a ‘more’ button if you preffer that method.
The FLA also includes and example of how to achieve the tiling background effect. It uses a bitmap from the library and creates a seamless tile to the exact size of the stage (without scaling). It looks smart, you’ll like it!
Also in the new example is a centred, fixed width box which will adjust it’s height to the stage, plus another fixed width box which has fading boxes attached to either side of it which resize, leaving the main box fixed.
Chris, when you say “…have the sides just fill out to the ends of the browser” – I hope I have covered this for you and Mike in the new FLA with the centred box that has scrolling outside tabs, but let me know if I’ve misunderstood.
Hope this helps guys.
Yo, sup, props for the wicked example m8, i wuz cheken out an above link to some model website good shit, how did you do the fade/lighting effect? around the edges of the background, it looks like faded out & its bright in th emiddel ………. can u throw up an example of that?
Hey Tim.
The fading is simply done with a transparent to opaque ( or translucent) circular gradient. Or possibly the reverse – i.e. a light coloured gradient which fades out towards the edges. Either way, if you layer this over your background with a low alpha or even a blendmode applied you can create an effect similar to the lighting in After Effects. Just stretch this movieClip to the stage width and height when your stage resizes and you’re done ;)
Hi Justin,
I am new with as3 and I am trying to build my portfolio. I a couple of questions that you might be able to answer.
First, for this fullbrowser, which stage dimenstion in the flash movie I should use …. let’s say 800×600.
The second, what about if you do not want the elements to be centered. What about if you want them in one side of the browser and change position according with browser dimension.
I hope you could give me some advice on this questions and thanks so much for sharing this tutorials.
Hi Appi,
To answer your first question; it really doesn’t matter what original resoluton you use. If you are setting your stage mode to ‘noScale’, then you could have a 10 x 10px movie and would still get the same effect as 1280 x 1024. The important thing is the size of the user’s browser window.
If you want elements to not be centered, set the stage align to ‘TL’ (top left) as I have done in the example above. Now, you can set an absolute or relative position, say, from the left. For example, if you want a MovieClip called logoMc to always sit a quarter of the stage width from the left, set it to ‘logoMc._x = stage.width * .25;‘. So work in percentages and you will be ok ;)
Hope that clears things up.
Hi Justin,
Thanks for your comments. It seems clear to me but the code did not respond as I would. Could you please have a look at it.
package { import flash.display.MovieClip; import flash.display.Stage; import flash.events.Event; import navigationMC; public class main extends MovieClip { private var naviMC:navigaMC=new navigaMC; private var arrBTN:arrowBTN=new arrowBTN; public function main () { stageDisplay (); } public function stageDisplay () { stage.addEventListener (Event.RESIZE,_onResize); stage.align = "TL";// Top left align the stage stage.scaleMode = "noScale";// items do not stretch to fit object (); } public function object () { arrBTN.x=660; arrBTN.y=5; arrBTN.visible=true; addChild (naviMC); naviMC.addChild (arrBTN); } public function _onResize (event:Stage):void { //naviMC.x=stage.width/2; naviMC.y=stage.height/2; } } }Thanks!
Hey,
How would you use a preloader, that’s centered, then it loads an external swf which also follows all the same rules? centers width & height, etc etc..
Hey. Nice site man! I’m trying to rescale an image according to stage dimensions. So when the browser is resized, the image would scale proportionally. Is there a way to accomplish this?