Difference between revisions of "Actionscript-Javascript Interaction"

From Wikicliki
Jump to: navigation, search
(Javascript)
Line 89: Line 89:
  
 
== Javascript ==
 
== Javascript ==
 +
 +
explanations of what does what have been commented in:
 +
 +
<pre>// 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+'/'),'');
 +
}
 +
</pre>
 +
 +
 +
== Troubleshooting ==
 +
 +
* check if the instance of the movieclip has been defined in flash
 +
*

Revision as of 10:26, 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 the final solution which was used.

HTML

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

i also defined the class flashOver 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

  • COLOURWANG = using prototype to define the clearRGB function for the mouseOut
  • FUNCTIONWANG = defines the mouseovers and mouseouts colour changes
  • COUNTRYFUNCTIONWANG = defines the rollovrs and rollouts for the mouseovers and mouseouts hover captions functions (for each specific movieclip)
  • WORDWANG = defines the hover caption function
  • EXTERNALINTERFACEWANG = externalinterface callback that allows Actionscript to access the Javascript functions (by declaring them in advance)
import flash.external.ExternalInterface;

// COLOURWANG!

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

// FUNCTIONWANG!

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!

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

// WORDWANG!

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!

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

Javascript

explanations of what does what have been commented in:

// 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

  • check if the instance of the movieclip has been defined in flash