Rectangle 27 0

html Resizing SWFs with JavaScript?


<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Platinum Buyer's Club</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
}
</style>
</head>
<body>
  <object width="100%" height="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="movie" value="http://www.example.com/example.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="SCALE" value="default">
    <embed width="100%" height="100%" src="http://www.example.com/example.swf" 
      quality="high" type="application/x-shockwave-flash" wmode="transparent" scale="default"
      pluginspage="http://www.macromedia.com/go/getflashplayer">
  </object>
</body>
</html>

However it seems still not working on MacOS browser (not sure whether it's a Flash plugin or browser issue)

The following code (no javascript needed) doesn't distort (tested on Firefox 10, Ubuntu; Firefox 4.0, Windows XP; IE 6 and 8, Windows Xp) :

Note
Rectangle 27 0

html Resizing SWFs with JavaScript?


...
<head>
<style type="text/css" media="screen">
        html, body { height:100%; background-color: #27262e;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:100%; }
        </style>  
...
<body>
<div id="flashContent">
<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="index" align="middle">
            <param name="allowFullScreen" value="true" />
                <param name="movie" value="index.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#e7e7e7" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
                <param name="allowFullScreen" value="true" />
                    <param name="movie" value="index.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#e7e7e7" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object> ...
import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Sound;
import fl.transitions.Tween;
import fl.transitions.easing.*;


var t:Tween;
var u:Tween;
var i:Tween;



if(stage) init(null);
else addEventListener(Event.ADDED_TO_STAGE, init);

function init(e:Event){

    stage.scaleMode = StageScaleMode.NO_SCALE; //You don't want to scale anything
    stage.align = StageAlign.TOP_LEFT;
    resizeHandler(null);
    stage.addEventListener(Event.RESIZE, resizeHandler); //function that will be executed at every window size change.


  /* some animations.
      new Tween(object, "property", EasingType, begin, end, duration, useSeconds);
      property - This is the name of the property which will be animated, it   must be specified as a string (between quotation marks). Example: "alpha", "scaleX",   "scaleY", "x", "y". so you can calculate this vaules depending on the current window size
   */

    logo_mc.logo1_mc.visible = false;
    logo_mc.logo2_mc.visible = true;
    t=new Tween(bg_top_mc, "height", Strong.easeOut, bg_top_mc.height, 341, 2, true);
    u=new Tween(diamonds_mc, "y", Strong.easeOut, diamonds_mc.y, 208, 2, true);
    i=new Tween(gradients_mc, "y", Strong.easeOut, gradients_mc.y, 221, 2, true);


}

function resizeHandler(e:Event):void {

    var sw = stage.stageWidth;
    var sh = stage.stageHeight;

    //put a footer at the bottom of window 
    footer_bg_mc.width = sw;
    footer_bg_mc.y = sh - footer_bg_mc.height;

    //specify ALL elements positions depending on the window size, it is called liquid layout
    copyright_mc.y = stage.stageHeight - copyright_mc.height - 8;

   //center     
   logo_mc.x = stage.stageWidth - logo_mc.width - 40;

   //you can also scale text size
    var format:TextFormat = new TextFormat();
    format.size = Math.round(stage.stageWidth/20); 
    myTextField.setTextFormat(format);

    gradients_mc.width = stage.stageWidth;
    bg_top_mc.width = stage.stageWidth;
    bg_site_mc.width = sw;
    bg_site_mc.height = sh;

    content_mc.x = 0;
    content_mc.y = 0;
    }

Can you explain the AS3 a little? Especially the colors and where the movie clips play into the stage.

I am going to try the CSS approach. If I go that way, I wont need to do any resizing in AS3. I still kind of feel like the problem hasn't been answered completely, though. Do you have any links for AS3 resizing techniques? I am apparently not googling efficiently today.

This liquid layout is not probably the greatest solution for you, but you can use this to make text fit to the window. You can try to "make this building float" both sides can be filled with background. This is not true that if you make everything big that would make downscaled image better looking, that depends on a algorithm.

To achieve best quality you should use stage.fullScreenHeight and stage.fullScreenWidth to determine window size and also handle window resizing event. Image and the picture of the building should be a separate movie clip. There is some AS3 code to do that (should be put at the first frame of movie):

You can achieve better effect sticking to CSS and JavaScript. the doors can stay in SWF.

republicofcode.com/tutorials/flash/as3fluidresize. It doesn't apply to your problem, if you are using flash as "image viewer". There is no way to scale bitmap in Flash very well. You can prepare other versions of SWF or images loaded in to SWF dynamically depending on the window resolutions (republicofcode.com/tutorials/flash/load_images_bc).

Note