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 ();
Soulwire,
That is exactly what I was after…
As you can see, I am new to scripting. Thank you for taking the time.
BTW I ‘m in awe of your webcam / art show project. Very inspiring. a milestone…
by that same logic to position my object along Y I would position it to 50% of the stage height and add half of its height… right?
This doesn’t seem to work. I then tried to plug in a strict integer (say 200) and the object is still positioned along the top of the window.
what am I overlooking?
It does depend on the objects registration point. Assuming it is top left, you would set it’s _y value (AS2) to (Stage.height / 2) – (object._height/2)…
Also make sure the Stage.align is set to top left ‘TL’ so (0,0) is your refference point, otherwise it gets confusing. And of course make sure your MovieClip has the correct instace name!
If you’re still not getting any joy, feel free to send your FLA to me ( justin [ at ] soulwire dot co dot uk ) and I’ll have a look.
hi, would it be a possibility to turn the example you created with the repeating background into AS3?
really cool stuff here!
andrew
Hi,
cool stuff. i use a quite similar way to reposition everything on stage. ever thought about registering all the movieclips in a so called “resizing_array” so that you don’t have to write all your movieclips in the resizeHandler. something like:
// Out main function
function setStage ()
{
var sw:Number = Stage.width;
var sh:Number = Stage.height;
for(var i=0;i<repos_array.length;i++){
// 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);
}
This has been a great help but there is one thing thats
confused me,
how do you posistion a movieclip to the top right of the the screen
I know top left is:
MY_mc._x = 0;
MY_mc._y = 0;
I know to stretch something is like:
my_mc._width = Stage.width;
I also know how to centre … but cant figure out how to make something top right!
can anybody help? AS2?
Hi,
very helpful material really.. I just implemented ur code for stage listeners , it works fine when compile but does’nt work if publish or in html.
any ideas?
thanks in advance for any help!
@SAM:
MY_mc._x = StageWidth – (MY_mc.width)
MY_mc._y = 0
will position a movieclip in the upper right corner.
I am just starting out with actionscript and I’ve got the hang of the basics of this code (pretty much), but I’m having an issue trying to incorporate motion (such as motion tweens) into it. Specifically, what I’m trying to do is have an object move from the center of the screen to being anchored to the right hand side of the left column, but that point varies depending on the size of the screen. I’ve somewhat got the grasp of ActionScript coded motion, but I’m failing completely at trying to incorporate it into this script. (I’m using AS3)
Hi there,
Finally making the step up to AS3 and am running into a problem when trying to put your example into an external document class.
The following is the code from my AS file:
package site.src { import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.display.MovieClip; import flash.events.MouseEvent; public class index extends Sprite { // Setup the Stage properties stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; public function index() { DisplayObject.prototype.pos = function (x, y, w, h) { this.x = x; this.y = y; this.width = w; this.height = h; }; stage.addEventListener( Event.RESIZE, setStage ); setStage (); function setStage ( e:Event = null ) { var sw:Number = stage.stageWidth; var sh:Number = stage.stageHeight; var swh:Number = sw/2; var shh:Number = sh/2; // Position / resize our MovieClips myMC.pos (swh, 0, sw, myMC.height); myMC2.pos (0, 0, myMC2.width,myMC2.height); } } } }Am I even setting this class up properly?
I have no problems when creating other external classes and simply linking them to Library assets through directly through the IDE…
hi,
first of all i’d like to say this website looks really cool.. this is my kind of style.. minimalistic..
anyways.. the tutorial is really helpful.. i just have one question, when i publish it to html.. and test it.. it doesn’t go fullscreen on any browser… on firefox there’s a extra white border and the ie is little messed up as well… i tried different options on the publish settings.. i think i got the settings wrong.. how do i fix it?
thanks man. learned a lot from your site.
hi,
nevermind i got it working. thanks.