Buenas dias !
Did you read the article
actionscript calls Javascript*"
In that case, Flash (via the ExternalInterface class) was calling a function Javascript to create a popup in runtime.
This tutorial is the second part and we will see how to do the opposite. This time, it will be Javascript to call Actionscript.
So, I have an SWF, 2 HTML buttons and 2 images. Everything in the same HTML.
The tutorial shows how to act on the SWF from the 2 external html buttons and the 2 images still extern to the SWF.
You can take a look at the example on line following this link:
act on a SWF from external HTML buttons
I create a FLA and I save it as "main.fla".
Into which, I have a MovieClip on stage with an instance name clip_mc with a simple animation.
I create the Document Class, an AS file saved as "Main.as", implemented the following way:
Code:
package
{
import flash.display.MovieClip;
import flash.external.ExternalInterface;
public class Main extends MovieClip
{
public function Main()
{
clip_mc.stop();
stage.frameRate=31;
ExternalInterface.addCallback("sendToActionScript",fromJS);
}
private function fromJS(value:String):void
{
if(value=='play')
clip_mc.play();
else
clip_mc.stop();
}
}
}
Next, I create the HTML page named main.html that contains the main.swf, 2 buttons and 2 images.
This is the code for main.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript chiama Actionscript</title>
<script language="JavaScript">
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function sendToActionScript(value) {
thisMovie("main").sendToActionScript(value);
}
function sendToJavaScript(value) {
document.forms["form1"].output.value += "ActionScript says: " + value + "\n";
}
</script>
</head>
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="main" width="500" height="375"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<p><embed src="http://www.flepstudio.org/forum/tutorials/main.swf" quality="high" bgcolor="#869ca7"
width="500" height="375" name="main" align="middle"
play="true" loop="false" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</p></object>
</div>
<form name="form1" onSubmit="return false;">
<p align="center">
<input type="button" value="play" onClick="sendToActionScript('play');" />
<input type="button" value="stop" onClick="sendToActionScript('stop');" />
<p><p></p>
<p align="center"><a href="http://www.flepstudio.org/forum/tutorials/#"><img src="http://www.flepstudio.org/forum/tutorials/pic_2.jpg" width="280" height="187" onClick="sendToActionScript('play');" /></a> <a href="http://www.flepstudio.org/forum/tutorials/#"><img src="http://www.flepstudio.org/forum/tutorials/pic_1.jpg" alt="" width="280" height="187" onClick="sendToActionScript('stop');" /></a><p><p></p>
</form>
Let us analyse the code
I import the needed classes
import flash.display.MovieClip;
import flash.external.ExternalInterface;
Constructor function
I stop clip_mc
clip_mc.stop();
I impost the frame rate
stage.frameRate=31;
I call the static method addCallback of the ExternalInterface class. This method registers an Actionscript function as callable from the container into which the SWF is placed. In this case, the container is main.html. So, it allows Javascript to access that function.
How to specify which function is accessible from the container"
Simple, passing to the method addCallback, 2 parameters: the first one is the name of the function Javascript that from the container will call Actionscript. The second one is the name of the Actionscript function to be called.
In this case, in main.html we have a function Javascript named sendToActionscript and an Actionscript function named fromJs.
ExternalInterface.addCallback("sendToActionScript",fromJS);
Methods
fromJS(value:String):void
I check the value passed by the Javascript (a string). If the value is "play", I start clip_mc, otherwise if the value is "stop", I stop clip_mc.
if(value=='play')
clip_mc.play();
else
clip_mc.stop();
See you soon!
03-12-07, 06:43
