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 ();
Grazie per il tuo lavoro,
ho una domanda, come posso inserire degli elementi all’interno dei MovieClips
senza che questi di deformino?
grazie
How can I keep objects without changing the size and scale?
within MovieClip parent?
Thanks for your great work
Hi Woody. All child objects will inherit their parents transformations, so by default this is not possible. However you could do one of a few things. Firstly you could not add the child DisplayObject as a child of the clip being transformed, and instead simply position it manually after the stage resize logic has run (i.e. someMc.x = myResizedClip.x). You could also nullify the scale component of the transformation by doing something like: someMc.scaleX = someMc.scaleY = 1/myReziedClip.scaleX;. The later is a bit of a hack though, so you’re better off just not nesting your clips and manually applying resize and / or position logic to them all separately.
NO ANSWER ?
How can you Tween them on entry and resize???
GREAT TUT!!!
Dear Soulwire,
Thanks, GREAT TUT. I have some problem with the codes.
I just wanna use your code to my flash file where I’m making a fullscreen flash site.
I tried integrating the code in my main movie clip.(_root)
The codes you’ve put in is in association with the boxes…(head,foot,left,right)
I want integrate these values to my MC’s but dont really know how.(I tried but,ddnt work out.)
I would be greatful to you if you could help me on this…(otherwise i will be in trouble :( )
Thanks… anticipating your reply..
Wow, you’re a genius when it comes to flash!!
This is something I’m trying to master… I want to get the same effect as this site:
http://www.campbellgrayhotels.com/?lang=EN#/one-aldwych-london
Once loaded up if you resize the window it re-crops the image (at lower than 1200pixels wide) along with making the menu smaller.
I reckon I can combine you’re Dynamic Positioning with your Display object to get the same effect!
Thanks so much for posting this invaluable content on your site for us all to learn from!!
Tristan – Newbie to flash, Seasoned PHP, HTML, Javascript (coming in a little handy with the Actionscript.. less with the objects and symbols…)
Thanks for your generosity, you sure are a genius at flash and actionscript!
This is something I’m trying to master… I want to get the same effect as this site:
http://www.campbellgrayhotels.com/?lang=EN#/one-aldwych-london
Once loaded up if you resize the window it re-crops the image (at lower than 1200pixels wide) along with making the menu smaller.
I reckon I can combine you’re Dynamic Positioning with your Display object to get the same effect!
Thanks so much for posting this invaluable content on your site for us all to learn from!!
Tristan – Newbie to flash, Seasoned PHP, HTML, Javascript (coming in a little handy with the Actionscript.. less with the objects and symbols…)
Dammit, I didn’t mean for two!! Your flash even detected the duplicate and I thought it was wrong… really sorry!!