PDA

View Full Version : Full Screen


blimp
07-14-2009, 01:04 AM
Searching around the net I've worked out how to make a single image appear full screen and resizes in the right proportion when viewed on different screen sizes.

In this example, the background image has been sized to 1920x1200 to cover screen resolutions up to this size: http://www.blimpmedia.com.au/chester/002/

What I'd now like to do is replace this background image with a slideshow created with Flash.

I've created the slideshow (1920x1200), exported and saved it as a swf file via Flash. I then inserted the swf file in my <div id="backgroundbox"> which is the box that held the original jpg image.

My code looks something like this:

<body>
<div id="backgroundbox">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID" title="chester slideshow">
<param name="movie" value="chesterslideshow/loader.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="base" value="." />
<object type="application/x-shockwave-flash" data="chesterslideshow/loader.swf" width="100%" height="100%">
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="base" value="." />
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</object>
</object>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>


In my CSS I added the following code:

<style type="text/css">
body {
height: 100%;
width: 100%;
margin: 0;
}
</style>


When I preview this in my browser, It doesn't work the same way as my single image version.

This is the jpg version: http://www.blimpmedia.com.au/chester/002/

and the swf version: http://www.blimpmedia.com.au/chester/003/

Can someone please guide me in where I'm going wrong

Corrosive
07-14-2009, 06:57 AM
Searching around the net I've worked out how to make a single image appear full screen and resizes in the right proportion when viewed on different screen sizes.

In this example, the background image has been sized to 1920x1200 to cover screen resolutions up to this size: http://www.blimpmedia.com.au/chester/002/

What I'd now like to do is replace this background image with a slideshow created with Flash.

I've created the slideshow (1920x1200), exported and saved it as a swf file via Flash. I then inserted the swf file in my <div id="backgroundbox"> which is the box that held the original jpg image.

My code looks something like this:

<body>
<div id="backgroundbox">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID" title="chester slideshow">
<param name="movie" value="chesterslideshow/loader.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="base" value="." />
<object type="application/x-shockwave-flash" data="chesterslideshow/loader.swf" width="100%" height="100%">
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="base" value="." />
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</object>
</object>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>


In my CSS I added the following code:

<style type="text/css">
body {
height: 100%;
width: 100%;
margin: 0;
}
</style>


When I preview this in my browser, It doesn't work the same way as my single image version.

This is the jpg version: http://www.blimpmedia.com.au/chester/002/

and the swf version: http://www.blimpmedia.com.au/chester/003/

Can someone please guide me in where I'm going wrong

I'm not sure you can re-size a flash file in this way...might be wrong tho.

blimp
07-16-2009, 12:15 AM
Corrosive,

I've seen it done on other sites.... Also I've actually created a similar effect by using a single jpeg image in a div.

example: Image scales 100% to width (http://www.blimpmedia.com.au/chester/002/)

All I'm trying to do is achieve the same effect but with the swf as the background.....

Any ideas..?

Corrosive
07-16-2009, 07:11 AM
Corrosive,

I've seen it done on other sites.... Also I've actually created a similar effect by using a single jpeg image in a div.

example: Image scales 100% to width (http://www.blimpmedia.com.au/chester/002/)

All I'm trying to do is achieve the same effect but with the swf as the background.....

Any ideas..?

Do you have links to where you have seen this done before?