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 ();
How do I embed this to an html file? I tried simply using “embed” tags, but it doesn’t get resized. And oh yeah, thanks for this great resource. :)
interesting, I used your prototype to resize an arbitrary box in the center of the stage, and when i test it, the resize listener wont kick in till after I resize the window. so basically when I test the movie, the box is huge, and then i drag, and everything goes into place.
i used to do fullscreen flash the same way as this, except i had an if then statement: if 800 then do this. and in a way that was the workaround to the listener needing an input, how is that problem solved here?
ps, some of my if then code example was omitted. dont worry about it — that random 800 was not important.
nice example
Hi Kristian,
To solve your first problem (elements not positioning until stage is resized) simply put all of your calculations for position/size into a function (i.e. ‘setStage()‘ as above). You can then call this function when the stage is resized, but also from the frame where your elements are added to the stage. This will position them according to your rules without the listener being triggered.
To vary the results for different resolutions, as you say you can set up a conditional if/else statement. You can detect the users resolution with:
However, I recommend going by the stage properties, as they will represent the actual size of the broswer window.
Better still, use percentages and relative positioning, so that your stage elements will be positioned proportionally no matter what resolution the user has.
Hope this helps.
John,
for embedding flash you can use SWF object http://blog.deconcept.com/swfobject/
It is nice and clean and your pages will validate because it avoids nasty embed code.
Also, you can use automatic update for newer versions of flash player! cool :)
This has saved my butt! thanks! :)
This question may have been answered above, but Ill ask it anyway.
I can get the resize to work, and positioning going just fine.
What I can’t do is get a movie clip, positioned at the top left of the screen, to do a resize to scale, to cover the entire movie clip. I want to use a background image, that resizes to cover the entire browser, and when the user resizes the browser, that image doesnt get warped.
Can anybody help?
Hello, very nice, good Luck!
I love this function but I am unable to put it into practice on a website layout.
I’m trying to have a menu system in the header that opens new mc’s in the content.
But this is proving impossible to me… :(
I put my menu sytem in the header mc and it just stretches it, how can I fix it??
I’ve looked everywhere for help but just cant find it, please help??
Thanks
It was verrry helpful!
Thanks!
Hi Just…
Nice example – and some kind of math-test you put me on: I didn’t get the point and failed your exam.;-)
Anyway, I’ll try recall what I wrote on my way-gone message…
Two big challenges:
All my best….keep me posted