Javascript call AS3 function

Question

I know that there are lots of articles and forum post about this question and lots of them are not working and remained unanswered. Some tutorials claimed that their code works, but some of them does not have download page and some of them with download page, the link does not work. Also, perhaps there's a new way of doing this and the code that I found is no longer supported.

Here is my code:HTML and Javascript

<html>
<head><title>Javascript to SWF</title>
<script language="JavaScript"> 
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];
}

function callToActionscript() 
{
     getFlashMovie("jscallswf").setMouseXY();
}

callToActionscript();
</script>
</head>
<body style="background:red;">  
<body>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="450" id="jscallswf" align="middle" data="jscallswf.swf" style="height: 250">
        <param name="allowScriptAccess" value="sameDomain">
        <param name="allowFullScreen" value="false">
        <param name="movie" value="jscallswf.swf">
        <param name="quality" value="High"><param name="bgcolor" value="#ffffff">
        <embed src="jscallswf.swf" quality="High" bgcolor="#ffffff" width="400"     name="jscallswf" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false"     type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"     style="height: 250">
    </object>
</body>
</body> 
</html>

AS3 code:

import flash.external.ExternalInterface;

ExternalInterface.addCallback("setMouseXY", rotateCam);
function rotateCam()
{
    td.text = "NEWTEXT";
}

Here is another Javascript approach:

<html>
<head><title>Javascript to SWF</title>
<style type="text/css">
#jscallswf {
margin:300px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">    </script>
<script type="text/javascript" src="swfobject.js"></script>
<script language="JavaScript"> 
// JS Code
// Embedding through SWFObject rocks in comparison with Adobe's garbage:

var flashvars = {};

var params                  =   {};
params.menu                 =   "false";
params.salign               =   "t";
params.scale                =   "noscale";
params.wmode                =   "transparent";
params.allowScriptAccess    =   "always";

var attributes              =   {};
attributes.id = "jscallswf";

swfobject.embedSWF("jscallswf.swf", "flashDiv", "274", "246", "9.0.0", "", flashvars, params, attributes);

// Functions needed for calling Flex ExternalInterface
function thisMovie(movieName) 
{
    if (navigator.appName.indexOf("Microsoft") != -1) 
    {
        return window[movieName];
    } 
    else 
    {
        return document[movieName];
    }
}

function callFlashMethod()
{
    thisMovie("jscallswf").setMouseXY();
}


$(document).ready(function(){
    callFlashMethod();
});
</script>
</head>
<body style="background:red;">  
<body>
<div id="flashDiv" style="margin:200px;"></div>
</body>
</body> 
</html>

Both returning error in console "Uncaught TypeError: Cannot call method 'setMouseXY' of undefined"

Lukasz 'Severiaan' Grela Lukasz 'Severiaan' Grela · Accepted Answer · 2014-03-04T07:59:54

Please try following:

Main.as

package 
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.external.ExternalInterface;
    import flash.text.TextField;

    /**
     * <p>ExternalInterface example</p>
     * <p><b>author:</b> Lukasz 'Severiaan' Grela</p>
     * @author Lukasz 'Severiaan' Grela
     */
    public class Main extends Sprite 
    {
        protected var m_oOutput:TextField;
        //---------------------------------------
        //Group: CONSTRUCTOR    
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }



        protected function ei_invokeFunction(p_sMethod:String, ...args):void 
        {
            //info("ei_invokeFunction(p_sMethod:String=" + p_sMethod + ", ...args=[" + args + "]):void");
            switch (p_sMethod) 
            {
                case "func1":
                    func1.apply(this, args);
                    break;
                case "func2":
                    func2.apply(this, args);
                    break;
            }
        }

        protected function func1(num1:Number, num2:Number, num3:Number):void 
        {
            m_oOutput.text = "func1(num1=" + num1 + ", num2=" + num2 + ", num3=" + num3 + ");";
        }
        protected function func2(str1:String, num2:Number, str3:String):void 
        {
            m_oOutput.text = "func2(str1=" + str1 + ", num2=" + num2 + ", str3=" + str3 + ");";
        }


        protected function run():void 
        {

            // entry point
            m_oOutput = new TextField();
            m_oOutput.x = m_oOutput.y = 5;
            m_oOutput.width = 480;
            m_oOutput.height = 320;
            m_oOutput.multiline = true;
            m_oOutput.wordWrap = true;
            m_oOutput.border = true;

            addChild(m_oOutput);

            //prepare the ExternalInterface hook-up
            if (ExternalInterface.available)
            {
                try {
                    ExternalInterface.addCallback("invokeFunction", ei_invokeFunction);
                    m_oOutput.text = "ExternalInterface is available."
                }
                catch (err:*)
                {

                    m_oOutput.text = "ExternalInterface is not available. \nError:" + err;
                }
            }
            else
            {
                m_oOutput.text = "ExternalInterface is not available.";
            }
        }

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            //
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.addEventListener(Event.RESIZE, onStageResized, false, 0, true);

            run();
        }
    }
}

index.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>external_interface_test</title>
    <meta name="description" content="" />

    <script src="js/swfobject.js"></script>
    <script>
        var flashvars = {
        };
        var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "",
            wmode: "direct" // can cause issues with FP settings & webcam
        };
        var attributes = {
            id:"core"
        };
        swfobject.embedSWF(
            "externalinterfacetest.swf", 
            "altContent", "490", "330", "10.0.0", 
            "expressInstall.swf", 
            flashvars, params, attributes);
    </script>
    <script>
        var $DEBUG = true;
        //daft implementation only for testing - this should be replaced (the body of that function) with more accurate/reliable version
        function getFlashMovie(movieName) {
          var isIE = navigator.appName.indexOf("Microsoft") != -1;
          return (isIE) ? window[movieName] : document[movieName];
        }

        /**
         * Reference to the "core" SWF
         */
        function getCore()
        {
            try
            {
                var movie = getFlashMovie("core");
            }
            catch(e)
            {
                if($DEBUG)
                    alert("getCore" + "\n" + e);
            }   
            return movie;
        }

        //The "invokeFunction" is the registered callback method within SWF in query
        /**
         * wrapper for calling flash function
         */
        function function1(num1, num2, num3)
        {
            try
            {
                getCore().invokeFunction("func1", num1, num2, num3);
            }
            catch(e)
            {
                if($DEBUG)
                    alert("func1" + "\n" + e);
            }
        }
        /**
         * wrapper for calling flash function
         */
        function function2(str1, num2, str3)
        {
            try
            {
                getCore().invokeFunction("func2", str1, num2, str3);
            }
            catch(e)
            {
                if($DEBUG)
                    alert("func2" + "\n" + e);
            }
        }

    </script>
    <style>
        html, body { height:100%; overflow:hidden; }
        body { margin:0; }
    </style>
</head>
<body>
    <div id="altContent">
        <h1>external_interface_test</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
    </div>
    <div id="eiMenu">
        <a href='#' onclick='javascript:function1(1, 2, 3);return false;'>Function 1</a>|
        <a href='#' onclick="javascript:function2('a', 2, 'c');return false;">Function 2</a>

    </div>
</body>
</html>

and this are screengrabs:

Initial state Function 1 clicked Function 2 clicked

You can try to run this and let me know your output, I've tested on FF27

Javascript call AS3 function

1 Answers