Flash & Show/Hide DIVs

Hi all,

I’m trying to get buttons in a flash animation to show/hide layers in a HTML document.

I’ve figured out a way to get this working using show/hide DIV layers and ‘ExternalInterface’ in flash. Unfortunately it’s only half working.

Have a look at www.it-world.com.au and click on the ‘Our Services’ link in the flash banner. That should work ok, hiding the main layer and showing the services layer. But then try ‘Our Products’ and ‘Contact us’ and the layer that gets changed is the News layer. I have no idea why! When I hide the news layer in comments, then these two open in new tabs.

The Flash code is:

import gs.TweenLite;
import gs.easing.*;
import flash.external.ExternalInterface;

btnGroup.addEventListener(MouseEvent.CLICK, btnClick);
btnGroup.buttonMode = true;

var btnName:String = "";

function btnClick(event:MouseEvent):void
{
	btnName = event.target.name;
	switch (btnName)
	{
		case "btn1" :
			TweenLite.to(container_mc, .5, {y:216});
			break;
		case "btn2" :
			TweenLite.to(container_mc, .5, {y:0});
			break;
		case "btn3" :
			TweenLite.to(container_mc, .5, {y:-216});
			break;
		case "btn4" :
			TweenLite.to(container_mc, .5, {y:-1200});
			break;
		case "btn5" :
			TweenLite.to(container_mc, .5, {y:-1600});
			break;
	}
}

this.btnGroup.btn1.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
    ExternalInterface.call("hideDiv", "text");
    ExternalInterface.call("hideDiv", "products1");
    ExternalInterface.call("hideDiv", "contact1");
	ExternalInterface.call("showDiv", "services1");
}

this.btnGroup.btn2.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler2);
function mouseDownHandler2(event:MouseEvent):void {
    ExternalInterface.call("hideDiv", "text");
	ExternalInterface.call("hideDiv", "services1");
	ExternalInterface.call("hideDiv", "contact1");
	ExternalInterface.call("showDiv", "products1");
}

this.btnGroup.btn3.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler3);
function mouseDownHandler3(event:MouseEvent):void {
    ExternalInterface.call("hideDiv", "text");
    ExternalInterface.call("hideDiv", "services1");
    ExternalInterface.call("hideDiv", "products1");
	ExternalInterface.call("showDiv", "contact1");

…which to me looks like it should work… and it does, but only for the first button! I suppose the other two buttons do work- just incorrectly!

I’m not versed at all in actionscript/javascript and have found this code through tutorials etc, but just can’t get it to implement on this site.

Any thoughts? I don’t know if it is the HTML, Flash or Javascript!?

Regards,
Ross

Edit: I just realised that this problem seem to only be related to Google Chrome on Mac. It work on Firefox & Safari on Mac. Haven’t been able to test any other browsers yet…

Firstly, it sounds like your JavaScript might be to blame here, rather than the AS. It’s hard to say though, without seeing the JavaScript.

Secondly, I’d recommend moving some of that functionality to the JavaScript. On each button event, just call the showDiv passing in the div you want to show (ie: ExternalInterface.call("showDiv", "contact1");) and let the JavaScript call the hideDiv function as it needs to, rather than calling four functions from the AS. Does that make sense? See if that makes it work any better?

Thanks for the advice. As I said, I’m not very well versed in javascript (ie: not at all… I know how to copy and paste, but don’t know what it means or how i works) so I’ve pasted the script below that is in relation to this.

Can you tell me what code I’d need to put in and where to do as you say? It would certainly be easier than creating numerous HideDivs for each button as I’ll eventually implement this across other parts of the site where there are more than 3 buttons in the flash.

Hope you can help,

Regards,
Ross

//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2007 Adobe Systems Incorporated.  All rights reserved.
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;

function ControlVersion()
{
	var version;
	var axo;
	var e;

	// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry

	try {
		// version will be set for 7.X or greater players
		axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
		version = axo.GetVariable("$version");
	} catch (e) {
	}

	if (!version)
	{
		try {
			// version will be set for 6.X players only
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
			
			// installed player is some revision of 6.0
			// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
			// so we have to be careful. 
			
			// default to the first public version
			version = "WIN 6,0,21,0";

			// throws if AllowScripAccess does not exist (introduced in 6.0r47)		
			axo.AllowScriptAccess = "always";

			// safe to call for 6.0r47 or greater
			version = axo.GetVariable("$version");

		} catch (e) {
		}
	}

	if (!version)
	{
		try {
			// version will be set for 4.X or 5.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = axo.GetVariable("$version");
		} catch (e) {
		}
	}

	if (!version)
	{
		try {
			// version will be set for 3.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = "WIN 3,0,18,0";
		} catch (e) {
		}
	}

	if (!version)
	{
		try {
			// version will be set for 2.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
			version = "WIN 2,0,0,11";
		} catch (e) {
			version = -1;
		}
	}
	
	return version;
}

// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
	// NS/Opera version >= 3 check for Flash plugin in plugin array
	var flashVer = -1;
	
	if (navigator.plugins != null && navigator.plugins.length > 0) {
		if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
			var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
			var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
			var descArray = flashDescription.split(" ");
			var tempArrayMajor = descArray[2].split(".");			
			var versionMajor = tempArrayMajor[0];
			var versionMinor = tempArrayMajor[1];
			var versionRevision = descArray[3];
			if (versionRevision == "") {
				versionRevision = descArray[4];
			}
			if (versionRevision[0] == "d") {
				versionRevision = versionRevision.substring(1);
			} else if (versionRevision[0] == "r") {
				versionRevision = versionRevision.substring(1);
				if (versionRevision.indexOf("d") > 0) {
					versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
				}
			}
			var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
		}
	}
	// MSN/WebTV 2.6 supports Flash 4
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
	// WebTV 2.5 supports Flash 3
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
	// older WebTV supports Flash 2
	else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
	else if ( isIE && isWin && !isOpera ) {
		flashVer = ControlVersion();
	}	
	return flashVer;
}

// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
	versionStr = GetSwfVer();
	if (versionStr == -1 ) {
		return false;
	} else if (versionStr != 0) {
		if(isIE && isWin && !isOpera) {
			// Given "WIN 2,0,0,11"
			tempArray         = versionStr.split(" "); 	// ["WIN", "2,0,0,11"]
			tempString        = tempArray[1];			// "2,0,0,11"
			versionArray      = tempString.split(",");	// ['2', '0', '0', '11']
		} else {
			versionArray      = versionStr.split(".");
		}
		var versionMajor      = versionArray[0];
		var versionMinor      = versionArray[1];
		var versionRevision   = versionArray[2];

        	// is the major.revision >= requested major.revision AND the minor version >= requested minor
		if (versionMajor > parseFloat(reqMajorVer)) {
			return true;
		} else if (versionMajor == parseFloat(reqMajorVer)) {
			if (versionMinor > parseFloat(reqMinorVer))
				return true;
			else if (versionMinor == parseFloat(reqMinorVer)) {
				if (versionRevision >= parseFloat(reqRevision))
					return true;
			}
		}
		return false;
	}
}

function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\\?/, ext+'?'); 
  else
    return src + ext;
}

function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
  var str = '';
  if (isIE && isWin && !isOpera)
  {
    str += '<object ';
    for (var i in objAttrs)
    {
      str += i + '="' + objAttrs[i] + '" ';
    }
    str += '>';
    for (var i in params)
    {
      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
    }
    str += '</object>';
  }
  else
  {
    str += '<embed ';
    for (var i in embedAttrs)
    {
      str += i + '="' + embedAttrs[i] + '" ';
    }
    str += '> </embed>';
  }

  document.write(str);
}

function AC_FL_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_SW_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();    

    switch (currArg){	
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie":	
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblClick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
      case "id":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace": 
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}

Is there more JavaScript you’re using? I can’t see any hideDiv or showDiv functions in there.

There are other .js files uploaded, but these are all ones that I uploaded ages ago and are in relation to other parts of the site (ie: drop down menus, news ticker etc). I am certain that this is the js that I was instructed to link to…

Although comparing the old site with this new one- that js was already there… So that says to me that there is no js linked to this? Is that possible? Could the Flash buttons be controlling the Show/Hide DIV directly, or is that not something that can be done?

Ross

Flash can’t do that as far as I’m aware.

From what I can see in the ActionScript, it’s calling a JavaScript function called hideDiv and then passing in a the div to manipulate.

That means the hideDiv function must be defined somewhere.

Unless you can find that, I can’t help you much. Sorry dude.

Aha! Found it! Sorry- I had been looking for an external js, but turns out it was embedded in the HTML. When you mentioned the hideDiv function I did a search in the code and there it was…

function hideDiv(id)
{
   document.getElementById(id).style.visibility = 'hidden';
}

function showDiv(id)
{
   document.getElementById(id).style.visibility = 'visible';
}

Try something like this for the JavaScript:



function hideDivs() {
   document.getElementById('text').style.visibility = 'hidden';
   document.getElementById('services1').style.visibility = 'hidden';
   document.getElementById('products1').style.visibility = 'hidden';
   document.getElementById('contacts1').style.visibility = 'hidden';
}

function showDiv(id) {
   hideDivs();
   document.getElementById(id).style.visibility = 'visible';
}


and for your ActionScript:



this.btnGroup.btn1.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
    ExternalInterface.call("showDiv", "services1");
}

this.btnGroup.btn2.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler2);
function mouseDownHandler2(event:MouseEvent):void {
	ExternalInterface.call("showDiv", "products1");
}

this.btnGroup.btn3.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler3);
function mouseDownHandler3(event:MouseEvent):void {
	ExternalInterface.call("showDiv", "contact1");


So, each time you click a button you only have to make one JavaScript call.

The JavaScript function now hides all the divs first, then shows the one you want.

It’s tidier handling all that in the JavaScript rather than making a bunch of calls from the ActionScript I reckon.

Hope it helps. Let me know. :slight_smile:

Thanks for the code Chris.

I’ve implemented and it is working to a point. It hides the DIVs fine, but then doesn’t show the new DIV. I’ve checked that I’ve put the code in correctly and it all seems to be in order.

Any ideas?

Regards,
Ross

Not sure. :frowning:

In the JavaScript, try replacing the id in the getElementById with something explicit like ‘products1’ or ‘services1’.

If this works, we’ll know it’s something to do with the way that variable is being used.

:slight_smile:

function showDiv(id) {
   hideDivs();
   document.getElementById(id).style.visibility = 'visible';
}

I am assume you meant to change the ‘id’ in the above part of the code…

I tried changing it after getElementById as you suggested but that made no difference.

So from what i understand a) the AS code tells what layer to SHOW b) Then the first JS function code tells it to HIDE all the layers c) followed by the 2nd function that reminds (?) it which layer it is showing?

How does the JS know which layer the AS has said to remain showing?

Just thinking out loud to see if I can make sense of what isn’t working…

Ross

When you call showDiv from the AS, you also pass along the ‘contact1’ text. This goes into the JS function as id. It’s declared as that at the top, by the name of the function.

We then use that variable in to select the element, and set it’s style to visible.

Try changing the JavaScript to this:



alert(id);
document.getElementById('contact1').style.visibility = 'visible';


and let me know what happens.

Ok, I’ve done a little trial and error and I seem to get two responses- either a) nothing happens, the layer isn’t hidden and no new layer appears or b) the original layer disappears but is not replaced by a new layer…

  1. When I only leave in the first function (ie: no 2nd function or alert) I get (a)
  2. When I have both the functions I get (b)
  3. When I have the first function and the new alert I get (a)
  4. When I try all three I get (b)

It almost seems like the first function (hiding the layers) won’t work without the second function (show specified id from Flash) in place, even though the second function doesn’t work.

I’m stumped, I’m wondering if I just leave it as it was originally as that was working in most browsers except Mac Chrome, but on the other hand I’d rather it worked there too!

Thanks for all your help so far!

Regards,
Ross

OK. The divs won’t hide without the showDiv function, as hideDivs is called from there.

Did an an alert box pop up on the screen? What was in it?

And if everything was working fine except in Mac Chrome (which is still in beta I think?), then maybe you are best to go back to that. :slight_smile:

If you want to load your files here, or give a link to your site and to the FLA, I might be able to take a look at the source in the next few days to see what I can do for you.

I think for the time being I’ll revert the home page back to the old one that worked, but eventually I’d prefer to use your code as this will be easier on pages where there are more buttons. The old code hides every layer on each button in Flash which is a lot of unnecessary code.

The website is http://www.it-world.com.au where you’ll find the HTML and the javascript code (Scripts/showhide.js).

The flash file can be downloaded at the following link…

http://www.rokatdesign.com.au/clients/itworld/menu1_test_AS3.fla.zip (1.5Mb)

Have a quick look and see if you can pinpoint the problem/s. Don’t spend too much time on it though!

Kind Regards,
Ross