Control Javascript > CSS through Flash

Question

Hi All,

Ideal situation/setup: A page containing 1 Flash movie and a separate div containing a few hyperlinks. These hyperlinks each have a unique class name like so: Copy code

  <ul>
  <li><a href="" class="randomname1"></a></li>
  <li><a href="" class="randomname2"></a></li>
  <li><a href="" class="randomname3"></a></li>
  <li><a href="" class="randomname4"></a></li>
  </ul>

The Flash movie itself will contain 4 buttons. Clicking on one of these buttons should make the Flash communicate with Jquery/JS and tell it to highlight the specific classname.

Ideas so far

For the javascript, it would look like

$(function() {
function setClass(className) {$("."+className).css("background","red");}
});

And in specific keyframes within Flash

   1. button 1
   ExternalInterface.call("setClass","randomname1");

   1. button 2
   ExternalInterface.call("setClass","randomname2");

   1. button 3
   ExternalInterface.call("setClass","randomname3");

   1. button 4
   ExternalInterface.call("setClass","randomname4");

The problem is that it is not really working well and i am not sure if i am making Flash communicate with JS properly.

Any ideas or hints to steer me in the right direction again? Thank you in advance

J.

Answer 1

Have you tested for ExternalInterface availability with ExternalInterface.available ?

Answer 2

The setClass method will not be visible to the flash code - as the method is encapsulated inside the $(document).ready() closure

(In case you are wondering, your $(function()... call is simply shorthand to $(document).ready(function()...)

You need to attach the method to the window object or some other globally accessible object for the flash to see it. Something like:

$(function() {
    window.setClass = function(className) {$("."+className).css("background","red");}
});

which is the simplest approach.

...or to stop window namespace pollution:

$(function() {
    var ns = window.myNamespace = {};
    ns.setClass = function(className) {$("."+className).css("background","red");}
});

....then in Flash:

ExternalInterface.call("myNamespace.setClass","randomname1");

....of note however is that I'm not familiar enough with flash to know whether the second example will work.