Resizing SWFs with JavaScript

My client wants a silly intro page where, onClick, doors to a warehouse open into the warehouse itself (redirect into the website). I created a 1920 x 1174 SWF that does just so. It can be seen here. As you will notice, the backdrop of the warehouse and sky are included in the SWF. Just a minor question: is there a better way to do that? One thought was to crop the sky out of the SWF and make the animation smaller so it could be centered with CSS on the intro page. Then make the background-image the sky.

My big problem is the resizing. My (possibly ignorant) assumption is that if I make the SWF really large, it can be scaled down for different resolutions and the aspect ratio kept.

  • 2D web-game: on what?
  • Is there some way to show HTML content inside Flash?
  • Google IMA + MediaElementJS
  • Is this malicious javascript being served from a google server?
  • What is the best way to handle photo uploads?
  • Best Technologies for AJAX Web Development
  • I have tried both of the suggestions at www aleosoft com/flashtutorial_autofit.html and they wildly distort my SWF (which can be seen here). Is this because of my publishing settings?

    I turned to JavaScript for somewhat of an answer. Right now I am resizing the swf onload to the screen width and height because window inner height and inner width also distort the aspect ratio. I would like for it to work like www aleosoft com/flashtutorial_autofitexample.html

    var w = screen.width, h=screen.height;
    document.write('<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="'+w+'" height="'+h+'">');
    document.write('<param name="movie" value="movie.swf">');
    document.write('<param name="scale" VALUE="exactfit">');
    document.write('<embed src="movie.swf" width="'+w+'" height="'+h+'"></embed>');
    document.write('</object>');
    

    I am open to using the object/embed parameters as a solution or JavaScript. I’d rather not use jQuery but I will if necessary.

  • Uploadify and flash issue uploading to remote server
  • object, param, jquery
  • catching a file when it arrives in the browser
  • How can I find Flash content with JavaScript?
  • Control Embedded Grooveshark Widgets using Javascript?
  • Data visualisation library that works on all browsers
  • 2 Solutions collect form web for “Resizing SWFs with JavaScript”

    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):

    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;
        }
    

    In your xhtml you can have:

    ...
    <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> ...
    

    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.

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

    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) :

    <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)