Soulwire V2 Interface

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!

Posted on 27 Sep 2006
Posted in
30 Comments
1 Trackbacks

Meta

Dynamic Positioning was posted on September 27th 2006 in the category Code / Code 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

25 Responses to Dynamic Positioning

Leave a Reply

Pingbacks / Trackbacks

  1. 7 years ago ActionScript 3 Dynamic Positioning « Bauhouse

    [...] resource of amazing ActionScript examples from Justin Windle at Soulwire. He had an example of dynamic positioning to achieve a full screen Flash layout. Unfortunately, it was ActionScript 2.0 and I am busy [...]

  1. Soulwire 8 years ago

    Hi Ixiel,

    This is because when the stage is aligned top left (‘TL’) the upper left corner is point 0,0 in the coordinate space, therefore any calculations we do use this as the reference point. So 50% of the stage width is 50% of the way from the top left corner to the far right. However, setting it to ‘T’ means that the reference point is always half of the added space from the left. Example; if the movie width was 500px originally and you resize the window to 1000px width, then the reference point considered 0,0 would actually be at x:250px (half of the difference). The problem this causes for the script is that Stage.width would still return 1000px, so a movieclip at x:75% (for example) would be 75% of 1000 (750) pixels from x:250px = 1000px!! So you see, this aint good.

    To keep things simple, I would recommend using ‘TL’, this way you can always know where your reference point is. Regarding the script I sent you; it is tried and tested and worked ok for me. Perhaps you want to send me an fla if you’re really stuck; I’ll have a look if I’ve got the time => justin |[at]| soulwire dot co dot uk

    Reply to this comment

  2. Seth 8 years ago

    thank you.

    you’re right, this is basic– this post is relatively old and yet for some reason this has eluded me for quite a while… my sincerest thank you.

    Reply to this comment

  3. TIMEOUT 8 years ago

    Hi everybody,

    I’ve got a little problem everything goes well with the center.function but when i’m loading an .swf composed by a flash component like a FLVPlayback my .swf doesn’t keep centered when i’m resizing the browser window…
    Is there anybody who have the same problem, and could teach me the solution, it keeps me worried for a long time now, but i didn’t find the solution…

    Thanks for that great tutorials

    bye

    Reply to this comment

  4. Soulwire 8 years ago

    If you load an image or swf into a container MovieClip, when the asset loads you will loose your refference to the original clip.

    Try adding an extra MovieClip inside your existing MovieClip and then load the swf into that.

    For example:

     // The MC being positioned inside the onResize function
    var videoMC:MovieClip;
    // Create a holder clip inside of it
    var holder:MovieClip = videoMC.createEmptyMovieClip( 'holder', 0 );
    // Load your SWF or JPG into that
    holder.loadMovie( /* etc... */ );
    

    Reply to this comment

  5. TIMEOUT 8 years ago

    It works fine, thanks a lot ! good continuation !

    Reply to this comment

  6. TIMEOUT 7 years ago

    WOrks NoT So FinE aT LeAst ! don’t blame me but i’ve tried all the tricks my froggybrain allowed me!
    If my loaded .swf contains some code or component the videoMC keeps out of the scene (yeah i can see it on top so far from the center….)
    i got damn with that mad style of resizable browser…can’t tell you how many hours i’ve trie to solve by myself an apparent easy solution – here’s the code

    // Setup the Stage properties
    Stage.scaleMode = "noScale";
    Stage.align = "TL";
    
    
    // The MC being positioned inside the onResize function
    var videoMC:MovieClip;
    // Create a holder clip inside of it
    var holder:MovieClip = videoMC.createEmptyMovieClip( "holder", 0);
    // Load your SWF or JPG into that
    holder.loadMovie("test.swf");
    
    
    
    function setStage ()
    {
    	var sw:Number = Stage.width;
    	var sh:Number = Stage.height;
    
    
    	videoMC._x = sw / 2 - videoMC._width / 2;
    	videoMC._y = sh / 2 - videoMC._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 ();

    Here I am – tHkX 4 your Help

    Reply to this comment

  7. Soulwire 7 years ago

    Timeout

    If you’re loading in an external SWF, when you reference is width or height you will get the width or height of its content, not of the SWF’s stage as it would appear in the Flash IDE. For example, if you have a SWF thats 400 x 400, but only has a 100 x 100 square on its stage, when you load it into another SWF it’s width will return 100.

    Could this be the problem?

    Reply to this comment

  8. TIMEOUT 7 years ago

    Hi, we finally find a solution by just replacing the parameter videoMC._width / 2; by the .swf ._width / 2 and everything stay in place…

    Good continuation

     function setStage ()
    {
    	var sw:Number = Stage.width;
    	var sh:Number = Stage.height;
    
    
    	videoMC._x = sw / 2 - 900/ 2;
    	videoMC._y = sh / 2 - 400 / 2;
    
    //VideoMC component
    }
    
    // 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 ();

    Reply to this comment

  9. Soulwire 7 years ago

    ;) Good stuff

    Reply to this comment

  10. John 7 years ago

    What I have to change to the movie clip stays at the bottom left of the screen?

    Reply to this comment

  11. jenkah 7 years ago

    Hi SOulwire. I have using this script for a CD presentation, and it works well but just with a bottom object. Even when Im using “TL” every objetcs, except the bottom, stills in the same place. Im a grapphic designer but dont a programmer, for that maybe I got some errors. This is the lines

     [
    function setStage ()
    {
    	var sw:Number = Stage.width;
    	var sh:Number = Stage.height;
    
    /*
    Rule for Top/ Right alignment
    */
    	cerrar_btn._x = sw - (cerrar_btn.Stage.width + margin);
    	cerrar_btn._y = margin
    /*
    Rule for Bottom / Center alignment
    */
    	back_mc._x = sw / 2 - back_mc._width / 2;
    	back_mc._y = sh - (back_mc._height + margin);
    /*
    Rule for Left / left alignment
    */
    	pleca_mc._x = margin;
    	pleca_mc._y = margin;
    /*
    Rule for Center / Middle alignment
    */
    	menu_mc._x = sw / 2 - menu_mc (Stage.width) / 2;
    	menu_mc._y = sh / 2 - menu_mc (Stage.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 ();
     ] 

    I will apreciate your help a lot.

    Jenkah

    Reply to this comment

  12. Pol 6 years ago

    Guys try this one. I just bought it. Has some awsome features that fould be great for use in alignment. Like loading files externally and xml
    http://flashden.net/item/advanced-positioning-xml-auto-align-on-resize-/63717?ref=Enabled

    Reply to this comment