Dynamic background color

Feb 18, 2003 (Tue) at 5:20 pm — By Brajeshwar

Peter Hall posted a solution to setting the background color using Actionscript, actually drawing a rectangle on the background below any other elements on the document. Someone on the Macromedia Flash Forum re-iterated that question, so I thought some of you may still would like to have a look at a modified version.

This one will only fill the viewable stage and not the whole maximum allowable space of 5760 px of the Flash Document Scene.

//define a var for sh and sw
//let us add 2 px each as flash eats them
//in the Stage Object from the actual flash dimension
var sh = Stage.height + 4;
var sw = Stage.width + 4;
var rp = 0; //let us have a start point
trace("stage height = " + sh + "& stage width = " + sw + " in pixels");
setBG = function (col) {
 with (_level0) {
  clear();
  if (col != undefined) {
   beginFill(col);
   moveTo(rp, rp);
   lineTo(sw, rp);
   lineTo(sw, sh);
   lineTo(rp, sh);
   endFill();
  }
 }
 this.__bg__ = col;
};
//
getBG = function () {
 return this.__bg__;
};
//
Stage.addProperty("bgColor", getBG, setBG);
delete setBG;
delete getBG;

//Usage
Stage.bgColor = 0x0000ff;

That’s it.

Brajeshwar

Brajeshwar believes in simplicity; pushes the envelop and envisions the betterment of usable and practical solutions.

→ More by Brajeshwar

// We don't want the Flash to Scale // but use dynamic alignment instead Stage.scaleMode = "noScale" Stage.align = "LT" var rp = 0;//let us have a start point setBG = function (col) { with (_level0) { clear(); if (col != undefined) { beginFill(col); moveTo(rp, rp); //let us add 2 px each as flash eats them //in the Stage Object from the actual flash dimension lineTo(Stage.width + 4, rp); lineTo(Stage.width + 4, Stage.height +4); lineTo(rp, Stage.height +4); endFill(); } } this.__bg__ = col; }; // getBG = function () { return this.__bg__; }; // Stage.addProperty("bgColor", getBG, setBG); // add a listener to _level0 // so that the bg is redrawn when a user resizes the Stage Stage.addListener(_level0) _level0.onResize = function (){Stage.bgColor = Stage.bgColor} delete setBG; delete getBG; //Usage Stage.bgColor = 0x0000ff;

//define a var for sh and sw //let us add 2 px each as flash eats them //in the Stage Object from the actual flash dimension var sh = Stage.height + 4; var sw = Stage.width + 4; var rp = 0;//let us have a start point trace("stage height = " + sh + " & stage width = " + sw + " in pixels"); setBG = function (col) { with (_level0) { clear(); if (col != undefined) { beginFill(col); moveTo(rp, rp); lineTo(sw, rp); lineTo(sw, sh); lineTo(rp, sh); endFill(); } } this.__bg__ = col; }; // getBG = function () { return this.__bg__; }; // Stage.addProperty("bgColor", getBG, setBG); delete setBG; delete getBG; //Usage Stage.bgColor = 0x0000ff;

matt

Thanks brajeshwar This should come in handy.
I noticed a couple of problems, This fixes it(replace existing code with ):

var sw = Stage.width + 4;

and....

beginFill(col);
moveTo(rp, rp);
lineTo(sw, rp);
lineTo(sw, sh);
lineTo(rp, sh);
endFill();
matt

Thanks brajeshwar This should come in handy.
I noticed a couple of problems, This fixes it(replace existing code with ):

var sw = Stage.width + 4;

and....

beginFill(col);
moveTo(rp, rp);
lineTo(sw, rp);
lineTo(sw, sh);
lineTo(rp, sh);
endFill();
http://www.brajeshwar.com Brajeshwar

Updated! I did not even test the code beforehand, hhhmmmm. I will take care next time.
http://www.brajeshwar.com Brajeshwar

Updated! I did not even test the code beforehand, hhhmmmm. I will take care next time.
patrick

If you change the code to the following,
it also works when you have the Stage.scaleMode set to "NoScale", and the Stage.align to "LT"

// We don't want the Flash to Scale
// but use dynamic alignment instead
Stage.scaleMode = "noScale"
Stage.align = "LT"

var rp = 0;//let us have a start point

setBG = function (col) {
with (_level0) {
clear();
if (col != undefined) {
beginFill(col);
moveTo(rp, rp);
//let us add 2 px each as flash eats them
//in the Stage Object from the actual flash dimension
lineTo(Stage.width + 4, rp);
lineTo(Stage.width + 4, Stage.height +4);
lineTo(rp, Stage.height +4);
endFill();

}
}
this.__bg__ = col;
};
//
getBG = function () {
return this.__bg__;
};
//
Stage.addProperty("bgColor", getBG, setBG);
// add a listener to _level0
// so that the bg is redrawn when a user resizes the Stage
Stage.addListener(_level0)
_level0.onResize = function (){Stage.bgColor = Stage.bgColor}
delete setBG;
delete getBG;
//Usage
Stage.bgColor = 0x0000ff;

patrick

If you change the code to the following,
it also works when you have the Stage.scaleMode set to "NoScale", and the Stage.align to "LT"

Jarol?

// property:
MovieClip.prototype.addProperty("bkColor", function () { return this.bkColor }, function (c) {
if (arguments.length <= 0) return;
var n = this == _root ? {_width : Stage.width + 4, _height: Stage.height + 4} : this;

with (this) {
clear();
beginFill(c);
lineTo(n._width, 0);
lineTo(n._width, n._height);
lineTo(0, n._height);
endFill();
}

this.__proto__.bkColor = c;
});
// usage:
this.bkColor = 0xFF0000;
trace(this.bkColor);
Jarol?

// property:
MovieClip.prototype.addProperty("bkColor", function () { return this.bkColor }, function (c) {
if (arguments.length <= 0) return;
var n = this == _root ? {_width : Stage.width + 4, _height: Stage.height + 4} : this;

with (this) {
clear();
beginFill(c);
lineTo(n._width, 0);
lineTo(n._width, n._height);
lineTo(0, n._height);
endFill();
}

this.__proto__.bkColor = c;
});
// usage:
this.bkColor = 0xFF0000;
trace(this.bkColor);
david

Hey there!
This script is just what i was looking for but it has one problem it seems.

For cdrom use i am making a fullscreen projector using these FScommands:
fscommand("fullscreen", "true");
fscommand("showmenu", "false");
fscommand("allowscale", "false");

Now, when i add this script the background color change works but it does not change the complete background though. it starts it only at the left top of the flash document (at position 0,0). So the top and the right part of the monitor window will be the old background color. How can i fix this and be sure it will work on all resolutions? btw, im a total newbie at actionscripting i have to admit.

Greets,
David
david

Hey there!
This script is just what i was looking for but it has one problem it seems.

For cdrom use i am making a fullscreen projector using these FScommands:
fscommand("fullscreen", "true");
fscommand("showmenu", "false");
fscommand("allowscale", "false");

Now, when i add this script the background color change works but it does not change the complete background though. it starts it only at the left top of the flash document (at position 0,0). So the top and the right part of the monitor window will be the old background color. How can i fix this and be sure it will work on all resolutions? btw, im a total newbie at actionscripting i have to admit.

Greets,
David
http://www.brajeshwar.com Brajeshwar

David, just replace the initials variables that defines initial position, stage height and stage width to be full screen, in short, use this instead
moveTo(-2880, -2880);
lineTo(-2880, 2880);
lineTo(2880, 2880);
lineTo(2880, -2880);
lineTo(-2880, -2880);
http://www.brajeshwar.com Brajeshwar

David, just replace the initials variables that defines initial position, stage height and stage width to be full screen, in short, use this instead
moveTo(-2880, -2880);
lineTo(-2880, 2880);
lineTo(2880, 2880);
lineTo(2880, -2880);
lineTo(-2880, -2880);
david

AHa great, Thanks!
What we tried was this;
var sh = Stage.height + 3000;
var sw = Stage.width + 3000;
var rp = -1200;//let us have a start point

cheers,

David
david

AHa great, Thanks!
What we tried was this;
var sh = Stage.height + 3000;
var sw = Stage.width + 3000;
var rp = -1200;//let us have a start point

cheers,

David
david

one more question now were at it, I am starting with a white background that turns darkblue at scene 2. would it be possible to gradually fade it from white to blue instead of having it switch instantly over 25 frames time for instance?

:p
david

one more question now were at it, I am starting with a white background that turns darkblue at scene 2. would it be possible to gradually fade it from white to blue instead of having it switch instantly over 25 frames time for instance?

:p
http://weblog.beruf-it.de reinhard

can you insert the date to the comments? it would be helpful
http://weblog.beruf-it.de reinhard

can you insert the date to the comments? it would be helpful
inw

i need your help urgently if you feel free and having little bit time to give me to answer my few question that i have bg compenet i have seen your given code and try its work fine after fixing small erors. i want to edit bg color from external text file can you help me to solve this issue actully i have not much experaince in flash i am new but i can say i can work little bit good ...........i hope you will reply me as soon as possible when you have spare time....
inw

i need your help urgently if you feel free and having little bit time to give me to answer my few question that i have bg compenet i have seen your given code and try its work fine after fixing small erors. i want to edit bg color from external text file can you help me to solve this issue actully i have not much experaince in flash i am new but i can say i can work little bit good ...........i hope you will reply me as soon as possible when you have spare time....
http://www.artstarstudio.com Carey Richardosn

I keep getting a static script error on this code? i'm using Mx pro 2004? Please help...
http://www.artstarstudio.com Carey Richardosn

I keep getting a static script error on this code? i'm using Mx pro 2004? Please help...
Johny Hobson

You are very welcome to visit my website.

Johny Hobson o
Johny Hobson

You are very welcome to visit my website.

Johny Hobson o
Lewis

I like this BUT just wondering what the 'this.__bg__ = col;' and 'return this.__bg__' are for??
Lewis

I like this BUT just wondering what the 'this.__bg__ = col;' and 'return this.__bg__' are for??
Per Jensen

Could this dynamic background color, script by any chance be put into flash 8 scripting. I have tryed but cant seem to figure it out. Thank you.
Per Jensen

Could this dynamic background color, script by any chance be put into flash 8 scripting. I have tryed but cant seem to figure it out. Thank you.
le boudouil

//define a var for sh and sw
//let us add 2 px each as flash eats them
//in the Stage Object from the actual flash dimension
var sh = Stage.height + 4;
var sw = Stage.width + 4;
var rp = 0;//let us have a start point
trace("stage height = " + sh + " & stage width = " + sw + " in pixels");
setBG = function (col) {
with (_level0) {
clear();
if (col != undefined) {
beginFill(col);
moveTo(rp, rp);
lineTo(sw, rp);
lineTo(sw, sh);
lineTo(rp, sh);
endFill();
}
}
this.__bg__ = col;
};
//
getBG = function () {
return this.__bg__;
};
//
Stage.addProperty("bgColor", getBG, setBG);
delete setBG;
delete getBG;
//Usage
Stage.bgColor = 0x0000ff;

le boudouil