Difference between revisions of "Actionscript-Javascript Interaction"

From Wikicliki
Jump to: navigation, search
 
 
(21 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
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.
+
== Getting xml from asp and into flash ==
  
−
== HTML ==
+
http://www.aspnetflash.com/forum/Default.aspx?g=posts&t=172
 +
http://stackoverflow.com/questions/1371164/actionscript-2-0-email-form-loadvars-with-ashx-net-handler
 +
http://www.nathanbaker.com.au/blog/post/Accessing-Web-Services-in-Flash-AS2.aspx
  
−
== Actionscript ==
+
http://kemmis.info/blog/archive/2010/03/24/how-to-save-a-file-from-flash-10-without-user.aspx
 +
 
 +
<pre>VoteGetRankingByCategory.ashx
 +
 
 +
?category=junior
 +
 
 +
?category=senior</pre>
 +
 
 +
 
 +
== Islands ==
 +
 
 +
5 sept 2008: [http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15683&sliceId=1#exampleas2 if this can work]... [http://thinkerbug.com/teststuff/a-ExternalInterfaceExample.html you can do it!!!]
 +
SO JUST FUCKIN DO ITTT!!!!!!!!!!!!!!!
 +
12 sept 2008: AND I'VE DONE IT!
 +
 
 +
=== JS ===
 +
<pre>
 +
// get flash movie object
 +
function getFlashMovie(northamerika) {
 +
var isIE = navigator.appName.indexOf("Microsoft") != -1;
 +
        return (isIE) ? window[northamerika] : document[northamerika];
 +
}
 +
 
 +
// javascript gets url and sends it to flash country
 +
function sendIDtoFlash(id) {
 +
var e = (document.getElementById(id));
 +
var IDhttp = e.href;
 +
getFlashMovie("northamerika").sendIDtoFlash(IDhttp);
 +
}
 +
</pre>
 +
 
 +
=== Actionscript ===
 +
<pre>
 +
import flash.external.ExternalInterface;
 +
 
 +
// URLWANG!
 +
 
 +
function getIDfromJavascript(IDhttp):Void{
 +
var MyIDhttp:String;
 +
MyIDhttp = "";
 +
_root.MyIDhttp = IDhttp;
 +
}
 +
ExternalInterface.addCallback("sendIDtoFlash", this, getIDfromJavascript);
 +
 
 +
 
 +
// FUNCTIONWANG!
 +
 
 +
function countryRelease(id) {
 +
ExternalInterface.call("sendIDtoFlash",id);
 +
}
 +
 
 +
// COUNTRYFUNCTIONWANG!
 +
 
 +
AG.onRollOver  = function()  {
 +
countryName(true, "Antigua & Barbuda", this);
 +
countryOver("AG");
 +
countryOverHTML("AG");
 +
this.onRollOut = function() {
 +
countryName(false);
 +
countryOut("AG")
 +
countryOutHTML("AG");
 +
this.onRelease = function() {
 +
countryRelease("AG");
 +
getURL(MyIDhttp,  "_parent");}
 +
};
 +
};
 +
</pre>
 +
 
 +
=== OLD VERSIONS: stage 2: SENDING URL TO AS ===
 +
 
 +
at this point i got it to work for one country at a time and i had problems with it working in both FF and IE
 +
 
 +
==== JS ====
 +
this worked in both FF and IE
 +
<pre>
 +
// get flash movie object
 +
function getFlashMovie(australia) {
 +
var isIE = navigator.appName.indexOf("Microsoft") != -1;
 +
        return (isIE) ? window[australia] : document[australia];
 +
}
 +
 
 +
function sendAUtoFlash() {
 +
var e = (document.getElementById('AU'));
 +
var AUhttp = e.href;
 +
getFlashMovie("australia").sendAUtoFlash(AUhttp);
 +
}
 +
 
 +
</pre>
 +
 
 +
this worked only in FF... FUCKING IE SON OF A BITCH!!!!!!!!!!!!!!!!!!
 +
<pre>
 +
// get flash movie object
 +
function getFlashMovie(australia) {
 +
var isIE = navigator.appName.indexOf("Microsoft") != -1;
 +
        return (isIE) ? window[australia] : document[australia];
 +
}
 +
 
 +
function sendAUtoFlash() {
 +
var AUhttp = document.links["AU"].href;
 +
//alert(AUhttp);
 +
getFlashMovie("australia").sendAUtoFlash(AUhttp);
 +
}
 +
// window.onload = sendAUtoFlash;
 +
</pre>
 +
 
 +
==== AS ====
 +
 
 +
<pre>AU.onRollOver  = function()  {
 +
countryName(true, "Australia", this);
 +
countryOver("AU");
 +
countryOverHTML("AU");
 +
this.onRollOut = function() {
 +
countryName(false);
 +
countryOut("AU")
 +
countryOutHTML("AU");
 +
receiver.text="bye";
 +
};
 +
getURL("javascript:sendAUtoFlash();");
 +
this.onRelease = function() {
 +
receiver.text=_root.MyAUhttp;
 +
var loadAU = "BUMS";
 +
getURL(MyAUhttp,  "_parent");
 +
};
 +
}; </pre>
 +
 
 +
 
 +
=== OLD VERSION stage 1: SENDING URL AS VARIABLE FROM JS TO AS (WORKING!!!!!!) ===
 +
 
 +
this worked in putting the url into the receiver. but it only worked in FF.
 +
 
 +
==== JS ====
 +
<pre>// get flash movie object
 +
function getFlashMovie(australia) {
 +
var isIE = navigator.appName.indexOf("Microsoft") != -1;
 +
        return (isIE) ? window[australia] : document[australia];
 +
}
 +
 
 +
function sendAUtoFlash() {
 +
var AUhttp = document.links["AU"].href;
 +
alert(AUhttp);
 +
getFlashMovie("australia").sendAUtoFlash(AUhttp);
 +
}
 +
window.onload = sendAUtoFlash;
 +
</pre>
 +
==== AS2 ====
 +
<pre>
 +
import flash.external.ExternalInterface;
 +
 
 +
function getAUfromJavascript(AUhttp):Void{
 +
receiver.text = "received: " + AUhttp;
 +
}
 +
ExternalInterface.addCallback("sendAUtoFlash", this, getAUfromJavascript);
 +
</pre>
 +
 
 +
=== OLD VERSION MAKING FLASH LINK AND JAVASCRIPT LINK LIGHT EACH OTHER UP ====
 +
 
 +
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 ====
 +
 
 +
<pre><a id="BM" href="bermuda.html" onMouseover="asMouseOver(this.id)" onMouseout="asMouseOut(this.id)">Bermuda</A></pre>
 +
 
 +
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 ====
  
 
<pre>import flash.external.ExternalInterface;
 
<pre>import flash.external.ExternalInterface;
  
−
// COLOURWANG!
+
// COLOURWANG! -- using prototype to define the clearRGB function for the mouseOut
  
 
Color.prototype.clearRGB = function(){
 
Color.prototype.clearRGB = function(){
Line 13: Line 180:
 
}
 
}
  
−
// FUNCTIONWANG!
+
// FUNCTIONWANG! -- defines the mouseovers and mouseouts colour changes
  
 
function countryOver(id) {
 
function countryOver(id) {
Line 30: Line 197:
 
}
 
}
  
−
// COUNTRYFUNCTIONWANG!
+
// COUNTRYFUNCTIONWANG! -- defines the rollovrs and rollouts for
 +
// the mouseovers and mouseouts hover captions functions (for each specific movieclip)
  
 
BM.onRollOver  = function()  {
 
BM.onRollOver  = function()  {
Line 43: Line 211:
 
};  
 
};  
  
−
// WORDWANG!
+
// WORDWANG! -- defines the hover caption function
  
 
countryName =  function (showCaption, captionText, bName)  {
 
countryName =  function (showCaption, captionText, bName)  {
Line 68: Line 236:
 
};
 
};
  
−
// EXTERNALINTERFACEWANG!
+
// EXTERNALINTERFACEWANG! -- externalinterface callback that
 +
// allows Actionscript to access the Javascript functions
 +
// (by declaring them in advance)
  
 
var method1:Function = countryOver;
 
var method1:Function = countryOver;
Line 77: Line 247:
 
</pre>
 
</pre>
  
 +
==== Javascript ====
 +
 +
<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 ==
 +
 +
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!!!!
 +
* when you embed the flash file (however the hell you do it, make sure you define the ID and NAME in both OBJECT and EMBED, for good measure)
 +
 +
== Links ==
  
−
== Javascript ==
+
http://blog.deconcept.com/swfobject/forum/discussion/928/movie-not-loaded-in-ie/
 +
[[Category:Programming]]

Latest revision as of 09:48, 21 July 2010

Getting xml from asp and into flash

http://www.aspnetflash.com/forum/Default.aspx?g=posts&t=172 http://stackoverflow.com/questions/1371164/actionscript-2-0-email-form-loadvars-with-ashx-net-handler http://www.nathanbaker.com.au/blog/post/Accessing-Web-Services-in-Flash-AS2.aspx

http://kemmis.info/blog/archive/2010/03/24/how-to-save-a-file-from-flash-10-without-user.aspx 

VoteGetRankingByCategory.ashx

?category=junior

?category=senior


Islands

5 sept 2008: if this can work... you can do it!!! SO JUST FUCKIN DO ITTT!!!!!!!!!!!!!!! 12 sept 2008: AND I'VE DONE IT!

JS

// get flash movie object
function getFlashMovie(northamerika) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
        return (isIE) ? window[northamerika] : document[northamerika];
}

// javascript gets url and sends it to flash country
function sendIDtoFlash(id) {
var e = (document.getElementById(id));
var IDhttp = e.href;
getFlashMovie("northamerika").sendIDtoFlash(IDhttp);
}

Actionscript

import flash.external.ExternalInterface;

// URLWANG!

function getIDfromJavascript(IDhttp):Void{
	var MyIDhttp:String;
	MyIDhttp = "";
	_root.MyIDhttp = IDhttp;
}
ExternalInterface.addCallback("sendIDtoFlash", this, getIDfromJavascript);


// FUNCTIONWANG!

function countryRelease(id) {
	ExternalInterface.call("sendIDtoFlash",id);
}

// COUNTRYFUNCTIONWANG!

AG.onRollOver  = function()  {
	countryName(true, "Antigua & Barbuda", this);
	countryOver("AG");
	countryOverHTML("AG");
	this.onRollOut = function() {
		countryName(false);
		countryOut("AG")
		countryOutHTML("AG");
	this.onRelease = function() {
	countryRelease("AG");
	getURL(MyIDhttp,  "_parent");}
	};
};

OLD VERSIONS: stage 2: SENDING URL TO AS

at this point i got it to work for one country at a time and i had problems with it working in both FF and IE

JS

this worked in both FF and IE 

// get flash movie object
function getFlashMovie(australia) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
        return (isIE) ? window[australia] : document[australia];
}

function sendAUtoFlash() {
var e = (document.getElementById('AU'));
var AUhttp = e.href;
getFlashMovie("australia").sendAUtoFlash(AUhttp);
}

this worked only in FF... FUCKING IE SON OF A BITCH!!!!!!!!!!!!!!!!!! 

// get flash movie object
function getFlashMovie(australia) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
        return (isIE) ? window[australia] : document[australia];
}

function sendAUtoFlash() {
var AUhttp = document.links["AU"].href;
//alert(AUhttp);
getFlashMovie("australia").sendAUtoFlash(AUhttp);
}
// window.onload = sendAUtoFlash;

AS

AU.onRollOver  = function()  {
	countryName(true, "Australia", this);
	countryOver("AU");
	countryOverHTML("AU");
		this.onRollOut = function() {
		countryName(false);
		countryOut("AU")
		countryOutHTML("AU");
		receiver.text="bye";
	};
	getURL("javascript:sendAUtoFlash();");
	this.onRelease = function() {
	receiver.text=_root.MyAUhttp;
	var loadAU = "BUMS";
	getURL(MyAUhttp,  "_parent");
};
};


OLD VERSION stage 1: SENDING URL AS VARIABLE FROM JS TO AS (WORKING!!!!!!)

this worked in putting the url into the receiver. but it only worked in FF.

JS

// get flash movie object
function getFlashMovie(australia) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
        return (isIE) ? window[australia] : document[australia];
}

function sendAUtoFlash() {
var AUhttp = document.links["AU"].href;
alert(AUhttp);
getFlashMovie("australia").sendAUtoFlash(AUhttp);
}
window.onload = sendAUtoFlash;

AS2

import flash.external.ExternalInterface;

function getAUfromJavascript(AUhttp):Void{
receiver.text = "received: " + AUhttp;
}
ExternalInterface.addCallback("sendAUtoFlash", this, getAUfromJavascript);

OLD VERSION MAKING FLASH LINK AND JAVASCRIPT LINK LIGHT EACH OTHER UP =

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!!!!
  • when you embed the flash file (however the hell you do it, make sure you define the ID and NAME in both OBJECT and EMBED, for good measure)

Links

http://blog.deconcept.com/swfobject/forum/discussion/928/movie-not-loaded-in-ie/

Retrieved from "http://dbbd.sg/wiki/index.php?title=Actionscript-Javascript_Interaction&oldid=5335"