Flash Liquid Layout Dynamic Positioning

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 ();
Posted on 08 Mar 2007
Posted in
Tagged
60 Comments
0 Trackbacks

Meta

Dynamic Positioning Continued was posted on March 8th 2007 in the category Code / Code, Flash and tagged; , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

57 Responses to Dynamic Positioning Continued

1 3 4 5

Leave a Reply

  1. woody 6 years ago

    Grazie per il tuo lavoro,
    ho una domanda, come posso inserire degli elementi all’interno dei MovieClips
    senza che questi di deformino?
    grazie

    Reply to this comment

  2. woody 6 years ago

    How can I keep objects without changing the size and scale?
    within MovieClip parent?

    Thanks for your great work

    Reply to this comment

    1. Soulwire 6 years ago

      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.

  3. woody 6 years ago

    NO ANSWER ?

    Reply to this comment

  4. Ernie 6 years ago

    How can you Tween them on entry and resize???

    GREAT TUT!!!

    Reply to this comment

  5. Elias 6 years ago

    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..

    Reply to this comment

  6. Tristan 6 years ago

    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…)

    Reply to this comment

  7. Tristan 6 years ago

    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…)

    Reply to this comment

    1. Tristan 6 years ago

      Dammit, I didn’t mean for two!! Your flash even detected the duplicate and I thought it was wrong… really sorry!!

1 3 4 5