Making Flash Applications compatible with all screen resolutions

How often do you run into flash applications that run in a small box in the browser, or open in a popup so that the user is forced to view the application at a certain size? Most flash developers still arrange objects statically in their flash application, so that the application can only run at a specific size. How nice would it be if all flash applications would automatically fill up the complete browser window, without the need for a popup? Here I'll walk you through how to easily create a flash app that automatically runs at in the maximum space provided by the browser and also detects resizing, so you can adjust the position of you objects on the screen when the browser is resized.

First off you'll need to change the publish setting for the HTML file, or make the changes to the HTML directly. Set the width and height of the movie to 100%. Then set the scale parameter to "noscale".

Here's what the HTML object tag would look like after you publish the file with the above settings:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="fs" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="fs.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<embed src="fs.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="fs" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

There's one more thing you'll want to add to your HTML file. Add the following style tags in order for the flash to appear correctly in all browsers:

html, body{
   height:100%;
}
body {
   margin: 0px;
}

Now let's move on to the flash file. Naturally you'll want your flash to align to the top left of the browser window. This can be accomplished by adding the following ActionScript:

Stage.align = "LT";

Although at this point the flash app will show up full screen in your browser, you have no way to resize or move the elements depending on the application's size. Enter this piece of ActionScript:

stageListener = new Object();
stageListener.onResize = function() {
   // enter what you want to do on resize, for example:
   footer_mc._y = Stage.height - footer_mc._height;
}
Stage.addListener(stageListener);
stageListener.onResize();

This will add a listener to the stage object, which will run certain code whenever the browser is resized. The last line of code will also ensure that the code is run when the flash application first opens.

I have used this technique multiple times, as it allows all new possibilities for user-friendly, web-based flash applications that are compatible to multiple screen resolutions the same way HTML sites are.

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Please posta a source file !
# Posted By teuccio | 7/15/07 10:50 AM
Nice. Very Nice. Thanks.
One doubt. If we design a swf file with 2000px width.
Can we get a scroll bar in explorer to view the hidden screen.
# Posted By Kapil | 3/10/08 11:45 PM
You wrote, &quot;Naturally you'll want your flash to align to the top left of the browser window.&quot; But that's where you left me, because I don't just want it to do that.

I would also like a margin. On the left. 125 px to be exact. And NOBODY, not Adobe or anyone else, is telling me in plain English how to accomplish just that! It can't be that hard, can it?

It seems like everyone wants to know how to get it full screen, but that's actually my problem. That's what I have and don't want.

Is there a simple way, in ActionScript, to set up a left hand hand margin for a .swf file?
# Posted By Steven Douglas | 2/3/09 11:42 PM
@Steven: Have you tried it via CSS? A simple margin-left on a div surrounding the Embed code would do the trick.
# Posted By Julian | 2/6/09 8:11 AM
no... what you want is

setProperty(&quot;&quot;, _focusrect, false);
Stage.scaleMode = &quot;noScale&quot;;
Stage.align = &quot;TL&quot;;

example1._y = Math.round(Stage.height - 200); // this puts a object named &quot;caption&quot; 200 pixels away from the bottom of the stage.

leftmargin = 125;

myObject._x = leftmargin

myObject2_.x = ((Stage.width/2 ) - leftmargin);

var layout_pos = new Object();
layout_pos.onResize = function ()
{

myObject._x = leftmargin

myObject2_.x = ((Stage.width/2 ) - leftmargin);   
};


Stage.addListener(layout_pos);
# Posted By zurie | 2/10/09 12:16 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.7.002.