Flashr_logo

How To : Call Javascript from Flash

Step 1

ExternalInterface is the class used to call Javascript from a Flash or Flex application. This example calls three Javascript methods. The first calls a Javascript alert. The second show how you can pass down arguments, in this case two numbers to be added with the result returned to Flash. The third calls a method to resize the browser. The first step is to add the Javascript to HTML page containing the SWF.

function addition( a, b )
{
    var result = a b;
    $('#${swf}')[0].additionResult( result );
}

function resize( w, h )
{
    window.resizeTo( w, h );
}

Step 2

Back to flash and time to create the user interface. There are two helper methods to add buttons and text fields to the stage.

package
{
    import fl.controls.Button;
   
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.external.ExternalInterface;
    import flash.text.TextField;
    import flash.text.TextFieldType;
   
    [SWF(width='640', height='480', backgroundColor='#ffffff', frameRate='30')]
    public class callJavascript extends Sprite
    {
        private var _alertButton:Button = new Button();
        private var _additionButton:Button = new Button();
        private var _resizeButton:Button = new Button();
        private var _inputFieldA:TextField = new TextField();
        private var _inputFieldB:TextField = new TextField();
        private var _additionResultField:TextField = new TextField();
       
        public function callJavascript()
        {
            // add three buttons to stage
            addButton( _alertButton, "Call alert", 50, 50, callAlert );
            addButton( _additionButton, "Call addition", 50, 100, callAddition );
            addButton( _resizeButton, "Call resize", 50, 150, callResize );
           
            // add input and result text fields
            addTextField( _inputFieldA, TextFieldType.INPUT, 175, 100, "4" );
            addTextField( _inputFieldB, TextFieldType.INPUT, 200, 100, "6" );
            addTextField( _additionResultField, TextFieldType.DYNAMIC, 225, 100 );
           
            // add button click listeners
            _alertButton.addEventListener( MouseEvent.CLICK, callAlert );
            _additionButton.addEventListener( MouseEvent.CLICK, callAddition );
            _resizeButton.addEventListener( MouseEvent.CLICK, callResize );
           
            // add an ExternalInterface listener
            ExternalInterface.addCallback( "additionResult", additionResultHandler );
        }
       
        private function addButton( button:Button, label:String, x:Number, y:Number, clickHandler:Function ):void
        {
            this.addChild( button );
            button.label = label;
            button.move( x, y );
        }
       
        private function addTextField( field:TextField, type:String, x:Number, y:Number, text:String="" ):void
        {
            this.addChild( field );
            field.type = type;
            field.x = x;
            field.y = y;
            field.width = 20;
            field.height = 15;
            field.border = true;
            field.text = text;
        }
    }
}

Step 3

Next add the ActionScript methods that will call JavaScript.

private function callAlert( e:MouseEvent ):void
{
    ExternalInterface.call( "alert", "This is an alert from ActionScript!" );
}

private function callAddition( e:MouseEvent ):void
{
    var a:Number = Number(_inputFieldA.text);
    var b:Number = Number(_inputFieldB.text);
    ExternalInterface.call( "addition", a, b );
}

private function callResize( e:MouseEvent ):void
{
    ExternalInterface.call( "resize", 640, 480 );
}

Step 4

And finally the method that will listen for the addition result.

private function additionResultHandler( value:String ):void
{
    _additionResultField.text = value;
}