Changing fullscreen background color from inferior swf file

[ArekDi]

First of all: I'm a newbie and my English is not perfect, but I'll try to explain my problem as much as I can.

I would like to have flash www page with dimentions 960x653 pixels. There will be 5 scenes navigated by buttons and each of the scene will have different background color. I would like to have fullscreen background also (filling the rest of the space), and to make it I used "Auto-Resizing  and Centering Content", based on tutorial:

http://www.kirupa.com/developer/as3/resizing_centering_as3.htm

To make it working with my existing animation I made 960x653 UILoader instead the centerRectangle, and I loaded my swf animation there.

Fullscreen background is working - when I scale window of the viewer the main scene keeps its dimentions and background fills the rest of the space, what is what I wanted to. My included animation is working perfectly.

But I still have one issue to solve.

How to change my fullscreen background while switching scenes?

Is it possible to change it from included swf animation?

And if yes how to make it working?

Well, maybe all this things I made are not good solution, maybe there is much simpler and quicker one. I'll be very grateful for any help.

[robdillon]

It sounds like you want to change the color of the space occupied by the Flash movie in the html. Yes, you can change that on demand using Javascript. You would use: document.getElementById("the id value of the Flash object").style.backgroundColor="color name or hex value";

Put that in a Javascript function in the head of your html and then call the function whenever you change scenes in your movie. Use ExternalInterface() to call the Javascript function.

[ArekDi]

Thank you for your answer!

Though I'm a bit closer to solution, I still don't know how to do it.

Sorry I'm bothering but how to use ExternalInterface() in this case? How to call this function just on opening new scene?

[robdillon]

Here's a very simple example. I made a button in the Flash movie that calls a function in the html to change the background color:

changeColor.addEventListener(MouseEvent.MOUSE_UP,callJS);

function callJS(event:MouseEvent):void {

          ExternalInterface.call('changeBackgroundColor','#cc9933');

}

ChangeColor is the instance name of the button on the Flash movie. Since you have the navigation buttons in your movie, you could just add the ExternalInterface.call(... line of code to your existing navigation functions. The first item in the call arguments is the name of the Javascript function, the second is the hex color that you want the background to change to. Note that you need to use the JS/html color naming starting with a hash sign, not the AS method starting with 0x.

Then, in the HTML that holds your flash movie you place a function like this in the head section:

<script>

function changeBackgroundColor(thisColor) {

   document.getElementById("flashContent").style.backgroundColor=thisColor;

}

The function name matches the name specified in the Actionscript and the argument for the function will be the color value in the second argument in the Actionscript function.

The JS method getElementById() takes a text argument that is the id value of the div that the Flash object sits in in the html.

This should do it for you.

[ArekDi]

I have made this very simple example, but it still doesn't work...

Could you please take a look at it? What I'm doing wrong?

Here are files:

http://www.hli.org.pl/oca/test-color.html

http://www.hli.org.pl/oca/test-color.fla

[robdillon]

In your Javascript function, you were using the classID for the Flash movie, you should be using the Div ID, in this case "flashContent".

In the Flash movie, you had two functions being called by the same event. Only the first one will ever be called.

Have a look at the files here: http://www.ddg-designs.com/downloads/changeBackground.zip These should give you a good template to work from.

[ArekDi]

Have a look at the files here: http://www.ddg-designs.com/downloads/changeBackground.zip These should give you a good template to work from.

Rob, it doesn't work at all - when I click button it doesn't change background - nothing happens...

I've tested it on Windows 7, Linux, Firefox, IE9, locally and online - so it is not a problem of environment...

[robdillon]

Put the files on a server and try them.

[ArekDi]

I have them on the server:

http://www.hli.org.pl/oca/changeBackground.html

[robdillon]

It looks like you overwrote the changeBackground.html file that I sent to you. There is no Javascript function in the html in your link above. Download a fresh copy and use that html. It will work.

If you look at the actionscript in the movie that I created, you'll see that I included "flash.display.MovieClip(this.root).nextScene();" , the move to the new scene. I have it commented out, because I didn't have that part of the movie included. You can have any number of commands in a function. Each one will execute in order.

[ArekDi]

Bingo!

Yes, it works indeed!

When I tried to test it I had to publish swf from source file and I forgot to uncheck html option so that's why html was overwritten.

Thank you very much, now all is clear!