problem using the – character with flash external interface and microsoft internet explorer

Here’s an odd bug that I ran into, hopefully this post will save somebody somewhere a little bit of headscratching.

In my current project I’m using swfobject 2.0 to embed our Flash content. I like the syntax and the open source development of the project, and I don’t mind being patient waiting for the fix dealing with the issue of loading a swf in response to a user javascript event. But I found that I was having a weird problem when trying to use ExternalInterface for Flash-Javascript communication. I could successfully call JavaScript functions from Flash using any browser, however registering for callbacks from JavaScript to Flash was failing in Internet Explorer. I hunted for awhile, and suspected that swfobject was to blame. I was wrong, and it appears to actually be a bug with the ExternalInterface code when registering to respond to Javascript calls. For the impatient, don’t use the dash character “-” in the dom id of your flash element. For those of you interested in a blow-by-blow account, read on.

In my Actionscript code, I was registering a callback to a function which allowed the user to change the background color of an element in my flash movie. So I had the code:

ExternalInterface.addCallback("updateBackgroundColor", updateBackgroundColor);

public function updateBackgroundColor(background_color:uint):void {
     Tweener.addTween(backgroundSprite, {_color:background_color});
}

Which uses Tweener’s most excellent ColorShortcut tween, but I digress.

In my page the object was embedded in the page using the following Javascript:

<div class="flashplayer" id="shout-creator_flash" style="width:214px; height:280px;">This website requires <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash>Flash player</a> 9.0.0 or higher.</div>

<script type="text/javascript">//<![CDATA[

     var flashvars  = {"forwhat": "Test", "is_private": "true"};
     var params     = {"bgcolor": "#FFFFFF", "allowscriptaccess": "always"};
     var attributes = {"name": "shout-creator_swfobject", "id": "shout-creator_swfobject"};

     swfobject.embedSWF('/swfs/shoutcreator/ShoutCreator.swf?1196445820', 'shout-creator_flash', '214', '280', '9.0.0', '/swfs/ExpressInstall.swf?1196229239', flashvars, params, attributes);

//]]></script>

<div id="colortest" onclick="document.getElementById('shoutcreator_swfobject').updateBackgroundColor('0x000000');" style="border: 1px solid black;cursor:pointer;width:214px;">change color to 0x000000</div>

Notice that the name and id of the element is shout-creator_swfobject. Everything was fine and hunky dory in Firefox and Safari, which is great and all, but most of the web audience uses Internet Explorer. My callback wasn’t working in IE and I had one of those tell-tale JS errors showing.

First thing I had to do was configure JS debugging in IE6, which I did by following this excellent tutorial by Jonathan Boutelle. Then in my script debugger console I was seeing the following error:

Microsoft JScript runtime error: 'shout' is undefined

I clicked the ‘Break’ button and could see the following problem line:

__flash__addCallback( shout-creator_swfobject, "updateBackgroundColor");

I removed the - character from the name of the element in my code, changing all references from shout-creator_swfobject to shoutcreator_swfobject and my problem went away.

My theory is that there is some sort of parse error going on somewhere that is breaking up the element id a little too early. We’re using prototype.js and Ruby on Rails, so maybe that has something to do with it. Either way, ditching the - made my problem go away and kept me moving.

5 comments ↓

#1 maliboo on 11.30.07 at 6:08 pm

Have you try to setup ExtInt in interval/timeout?

function setupExtInt()
{
clearInterval(seii);
//ExternalInterface.addCallback(…
//do setup magic here
}
seii = setInterval(setupExtInt, 100);

#2 Marcelo Volmaro on 11.30.07 at 7:23 pm

That’s a problem of the ExternalInterface JS bridge. It’s so badly coded…

That line should read:
__flash__addCallback( document.getElementById(“shout-creator_swfobject”), “updateBackgroundColor”);

And that fixes the problem.

Explorer is not the faulty here… shout-creator_swfobject reads as the following expression “shout – creator_swfobject”.. and of course, shout is not a variable (neither is creator_swfobject, but IE stops when it sees that the first one is null).

#3 Mick on 12.03.07 at 6:42 pm

Hope this helps clarify some things…
http://kb.adobe.com/selfservice/viewContent.do?externalId=4b687833&sliceId=1

#4 Jonathan Boutelle on 02.12.08 at 6:35 pm

Glad my tutorial was useful!

#5 Will on 09.10.08 at 10:23 am

Thanks!

Just to confuse matters further, it appears this is very specific for browser/Flash version. We tested IE6/Flash 9 and it worked fine, but a customer with IE6/Flash 9 hit exactly this issue. The odd thing for us was the “undefined” message referenced a name that was nowhere used, except as the prefix before the dash.

Nice job figuring this out. There’s a number of questions about this I found when Googling– yours was the only site which posted a solution.