in Technology

Dynamic background color

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.

30 Comments

  1. 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();

  2. 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();

  3. 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;

  4. 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;
    
  5. // 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);

  6. // 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);

  7. 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

  8. 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

  9. 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);

  10. 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);

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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....

  16. 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....

  17. You are very welcome to visit my website.

    Johny Hobson o

  18. You are very welcome to visit my website.

    Johny Hobson o

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

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

  21. 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.

  22. 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.

  23. //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;

  24. //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;
    

Comments are closed.