ExteralInterface Tutorial: Calling Fancybox from Flash

7 Apr

So, over the past few days, I’ve been working on a project that requires a fancybox call from flash. WOE. I know, say what? It’s actually a lot easier than you think! So, Check this out… here is how to call fancybox from your AS3 swf.

After the directions… you’ll notice I trying to call a list of images (a gallery). If anyone has achieved that, please feel free to let us all know.

External Interface Tutoral : Zunski Graphics

1. create a button in AS3 (or movieclip)

2. give it an instance name of myButton.

3. In order for fancybox to hear your click, you’ll have to use ExternalInterface to call your js functions from flash.

Sounds like a mouth full, but it’s simple. Just add this to the first frame of your
time line:

 
// IMPORT CLASSES
import flash.external.*;
 
// ADD MOUSE EVENT LISTENER
myButton.addEventListener(MouseEvent.CLICK, myClick);
 
// CREATE FUNCTION
function myClick(e:MouseEvent):void
{
     // CALL YOUR JS FUNCTION HERE IN STRING FORM
     ExternalInterface.call("callFancy");
 
}

4. Now we need to add some code to our HTML document. First, we need
to add a hidden < div > container. So, just above your flash div,
(assuming your using SWFObject — which you should be) add this:

<div id="hidden_clicker" style="display:none;">
        <a class="featured"></a>
</div>

****NOTE : You must call your swfobject.js first… then put in the swf calls, followed by the jquery.min.js, followed by all your fancybox.js scripts. See example for more info ****

5. Now we need to add our JavaScript code. You’ll see the name of
this function is the same as the string we called in flash. Add the
following to your < head > section:

<script type="text/javascript" >
     function callFancy(my_href) {
        var j1 = document.getElementsByClassName("featured");
        j1.href = my_href;
        $('.featured').trigger('click');
     }
</script>

6. OK, now that we are done with that, we still need to define our
fancybox JavaScript — to make it look the way I want… now, this is where I
have questions, but I’ll get to that in a minute. Add this to your
fancybox call. In my case ‘.featured’.

**NOTE – I am calling several different fancybox calls, so I have a
separate .js file with all these calls in it. make sense?

        $(".featured").fancybox({
                'overlayOpacity'        : 0.7,
                'overlayColor'          : '#000',
                'centerOnScroll'                : true,
                'hideOnContentClick'    : true,
                'hideOnOverlayClick'    : true,
                'autoDimensions'        : true,
                'padding'                       : 0,
                'href'                          : 'PUTYOURIMAGEHERE.jpg',
                'title'                                 : 'PUTYOURTITLEHERE',
                'transitionIn'                  : 'fade',
                'transitionOut'                 : 'fade'
        })

7. That’s it.. your done!

Get the SOURCE files here

I hope you find this helpful.

Popularity: 100%

Using Fancybox for a PopUp I know, I...
Video Tutorial :: GAIA Framework Part 1 I’ve had the...
Friday Video of The Day and Flash Iphone Video Tutorial I’ve really been...

Comments 24 Comments
Categories Fancybox, Flash, Tutorials
Author Lance

24 Responses to “ExteralInterface Tutorial: Calling Fancybox from Flash”

sino 10. Apr, 2010 at 1:54 pm #

Thanks for this great post, Im having a hard time getting it to work with IE 8 – any ideas on what i can change or add to make it work with IE? Thanks Again
Zunski 10. Apr, 2010 at 2:39 pm #

I haven’t checked it in IE — i’ll do a full browser check later this afternoon.. and let ya know what’s going on.

Seems like it would have something to do with SWFObjoct… or maybe the CSS. (just off the top of my head)
sino 10. Apr, 2010 at 3:36 pm #

Thanks Zunski, I appreciate your help
Incredulous Seagull 12. Apr, 2010 at 12:07 pm #

This is epic, but I have made a custom gallery using flash, and this only appears to work for 1 element. I need to make it work for approximately 18 elements. Do you have any ideas or work arounds that you have already implemented?
Zunski 12. Apr, 2010 at 12:30 pm #
@Sino – still havent got to the IE thing.. I will be testing this tomorrow though.. just about to that stage on my current project.

@Incredulous – yeah, thats simple… just create different instances of ExternalInterface.call

Like so…
// IN FLASH function myClick(e:MouseEvent):void { // CALL YOUR JS FUNCTION HERE IN STRING FORM ExternalInterface.call("callFancy"); } function myClick2(e:MouseEvent):void { // CALL YOUR JS FUNCTION HERE IN STRING FORM ExternalInterface.call("callFancy_2"); }
then, in your “hiddenClicker” div…
<a class="featured_2"></a>
then in your .js….
<script type="text/javascript" > function callFancy_2(my_href) { var j1 = document.getElementsByClassName("featured_2"); j1.href = my_href; $('.featured').trigger('click'); } </script>
make sense? now. there are plenty of ways to combine each section of your code, but I don’t have time to get into all that… It’s opening day here in St. Louis… GO REDBIRDS!

Essentially you just have to create different instances of the ExternalInterface.call function. and duplicate that over the course of however many times you need a seperate fancybox window click in flash. I hace a gallery as well… and each photo has a different “EI.call” function.

Simple.

Hope that helps.
Zunski 12. Apr, 2010 at 12:32 pm #

& BTW — I just changed my WP theme… I like this better..for now.

EDIT — Just realized its tailgating time.. gotta jet.. so I’m putting the old theme back.. no time to spice this one up.
Incredulous Seagull 14. Apr, 2010 at 9:52 am #

@ zunski, I figured it out that work around about 30 minutes after I asked you, but I hoped there was an easier way! Thanks though!
Zunski 20. Apr, 2010 at 12:30 pm #

Have to be honest here. I haven’t written AS2 in years. So i wont be of much help in that dept.

But if I were you, I’d search adobe labs. When I was researching this I found examples of externalinterface in both AS2 and AS3. Hope that helps.

Lance
Zunski 20. Apr, 2010 at 12:34 pm #

I’m sure there might be an easier faster method. Possibly using a for loop?

Andrew 23. Apr, 2010 at 1:57 pm #

Call your js parameter from flash like so:

 
// IN FLASH
function myClick(e:MouseEvent):void
{
     // CALL YOUR JS FUNCTION HERE IN STRING FORM
     ExternalInterface.call("callFancy", "http:www.google.com");
 
}

(then you can pass strings from xml, etc.)

Zunski 28. Apr, 2010 at 12:13 pm #

@Sino – I am still trying to work the IE thing out. It’s actually a pain the A double S.

I seems that I can’t call any Javascript onClick event currently. I’m working on it.

If you or anyone else have found a solution, please let me know.
sino 05. May, 2010 at 8:53 pm #

Thanks Zunski, for sure, I am also trying to figure it out, If I do, I will def be back to post it. Thanks Again
Lance 07. May, 2010 at 9:19 am #
@Sino –

Ok. I figured out the IE thing. VERY FRUSTRATING. But very simple solution.

1. You should be using swfobject 2. It’s the defacto way to embedd your flash into webpages.

2. You need to give your swfobject a “UNIQUE” id in order for IE to register what your trying to do.

Here is my swfobject for a working example at woodandahammer.com :
var flashvars = {}; var params = {}; params.menu = "false"; params.wmode = "transparent"; params.allowscriptaccess = "always"; var attributes = {}; attributes.id = "flashMovie"; attributes.name = "flashMovie"; swfobject.embedSWF("flash/loadflash.swf", "flasharea", "1000", "485", "9.0.0", "flash/expressInstall.swf", flashvars, params, attributes);
Notice the attributes lines. You MUST add those 2 lines to get IE to recognize this. Also, remember, it needs to be unique. Call it pancakes if you have too.

Hope this helps!

L
sino 11. May, 2010 at 11:21 am #

wow, thanks lance for sharing, Im going to give it a shot, thats a sweet site by the way
Gogne 08. Jun, 2010 at 2:05 pm #

Hi,

I try the Lance’s solution, but it doesn’t work on IE 6+
I dont understand.
Width this method : http://outburst.jloop.com/2009/08/06/call-fancybox-from-flash/

its work on firefox and IE6+ but on IE6+, you just see the link’s contain (= “Hidden Clicker”).. so i don’t understand.

Somebody can help me ? can you show an exemple on internet please ?

thx
Gogne 08. Jun, 2010 at 2:13 pm #
I forgot my example :
http://gargogne.free.fr/sites/carsemotions/liens_vehicule_collection.php

the link (flash) open a div (div id=”#mariage”) with fancybox.

I have in my flash link :
bt.onRelease = function() {getURL("javascript:callFancy('#mariage');");}
and in my fancy function :
function callFancy(my_href) { var j1 = document.getElementById("liencache"); j1.href = my_href; $('#liencache').trigger('click');
thx !!
Christian Louboutin 08. Jun, 2010 at 10:26 pm #

Great article, thank you very much!

Gogne 09. Jun, 2010 at 4:27 pm #

I find the solution :

{getURL(“javascript:callFancy(‘nameofthepage.php#mariage’);”);}

its work on IE6+

Alexey 27. Jun, 2010 at 12:05 pm #

Fancybox from flash. All browsers (end Internet Explorer).

//Actionscript3.
 
import flash.external.*;
myButton1.addEventListener (MouseEvent.CLICK, myClick1);
myButton2.addEventListener (MouseEvent.CLICK, myClick2);
function myClick1 (e:MouseEvent):void
{
ExternalInterface.call ("callFancy1");
objectID:String;
}
myButton1.buttonMode = true;
function myClick2 (e:MouseEvent):void
{
ExternalInterface.call("callFancy2");
objectID:String;
}
myButton2.buttonMode = true;

//HTML.

EI Tutorial

var flashvars = {};
	var params = {};
	params.menu = "false";
	params.scale = "noscale";
	params.allowscriptaccess = "always";
	//wmode = "transparent";
	params.wmode = "opaque";
	var attributes = {};
 
 
   attributes.id = "flashMovie" ;
   attributes. name = "flashMovie" ;
 
	swfobject.embedSWF("myFlash7.swf", "flasharea", "550", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
 
     function callFancy1(my_href) {
        var j1 = $(".featured");
        j1.href = my_href;
        $('.featured').trigger('click');
     }
 
     function callFancy2(my_href) {
        var j1 = $(".featured2");
        j1.href = my_href;
        $('.featured2').trigger('click');
     }

 
        <a href="#" rel="nofollow"></a>
        <a href="#" rel="nofollow"></a>

Sandy-Lee 27. Jul, 2010 at 7:37 am #

Hi,

Was hoping someone could help me… We’re trying to implement this onto our site, but having a little trouble.

Firstly, when i used your swf, all works right, but when copying that into a new file it doesnt do anything. We then converted the movie clip button into an actual button and edited the code to call the external interface on release(including the import) but nothing

The other thing is, we are using it to embed an aspx form which makes a few calls to the server, whenever next is clicked(and a subsequent server call is made), the entire page crashes. Is there something i’m doing wrong?

Sorry i’m a serious newbie here…
Sandy-Lee 27. Jul, 2010 at 8:57 am #

oooooooooooh… got the button working… seems to be a P.E.B.C.A.K problem…

Still sitting with the aspx page issue though.
Dee 30. Jul, 2010 at 1:31 pm #

doesnt work in my localhost
Dee 30. Jul, 2010 at 3:00 pm #

flash file in source file cant opened, what kind flash version that was you use.

ps: sorry my englis is bad ^^;
melanie 04. Aug, 2010 at 4:30 pm #

@Lance

The IE issue with adding the attribute lines and making sure you have SWFObject2 still doesn’t seem to work for me.

Any other suggestions?

ExteralInterface Tutorial: Calling Fancybox from Flash

24 Responses to “ExteralInterface Tutorial: Calling Fancybox from Flash”

Leave a Reply

Most Recent Tweet

Photos on flickr

Important Foundations

My Stuff

Peeps I Dig

Categories