Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Center a movieclip on stage resize in AS3

Center a movieclip on stage resize in AS3

Learn how to center a movieclip any time the stage updates. This example will be for when the user resizes the browser window, but you can adapt the technique to any number of actions.

View an Example of this article before you get started.

If you want to skip the overall article explanation here is the completed code.

Have you ever seen a web site that is 100% Flash? This of course being a web site that the entire browser contents is in fact a Flash movie. Well I am sure you have seen the effect a lot of them have when you resize the browser, you know, when the movie rebuilds or aligns itself any time the window is resized.

Well in this mini article I am going to show you a very quick and simple way to create this effect

Start off by creating a new movieclip instance, placing it on the stage and giving it an instance name of "mySampleMC".

Once you have the movieclip on the stage you can open the Actions panel (F9 on win, ALT+F9 on mac) to begin building the script

In the Flash editor you do not need to import the classes, however to use this code in an external editor or Flex you need to, so for completeness, lets do that

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;

Now that the classes are imported, you can create the function that will do the resizing. This function will be called by the stage Event handler.

function resizeHandler(e:Event):void
{
  mySampleMC.x = (mySampleMC.stage.stageWidth / 2) - (mySampleMC.width / 2);
  mySampleMC.y = (mySampleMC.stage.stageHeight / 2) - (mySampleMC.height / 2);
}

The next step is to assign the resize event to the stage.

stage.addEventListener(Event.RESIZE, resizeHandler);

The last step is to add the proper resizing constraints to allow this event to fire off.

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

Now you can publish the movie by going to File > Publish Settings and change the width/height to 100% or test the movie in the Flash editor. When you resize the movie you should see the clip center on the window, until you resize past the point of the clip, then it will disappear.

At this point the example is complete, however you may have noticed the movieclip is centered until the stage event is called. Normally this is a problem because the movie will start off not centered. That being said, ActionScript has a method of the EventHandler, dispatchEvent(). What this method lets you do is create an event on your own, without waiting for the assigned item to cause it.

The syntax of this method expects a new Event to be created, passing in the proper event name as an argument.

stage.dispatchEvent(new Event(Event.RESIZE));

You may be asking why you can't just call the resizeHandler function directly, and the truth is, you can. This is just a much cleaner and less "hackish" way to accomplish the calling of an event. You will see this dispatchEvent method used more for forcing custom errors in larger applications.

Here is the completed resize example for easy copy+pasting. I hope you enjoyed this and all the other tutorials on this site!

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;

function resizeHandler(e:Event):void
{
  mySampleMC.x = (mySampleMC.stage.stageWidth / 2) - (mySampleMC.width / 2);
  mySampleMC.y = (mySampleMC.stage.stageHeight / 2) - (mySampleMC.height / 2);
}

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, resizeHandler);

stage.dispatchEvent(new Event(Event.RESIZE));

As a side note, I wanted to let the readers know I am in the process of wrapping up my book on Flash and PHP. Once it is available I recommend you pick it up, as the contents of the book is about working with Flash and PHP to develop real world applications while starting off with the fundamentals so anyone can follow the material. The book is available on Amazon as a pre-order.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Center a movieclip on stage resize in AS3

 Vlado Krempl  Tue Jan 29, 2008 8:44 pm  
Fantastic information thankyou for sharing!
Not many articles about this with actionscript 3.

Just one question though, (and I have been searching everywhere for this answer!!!!But nothing in AS3)

How would you go about scaling a background image only (photograph as movieClip) fullscreen in a browser and keeping its aspect ratio while not scaling any other movieclips on the stage.??

Here is a perfect example :
http://www.zinkmag.com

Thank you for your time.
 drunknbass  Fri Feb 1, 2008 3:50 am  
thanks this is perfect, i adapted it to use for flex because my alerts didnt center when browser window resized.
 deyon  Tue Mar 11, 2008 11:21 pm  
thanks for writing this. If your book is like this little tutorial i will be getting it thank you again.
 mkeefe  Tue Mar 11, 2008 11:33 pm  
@Vlado, you could use the scaleX and scaleY properties with a little bounds checking to determine the correct size.

@drunknbass, awesome! Glad you liked it.

@deyon, glad you found use for it, and actually the book is more in depth and I was able to spend more time on each section.. which I plan to carry over to scriptplayground on future articles.

 stephane@designfanatic.cc  Tue Jun 24, 2008 4:06 pm  
Hi,

I have done something similar but my problem is that the site loads in external images that extend outside of the files stage size. So when you resize the browser with those large files loaded in the site jumps to a new position. Is there a way to keep an object from affecting the stage size. Or a script that says lock stage size?

Please email me if anyone has a solution: stephane@designfanatic.cc

Thanks,
Stephane
 Momchil  Fri Oct 17, 2008 5:46 am  
It doesn't work in Internet Explorer 6!
 fen1x  Sat Nov 1, 2008 2:58 pm  
THX THX THX for this !
 André G. Bottan  Thu Dec 18, 2008 11:58 pm  
Hi everyone (forgive my bad english)

Very nice tip! Thank you!

You saw that this method is for use in a site entirely made in Flash, but it is also useful in another way.

I want to build a resizeable banner, that fits inside a resizeable DIV in a page with 'liquid layout', made most of HTML (not entirely in Flash).

The banner height is fixed, but the width must mach the width of the container div, when it is resized.

I was out of hope of finding a solution. Them I find this page.

I used your code to place the main animation in the center of my banner and to place the right and left border graphics in the right and left extremities of the banner.

Now, when I resize my page, its 'liquid layout' adapts tho the browser window width. And, thanks to your code, the Flash content adapts as well.

 mkeefe  Fri Dec 19, 2008 1:39 am  
@André - Glad to hear the tutorial worked for you.
 Lawrence  Wed Dec 31, 2008 4:23 am  
Thx a lot! Very helpfull!
 mkeefe  Sat Jan 10, 2009 11:58 am  
@Lawrence - You're welcome.
 Mark  Thu Jan 22, 2009 8:06 am  
Thanks for the code! I set it up exactly as how you did it in you .fla file but but the movie clip that I have attached the code to only centers when the browser is being resized. It starts off in the bottom right corner for some reason?
 Mark  Thu Jan 22, 2009 8:49 am  
It seems to be because there are lots of movie clips inside this movie clip
 mkeefe  Fri Jan 23, 2009 6:41 pm  
@Mark - The last line of this code ensures the resize occurs when the page loads, however, you may want to verify this is happening, and ensure all contents are contained within one clip.
 Mark  Sun Jan 25, 2009 6:33 am  
Ok thanks for that, does it matter if there are multiple dupicated clips inside this container clip?
 mkeefe  Mon Jan 26, 2009 1:40 am  
@Mark - Nope, it will only center the parent clip. The number of clips within the parent does not matter.
 Glacius  Mon Feb 16, 2009 7:34 pm  
God, I was looking like crazy why the swf won't resize until I manualy resized the window. Tried with java, javascript but nothing. But this tutorial explained what I was missing:

the line
stage.dispatchEvent(new Event(Event.RESIZE));

and setting the window (from publish settings) width and height to 100%.

Thanks a lot again.
 nireve  Wed Apr 1, 2009 8:51 am  

"and setting the window (from publish settings) width and height to 100%."
yes and for html page you need :


 NIREVE  Wed Apr 1, 2009 8:52 am  
////

i don`t know how to post html code here....
 NIREVE  Wed Apr 1, 2009 8:53 am  
body bgcolor="#000000" topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0
 Denis  Tue Jun 9, 2009 3:08 pm  
This is awesome! BUT... is there a way to stop the centering after it gets to the size of the mc? so that its only centered when the screen size is say bigger than 1000 x 700?
 mkeefe  Fri Jun 26, 2009 11:58 pm  
@Denis - Yes, simply check the boundary size of the movie as the size changes. Then only allow the code to run if the preferred minimum size is met.
 Anders  Wed Jul 15, 2009 6:25 am  
This is ideal, I have been trawling the net for a good while this is exactly the kind of straightforward advice needed.

Kudos ^__^
 sconvey  Fri Aug 7, 2009 1:22 pm  
thanks for this
but what is the easiest way to offset something from center
for instance I have a mc and it is centered perfect. but I would like for it to be say 50px up from center
is there an easy way to do that?
 jackOD  Thu Aug 20, 2009 1:25 pm  
it didnt really work for me im sure its not the code and its just me but have you got any thoughts on why it wouldnt work?.

it makes the movie clip hang half off the screen so you can only see the bottom right corner.

THANKS
 Damirz  Mon Sep 7, 2009 9:34 am  
mkeefe thanks for this tutorial.

I am designing a full flash website, but I have some little problems, so I wanted to ask you for some help. If you would help me please let me know on email: damir.stuhec@gmail.com, where I can send my files. Thanks!
 mkeefe  Thu Sep 10, 2009 9:01 am  
@Damirz - While I do enjoy helping others as much as possible, I am unable to assist in the development of a complete web site as a favor. If you have a few specific questions please post them on the forum.
 Shaedo  Mon Sep 21, 2009 10:04 am  
Thanks, very nice tutorial. Much appreciated. BTW the CS4 'publish preview' option does not function properly with this. Just in case anyone else runs into this problem. you have to actually 'publish' it.
 Pol  Fri Oct 16, 2009 4:42 pm  
Hey... This is similar, just got it
http://flashden.net/item/advanced-positioning-xml-auto-align-on-resize-/63717

works like a charm, lol even has positioning
 freshUser  Mon Oct 19, 2009 7:38 pm  
wow that's exactly where I'm looking for but in AS3!!!?!
 kavita  Tue Oct 27, 2009 3:08 am  
if the center movieclip is animation and background can remain still and expand accordig to browser than your script doesn't work what can i use for animated movieclip which not resize
 flashi  Mon Nov 9, 2009 2:59 am  
thanks

thats very helpful
 MADAWEB  Tue Dec 8, 2009 2:39 am  
usefull.
Merci.
 Dan  Mon Jan 18, 2010 10:29 pm  
This is nice for resize, but how do you call that function at the beginning of the movie clip. When the flash starts, the clip isn't centered, only after you resize.
 Dan  Mon Jan 18, 2010 10:32 pm  
Nevermind, my bad. I don't know how I missed that.
 Newenay  Mon Jan 25, 2010 4:34 pm  
I had to change the following to get it to work, still a great tutorial...

mySampleMC.x = (stage.stageWidth / 2);
mySampleMC.y = (stage.stageHeight / 2);

...then make sure that you html width/height is "100%".
 Pol  Mon Feb 8, 2010 9:25 am  
http://activeden.net/item/as3-advanced-positioning-xml-auto-align-on-resize/65115

Yes, AS3 as well, freking awsome!!!
 Welington Cruz  Thu Feb 18, 2010 1:26 pm  
Man, I have to thank you, I've been looking for something like this for quite a while. It really solves my problems with different screen sizes and backgrounds. Thank you.
 Chris from U.K  Sun Feb 21, 2010 1:54 pm  
Great stuff man, it worked great. One thing though can you help us dummies (or so my wife says!).

I'm looking to put an image behind the mc's instead of the black background so . . . How can I get that to scale up when loaded into the browser?

Thanks mate

Keep the good work flowing
 Mare from Slovenia  Tue May 4, 2010 8:28 am  
Using Flash CS5 AC3 and just can' t figure this out:
I have done an full HD size flash movie (to serve as background) within regular sized movie(main page) in it... Now here is the problem: I can set auto resize near publishing it (100%...) and I don't need any code, it works great...BUT the problem is, it resizes and distrots the centered movie (main page within text etc.) as well!?? How can I prevent that?? It drives me crazy, I just cant continue to build the site because of it... there must be some simple AC code that states "this window should not resize".... thamn all these codes and rocket.science and simple stuff like that just can't be found anywhere PLEAZZZ HELP ME!!!
 gege  Wed May 19, 2010 11:34 am  
very useful..thanks!!!!!!!!
 Bill Triplett  Tue Jun 1, 2010 3:23 pm  
I have copied and pasted your exact code but the horizontal centering doesn't happen til I resize.

Any other suggestions?
 Bill Triplett  Tue Jun 1, 2010 7:21 pm  
Just noticed. It seems to center some frames in to the movie. The subject URL is above.
 Bill Triplett  Tue Jun 1, 2010 7:22 pm  
Sorry, thought it would show. http://www.invisiongrafix.com/pics/center_orig.html
 Josh  Mon Jun 28, 2010 2:08 pm  
I have used this or at least a version of this concept. Question: How could I go about adding another movieclip to the stage that doesn't adhere to the stageAlign rules? I want everything except one movieclip to align top left, yet this new mc I would like to extend beyond the stage on a tween scale. As to say when it is scaled within the tween, I dont want it to stop at the top right corber but extend past. Possible?
 mkeefe  Wed Jun 30, 2010 11:21 am  
@Josh - Sounds like StageAlign may cause you some grief in this instance. I would leave it default and implement my own positioning/scaling handling. The movieclip should certainly expand past assuming the width/height or scale factor is greater than the stage.
 Gio  Mon Jul 19, 2010 12:23 am  
Hey I have a quick question. I have a preloader loading a second swf (a website) into the stage. On that second swf i have my resize function inside of a ADDED_TO_STAGE, init event. My problem is that I can't figure out how to make that second swf resize on load. It only resizes when the user resizes the window. I also tried using the dispatchEvent but had no luck. Any ideas?

Any sort of help would be appreciated.

Thanks!
 pol  Mon Aug 2, 2010 4:59 pm  
There is an as3 version as well check it out http://activeden.net/item/as3-advanced-positioning-xml-auto-align-on-resize/65115?ref=Enabled

It really works like a charm
 victor  Fri Aug 13, 2010 5:59 pm  
I have a problem to publish html using Dreamweaver. The page was blank in browser.. check this out http://www.sementeuna.com.br/roberta/
 amaca  Wed Oct 20, 2010 8:24 am  
thanks a lot, very good tutorial ;)
 Vladimir  Tue Nov 16, 2010 5:56 pm  
thank you, you saved my life) i had some issue centering my movie clip at the beginning!
 mkeefe  Wed Nov 17, 2010 1:46 pm  
Glad people are finding this tutorial useful!

Matt
 michael095  Fri Apr 15, 2011 4:09 am  
Maybe that doesn't have quite in common with this tutorial, but i've wonder if You know the answer. What it i load the external *.swf movie into my Main Movie (website), and i want to define its dimensions (loaded movie is scalable). This is my code:

var equalizer:Loader = new Loader();
equalizer.load(new URLRequest("Pie2D.swf"));
equalizer.x=338;
equalizer.y=300;
addChild(equalizer);

How can i resize the Pie2D.swf?
Thank You.
 mkeefe  Fri Apr 15, 2011 11:22 am  
@michael095 - Using "contentLoaderInfo" you can alter the loaded content. If you change the width/height like you have above it will simply be reverted.. as you may have noticed.
 Pram  Fri May 20, 2011 4:19 am  
Hi,
Thanks a lot for this code.
I am panning the movieclip on stage.

When I view it in browser, with 100% height and width, It is not panning properly.

I want my image to pan on full screen of browser.
It is showing white patch on both side of movieclip. I tried and searched a lot for this issue but not getting any solution.

Do I need to resize my movieclip when view it in browser?

How can I resolve this issue.

Please help.
 mkeefe  Mon May 23, 2011 9:02 am  
@Pram - It sounds like you have padding in the browser window, which is the default.

Try to add the following piece of CSS code into the </head> of your page.

<style type="text/css">

html, body {
height: 100%;
padding: 0;
margin: 0;
overflow: none;
}

</style>
 Selen  Mon Jun 20, 2011 5:17 pm  
Thanks , supper :)
 Sergio Awoke  Fri Jul 15, 2011 12:17 am  
AWESOME!

Thanks! This helped me alot!
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles