Using a SWF as a Background...

[tomyknoker]

Hi all,

Wanted an opinion, I am putting together a site where the background image i want to fill the entire screen. The menu system sits in the center of the page along with all the content, I want this to always stay at the correct size even if the background image has to resize... Can this be done all in one flash file? Or am I better of having the background as a seperate FLA?

[BLiZZaRD]

So do you want the content to scale and the background to stay in place? Is this the idea?

[Medyman]

Hello....

I'm not sure if this is exactly what you're looking for, but this is what i've used in the past.

I've use the BitmapData class in this.
This will apply a tiled background that doesn't stretch but rather keeps refilling the screen and also centers the content (called centerimg in this example) and doesn't scale it.

for this to work properly, put your background clip into the library and give it a linkage identifier of "tile" (or whatever else you choose, just make sure to update the AS)

import flash.display.BitmapData;

centerimg._x = Stage.width/2;
centerimg._y = Stage.height/2;

var tile:BitmapData = BitmapData.loadBitmap("tile")

function fillBG() {
	this.beginBitmapFill(tile);
	this.moveTo(0,0);
	this.lineTo(Stage.width,0);
	this.lineTo(Stage.width,Stage.height);
	this.lineTo(0,Stage.height);
	this.lineTo(0,0);
	this.endFill();
}

fillBG();

var stageL:Object = new Object();
stageL.onResize = function() {
	fillBG();
	centerimg._x = Stage.width / 2;
	centerimg._y = Stage.height / 2;
}

[BLiZZaRD]

Holy crap! Nice code, but wow that will slow things down. Rewriting code all over anytime is bad.

Like an RPG I saw once where they used hiTest() on the character. Every time he took a step it had to run through all the possible items it could/couldn't walk on/pickup/etc...

very slow game

If the screen never gets resized, or only once, it will work fine. But if you are like me and continually resize windows to get to other panes, it would be a resource nightmare.

[tomyknoker]

Hi guys, I bascially want the background to fill the browser window. But don't want the menu to resize when that happens... Get what I'm saying?

[BLiZZaRD]

Do you want the menu to move (so that it stays in view) or everything stay in it's place?

[tomyknoker]

Well the menu sits in the center, so if the file was resized I would want the menu to always be central, but just not resize like the background would...

[Medyman]

I've been doing some liquid designs myself lately.
I've been using the following code which works beautifully for me.

This piece of code will get your menu to stay centered upon resize.

Stage.align = "TL";
Stage.scaleMode = "noScale";

menu._x = Stage.width/2
menu._y = Stage.height/2

sizeListener = new Object();
sizeListener.onResize = function() {
menu._x = Stage.width/2
menu._y = Stage.height/2
};

Stage.addListener(sizeListener);

Adding something for the background to say at 100% would give you something like this:

Stage.align = "TL";
Stage.scaleMode = "noScale";

menu._x = Stage.width/2
menu._y = Stage.height/2
background._width = Stage.width
background._height = Stage.height
background._x = 0
background._y = 0

sizeListener = new Object();
sizeListener.onResize = function() {
menu._x = Stage.width/2
menu._y = Stage.height/2

background._width = Stage.width
background._height = Stage.height
background._x = 0
background._y = 0
};

Stage.addListener(sizeListener);

You'll also want to make the following changes to your publish settings (under the HTML tab)
Dimensions: Change to Percent & height and width to 100%
Scale: Change to No Scale
Flash Alignment: Horizontal to Left and Vertical to Top

Like Blizzard has said, these aren't really meant for constant resizing. A few times if fine, but if you're resizing a lot...it can be a problem. I see this often with mac users. They tend to do more window resizing than PCs. Though, this is more resource friendly than the "tiling" code.

[tomyknoker]

Medyman you're answering all my posts thanks! My menu has alot of seperate animations for each button, am I going to have to out the entire thing in an mc called 'menu', also I realised I don't just have the menu I have images text the whole shebang, will i need to make mc's of each element and then add it to the code?

[Medyman]

Regarding the menu:

You could either add each consitituent movie clip to the code or encase the whole thing in a movieclip called menu.

It's far simpler to do the latter but not doing so is also possible. You'd have to do something like this (assuming 5 parts of equal width)

Stage.align = "TL";
Stage.scaleMode = "noScale";

// 5 Consituent MCs of Menu
menu1._x = (Stage.width/2) + 100
menu1._y = Stage.height/2

menu2._x = (Stage.width/2) + 200
menu2._y = Stage.height/2

menu3._x = Stage.width/2
menu3._y = Stage.height/2

menu4._x = (Stage.width/2) - 100
menu4._y = Stage.height/2

menu5._x = (Stage.width/2) -200
menu5._y = Stage.height/2


sizeListener = new Object();
sizeListener.onResize = function() {

menu1._x = (Stage.width/2) + 100
menu1._y = Stage.height/2

menu2._x = (Stage.width/2) + 200
menu2._y = Stage.height/2

menu3._x = Stage.width/2
menu3._y = Stage.height/2

menu4._x = (Stage.width/2) - 100
menu4._y = Stage.height/2

menu5._x = (Stage.width/2) -200
menu5._y = Stage.height/2

};

Stage.addListener(sizeListener);

Using the same logic, you can position any MovieClip relatively on the page. First figure out where on the page you want the MovieClip to appear in relation to the page. There are some basic terms you should be familiar with:


movieclip._x to set a movieclip's horizontal position
movieclip._yto set a movieclip's vertical position
movieclip._width to set a movieclip's width
movieclip._height to set a movieclip's height
Stage.width dynamically measures the width of the stage
Stage.height dynamically measures the height of the stage
movieclip.width dynamically measures the width of the stage
movieclip.height dynamically measures the height of the stage

With those in your arenal, you can relatively position anything on your page.

Make sure to include the code both before and after the event listener snippet in the code.


Tip: If you want EVERYTHING to stay in the center and only the background to change, why not encapsulate everything into a movieclip and then you only have one movieclip to position. This can be difficult though if you have manual tweening etc... on the root timeline.