I recently had some questions that revolved around making Flash applications that can take up the full screen and still
look correct. In other words, how do you make applications that are dynamically resizeable. This isn't necessarily
the sort of thing that you want to work into every project that you do, as it adds a bit of work to the initial setup of
your file. If you find yourself with an application that you frequently reuse across different sites, use in multiple
areas on a single site or have a client that can't decide how large they want their layout to be; this is something that's
worth your time to implement.
In order to get your application to resize you'll need to make sure that your embed and object code have scale set to
scale="noscale". Then you manually set width and height to whatever
size you need for each instance. For my examples I'm setting the width and height and rendering
the Flash file into a <div> with a matching width and height.
Flash app at original size, 200 X 100.
Same flash file as above at larger size, 300 X 150. The stage's x and y coordinates don't remain in the upper left,
instead padding is added around the stage evenly.
Flash isn't really set up to do resizeable applications by default. When you scale something up and it's set to
noscale mode, it doesn't size up as you'd expect. Instead of the 0,0 coordinate remaining in the top left corner, padding
is added around the stage in equal amounts. This means that, as the file changes size, you're going to need to constantly
recalculate where the boundaries of the stage actually are and keep repositioning things as necessary. Fortunately
this ends up not being very difficult.
The first things you'll need are some global variables to have for reference throughout your main file.
//the original width of the flash file
private var widthRef:int = 200;
//the original height of the flash file
private var heightRef:int = 100;
private var top:Number = 0;
private var right:Number = widthRef;
private var bottom:Number = heightRef;
private var left:Number = 0;
It doesn't matter what size you develop your Flash file at, since it's going to be resizeable anyway, but you'll need
to keep the reference to the width and height in order to calculate the new size. If you change the stage size at some point
during the dev cycle, remember to update those values or things will go wonky.
Next you'll need to set up the function to calculate the new boundaries.
private function resizer():void{
var targetWidth:Number = stage.stageWidth;
var targetHeight:Number = stage.stageHeight;
left = widthRef/2 - targetWidth/2;
right = widthRef/2 + targetWidth/2;
top = heightRef/2 - targetHeight/2;
bottom = heightRef/2 + targetHeight/2;
}
Now you'll want to add an event listener for the stage resizing in your initialization code. You'll also want to
call the resizer function from the initialization code. You'll want to do both because most of the time the resize
event will have triggered before the app hits the initialization block but not always.
private function init():void{
stage.addEventListener(Event.RESIZE,event_stage_resize);
resizer();
}
private function event_stage_resize(event:Event):void{
resizer();
}
That covers everything you need to know to be able to calculate the new boundaries. Now it's just a matter of
making sure that everything goes to the right place every time the resizer function is called. I've found that
my stage placement calculations tend to fall into two main categories, keeping things in the top left corner and
keeping things centered on the stage. Most fiddly placements of things occur within containment sprites which
don't need to know the boundaries of the stage, just how large it is and when that size has changed.
In order to accomplish this easily, I create three arrays: movers, centerers and resizers. In the resizer
function, I loop through the arrays and move them appropriately. Every time I create something on the main stage
I push it in to whichever of the arrays it applies to and then I don't have to worry about creating a whole bunch
of global variables just to keep track of placement.
//all the movers are just kept in the top left corner
for(var i:int = 0;i<movers.length;i++){
movers[i].x = left;
movers[i].y = top;
}
//all the centering objects are kept centered
for(i = 0;i<centering.length;i++){
centering[i].x = left + ((targetWidth - centering[i].width)/2);
//optional line for keeping things vertically centered
centering[i].y = top + ((targetHeight - centering[i].height)/2);
}
//all of the objects in the resizers array have a custom function that updates its display in a specific way
for(i = 0;i<resizers.length;i++){
resizers[i].resize(targetWidth,targetHeight);
}
The resize function is added into a custom class, one that would probably extend the Sprite or MovieClip. This is
where you'll be spending most of your time with your calculations. I usually
have a MainContainer class that's pushed into the movers and resizers. Every time the resizer function is called,
the MainContainer is moved to the top left corner and a resize function is called on it telling it what the new
height and width are. Because the coordinates for any children in the MainContainer are based on
the MainContainer's coordinate space, you can place things in it knowing that 0,0 will be the top left
corner of the stage. Then you just have to figure out how everything should be layed out within it based on the
new width and height. This tends not to be difficult, mostly tedious.
Hopefully this helps answer some questions about how to handle resizeable applications. Feel free to contact me
with any questions you might have. Source Files
Above is an example with a few different pieces placed about the stage. Try resizing it to see how the pieces
stay in the right spot.
Width:
Height:
