4

Let me preface this question by saying that I am a .NET developer at heart, just helping a friend with a project he is working on.

I have been searching online for something that I think should be pretty simple. Here's what I have:

  1. A standard Flash CS5 document with one layer called background.
  2. The document is associated with a class called 'Game' which extends MovieClip.
  3. I am executing some logic in the 'Game' class after calling an 'Initialize' method.

I want to change the background color of the document at runtime to something else (e.g., a different color, a gradient, or a picture). Simple, right? Maybe not. I can't figure it out. Can some .NET-friendly soul kindly explain how to fix this?

Ed Altorfer
  • 4,373
  • 1
  • 24
  • 27

3 Answers3

3

If you wanted the background to change color, and not have to draw it in, javascript might be a good solution for this problem.

what you change will depend on the embed code, but the param you'll want to change is bgcolor.

in prototype, the javascript would look something like this:

$('yourFlashContainerId').down('[name="bgcolor"]').writeAttribute('value','#000000');

to draw it in flash, you can do something like this:

var bg:Sprite = new Sprite();
bg.graphics.beginFill(0x000000);
bg.graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);
bg.graphics.endFill();
bg.x = 0;
bg.y = 0;
addChildAt(bg,0);

That will draw a square with a black background (change the hex on line 2 to change the color), set it's size to the size of the stage, set x and y to 0, then add it at the bottom of the display stack.

Either of those two methods should work.

Edit: yet another way:

You could also set the wmode param to "transparent", and change the containing div background color.

assuming your flash embed has the following:

<param name="wmode" value="transparent">

prototype:

$('yourFlashContainerId').setStyle({'background-color':'#000'});

jQuery:

$('#yourFlashContainerId').css({'background-color':'#000'});

native:

document.getElementById('yourFlashContainerId').style.background-color="#000";
Jesse
  • 10,370
  • 10
  • 62
  • 81
  • Drawing a sprite on the stage is really the best way to change its background color? Seems so strange to me because the stage itself has a background whose color you can define in Flash. – Ed Altorfer Oct 16 '10 at 22:51
  • 1
    In the IDE, you're not actually changing the background color at all, you're just telling flash that if you publish as an html file, to set that to the default background color. If you set the wmode param to transparent, your background will go away all together, and you could change the background color of a containing div to get the same effect. – Jesse Oct 16 '10 at 22:54
1

You could create your required backgrounds at design time and, for convenience, put them on different layers. Convert each background into a MovieClip - each with its own instance name (bg1, bg2 etc.).

In the constructor function, you can stipulate which background is visible and which are invisible by setting their .visible property:

bg1.visible = true;
bg2.visible = false; etc.

If you want to swap backgrounds, just change the visibility properties. Using this method, you could have all sorts of backgrounds - bitmap images, gradients, plain colours etc.

Bernard Fox
  • 11
  • 1
0

The document colour is actually set in the embedding HTML. To have a dynamic background colour, I would suggest having a background movieclip that you draw a colour into when you need to. Draw draw a colour you can use the drawing API.

Adam Harte
  • 10,369
  • 7
  • 52
  • 85