ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Changing a HTML page's background color via Flash
http://www.actionscript.org/resources/articles/100/1/Changing-a-HTML-pages-background-color-via-Flash/Page1.html
Ahmet Zorlu
 
By Ahmet Zorlu
Published on September 9, 2005
 
Tutorial Details:
Written by:
Ahmet Zorlu (drZoode)
Time: 20 minutes
Difficulty Level: Intermediate
Requirements: Flash 5 or higher
Topics Coverred: How to change the background color of an html page from an embedded Flash movie (using getURL or FSCommands).
Assumed Knowledge: Basic knowledge of getURL and FSCommand actions, basic knowledge of JavaScript.

Page 1 of 2
Tutorial Details:
Written by:
Ahmet Zorlu (drZoode)
Time: 20 minutes
Difficulty Level: Intermediate
Requirements: Flash 5 or higher
Topics Coverred: How to change the background color of an html page from an embedded Flash movie (using getURL or FSCommands).
Assumed Knowledge: Basic knowledge of getURL and FSCommand actions, basic knowledge of JavaScript.

See the examples:
Technique 1
Technique 2 Download the source.

First Technique: Using the getURL action

Summary

Flash movies can interact with Web browser scripting environments (JavaScript in Netscape and JavaScript, VBScript, and JScript in Internet Explorer). We can control our Flash movie from a script and we can call a script from our .swf file. In the first case we use Flash methods (JavaScript functions specific to Flash movies) and if we want to send messages from a Flash movie to its host environment (in our case, a Web browser), we can use the getURL action or the FSCommand action.
In this tutorial we will learn how to create simple Flash buttons that can change the background color of the HTML page in which our Flash movie resides. In the first technique, we will add a short JavaScript code in the HEAD section of the HTML file and we will call the JavaScript function from the Flash movie by using the getURL action and a pseudo-URL as "JavaScript:".
Before going further you have to know that Flash Scripting requires Netscape Navigator 3.x and above (LiveConnect and Java-enabled; Windows 95/98/NT/2000 or MacOS; ) or Internet Explorer 3.x and above (ActiveX enabled; Windows 95/98/NT/2000 only). Netscape 6 does not support LiveConnect, that's why Flash scripting in Netscape 6 is currently very buggy.
But "JavaScript:" in getURL technique doesn't require LiveConnect plug-in, and it works in Netscape 6. Also this technique does not require Active-X, and it works in IE 5 on Mac.

Step 1 The JavaScript

As it is said in the ActionScript Reference of Flash 5, contrary to JavaScript, ActionScript does not support browser specific objects such as "document" or "window". That means you can not use browser specific objects in Flash. But we have a solution, we can use the getURL action to call a JavaScript function residing in the HTML page and we can control browser specific objects. So first of all let's write the JavaScript code.

[as]<script language="JavaScript">
<!--
//The function is quite simple, it takes one argument, "newBgColor" 
//and passes it as the value of the "bgColor" property of the "document" object
function changeBgColor(newBgColor) {
 if (window.document && window.document.bgColor) {
  document.bgColor = newBgColor;
 }
}
-->
</script>[/as]

As it is supposed to be a Flash tutorial I will not get into details with the JavaScript part. This script works with IE 4.0 and above, Netscape 4.0 and above and also DOM compliant browsers like IE 5.5 and Netscape 6.0.The "document.bgColor" property defines a document's background color (in our example the background color of our HTML page). The argument is a string that can contain either the hexadecimal definition of the color (like "#cccccc") or its literal description (like "lime").

Step 2 The ActionScript
In ActionScript, getURL action communicate with JavaScript (and server side scripts) and returns any information to the browser window.When using the getURL action you can refer to a JavaScript by using this general syntax:

[as]getURL("JavaScript:yourFunction(yourArgument)");
[/as]

This protocol works like usual calls to JavaScript in the HREF of an anchor tag (<A realsrc="JavaScript:yourFunction()" href="http://www.actionscript.org/dev/admin/JavaScript:yourFunction()">).
Now we will call this JavaScript function by using the getURL action. I assign this action to buttons but you can assign it to frames etc.In the movie, place 5 instances of a button symbol. For five different background color option I have created 5 buttons with different colors.
Then choose the first button instance and open the ActionScript window. In the normal mode choose the getURL action and paste this code in the URL box:

[as]JavaScript:changeBgColor('#336600')
[/as]

So your ActionScript window should look like this:

[as]on (press) {
        getURL ("JavaScript:changeBgColor('#336600')");
}
[/as]

You don't have to bother with the other select boxes.In our example we have called the "changeBgColor" JavaScript function and we have passed an argument ('#336600'). When the user will press the button, the background color of the web page will take the '#336600' value.Use the same technique with other buttons, just change the hex values (your arguments), in our example I have used these hex values: '#666699', '#ff6600', '#0066ff' and '#cccccc".


Page 2 of 2

Step 3

Publishing

Now we will publish our movie after checking the HTML format type option in the publish settings.I wanted the background color of my Flash file to change according to the background color of the web page, so when publishing the movie I have checked the windowless transparent option.Publish the movie and save your file.
Now open the HTML file source with your favorite editor and add the JavaScript code (refer to the step 1) between the <HEAD> and </HEAD> section of the HTML file. Save it and check it.

Bugs

This technique works in Netscape 6 on Windows, but the background color of the Flash file doesn't change according to the background color of the web page.

Discussion

"JavaScript:" in getURL feature is not supported by some browser versions and platforms. (See the Summary for details).
Our innocent JavaScript doesn't do anything special (we just change the background color of our web page) but using that simple example and your scripting knowledge you can implement more useful interactions. For example, you can make a IE specific add to favorites button (using the "window.external.AddFavorite" method) or Netscape 6 specific add to sidebar button (using the "window.sidebar.addPanel" method), or you can open a new browser window (using the "window.open" method) etc.
At that point, one might ask if we really need to write our JavaScript code in the HTML page, because we can write it in our ActionScript code too. For example, let's say you want to pop out an alert box from your Flash file. Make a new movie, create a button and just add this action to the button:

[as]on (press) {
        getURL ("JavaScript:alert('This is Flash!')");
}
[/as]

Publish your movie and test it with JavaScript compliant browsers. It will work. You don't need to write any JavaScript code in your HTML. But this technique has drawbacks too; if the code is too complex it would be better to use JavaScript, also if you will use a IE or Netscape specific method, first you will have to redirect users to appropriate pages, etc.