Cannot call AS3 Function from JavaScript

Question

Hi,
I am trying to call an ActionScript 3 function with JavaScript. The problem I cannot seem to get any of the browsers to trigger this AS3 function. The debuggers say that the function is undefined when I call it on the flash object. 
What is supposed to happen is - the javascript function calls the AS3 function, and passes it an integer value.   That integer is then used to pull one of 20 swfs, and load that into the flash movie.
Please let me know if you guys can think of anything that I can do to make this work!  I've been stuck for hours, and can't seem to make it happen.
Here is my actionScript:
import flash.net.URLRequest;
import flash.display.Loader;
import flash.external.ExternalInterface;
var movies:Array = ["idle-ok.swf", "idle-good.swf"];
// It first loads this "hello swf".
var helloLoader:Loader = new Loader();
var helloURL:URLRequest = new URLRequest("idleAvatar.swf");
helloLoader.load(helloURL);
addChild(helloLoader);
var setAvatar:Function = loadAvatar;
ExternalInterface.addCallback("callSetAvatar", setAvatar);
// Then, this function should be called by JavaScript to load one of the other swfs.
function loadAvatar(indx:Number){
    var url:URLRequest = new URLRequest(movies[0]);
    var ldr:Loader = new Loader();
    ldr.load(url);
    addChild(ldr);
Here is my JavaScript:
<script type="text/javascript">
function callExternalInterface(val) {
          document.getElementById("loader").callSetValue(val);
</script>
Here is my embed code:
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="350" id="loader" name="loader">
<param name="movie" value="loader.swf" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="loader.swf" width="250" height="350">
<param name="allowscriptaccess" value="always" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<a href="#" onClick="callExternalInterface(1)">CLICK</a>

Answer 1

You don't appear to be calling any function in your actionscript.  The names between and within do not agree. 
document.getElementById("loader").callSetValue(val);
should be calling a function identified with the string "callSetValue" in your actionscript, but you only have a function identified with "callSetAvatar"  and the function associated with that on your AS3 side is specified to be setAvatar...
ExternalInterface.addCallback("callSetAvatar", setAvatar);
but you do not have a function named setAvatar, you have one named loadAvatar
Here's a link to a tutorial that might help you to see how the functions are specified between javascript and actionscript using the ExternalInterface class.  It gets confusing so I suggest you copy the code to a word processing file so you can clearly highlight where they have the same language between them.
http://viget.com/inspire/bi-directional-actionscript-javascript-communication