Flash objects (SWF) can fill the entire Html body, and scale along with browser window as you resize it (it’s done by setting width and height attributes to 100% in the embed tags). However unless scaleMode is properly defined as well, the outcome may look surprisingly bad, the flash content may loose proportions and distort, images quality drops and texts loose readability.. oh man.
Only specific contents should be scaled when the stage is resized, the same way apps handles resizing: an app will redistribute its panels without scaling them, will scale panel background but not the buttons and the controls in it. When the entire stage is simply scaled, the interface balance is disturbed.. and we don’t want that.
So I decided to share: ResizeManager (download) is a very simple scaling engine, a single AS2 class that can easily be modified or extended for your needs.
The manger can control scaling and some basic align options of MovieClips you register to it, so you can scale a background MovieClip to cover the entire stage, and keep another MovieClip centered without scaling. It also adds default definitions for the Stage behavior (scaleMode: noScale, stageAlign: TL), though you can change those.
In order to use it, simply import the class and create an instance of the ResizeManager:
import com.adifeiwel.custom_ui.ResizeManager;
var rm = new ResizeManager();
Then, use method registerMC() to register each MovieClip you want to control (including MovieClips nested within MovieClips, make sure parent MC is x:0, y:0), the registerMC method expects the following parameters:
_parentName:MovieClip (the name of the MoviClip)
_widthUpdate:Number (scaling in percentage from Stage.width, 0 for no-scale)
_heightUpdate:Number (scaling in percentage from Stage.height, 0 for no-scale)
_centerUpdate:Boolean (align MovieClip to center of stage)
_middleUpdate:Boolean (vertical-align MovieClip to middle of stage)
for example (see it here):
rm.registerMC(portMC.mainBG, 100, 100, false, false);
// will scale to cover all Stage
rm.registerMC(portMC.middleMC.middleBG, 100, 0, false, false);
// will scale to take 100% of Stage.width
rm.registerMC(portMC.middleMC.middleContentMC, 0, 0, true, false);
// aligned to center
rm.registerMC(portMC.transMC, 0, 0, true, true);
// aligned to center, vertical-align to middle.
rm.registerMC(portMC.vClip, 0, 80, false, false);
// will scale to take 80% of Stage.height
enjoy : )
Update: You can download the example FLA here.
Can you please also post the flash project that demonstrates the resizeManager class shown at http://www.todepoint.com/adi/as_examples/ResizeManager/
Thanks.
Hey Matt,
I added a link to the example FLA.
Adi
Hi, is there a way to keep the aspect ratio of the movieclip that is being scaled? Say if I had a photo or another swf loaded into it. Thanks,
Hey epa, giving the same percentage for width and height should keep aspect ratio.
I’m trying to use this but it is actually scaling the whole stage not just the movie clip.
Hey James, make sure the embed tags are properly defined – scalemode should be noscale. take a look at the fla example.
so, how do you publish this? the swf works fine, but it doesn’t work when you publish html?
This is awesome – thanks so much for making it available! Question – I put together a simple example that uses your class but it won’t scale properly until the browser window is resized. In other words: say my main background swf is 550px x 400px. I instantiate it and register it with the ResizeManager to scale to 100% of the browser window. When I publish and view in the browser it shows up as only 550px x 400px until I resize the browser and then it immediately snaps to 100% of the browser window.
I published your fla without modification and it does the same thing, so I know it’s not my fla/code.
Please help! : )
Hi Adi,
Great script. I have been able to change it and add variables and stuff to suit my situation. Thanks for making this available. I have one question. Is there anything I can do to make the code execute when the user enters the page? Thanks again!
@david, @mark, once you create an instance of the resize manager it adds a listener to stage and scaling of registered movie clips should be executed.
If you want to force a scaling (not by the listener) you can add this:
rm.resizeStage();
Hope it helps, and move on to AS3!
hi Adi,
the resize manager is working great! have a new idea that i havent seen done and was wondering if it can be done: i want to have a site that contains MC’s that load/appear as you resize the screen. they would load in a specified position also. what do you think? if you dont already have code for this, but could write it, what would you charge? thanks a bunch!