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.
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.
L
Popularity: 100%
@zunskigraphics
