3/24/2011

Dynamic Flash Stage Size in Webpages

Here, I will show you how to have a flash site that dynamically adjusts to the window size of the browser.

Getting this to work involves javascript. We will be using swfIN, so download and learn more about the script  there. You may use any other swf container scripts that does the same functions. Now to use this in the html file, have the following in <head>:

   <script type="text/javascript" src="swfIN.js"></script>

And in <body>, paste in the following:

   <script type="text/javascript">
      var s = new swfIN("yourFlash.swf","title","100%","100%");

      s.scrollbarAt(500, 450);

      s.write();

   </script>


The parameters in scrollbarAt are the minimal dimensions (width, height) the swf will display at. Once the browser window get smaller than that, the swf won't resize and the browser will show scroll bars.

Now let's get to the Flash part. First of all, we must set the scaling behavior of Flash when it's stage size changes. A previous post lists the possible scale modes that Flash has. Usually for websites, we want the following:
stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;
Now, for it to be aware of stage resizes, it needs to listen for the resize event. The following line does just that: stage.addEventListener(Event.RESIZE, resizeHandler);
resizeHandler is the function it will call during a resize. It is where you should layout your flash page according to the new stage size. For example, the following code resizes the background movieclip to the size of stage.
private function resizeHandler(e:Event):void{ background.width=stage.stageWidth; background.height=stage.stageHeight; }

download source files here

No comments:

Post a Comment