How to call JavaScript with ActionScript
25 August, 2009
Sometimes it's not enough to just use Flash. There's some extra functionality you want that JavaScript can provide. Today we take a look at how you can run JavaScript on your webpage from your Flash application.
Even though the two methods are essentially the same, we've covered them in both ActionScript 2 and ActionScript 3 for you:
ActionScript 2
Let's get straight into it by having a look at the end product. Clicking the button below will call a JavaScript file on this page which displays an alert box. Try it out:
Fairly straight-forward. And the code we need to call the JavaScript is straight-forward as well. We first need to import the class we need to access, then just call the appropriate method and tell ActionScript what function we want to call. All the code is below - take a look at it and then we'll explain it.
import flash.external.ExternalInterface;
js_btn.onRelease = function() {
ExternalInterface.call("my_function()");
}
That's all the ActionScript we need. Aside from the button functionality, we only have two lines of code. The first line in the example imports and gives us access to the class we need.
Once we have access to the ExternalInterface class we can use it to call a JavaScript function. We do that with the call() method: ExternalInterface.call();. And into that method we pass the name of the JavaScript function we want to execute. In this case, it's the my_function function.
And for our example, the my_function JavaScript function is very simple:
function my_function() {
alert("This function is called from ActionScript!");
}
How simple is that?! Just two lines of ActionScript and we have access to JavaScript on the web page. The best way is to have as much logic as possible in the JavaScript so that the call from ActionScript is a simple as possible. From the JavaScript you have access to everything you would ordinarily have on a normal web page.
As always, we've included the files we've used for you to download: js_as2.zip.
This unleashes a lot of potential and also de-restricts your Flash applications some what, so make use of your new found technique!
ActionScript 3
Let's get straight into it by having a look at the end product. Clicking the button below will call a JavaScript file on this page which displays an alert box. Try it out:
Fairly straight-forward. And the code we need to call the JavaScript is straight-forward as well. We first need to import the class we need to access, then just call the appropriate method and tell ActionScript what function we want to call. All the code is below - take a look at it and then we'll explain it.
import flash.external.ExternalInterface;
function call_javascript(evt:MouseEvent):void {
ExternalInterface.call("my_function()");
}
js_btn.addEventListener(MouseEvent.MOUSE_UP, call_javascript);
That's all the ActionScript we need. Aside from the button functionality, we only have two lines of code. The first line in the example imports and gives us access to the class we need.
Once we have access to the ExternalInterface class we can use it to call a JavaScript function. We do that with the call() method: ExternalInterface.call();. And into that method we pass the name of the JavaScript function we want to execute. In this case, it's the my_function function.
And for our example, the my_function JavaScript function is very simple:
function my_function() {
alert("This function is called from ActionScript!");
}
How simple is that?! Just two lines of ActionScript and we have access to JavaScript on the web page. The best way is to have as much logic as possible in the JavaScript so that the call from ActionScript is a simple as possible. From the JavaScript you have access to everything you would ordinarily have on a normal web page.
As always, we've included the files we've used for you to download: js_as3.zip.
This unleashes a lot of potential and also de-restricts your Flash applications some what, so make use of your new found technique!
ferrari_chris
mel_06 says:
2010-01-18 08:46:39
thanks man!
just what i needed!
Add your comment on this article below:
Sorry, there's an error with your form entries. We really appreciate your comment, so please try again.
Form submitting now...