Flash AS2.0 and JavaScript/jQuery (ExternalInterface) Communication

Question

Hi there,

Im trying to use JS to send data to my Flash AS2.0 music player with ExternalInterface, except there are no good tutorials or guides on ExternalInterface that I can find. I want to be able to change the current song in the player by clicking a JavaScript link, and on page / window load without clicking, play a default song.

I dont need a super complicated answer on loading sounds in flash, etc., I am just having a lot of difficulties getting JS to send anything to Flash, and when I get that to work - would I need to put some if / else into the flash to determine if the link has been clicked or not?

Thanks

edit heres the code as of now:

AS 2.0

import flash.external.ExternalInterface;

ExternalInterface.addCallback('loadSong', null, flashFunction);

function flashFunction (val) {
    extra = val;
}

JavaScript

var flashObj = document.getElementById('VSPLAYER');

function loadSong(val) {
    return val
}

HTML

<a href="javascript:loadSong('2')">Play song 2</a>

<object id="VSPLAYER" type="application/x-shockwave-flash" data="vs_player.swf" width="280" height="90">
<param name="movie" value="vs_player.swf" />
<param name="allowscriptaccess" value="always" />
</object>

Answer 1

In your Flash, preferably in the first frame, put this:

ExternalInterface.addCallback('callFlashFunction', null, yourFlashFunction);

function yourFlashFunction (arg1, arg2) { ... }

In your Javascript, you can call it via:

var flashObj = document.getElementById ('FlashObjID');
flashObj.callFlashFunction (arg1, arg2);

If your SWF is in a different domain, remember to allow script access via:

<object id="FlashObjID"> ... <param name="allowscriptaccess" value="always" /> ... </object>

---

Update (based on your HTML):

<a href="#" onclick="return jsLoadSong('2')">Play song 2</a>

<object id="VSPLAYER" type="application/x-shockwave-flash" data="vs_player.swf" width="280" height="90">
    <param name="movie" value="vs_player.swf" />
    <param name="allowscriptaccess" value="always" />
</object>

<script type="text/javascript">
    var flashObj = document.getElementById ('VSPLAYER');
    function jsLoadSong (val)
    {
        flashObj.loadSong (val);
        return false; // to prevent default link action
    }
</script>

I tried to clarify the names to show which is in Javascript, and which is tied to the Flash. Also note that you'd need to wait till the DOM is loaded before calling defining flashObj. here, the <script> tag is after the <object>, so it will work fine.

Answer 2

<a href="#" onclick="return ab()">Try</a><br/>
     <object id="a" width="550" height="400">
     <param name="allowscriptaccess" value="always" />
     <param name="movie" value="b.swf">
     <embed src="b.swf" width="550" height="400">
     </embed>
     </object>
     <script type="text/javascript">
      var flashObj = document.getElementById ("a");
      function ab()
      {
        flashObj.callFlashFunction("Labas");
        return false;
      }
     </script>

flashObj.callFlashFunction is not a function. What's wrong?