background scaling problem here! advice, plz? (moving here from general help)

[mrk13]

hello!
i jumped here from general help - forum, as i was adviced that i could get more advice here. and all help will be very much appreciated!

i have created a background mc (instange name bg) that i want to scale to fill all screens. then i have a content mc (content) that should always stay centered, not scaling, even when screen size changes.

the problem is that all works just ok to begin with. but if i, for some reason, decide to resize screen while viewing, the content mc soon gets stuck to the top of screen. not cool, eh! i'm using flash 8 and mozilla + ie for testing.

questions: what should i change/add in the code below? i found the code in a thread in fk. or, is there possibly another, smarter way to reach the desired effect? a simple, uniform coloured bg will not fit the design of the page.

thank you, you kind souls, for sharing your wisdom

// noScale prevents content in the movie resizing (unless we tell it to!)
Stage.scaleMode = "noScale";

// TL means all positions measured from the top left hand corner
Stage.align = "TL";

// a function to be called when the movie resizes
// this will resize the background clip to fill the stage
bg.onResize = function() {
    this._width = Stage.width;
    this._height = Stage.height;
};
// get the bg clip to listen for events (onResize) 
// broadcast by the stage object
Stage.addListener(bg);

bg._x = bg._y = 0;
bg.onResize();

// this function will position the content clip in the centre
// when the movie resizes
content.onResize = function() {
    this._x = (Stage.width - this._width) / 2;
    this._y = (Stage.height - this._height) / 2;
};
Stage.addListener(content);
content.onResize();

[madzigian]

Try this instead:

Stage.scaleMode = "noScale";
Stage.align = "LT";
Stage.showMenu = false;
//
this.bg.oldW = Stage.width;
this.bg.oldH = Stage.height;
this.bg.onResize = function() {
	trace(this.oldW + ", " + this.oldH);
	this.newW = Stage.width;
	this.newH = Stage.height;
	trace(this.newW + ", " + this.newH);
	this._x += (this.newW - this.oldW) / 2;
	this._y += (this.newH - this.oldH) / 2;
	this.oldW = this.newW;
	this.oldH = this.newH;
};
this.text_bg.onResize = function() {
	this._width = Stage.width;
};
this.content.onResize = function() {
	this._x = (Stage.width - this._width) / 2;
};
Stage.addListener(this.bg);
Stage.addListener(this.text_bg);
Stage.addListener(this.content);

this.bg._x = 0;
this.bg._y = 0;
this.bg._width = Stage.width;
this.bg._height = Stage.height;

this.text_bg._x = 0;
this.text_bg._y = (Stage.height - this.text_bg._height) / 2;
this.text_bg._width = Stage.width;

this.content._x = (Stage.width - this.content._width) / 2;
this.content._y = this.text_bg._y + 10;

stop();

[mrk13]

hi there madzigian!

nnnope, doesn't work for me...! with this code the background won't scale to fit screen when resizing, and content movie won't center itself: it stays glued to the top of screen. plus i get the following error mesage when resizing screen:

output:
786, 516
1020, 718

i placed the code in the first frame of the movie where i have both bg and content mc's. that was right... right?

[madzigian]

sorry.. try this instead:

Stage.scaleMode = "noScale";
Stage.align = "LT";
Stage.showMenu = false;
//
this.bg.oldW = Stage.width;
this.bg.oldH = Stage.height;
this.bg.onResize = function() {
        trace("Old Width : "+this.oldW + ", Old Height : " + this.oldH);
        this.newW = Stage.width;
        this.newH = Stage.height;
        trace("New Width : "+this.newW + ", New Height : "+this.newH);
        this._x += (this.newW - this.oldW) / 2;
        this._y += (this.newH - this.oldH) / 2;
        this.oldW = this.newW;
        this.oldH = this.newH;
};

this.content.onResize = function() {
        this._x = (Stage.width - this._width) / 2;
		 this._y = (Stage.height - this._height) / 2;
};
Stage.addListener(this.bg);
Stage.addListener(this.content);

this.bg._x = 0;
this.bg._y = 0;
this.bg._width = Stage.width;
this.bg._height = Stage.height;
//
this.content._x = (Stage.width - this.content._width) / 2;
this.content._y = (Stage.height - this.content._height) / 2;

stop();

if you want to get rid of that output message just comment out the 2 trace() statements. i added more detail to them so you know what they mean this time.

[mrk13]

i'm grateful for your help, but, ummmm... the problem still persists, with minor changes. i get these error messages now:
output:
Old Width : 786, Old Height : 516
New Width : 1020, New Height : 718
Old Width : 1020, Old Height : 718
New Width : 804, New Height : 516
Old Width : 804, Old Height : 516
New Width : 819, New Height : 516
Old Width : 819, Old Height : 516
...and so on, eternally. but the improvement is that now the content movie is where it should be. after 2-3 resizings, though, it does get glued to the top of screen. why, i wonder?? the bg mc still will not scale to fit the screen as it should, it says fixed at the size that it takes before any resizings.

[madzigian]

ok.. those aren't ERROR mesages.. they are the output from trace() statements. as for the bg mc not scaling.. that's my fault.. i wasn't paying attention.. i basically cut some code out of something i was working on and pasted it for you to work with, figuring you would make any necessary changes. Change this line:

Stage.scaleMode = "noScale";

to

Stage.scaleMode = "exactFit";

if you want to eliminate the output in the Output window then comment out those staements ( //trace(etc etc)) like this:

this.bg.onResize = function() {
        //trace("Old Width : "+this.oldW + ", Old Height : " + this.oldH);
        this.newW = Stage.width;
        this.newH = Stage.height;
        //trace("New Width : "+this.newW + ", New Height : "+this.newH);
        this._x += (this.newW - this.oldW) / 2;
        this._y += (this.newH - this.oldH) / 2;
        this.oldW = this.newW;
        this.oldH = this.newH;
};

[mrk13]

ahhh, u figured i'd make the necessary changes? see, my learned friend: although i'm ugly i'm dumb as hell . you should not assume anything...!

so that's what the 'comment out trace, etc' meant. roger that! but there's a bit of a problem still: the background scales super nicely and all, but now: so does the content movie. it's in the center all right, like it should, but it should also stay fixed size.

so i tried adding this to the code:

this.content._width = 790;
this.content._height = 450;

...as they are the dimensions of my content movie - but it wasn't as easy as that. no success. can you think of anything..?

btw: a huge thanks for all your time so far! my actionscript skills are poor - i hope i'm not being a pain in the ass... i owe you a beer: so i'll attach a cold_beer.exe with this message. hope you enjoy it

[madzigian]

try reading these... maybe they'll answer your questions better than me...

Part 1: http://www.actionscript.com/index.ph...-flash-part-1/
Part 2: http://www.actionscript.com/index.ph...-flash-part-2/
Part 3: http://www.actionscript.com/index.ph...-flash-part-3/

[mrk13]

awesome tuts...! wow.
thank you mate, you were reeeeally helpful!!! *bobs a curtsy and blows a kiss*

[madzigian]

here are a few other good resources :

http://www.kirupa.com
http://www.actionscript.org
http://www.sitepoint.com
http://www.layer51.com/proto/default.aspx
http://www.doyouhaveapen.com/tutorials/
http://www.bit-101.com/tutorials/
http://www.sephiroth.it/index.php
http://krazydad.com/bestiary/
http://www.ultrashock.com

[mrk13]

whoa! loads of info!

thanks. glanced through the sites quickly and already found a few diamonds...