asked on

How to make a full screen background image in Flash?

hello,
Does anybody know how to make a background image in flash fullscreen?

I know that i can place any image as a background and set it the the size of the the flash movie, but this does not work on some computers because some have wide screen monitors and some have standard 1024.

So what is the proper way to go about having a full screen background image in a flash website?

Cheers!

SOLUTION

section25

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

section25

For AS2 you are dealing with Stage.width and Stage.height.

Simply set up a listener to check for when the browser window gets resized and then change your image size accordingly.

// resize the screen on start up
// -----------------------------
resize_viewing_area();

// set our variables and our listener
// ----------------------------------
var stageL:Object = new Object();
stageL.onResize = function() {
resize_viewing_area();
}

Stage.addListener(stageL);

function (resize_viewing_area(){
background_image._width = Stage.width;
background_image._height = Stage.height;
}

You may need to keep your image in proportion, so yo uwil lhave to take that into consideration when resizing it.

ASKER CERTIFIED SOLUTION

sam928

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

section25

What are you trying to accomplish?

If you want your flash movie to fill the browser (not the screen) then the browser window is represented by the Stage.width and Stage.height variables.

Your movie clip size will not matter if it is being resized. Neither will your background image, but it will get distorted if it is too small.

What is someone's browser window is larger than your background image, do you want ti to scale up? Do you want it to fill the screen regardless of the browser size? Do you want it centered when the browser window is wider than the image?

You need to define exactly what you are trying to do, then position and resize your clip holding you image accordingly.

sam928

ASKER

hello,
http://www.castinite.com

I am trying to accomplish the following:

-everything centered in the browser.
-everything you see is the correct size EXCEPT the top header (which is the two blue gradient bars that stretch across.)

These are the 'image' i am trying to make 'full screen'
---This is all, evrything else to stay the same.

Right now those gradient bars are made in flash,, but i was thinking i need to make these into an actual image to accomplish the full screen effect?

I also attached the 'index' so you can see what i am working with.

thanks : )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Castinite.com</title>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
<style media="all" type="text/css">
	body {text-align:center; margin:0px; padding:0px; background:#f5f6f3;}
</style>
</head>
<body>
<script type="text/javascript">
function resetScroller() {
     window.scrollTo(0,0);
}
</script>
<div id="flashcontent"></div>
 
<script type="text/javascript">
    var so = new SWFObject("website.swf", "site", "1024", "800", "8", "#f5f6f3"); 
    so.write("flashcontent");
</script>
</body>
</html>

Open in new window

SOLUTION

section25

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sam928

ASKER

hello,
sorry i have not replied sooner.

i am a little confused as to what and how you are saying to do this.

---Where do I store the background header image?

What file were you refering to to look off the code?

My index is a little bit different because i am using Flash and also SWFobject (for deep linking the pages)

Here is the index,, can you please explain how to do this. Thank you much.

happy new year

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Castinite.com</title>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
<style media="all" type="text/css">
        body {text-align:center; margin:0px; padding:0px; background:#f5f6f3;}
</style>
</head>
<body>
<script type="text/javascript">
function resetScroller() {
     window.scrollTo(0,0);
}
</script>
<div id="flashcontent"></div>
 
<script type="text/javascript">
    var so = new SWFObject("website.swf", "site", "1024", "1100", "8", "#f5f6f3"); 
    so.write("flashcontent");
</script>
</body>
</html>

Open in new window