How to scale SlideShowPro movie to fill browser window

Here is a challenge that has stumped many users of SlideShowPro over the years, and it’s something that I have managed to figure out just recently with the help of a lot of research and trial and error. 

The situation is this: you or your client wants his slideshow to appear in a browser window and take up 100% of the width and 100% of the height of the browser window, no matter what size, and have the slideshow resize in real time as the browser window is dragged and resized. 

I have accomplished that, and have provided an example that you can check out: 

SlideShowPro scaled to browser window 

To do this, you will need to follow these steps: 

  1. Add an actionScript to the FLA that contains the SlideShoPro component
  2. Add a name to the instance of the SlideshowPro component on the stage
  3. Make a few changes to the component properties
  4. Update the HTML file

First, open your SlideShowPro movie in Flash, and you’ll see that there is only one layer and one frame. Click on the add new layer button, and a new layer will appear above the layer that has the SlideShowPro instance. Now, right click on the first frame in that layer, and when the context menu opens, select actions. Copy and paste the following code into the actionScript area: 

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event; 

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler); 

// initialize sizing
resizeHandler (null); 

function resizeHandler (event:Event):void {
  var sw:Number = stage.stageWidth;
  var sh:Number = stage.stageHeight;
  backg.width = sw;
  backg.height = sh;

ActionScript Window

The ActionScript window

The most important thing about this function for completing the next step is the part that says backg. It is making reference to an instance, and since you want it to refer to your SlideShoPro instance on the stage, you have to click on the stage. After you do that, you will see the properties box, and a field with the text “instance name.” Click in that field and type the word backg

Next, you have to make a few changes to the SlideShowPro Component Inspector. Click on the stage again, and then click on Window -> Component Inspector to open the Component Inspector. 

Not all these changes are exactly necessary for getting the scaling to work, but this is what seems to be working for me. Make sure you have the following settings, just in case: 

  1. Directory Publishing -> Large Publishing -> Off
  2. Options -> Full Screen Reformat -> On
  3. Options -> Full Screen Takeover -> On (Use this if you want your image to scale to full screen when you click full screen button.)
  4. Content -> Align -> Top Left
  5. Content -> Scale ->Crop to Fit All
Important windows

Show here: the Component Inspector (left) and Properties dialog box (top-right). Click to enlarge.

Okay, now save your FLA file, and publish it. No need to set any publish settings for the HTML because we are going to handle the HTML manually next. 

The next important step to take is to make sure your HTML is coded properly for displaying a full browser window Flash movie, and also for allowing full screen. 

I have included my entire HTML code here: 

<html>
    <head>
        <style>
        html, body {
        width: 100%;
        height: 100%;
        }
        body {
        overflow: hidden;
        }
   
        #wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        }
       
        </style>
    </head>
    <body bgcolor=”#ffffff”>
        <div id=”wrapper”>
            <object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0” width=”100%” height=”100%” id=”test_full_screen” align=”left”>
                <param name=”allowScriptAccess” value=”sameDomain” />
                <param name=”allowFullScreen” value=”true” />
                <param name=”movie” value=”slideshowpro.swf” />
                <param name=”quality” value=”high” />
               
                <embed src=”slideshowpro.swf” quality=”high” salign=”lt” wmode=”transparent” bgcolor=”#ffffff” width=”100%” height=”100%” name=”test_full_screen” align=”left” allowScriptAccess=”sameDomain” allowFullScreen=”true” type=”application/x-shockwave-flash” pluginspage=”http://www.adobe.com/go/getflashplayer” />
           
            </object>
        </div>
    </body>
</html> 

The most important parts of the HTML code are every place where the width and height are set to 100%. You have to have it in your object tag, embed tag, and also in your html, body, and wrapper styles. If you copy this code exactly, and use it for your own HTML file, you shouldn’t have any trouble.

I have found that copying this code directly from the blue area doesn’t work very well, as it tends to carry over the pretty quotes. Instead, I recommend doing a view source on my working example, and copying the code from there.

If you were able to follow all these steps to the letter, you should now have a SlideShowPro slideshow filling up your entire browser window, and expanding and shrinking in real time as your resize it.

iPage - Web Hosting leader

9 Comments

  1. zelimir Reply

    Can i do that in as2?

  2. I’m pretty sure you can, but you can’t do it with this code. When I was doing my research for the article, I came across some examples that were done for as2. The Flash code you see in this article is for as3 only.

  3. zelimir Reply

    Can you help me…. please.
    I really need that code and it will be great if you can do that for me.

  4. Is it possible to incorporate this into a div so that the div scales as the page is resized rather than having the movie play on the entire page. I’d like to embed the movie into a custom html page.

  5. THANK YOU for this very easy-to-follow tutorial!!

    CJ

  6. Hi, thanks a lot for this simple tuturial. Really appreciate the work youve put into it.

    Im having a problem though, i did these step exactly as were described, twice. But each time when exporting I get thos following error:

    1180: Call to a possibly undefined method addFrameScript.

    When I go to the source it shows me the file SSPloader.as, Line 1

    Ive traced this error back to the stage. The moment I drag the compiled SlideShowPro file out of the library on the empty stage (so i can name it backg) the error shows up.

    Could you help me out?

  7. Thanks very much for taking the time to work out this solution and write about it. It worked perfectly for me.

  8. Hiya,
    Thanks for the tutorial. I’m having a great deal of a headache trying to achieve the same fit all window effect but on an Action Script 2 document. Any chance you know the coding? If so it’s much appreciated!
    Cheers
    M.

  9. GREAT! GREAT! THANKS!!!!!!
    works great this tutorial I was several hours trying to achive this, THANKS!!

    But I have a problem, when a add a preloader dosent work well is forcing to scale, is a SWF with the preloader calling the SSP.SWF i add ur code in the preloader movie a also dosent work, can u help me?

Leave a Comment