Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash ActionScript and HTML JavaScript Interactivity

This is possible to create communication, interactivity or interaction between HTML and Flash Movie thus providing more interesting webpage or advertisment banners. For the Flash side, this is usually done with ActionScript codes while the HTML side is usually done with JavaScript codes. Therefore this is sometimes refer to communication between Flash Movie and HTML JavaScript.

There are two ways for the communication between HTML and Flash Movie:
- Call ActionScript Function from JavaScript Function
- Call JavaScript Function from ActionScript Function

Call Flash Actionscript from HTML JavaScript Function

Flash ActionScript functions can be called from HTML JavaScript. In order to accomplish such communication, you have to do two things:

- register the function in ActionScript. Once the function in Actionscript is registered it is accessible to JavaScript,

- call the ActionScript function from JavaScript by referring the Flash object.

Here's the basic steps to set up the communication between flash movies and HTML - Call Flash Movie (ActionScript) from HTML form (JavaScript function).

Flash Side:
Use ExternalInterface.addCallback( ) to register the ActionScript function.

The addCallback( ) method requires two parameters:

  • the name of function you need to refer the function from JavaScript
    (i.e. the name of function you need to call it from JavaScript)

  • and the name that refere to the function in ActionScript
    (i.e. reference to the function you need to register)

For example:

ExternalInterface.addCallback("runFlashScript", asScriptFunction);

The above example registers a function called asScriptFunction so that it can be called from JavaScript as runFlashScript

HTML Side:
Since the ActionScript function is registered, you can call it from the JavaScript by referring to the ID of the Flash object.

For example:

document.getElementById('FlashID').runFlashScript()

The whole stroy is explained in the following diagram:

HTML and Flash Communication

Call HTML JavaScript Function from Flash Actioncript

What if we want to call HTML (JavaScript function) from the Flash Movie (ActionScript). You can also use ExternalInterface to call JavaScript functions from Flash ActionScript.

Here's the basic steps to create such communication.

Flash Side:
Use ExternalInterface.call( ) method to call to JavaScript functions from ActionScript. With ExternalInterface.call() method, the JavaScript function will return a value to Flash Movies.

The ExternalInterface.call( ) method requires at least one parameter:
  - the name you need to refer to JavaScript function in the HTML page
  - additional parameters pass with the function

For example:

ExternalInterface.call("getMessageFromFlash", jsArgument);

In this example, the code in Flash Movie call the JavaScript getMessageFromFlash () function with a parameter of jsArgument.

where:
- getMessageFromFlash is the name refer to JavaScript function in HTML page
- jsArgument is additional parameter (optional) pass with the function

HTML Side:
The function must be defined in the HTML page with the same name:

For example:

function getMessageFromFlash(str) {
- doSomethingHere;
}

The whole stroy can be explained in the following diagram:

Calling JavaScript functions from Flash

Remarks:

This Flash ActionScript tutorial shows how to create interactivity between Flash ActionScript and HTML JavaScript.