ExternalInterface.call?

[Petteri_Paananen]

Hi!

I´m trying to trigger javascript based fancybox modal window from SWF, by clicking a flash button.. I managed to trigger it easily from html but not from SWF...

A link that opens modal window in html looks like this:

<li><a id="various3" href="http://google.ca">Iframe</a></li>

I suppose it points to this part of javascript:

            $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

I have tried to use ExternalInterface.call in my flash file but with no luck, I tried following actionscript:

import flash.external.ExternalInterface;

btn.addEventListener(MouseEvent.CLICK, fancybox);

function fancybox(event:MouseEvent):void{
ExternalInterface.call("various3");

}

Anyone has any exprerience about this... or some other similar library for creating modal windows....

[VarioPegged]

You're trying to call an element with id various3 through jQuery. That won't work. Create a Javascript function that then in turn creates the fancybox.

Try something like:

(Javascript snippet)

function createFancyBox() {

     $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

}

and in Flash:

import flash.external.ExternalInterface;

btn.addEventListener(MouseEvent.CLICK, fancybox);

function fancybox(event:MouseEvent):void{

     if (ExternalInterace.available)
          ExternalInterface.call("createFancyBox");

}

[Petteri_Paananen]

Thanks for a quick response...=)

Could you clarify what that Javascript snippet means. Should I save that code as a separate .js file and refer it in html code or may I put it directly inside the html code? Like this:

  <script type="text/javascript"> 
    function createFancyBox() {

     $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

}
   
      </script>

[VarioPegged]

Yes you can save the Javascript code directly on the HTML page like you show.

If you're going to use it on multiple pages, then it may be simpler to have it in a separate .js file and link to it from the HTML pages requiring it. Note then that the jQuery $("#various3") targets an element with id="various3", so you'd have to have that element on every page where you want this code to work.

BTW, I see I have a typo in the Flash code...should be:

if (ExternalInterface.available)

ts

[Petteri_Paananen]

ok, I´ll try that later today... let see how it works... thanks for your help...

[Petteri_Paananen]

Noup, nothing happens. I even uploaded my test files to server for avoiding Flash local playback security issue which may influence to this...

I also realize that I don´t give the actual URL/href anywhere. With original call in html, it was directly inside a call... in this case, it´s nowhere...

[VarioPegged]

Do you have all the necessary jQuery and fancybox files in place? In your original code you show href="http://google.ca". That should be part of the various3 element in your HTML page.

Post the relevant code of your HTML page.

You could start troubleshooting by making the Javascript function as simple as possible:

function createFancyBox() {

     alert("createFancyBox function was called successfully!");

}

Your browser should pop up an alert dialog box when you click the button in Flash.

ts

[Petteri_Paananen]

Simple alert worked perfectly, so I guess my button is calling javascript function correctly... whole html looks like this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>test</title>
    <meta name="Author" content="xxxxxxxxx">
   
    <script type="text/javascript" src="_js/swfobject.js"></script>
    <script type="text/javascript" src="_js/swfaddress.js"></script>
   
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
     <link rel="stylesheet" href="style.css" />

<script type="text/javascript" >
    
     function createFancyBox() {

     $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

}
        
</script>

<script type="text/javascript">
        $(document).ready(function() {
            /*
            *   Examples - images
            */

            $("a#example1").fancybox({
                'titleShow'        : false
            });

            $("a#example2").fancybox({
                'titleShow'        : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'elastic'
            });

            $("a#example3").fancybox({
                'titleShow'        : false,
                'transitionIn'    : 'none',
                'transitionOut'    : 'none'
            });

            $("a#example4").fancybox();

            $("a#example5").fancybox({
                'titlePosition'    : 'inside'
            });

            $("a#example6").fancybox({
                'titlePosition'    : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'titlePosition'     : 'over',
                'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'        : 'inside',
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

            $("#various4").fancybox({
                'padding'            : 0,
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });
        });
    </script>

<style type="text/css">
<!--
@charset "UTF-8";
/* CSS Document */

  html {
        height: 100%;
   
        font-family:Arial, Helvetica, sans-serif;
    }
   
    #flashcontent {
        height: 100%;
    }
   
    #headingBox{
        background-color:#888888;
        font-family:Arial, Helvetica, sans-serif;
        color:#FFFFFF;
        padding:5px;
        padding-right:300px;
        font-size:10px;
    }
   
    a:link{
        color:#7e1ee0;
    }
   
    a:visited{
        color:#7e1ee0;
    }
   
    a:hover{
        color:#000000;
    }
   
    h2{
        margin:0px;
        margin-bottom:5px;
    }
   
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color:#FFFFFF;
    }
   
    p{
        line-height:12px;
    }
   
    #nav{
        float:right;
        background-color:#7e1ee0;
        font-family:Arial, Helvetica, sans-serif;
        color:#FFFFFF;
        padding:5px;
        font-size:10px;
    }
   
    #nav a:link{
        color:#ffffff;
        text-decoration:none;
    }
   
    #nav a:visited{
        color:#ffffff;
        text-decoration:none;
    }
   
    #nav a:hover{
        color:#000000;
        text-decoration:none;
    }

-->
</style></head>

    <body>
   
<div id="hidden_clicker" style="display:none;">
        <a class="#various3"></a>
</div>
 
<div align="center" id="flashcontent">
            <strong>You need to upgrade your Flash Player.</strong>
        </div>
       <param name="movie" value="test.swf" />
       <param name="allowfullscreen" value="true" />
       <param name="scale" value="showall" />

        <script type="text/javascript">
            var so = new SWFObject("test.swf", "test", "100%", "100%", "9", "#FFFFFF");
       
            so.addParam("scale", "showall");       
            so.addParam("wmode", "transparent");
        so.addParam("AllowScriptAccess", "always");
        so.addParam("AllowFullScreen", "true");
   
            so.write("flashcontent");

        </script>

       
    </body>
</html>

[VarioPegged · Accepted solution]

Again for troubleshooting, I'd suggest to first simplify to a single element that you want to place in the fancybox. Get rid of all the examples in the script tags and use only one. Also, make sure you understand the difference between the "class" and "id" attributes when referring to the HTML elements within jQuery. I've changed the code to trigger the fancybox instead of creating a new instance, so try the following (it works fine for me).

<script type="text/javascript">

        $(document).ready(function() {

         $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

     });

      function createFancyBox() {

               $("#various3").trigger('click');

      }

</script>

Then in your HTML:

<a id="various3" href="http://www.google.com"></a>

This should pop up a fancybox as iframe containing google from the Flash button you clicked.

ts

[Petteri_Paananen]

Thanks a lot! It worked... you are my hero....=)

Would it be easy to improve it so that URL would come from flash as well? as a parameter? I can live with this one too, but that would be more flexible in case where I have several different links to open.....

[VarioPegged]

You're welcome.

You could pass the URL to createFancyBox() from within Flash, but please know that this is a big security risk if you don't have 100% control of the creation of the SWF.

In Flash:

function fancybox(event:MouseEvent):void{
     if (ExternalInterface.available)
          ExternalInterface.call("createFancyBox", "http://www.google.com");
}

and the Javascript:

function createFancyBox(url) {
     
     //do your url validation here, just in case
     //perhaps against a whitelist of URLs
     
     var isUrlValid = false;

     switch(url) {
          case "http://www.google.com":
               isUrlValid = true;
               break;
          case "http://www.mysite.com":
               isUrlValid = true;
               break;
          default:
     }     

      if (isUrlValid) {
          $("#various3").attr("href", url);
          $("#various3").trigger('click');
     } else {
          alert("Invalid parameter!");
     }
}

    

and then the HTML:

<a id="various3"></a>

ts

[Petteri_Paananen]

This is truly great, I can´t thank you enough...=)

Do you know anything about calling javascript in Fullscreen mode. My SWF has a fullscreen feature that user may trigger. It seems that these externalInterface.calls don´t work if they have been triggered while flash is in fullscreen mode. Is there anything I can do about it or is it just Flash Player security setting?

[VarioPegged]

@ Petteri_Paananen & @Chris Gannon

No problem. Glad that worked for you.

@ Petteri_Paananen

I don't think what you're trying to do will work. Viewing the Flash content in FullScreen mode places it above everything else on the screen, even above the containing browser window. Therefore you won't be able to view overlay content that is generated by the browser (like FancyBox or even a simple Javascript alert) when in FullScreen mode.

ts

[Petteri_Paananen]

That´s what I thought too... it´s no problem, I can live without fullscreen, everything else works now and that´s more than enough, thanks again.

[Chris Gannon]

This really helped me - thanks alot!