Flash/Javascript Remoting Sample

Documentation > Haxe Remoting Tutorials > Flash/Javascript Remoting Sample

Here's a sample on how to communicate between Flash and Javascript using Haxe Remoting. Here's first the Haxe/Javascript code JsMain.hx :

@:keep @:expose
class JsMain {
  static function foo(x,y) { return x + y; }

  static var cnx = null;

  static function main() {
    var ctx = new haxe.remoting.Context();
    ctx.addObject("JsMain",JsMain);
    cnx = haxe.remoting.ExternalConnection.flashConnect("default","myFlashObject",ctx);
  }

  static function run() {
    trace(cnx.FlashMain.foo.call([1,2]));
  }
}

This code will connect to the Flash object named myFlashObject, using he connection named default at startup. When run() is called, it will call the method FlashMain.foo(1,2) and display the result.

The FlashMain.hx class is the following :

class FlashMain {
  static function foo(x,y) { return x + y; }

  static function main() {
    var ctx = new haxe.remoting.Context();
    ctx.addObject("FlashMain",FlashMain);
    var js = haxe.remoting.ExternalConnection.jsConnect("default",ctx);
    trace(js.JsMain.foo.call([1,2]));
  }
}

The FlashMain code is the same as JSMain, except that it connects to JavaScript by using Haxe Remoting and immediately call the function.

You can build the project by using the following single HXML file. This will produce both a remoting.js and a remoting.swf files :

-main JsMain
-js remoting.js

--next

-main FlashMain
-swf remoting.swf

Now, you can display the traces in Javascript and Flash by using the following HTML. Please note that :

  • this example will only work with Flash Player 8 or higher
  • the Flash HTML needs some additional properties in the OBJECT and EMBED tags to allow JS access
  • the JsMain.run method is called 200 milliseconds after the onLoad event is fired in order to enable the Flash object to initialize itself correctly.

<html>
  <head>
    <script type="text/javascript" src="remoting.js"></script>
  </head>
  <body bgcolor="#eeeeee" onLoad="setTimeout('JsMain.run()',200)">
    <div id="haxe:trace"></div>
    <object
      classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
      width="400"
      height="300"
      id="myFlashObject"
    >
      <param name="movie" value="remoting.swf"/>
      <param name="allowScriptAccess" value="always" />
      <param name="quality" value="high" />
      <param name="salign" value="lt" />
      <param name="scale" value="noscale" />
      <param name="menu" value="false" />
      <param name="bgcolor" value="#ffffff"/>
      <embed
        src="remoting.swf"
        quality="high"
        salign="lt"
        width="400"
        height="300"
        align="middle"
        scale="noscale"
        menu="false"
        bgcolor="#ffffff"
        name="myFlashObject"
        swLiveConnect="true"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
      />
    </object>
  </body>
</html>

This should display the values that are returned by the other side of the connection. From here, you should be able to handle Flash/JS communications transparently.

Troubleshooting

In case of any problems, check the following :

  • the local security of your SWF should be enabled from the Flash security manager
  • OR you should access the sample from a local webserver

This error indicates that the JS side is not ready. This can happen if you put the JS tag below the flash object for instance:

ExternalConnection is not compiled in JS

version #20034, modified 2014-03-20 22:10:26 by ncannasse