Pause an Animation on Browser Blur, Resume on Focus

[oohah]

I have a client who keeps on adding features to a site that I created for him. It is driving me up the wall.

The latest feature he has requested is this:

We have a widget that plays on the page. As things stand currently, there is a "pause" and "resume" function.

When a given content page in the flash movie is navigated to, the widget pauses. When I close that page and go back to home (within the flash movie), the widget resumes.

Now the client wants the widget to pause when the viewer focuses on a different window, and then resume when the viewer gives focus back to the browser containing the flash.

I found an example of this type of interaction here: http://todepoint.com/blog/2007/01/27...erface-method/

I have implemented it, but I am having trouble because I need to have the widget stay paused no matter what if there is a content page up on the site, but if the site is on the home page, the widget should only then interact with the browser.

I've gotten it working to some degree, but I have noticed that clicking directly on the flash movie does not count as browser focus, and there seems to be different behaviors in IE7 Vs. Firefox.

I am going to pot my code right below in a separate post below, can anyone help me troubleshoot it?

Is this type of interaction even recommended? Should I try to convince them it is to much trouble and unreliable?

Thanks for your help.

oohah

[oohah]

This is the code on the first frame of the SWF:

import flash.external.*;  // this is for calling JS function on the Html from Flash without getURL.
content_status = "off";

// this is the function that toggles the widget on and off
function toggle_widget(content_status) {
	
if(content_status == "on"){
			 ESPWidget.instance.resume();
	}else if(content_status == "off"){
			 ESPWidget.instance.pause();
	}else{
		// no other values accepted
	}
}

// Register our toggle function for Browser to use
var ei1 = flash.external.ExternalInterface.addCallback("widget_focus", null, toggle_widget);

// this function will cal a JS function on Html page with 'str' argument
function sendText(str) {
	var greeting:String;
	greeting = String(ExternalInterface.call("getFromFlash", str));
}

[oohah]

This is the code in the head tag of the page:

<script type="text/javascript">
  		var toggleStatus = "playing";

		// get the flash movie object
		var flashMovie;
		function init() {
			if (document.getElementById) {
				flashMovie = document.getElementById("main");
			}
		}
		// tell flash to be quiet 
		function stop_widget() {
			if(toggleStatus == "playing"){
				//document.getElementById("myOutput").innerHTML += "<br />Stop Flash";
				if (flashMovie) {
					flashMovie.widget_focus('off');
					toggleStatus = "stopped";
				}
			}
			
		}
		// tell flash to start playing..
		function start_widget() {
			if(toggleStatus == "stopped"){
				//document.getElementById("myOutput").innerHTML += "<br />Play Flash";
				if (flashMovie) {
					flashMovie.widget_focus('on');
					toggleStatus = "playing";
				}
			}
			
		}
		// call back from flash
		function getFromFlash(name) {
        		alert(name);
		}
		
		
		// wait for the page to fully load, only then initialize
		window.onload = init;
		
		// if page looses focus -> be quiet
		window.onblur  = stop_widget;
		
		// if page get focus -> start playing
		window.onfocus = start_widget;
		
</script>