Change HTML background image

In a similar vein to changing the background colour of a HTML page, this script will allow you to change the background image. Add the following Actionscript and a movieclip with an instance name of "btn":

import flash.external.*;
var jsCall:String;
btn.onPress = function() {
 jsCall = String(ExternalInterface.call("changeBgImg", "myNewImg.jpg"));
};

Add the following Javascript to your HTML code:

<script language="JavaScript">
function changeBgImg(newBgImg) {
 document.body.background = newBgImg 
}
</script>

As before, you can still add a little random spice by using the following Actionscript:

import flash.external.*;
bgImages = new Array("film0.jpg", "film1.jpg", "film2.jpg", "film3.jpg", "film4.jpg", "film5.jpg", "film6.jpg", "film7.jpg", "film8.jpg", "film9.jpg");
var jsCall:String;
btn.onPress = function() {
 ranImg = bgImages[Math.floor(Math.random() * 10)];
 jsCall = String(ExternalInterface.call("changeBgImg", ranImg));
};

You can see an example here along with the code.

Note that this script will follow the default behaviour and cause your image to be tiled across your HTML background. If you don't want it to be tiled, try changing the script to this:

<script language="JavaScript">
function changeBgImg(newBgImg) {
 document.body.background = newBgImg
 document.body.style.backgroundRepeat='no-repeat';
 document.body.style.backgroundPosition='center';
}
</script>

You can see an example of a non-tiled image change here.

Change HTML background colour

More External Interface stuff. This snippet of code will enable you to change the background colour of a HTML page. Add the following Actionscript and a movieclip with an instance name of "btn":

import flash.external.*;
var jsCall:String;
btn.onPress = function() {
 jsCall = String(ExternalInterface.call("changeBgColor", "#fffecb));
};

Add the following Javascript to your HTML code:

<script language="JavaScript">
function changeBgColor(newBgColor)
{
if (window.document && window.document.bgColor)
   {
      document.bgColor = newBgColor;
   }
}
</script>

You can add a little random spice by using the following Actionscript:

import flash.external.*;
var jsCall:String;
btn.onPress = function() {
 ranColor = Math.round(Math.random() * 0xFFFFFF);
 jsCall = String(ExternalInterface.call("changeBgColor", ranColor));
};

You can see a working example here along with the code.
Follow this link for details on how to change the background image.

Accessing HTML page details

Flash only has a basic in-built property to retrieve details of the HTML page in which an SWF is embedded. You can retrieve the URL of the SWF file itself, for example with the following code:

myTxt.text = this._url;

Later versions of the Flash player also allow you to retrieve the URL of any JPEGs, GIFs or PNG files by applying the _url property to a movieclip into which any of those filetypes has been loaded.

However, to retrieve the page URL, you have to use External Interface to communicate with the page directly. For example, the following code will retrieve the page URL:

import flash.external.ExternalInterface;
var pageURL = ExternalInterface.call('window.location.href.toString');
myTxt.text = pageURL;

A similar technique can be used to retrieve the HTML page title:

import flash.external.ExternalInterface;
var pageTitle = ExternalInterface.call('window.document.title.toString');
myTxt.text = pageTitle;

With both techniques, you can also consider using Flash's unescape function to convert any URL-encoded characters into ASCII strings:

myTxt.text = unescape(myTxt.text);

Finally, it's possible to use ExternalInterface to change details of the HTML page rather than just retrieving them. Create an FLA containing a dynamic text field and a button. Add the following code:

import flash.external.*; // imports the external interface class
var newTitle:String;
btn.onPress = function() {
 newTitle = String(ExternalInterface.call("changeDocumentTitle", title_txt.text));
};

Publish the SWF file and the corresponding HTML page. Now edit the HTML page and add the following javascript code:

<SCRIPT LANGUAGE="JavaScript">
function changeDocumentTitle(a) {
if (a != null) {
   window.document.title=a;
   window.document.write;
   }
}
</SCRIPT>

If you upload the SWF and HTML page, you should now be able to change the HTML page title dynamically from Flash. You can see a working example here and get the source files here.

Obviously you wouldn't necessarily want to use a text field to do this but, by storing newTitle as a variable, you can alter the HTML page dynamically, for example as part of a Flash navigation.