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

Question

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>

Solution 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.

Solution 2

Thanks for the posts, but yes, that javascript call wasn't valid for me either. After SO much mucking around, finally got it to work with:

$(this)[0].loadSong();  

( using jQuery, where flashObj was already selected )

Hope this helps someone.

Not sure if you need the [0] if not using jQuery.

Read somewhere else that the actual HTML DOM Object is selected in the first slot of the array of the selector. Sorry my explanations are a bit noobish, just hope it helps you get it working.