Since fullscreen flash websites have become so popular; this little trick (a necessity really) has been used to make sure that no matter what screen resolution a user has, they can experience the site in the way in which the designer intended.
I realise that listeners are common knowledge, but I have had a lot of emails asking about dynamic positioning so I have written this brief tutorial on how to get all the elements in your Flash movie to position themselves automatically when the user’s browser window resizes, or if they are using a different screen resolution to you and you hate the idea of letting the movie scale!
The principal is simple, like in CSS with fluid layouts, you effectivelly position everything relitively, and write some simple formulas for maintaining their relitivity no matter what size stage they are on.
You can also apply this to the height and width of, for example, the background of a banner, so that your pixel font still looks crisp and nicely aligned as the bar behind is stretching to fit the window. The permutations are endless, and evidently, this is a really useful and basic tool to have when putting together a Flash site. I have even used it for CD Business Card presentations, to make sure text areas and graphics sit nicely in harmony with each other, even if it found its way into the grubbly hands of an 800 x 600 user.
Anyway, the code – Just paste this into the Actionscript panel, render and enjoy. Drag the movie’s resize handles around for some orgasmic repositioning pleasure:
// Setup the Stage properties
Stage.scaleMode = "noScale";
Stage.align = "TL";
// Create some dummy boxes
// This is only for the demonstration
var margin:Number = 10;
var boxSize:Number = 100;
var boxes = [
["top", "0x9933cc"],
["right", "0x00ff00"],
["bottom", "0xff0000"],
["left", "0x0099ff"],
["center", "0xff3399"]];
for (var i = 0; i < boxes.length; i++)
{
var newBox:MovieClip = createEmptyMovieClip (boxes[i][0], getNextHighestDepth ());
var nameBadge = newBox.createTextField ("test_txt", 1, 0, (boxSize / 2) - 10, boxSize, 10);
nameBadge.autoSize = "center";
nameBadge.text = boxes[i][0];
nameBadge.textColor = 0xffffff;
with (newBox)
{
beginFill (boxes[i][1],100);
moveTo (0,0);
lineTo (boxSize,0);
lineTo (boxSize,boxSize);
lineTo (0,boxSize);
lineTo (0,0);
endFill ();
}
}
/*
The core function...
I keep this separate from the 'onResize'
handler so that I can call it at the start
to position all of my elements if the screen
size has remained the same
*/
function setStage ()
{
var sw:Number = Stage.width;
var sh:Number = Stage.height;
/*
Rule for Top / Center alignment
*/
top._x = sw / 2 - top._width / 2;
top._y = margin;
/*
Rule for Right / Middle alignment
*/
right._x = sw - (right._width + margin);
right._y = sh / 2 - right._height / 2;
/*
Rule for Bottom / Center alignment
*/
bottom._x = sw / 2 - bottom._width / 2;
bottom._y = sh - (bottom._height + margin);
/*
Rule for Left / Middle alignment
*/
left._x = margin;
left._y = sh / 2 - left._height / 2;
/*
Rule for Center / Middle alignment
*/
center._x = sw / 2 - center._width / 2;
center._y = sh / 2 - center._height / 2;
}
// 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 ();
Have fun!
hi, i been looking for this solution…. but, the thing is im not really an expert on actionscript, would there be any posibility of getting an example with movie clips? maybe you can send one to my e-mail???
thanks,
sergio.
hello soulwire
the example you gave is a great one, thank you for that!
but… like sergio (above) i am not an expert on actionscript either and it would help us a lot if you used an movie clip in your file as an example. not that your code needs a movie clip to run because it work just fine, but i wouldn’t know how to attach a movie clip to it. (let’s say instead of the purple box i wanted it to be a logo that was always on the center top).
i would appreciate if you could do that.
thank you very much.
:)
estela
Hi Estela
I’ve posted an update with source code, hope this helps.
http://blog.soulwire.co.uk/flash/actionscript-2/dynamic-positioning-part-two/
thank you!!
you rock
:)
JUSTIIIIIIIIIIN!
hey it’s estela again.
thank you so much for your help with this tutorial, you helped a lot!
what brings me back is: i got very ambitious with the idea of working with fluid layouts i wanted to use in my next project, but i am having trouble with layers now.
basically i have a project that have 3 flash layers. all of them are kind of centered… when i call a new file to be loaded on the third layer it loads on the top left and then moves to the center. i am using:
this.onEnterFrame = function() {any idea how to solve this?
if you have the time… please take a look, i created a link for you to download the basic files:
http://www.estelavasco.com/justinrocks.zip
any advice will appreciated.
thanks again, you rock.
estela.
hi. just wanna ask where do you actually paste the code in Flash.. thanks.
Can we have the same .fla but that loads an external .swf and aligns it to the right all the time on resize also?
I have been looking all over the Web to get the code. Must be simple but I a designer not a programmer.
Any help would really be appreciated.
The problem is that it is a horizontal animation from right to left that starts outside the stage. So onResize using the width of the satge minus the movie clip width which is large simply can’t work as the x and Y coordinates fall way outside the stage.
Stage.align = "TL"; Stage.scaleMode = "noScale"; stop (); thumbscroll._x = Stage.width - thumbscroll._width; sizeListener = new Object(); sizeListener.onResize = function() { thumbscroll._x = Stage.width - thumbscroll._width; }; Stage.addListener(sizeListener);Hi Alexandra,
To align a loaded swf, just load it into a MovieClip container using loadMovie and then apply any transformations to that movieclip.
In terms of content outside of the clips boundary messing up your resize logic; one simple solution would be to add a static movieclip with an instance name as a child of the movieclip you are resizing, then refference that to get the dimensions. another alternative would be to store the original dimensions in a variable before you start adding children. Finally, the simplest option if its possible would be to specify a constant for the dimensions, if you don’t need to determine this at runtime.
hi soulwire,
great script! erm.. wanna ask what if we set the stage.align to “T”.. hows the syntax gonna looks like?
the problem with my flash is that there are so many mcs to be repositioned/actionscripted manually, is there a way to automatically centred mcs without giving names to all the mcs.. like stage.align=”T” ?
thx..
Hi Ixiel.
Setting the stage align to ‘T’ would align the swf top center, but leaving it unset would mean that your content is centered (as in any available extra space on resize forms padding around it).
If you want to actually move, say, all MovieClips on the stage (or within another MovieClip) to the same place, to save putting an instance name on them all and then having to target them specifically, you could use a function like this as a shortcut:
function centerAll(container):Void { for (var obj in container) { if (typeof (container[obj]) == "movieclip") { container[obj]._x = Stage.width/2; container[obj]._y = Stage.height/2; } } } /* Call the function with the stage as the container, this could also be a MovieClip with children if you wanted */ centerAll(this);This looks for ALL the MovieClips in a container element and then applies the same reposition logic to all of them (AS2).
Hi Soulwire,
Thanx for the script. Unfortunately the script doesn’t work correctly for my flash.
But if we use your tutorial script as example, if i change the Stage.align = “TL” to “T”, the 5 boxes no longer positioned correctly. How do you fix it?
Thx.