There are many sites around now (including the new Grandmother site) which have a 100% background image on a site completely in Flash. Here is a small tutorial to do exactly that.
If you are using the SWF Object then you must set the width and height to 100% in the embedSWF() method and add a paramater to allow NOSCALE so that only the background stretches and the rest of the site does not. Here is a tutorial to do this on this site itself.
If you are using the inbuilt mechanism of Flash to publish the site, then you must specify 100% as the dimensions of the swf in the HTML tab of the Settings page and select No Scale in the Scale dropdown and then publish the swf.
The background image should stretch
- When the image loads for the first time
- Whenever the stage is resized (by clicking the Restore button or manually dragging the corners of the browser window)
So to start with, decide the dimensions of the image you want to use. There is a misconception that the jpeg must be at least the size of the stage, but that is not necessary. It can be smaller as well(maybe 50 to 75% of the stage). You can enable smoothing on it to make sure that it is aliases or pixeleted. Of course you can use the stage size and maybe even bigger if you please to make sure that the clarity is not compromised on smoothing.
Once you have decided the dimensions. bring the image inside(either as a library item inside a movie clip or by using the Loader object). Create 2 functions that will resize the image. One to decide the percentage and one to do the actual resizing. Both these functions can be clubbed together as well.
I am calling the background image movie clip : _bg_image_mc.
var _init_w:Number = 720; //the width of the image
function resize_image():void
{
var _percent = get_percent_width();
_bg_image_mc.scaleX = _percent;
_bg_image_mc.scaleY = _percent;
}
function get_percent_width():Number
{
var _percent:Number;
if (stage.stageWidth > _init_w) {
//get the percent
_diff = stage.stageWidth – _init_w;
_percent = _diff / _init_w * 100;
_percent /= 100; //scale in AS 3 is 0 to 1
_percent += 1; //we have to add the percent change to 1
}else {
_percent = 1;
}
return _percent;
}
The second function simply checks the difference between the initial width of the image and the width of the stage and converts into a percent. This percent value is then applied to the scaleX and scaleY value of the bg image mc.
Now apply the function resize_image() once when the image was loaded and then in an event listener on the stage object
stage.addEventListener(Event.RESIZE, on_resize);
If you customize this and use it in a class and are facing issues due to the stage.stageWidth, then please note that you cannot use stage.stageWidth before adding the object to the stage.