License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License
Written by Christian Stigen Larsen on 2008-04-03
We show how to create a shockwave flash object in your web page that can send and receive function calls with Javascript. This is easy, if you avoid some pitfalls.
Here are the steps you need to perform. You will of course need to start up the Macromedia Flash 8 editor (or Adobe Flash, as it's now called).
import flash.external.ExternalInterface;
// set text in myText dynamic text field
function setText(s)
{
myText = s;
}
// enable anyone else to call our functions
System.security.allowDomain("*");
// make setText() available to others as "setText"
ExternalInterface.addCallback("setText", null, setText);
// call external function to signal we're ready to go!
ExternalInterface.call("flashInitialized");
The function setText sets the text in a dynamic text field, which we'll add in the Flash editor below.
The statement System.security.allowDomain("*") enables other programs to call our exposed functions. This is essential to ensure that our javascript code will work.
ExternalInterface.addCallback("setText", null, setText)
we make the action script function setText function available to external programs (Javascript, in this case) with the name setText.Finally, we call an external function called flashInitialized to signal that the flash program has been loaded, started and is ready to receive callbacks. This is important because when your browser loads a page, it may execute javascript statements meant for the flash object before it has been loaded and started. There are other ways of timing loads, but I like this approach.
After publishing, we need to write some HTML and javascript code:
<html>
<head>
<script type="text/javascript">
// called by our action script after initialization
function flashInitialized()
{
var isInternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
// get flash object
flash = isInternetExplorer ? document.all.file1 : document.file1;
// call action script function
flash.setText('Hello from javascript');
}
</script>
</head>
<body>
<object id="file1"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="640" height="480">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="file1.swf" />
<embed src="file1.swf" name="file1"
width="640" height="480"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
This code should be rather self-explanatory. The interesting part is the javascript code. Our flash object will call flashInitialized, and from there on we are ready to use action script functions callbacks.
It is very important that the flash object calls us before we do anything because of how the browser loads the page. If you were to simply start using the flash functions at, say, right before the closing body element, you could end up calling unexposed functions because your browser is still downloading the flash object (or it hasn't started running yet).
You should now open the HTML file in your favourite browser. If you run everything locally, you will probably get a pop-up window telling you that you have to adjust your security settings before the flash object will run.
In my case, I just clicked OK and was redirected to an Adobe support page. On that page I could SWF-file path to my local list of trusted flash files. Afterwards, I refreshed and the code ran fine.
If the code won't run locally, just put it on a web server. This is actually easier than running it locally.
Finally, be sure to test everything on many different browsers. I've tried the code above on Safari, Opera, Firefox and Internet Explorer 6.
The result on my system is shown below. Happy hacking!
