jquery flash externalinterface

Question

I'm a quiet despaired by now.

I'm trying like many others here to get the externalinterface thing to work with my page. It doesn't matter what I do or how I change the code in a correct way, I'm always getting the 'has no method' report from firefox or chrome!

I'm trying to trigger the play-function within Flash with a 'play'-link in HTML via jQuery. I can't figure out, what goes wrong!

AS3.0 in Flash CS6 (playing the sound file - no problem inside Flash, plays fine):

import flash.external.ExternalInterface;

ExternalInterface.addCallback("playMusicJS", playMusic);

function playMusic(evt:MouseEvent):void {
  soundChannel.stop();
  soundChannel = sound.play();
  soundTimer.start(); // volume levels and time
  INSTPlayPause.gotoAndStop(2);
  soundChannel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
  INSTPlayPause.INSTPauseBTN.addEventListener(MouseEvent.CLICK, pauseMusic);
}

Javascript (jQuery):

$(document).ready(function() {
  $('#play').click(function() {
    // var flash = document.getElementById("ASPlayer"); // tried as well - no luck
    var flash = $('#ASPlayer').get(0)
    flash.playMusicJS();
    alert("TEST");
  });
});

and HTML:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="30"     id="ASPlayer" title="Player">
  <param name="movie" value="../_flash/TEST -ExternalInterface-.swf">
  <param name="quality" value="high">
  <param name="wmode" value="opaque">
  <param name="swfversion" value="11.0.0.0">
  <param name="expressinstall" value="../_flash/expressInstall.swf">
  <param name="allowScriptAccess" value="always" />
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="../_flash/TEST -ExternalInterface-.swf" width="350" height="30" id="ASPlayer" title="Player">
    <!--<![endif]-->
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="swfversion" value="11.0.0.0">
    <param name="expressinstall" value="../_flash/expressInstall.swf">
    <param name="allowScriptAccess" value="always" />
    <!-- -->
    <embed src="../_flash/TEST -ExternalInterface-.swf" width="350" height="30" name="ASPlayer" quality="high" wmode="opaque" >
    <!-- -->
    <div>
      <p>Content on this page requires a newer version of Adobe Flash Player.</p>
      <p><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" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<p><a href="#" id="play">play</a></p>
</body>
<script type="text/javascript" src="TEST.js"></script>
</html>

I thought it might a DOM loading order problem, I tried a lot of combinations in which order to call the function or where in the document to put the files, but no luck either!

I checked most entries by other users concerning that problem as well and tried them, but still didn't work! I appreciate any ideas or hints :)!

Best wishes from Berlin, Germany!

Answer 1

1. Be sure your script is being pulled into the page, one way to check is by using the 'sources' tab in the Chrome Debugger/FireFox Firebug and searching for the file.

2. Be sure that you've included the script after you've included jQuery, as it is most certainly dependant upon that.

3. Make sure that you only have included a single jQuery library. Including multiple versions can cause problems.

4. If there is some other library which is overridding $, so your code is not working because $ is not an alias for jQuery anymore. You can use jQuery.noConflict() to avoid conflicts with other libraries on the page which use the same variable $.