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:
- Add an actionScript to the FLA that contains the SlideShoPro component
- Add a name to the instance of the SlideshowPro component on the stage
- Make a few changes to the component properties
- 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;
}
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:
- Directory Publishing -> Large Publishing -> Off
- Options -> Full Screen Reformat -> On
- Options -> Full Screen Takeover -> On (Use this if you want your image to scale to full screen when you click full screen button.)
- Content -> Align -> Top Left
- Content -> Scale ->Crop to Fit All
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.
