How to Send External Commands to a Flash Movie
If your Flash movies are deployed on Web pages, you can issue commands in JavaScript to call internal ActionScript functions. This allows a level of control over what happens within Flash from the Web browser. The function can be used for many purposes and means you can gain a dialogue between the Web page and Flash. Sending commands into Flash in this way is simple, requiring only a few steps. The activity uses the ActionScript ExternalInterface Class.
Other People Are Reading
Instructions
-
-
1
Open Flash and create a new document, saving it with a name and location of your choice. Include a dynamic TextField on your stage, and give it the Instance Name "test_txt" for demonstration. Create a new layer for your code and open the Actions panel. Enter the following code:
import flash.external.ExternalInterface;
ExternalInterface.addCallback("myExternalCallingFunction", myInternalCalledFunction);
function myInternalCalledFunction(param)
{ test_txt.text=param; }
-
2
Create your Web page in HTML. Using the following structure, build your page and include the Flash movie within it:
<html>
<head>
</head>
<body>
<div><object width="200" height="200">
<param name="movie" value="myflashfile.swf">
<embed src="myflashfile.swf" width="200" height="200">
</embed></object></div>
<div><input type="button" value="test" onclick="callInternalFunction('hello');"/></div>
</body>
</html>
Alter the name and dimensions to suit your Flash movie. The button will be used to show how data can be sent into the Flash page by calling a function in ActionScript from JavaScript. Save your Web page in the same directory as your Flash movie, with a name of your choice.
-
-
3
Include JavaScript code on your Web page, as in the following example structure (between the opening and closing <head> tags):
<script language="javascript">
function getMovieRef(theMovie)
{ var isExplorer = navigator.appName.indexOf("Microsoft")!=-1;
return (isExplorer) ? window[theMovie] : document[theMovie]; }
function callInternalFunction(testdata)
{ getMovieRef("myflashfile").myExternalCallingFunction(testdata); }
</script>
Change "myflashfile" to reflect the name of your movie. This code handles the processing when the button on the page is pressed. The data text String passed by the button is passed by JavaScript into the Flash movie, calling an internal ActionScript function.
-
4
Save your files, export your Flash movie to an SWF and upload everything to your Web server. You cannot test this code properly without using a server, so you need to upload the files and browse to the page to check whether it works. Once you get to the page, press the HTML button and you should see the word "hello" appear within the TextField in the Flash movie. If the code does not work, check all of your code and make sure the same function names are included in both Flash and your HTML.
-
5
Alter the code to suit your own needs. Amend the Flash code to reflect whatever functionality you need, and do the same within your JavaScript. You can pass different data from the browser to the ActionScript code as you require. Try to only use this functionality where necessary, as communication between the browser and Flash can be a little unpredictable.
-
1
Tips & Warnings
You can also call JavaScript functions in a Web page from ActionScript.
Test your page and movie in different Web browsers, as you may find it behaves differently.
References
- Adobe: Coding data exchange between JavaScript and Flash Player
- Viget Inspire: Bi-Directional Actionscript/Javascript Communication in AS3
- ActionScript Examples: Calling ActionScript functions from JavaScript using the ExternalInterface API in ActionScript 2.0
- ActionScript: Flash and Javascript communication
Resources
- Photo Credit internet image by Stephanie Bandmann from Fotolia.com
