#1 |
Full Flash Sites 101 - Resizing
2009-02-13
Despite Ultrashock having one of the most comprehensive threads regarding full-screen Flash sites, I still see a lot of people asking how to handle things when the browser is resized. Seeing as the existing full-screen thread is MASSIVE and people no doubt get bored looking through all of the pages to find the info they need I thought it would be a good idea to get the essential bits 'n' pieces together here, and include demo files.
ActionScript 2.0 and ActionScript 3.0 obviously require slightly different approaches so I will cover those separately, the HTML setup is the same though regardless of the ActionScript version you use so I will start with that.
HTML
Things are very easy when it comes to the HTML, all that you need to do is make sure the <html> <body> and <object> elements all have a 100% width and height, and also clear the <body> element's margin and padding. To make this example as simple as possible I have thrown everything into a single HTML page but I would normally keep the CSS in its own file.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>demo</title>
<style type="text/css">
html, body, object
{
width:100%;
height:100%;
display:block;
}
html
{
/* hides the browser's scrollbars */
overflow:none;
}
body
{
margin:0;
padding:0;
}
</style>
</head><body>
<object type="application/x-shockwave-flash" data="demo.swf">
<param name="movie" value="demo.swf"/>
</object>
</body></html>
How you add the Flash object to the page is up to you, most people these days use JavaScript code in one form or another, the important part is the CSS.
ActionScript 2.0
The following code is the basic setup you will need for ActionScript 2.0.
Code:
//
// STAGE SETUP
//
Stage.align = "TL";
Stage.scaleMode = "noScale";
//
// STAGE RESIZE LISTENER
//
var stageListener:Object = {
onResize: resizeHandler
};
Stage.addListener( stageListener );
//
// STAGE RESIZE HANDLER
//
function resizeHandler():Void
{
var w:Number = Stage.width;
var h:Number = Stage.height;
}
//
// INITIALIZE
//
resizeHandler()
OK. That is all pretty simple, you first setup the Stage so it won't scale the SWF ( it will instead change the canvas size ), you then add a listener to the Stage that will tell Flash which function needs to be called when the SWF is resized, finally, you define that function. You must also remember to call the function manually as soon as possible otherwise nothing will be resized properly until the SWF is first resized.
You use the resizeHandler() function to resize and/or reposition all of your MovieClips etc, the stageWidth and stageHeight values will represent the current width and height of the SWF file, the rest is basic math ( as seen in the downloadable source files ).
ActionScript 3.0
The following code is the basic setup you will need for ActionScript 3.0.
Code:
//
// STAGE SETUP
//
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//
// STAGE RESIZE LISTENER
//
stage.addEventListener( Event.RESIZE, resizeHandler );
//
// STAGE RESIZE HANDLER
//
function resizeHandler( e:Event=null ):void
{
var w:Number = stage.stageWidth;
var h:Number = stage.stageHeight;
}
//
// INITIALIZE
//
resizeHandler()
Again, simple stuff. I don't think I really need to explain what is going on in that code because the functionality is exactly the same as the ActionScript 2.0 version ( see above ).
Loading Runtime Contents
One thing that seems to trip a few people up is the loading of images etc at runtime, normally a question along the lines of "why isn't my image aligning properly?" appears around the forums. The thing to remember in this situation is this: The contents of the SWF are being resized and/or repositioned by the resizeHandler() function, and that function has no idea when a new image or new SWF file has been loaded. So, as soon as the image or SWF has loaded you should manually call the resizeHandler() function, that will allow you resize and/or reposition the loaded image or SWF ( or start a tween etc ).
Demo Files
The following ZIP file contains demos for ActionScript 2.0 and ActionScript 3.0.
FSF-Demos.zip
For convenience the code can be found in the first frame of the FLA files. You will need Flash CS3 to open the FLA files.
+
Good luck Ultrashockers! 
|
Post Reply
| View first unread
|
Rating: 
9 comments
| 3350 views
) ha ha. 
17 Creative Assets
Linear Mode
