Difference between revisions of "Actionscript-Javascript Interaction"

Revision as of 10:33, 31 July 2008

I needed to make a html file with embedded flash that had the javascript on the html page triggering events in the flash and vice versa. This is an example of the final solution which was used after some coding help from a colleague in cleaning up the terrible mess I made.... (it was cut down from 1100 lines to about 400 lines)

HTML & CSS

<a id="BM" href="bermuda.html" onMouseover="asMouseOver(this.id)" onMouseout="asMouseOut(this.id)">Bermuda</A>

i also defined the class flashOver in the CSS as it would be inserted in using the javascript only when the links were moused over. jQuery could be used to create this effect as well...

Actionscript

import flash.external.ExternalInterface;

// COLOURWANG! -- using prototype to define the clearRGB function for the mouseOut

Color.prototype.clearRGB = function(){
     this.setTransform({ra:100, rb:0,ga:100,gb:0,ba:100,bb:0,aa:100,ab:0});
}

// FUNCTIONWANG! -- defines the mouseovers and mouseouts colour changes

function countryOver(id) {
	var newColor = new Color(eval(id));
	newColor.setRGB(0x2A87AC);
}
function countryOut(id) {
	var newColor = new Color(eval(id));
	newColor.clearRGB();
}
function countryOverHTML(id){
	ExternalInterface.call("countryMouseOver",id);
}
function countryOutHTML(id){
	ExternalInterface.call("countryMouseOut",id);
}

// COUNTRYFUNCTIONWANG! -- defines the rollovrs and rollouts for 
// the mouseovers and mouseouts hover captions functions (for each specific movieclip)

BM.onRollOver  = function()  {
	countryName(true, "Bermuda", this);
	countryOver("BM");
	countryOverHTML("BM");
	this.onRollOut = function() {
		countryName(false);
		countryOut("BM")
		countryOutHTML("BM");
	};
}; 

// WORDWANG! -- defines the hover caption function

countryName =  function (showCaption, captionText, bName)  {
if (showCaption) {
	_root.createEmptyMovieClip("hoverCaption", this.getNextHighestDepth());
	cap.desc.text = captionText;
	cap._width = 8*cap.desc.text.length;
	cap._alpha = 75;
	hoverCaption.onEnterFrame = function() {
		cap._x = _root._xmouse;
		if ((cap._x-(cap._width/2))<0) {
			cap._x = cap._width/2;
		}else if((cap._x + (cap._width/2))>330){
			cap._x = 330 - (cap._width/2);
		}else{
		}
		cap._y = _root._ymouse-15;
		cap._visible = true;
	};
} else {
	delete hoverCaption.onEnterFrame;
	cap._visible = false;
}
};

// EXTERNALINTERFACEWANG! -- externalinterface callback that 
// allows Actionscript to access the Javascript functions 
// (by declaring them in advance)

var method1:Function = countryOver;
var method2:Function = countryOut;
var instance:Object = null;
ExternalInterface.addCallback("textMouseOver", instance, method1);
ExternalInterface.addCallback("textMouseOut", instance, method2);

Javascript

// get flash movie object

function getFlashMovie(nameofflashfile) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
        return (isIE) ? window[nameofflashfile] : document[nameofflashfile];
}

// html link lights up the flash country

function asMouseOver(id){
  try{
    getFlashMovie("nameofflashfile").textMouseOver(id);
  }catch(e){
  
  }
}
function asMouseOut(id){
  try{
    getFlashMovie("nameofflashfile").textMouseOut(id);
  }catch(e){
  
  }
}

// flash country lights up html link

function countryMouseOver(id){
	addClass(document.getElementById(id),'flashOver');
}

function countryMouseOut(id){
	removeClass(document.getElementById(id),'flashOver');
}

function addClass(element, value) {
	if (!element.className) {
		element.className = value;
	} else {
		var newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

function removeClass(element, value){
	element.className = element.className.replace(eval('/'+value+'/'),'');
}

Troubleshooting

BECAUSE I HAVE BEEN GOING MAD REPLICATING THIS SCRIPT FOR OVER A THOUSAND MOVIECLIPS...

• check if the INSTANCE NAME of the movieclip has been defined in flash
• if you saved the js or css seperately make sure you insert them in