How to make a bridge between javascript and actionscript3

Question

I want to make a super simple javascript-actionscript3 bridge.

call the actionscript's method with string param.

and it returns the string param that have sent.

this is my code.

as3 file,

package 
{
import flash.display.Sprite;
import flash.events.Event;
import flash.external.*;
import flash.external.ExternalInterface;

    public class Main extends Sprite{

        function Main (){
            ExternalInterface.addCallback ("getTextFromJavaScript", getTextFromJavaScript);
        }

        public function getTextFromJavaScript (str:String):void{
         var test = str;
        }

    }

}

i build this, and created on Detect.swf

html and javascript,

<object id="ext" data="Detect.swf"
style="height: 100px; width: 100px;"
type="application/x-shockwave-flash">
    <param name="movie" value="Detect.swf">
    <param name="allowScriptAccess" value="always" />
    <param name="wmode" value="opaque">
</object>

<script type="text/javascript" charset="utf-8">
    function getFlashMovie(movieName) {
        var isIE = navigator.appName.indexOf("Microsoft") != -1;
        return (isIE) ? window[movieName] : document[movieName];
    }
    getFlashMovie("Detect").getTextFromJavaScript("hihi"); 
</script>

and finally, it throws an error :(,

Uncaught TypeError: Cannot read property 'getTextFromJavaScript' of undefined 

Answer 1

AS3 code

package  {

    import flash.display.Sprite;
    import flash.events.*;
    import flash.external.ExternalInterface;
    import flash.text.TextField;
    import flash.utils.Timer;
    import flash.text.TextFieldType;
    import flash.text.TextFieldAutoSize;
    import flash.system.Security;

    public class ExternalInterfaceExample extends Sprite 
    {

    private var input:TextField;
        private var output:TextField;
        private var sendBtn:Sprite;

        public function ExternalInterfaceExample() 
        {
            // constructor code
            Security.allowDomain("*");


            input = new TextField();
            input.type = TextFieldType.INPUT;
            input.background = true;
            input.border = true;
            input.width = 350;
            input.height = 18;
            addChild(input);

            sendBtn = new Sprite();
            sendBtn.mouseEnabled = true;
            sendBtn.x = input.width + 10;
            sendBtn.graphics.beginFill(0xcccccc);
            sendBtn.graphics.drawRoundRect(0, 0, 80, 18, 10, 10);
            sendBtn.graphics.endFill();
            sendBtn.addEventListener(MouseEvent.CLICK, clickHandler);
            addChild(sendBtn);

            output = new TextField();
            output.y = 25;
            output.width = 450;
            output.height = 325;
            output.multiline = true;
            output.wordWrap = true;
            output.border = true;
            output.text = "Initializing...\n";
            addChild(output);


            if (ExternalInterface.available) {
                try {
                    output.appendText("Adding callback...\n");
                    ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);
                    if (checkJavaScriptReady()) {
                        output.appendText("JavaScript is ready.\n");
                    } else {
                        output.appendText("JavaScript is not ready, creating timer.\n");
                        var readyTimer:Timer = new Timer(100, 0);
                        readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
                        readyTimer.start();
                    }
                } catch (error:SecurityError) {
                    output.appendText("A SecurityError occurred: " + error.message + "\n");
                } catch (error:Error) {
                    output.appendText("An Error occurred: " + error.message + "\n");
                }
            } else {
                output.appendText("External interface is not available for this container.");
            }
        }
        private function receivedFromJavaScript(value:String):void {
            output.appendText("JavaScript says: " + value + "\n");
        }
        private function checkJavaScriptReady():Boolean {
            var isReady:Boolean = ExternalInterface.call("isReady");
            return isReady;
        }
        private function timerHandler(event:TimerEvent):void {
            output.appendText("Checking JavaScript status...\n");
            var isReady:Boolean = checkJavaScriptReady();
            if (isReady) {
                output.appendText("JavaScript is ready.\n");
                output.appendText("ExternalInterface.objectID = " + ExternalInterface.objectID + "\n");
                Timer(event.target).stop();
            }
        }
        private function clickHandler(event:MouseEvent):void {
            if (ExternalInterface.available) {
                ExternalInterface.call("sendToJavaScript", input.text);
            }
        }
    }
}

javascript code

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExternalInterfaceExample</title>
    <script language="JavaScript">
        var jsReady = false;
        function isReady() {
            return jsReady;
        }
        function pageInit() {
            jsReady = true;
            document.forms["form1"].output.value += "\n" + "JavaScript is ready.\n";
        }
        function sendToActionScript(value) {
        document.getElementById("ExternalInterfaceExample").sendToActionScript(value);
        }
        function sendToJavaScript(value) {
            document.forms["form1"].output.value += "ActionScript says: " + value + "\n";
        }
    </script>
</head>

<body onload="pageInit();">

    <object id="ExternalInterfaceExample" name="ExternalInterfaceExample" type="application/x-shockwave-flash" data="ExternalInterfaceExample.swf"
        width="550" height="400">
        <param name="movie" value="ExternalInterfaceExample.swf" />
        <param name="quality" value="high" />
        <param name="allowscriptaccess" value="always" />
        <a href="http://www.adobe.com/go/getflash">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
    </object>

    <form name="form1" onsubmit="return false;">
        <input type="text" name="input" value="" />
        <input type="button" value="Send" onclick="sendToActionScript(this.form.input.value);" /><br />
        <textarea cols="60" rows="20" name="output" readonly="true">Initializing...</textarea>
    </form>

</body>

</html>