DesignFission

Flash, Web, Javascript and everything else

Posted on by Edwin


If you don't know what is ThickBox, check it out here: http://jquery.com/demo/thickbox/

That's some nice way to present content on your site right? Anyway, I've been playing around with ThickBox for quite some time now, and a recent project required me to call up a ThickBox iframe from within Flash itself.

As the documentation on the site only provided HTML help on how to implement ThickBox, I had to look for a way to do this myself. A search on Google yielded a few complicated ways to do this, which I did not think was effective since they involved writing of new Javascript functions. Then, I found this article which describes how to do almost exactly what I wanted - but, it requires a writing of a new function. And, it is opening an image, and not an iframe.

With what I learnt from the article, I went to take a look at ThickBox's code. Thanks to their neat comments, I understood how the functions work after a few minutes, and I implemented what I learnt from the article (which is how to use ExternalInterface) to do exactly what I wanted.

The idea is to call the Javascript function that launches a iFrame ThickBox from thickbox.js. The function name is actually tb_show, with 3 parameters that you can pass in, namely, the caption, url and imageGroup. Obviously, what I need to pass in here is the URL.

Therefore, with the ExternalInterface, this is the code I need to put into Flash:

import flash.external.ExternalInterface;
Button.onRelease = function(){
ExternalInterface.call("tb_show" , null ,"page.html?KeepThis=true&TB_iframe=true&height=150&width=150" , false);
}

If that doesn't make sense to you, you need to see how ThickBox is launched with HTML originally:

<a href="page.html?KeepThis=true&TB_iframe=true&height=150&width=150" class="thickbox"> Click Here </a>

You can see that it requires the a tag to have a "thickbox" class. Which is why you can't just use a getURL in Flash.

I hope this helps people out there. =)

Posted on by Edwin | Posted in Flash


About Edwin

I do code.

50 Responses to Opening a ThickBox iframe from Flash

  1. Hugo says:


    Hi there, I tried to implement your code but got no success… nothing happens, is it complete?


  2. DarkSuiyoken says:


    Hi,

    Yea, it is complete… Can you show me your page and your code?


  3. Hugo says:


    Ok, here is the actionscript (it’s a 1 frame movie, just for testing purposes), and the code is in timeline:

    import flash.external.ExternalInterface;
    Botao.onRelease = function() {
    ExternalInterface.call(“tb_show”, “teste”, “teste.html?KeepThis=true&TB_iframe=true&height=150&width=150″, false);
    };

    Now the html file:

    teste_thickbox

    `

    @import “Scripts/thickbox.css”;



    AC_FL_RunContent( ‘codebase’,'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0′,’width’,’400′,’height’,’400′,’id’,'teste_thickbox’,'align’,'middle’,'src’,'teste_thickbox’,'quality’,'high’,'bgcolor’,'#66ccff’,'name’,'teste_thickbox’,'allowscriptaccess’,'sameDomain’,'pluginspage’,'http://www.macromedia.com/go/getflashplayer’,'wmode’,'transparent’,'movie’,'teste_thickbox’ ); //end AC code

     
    Example 1

    Please notice that the html code (www.google… etc) does work!

    Nothing happens when I click the flash button =( Am I doing anything wrong? Thanks in advance!


  4. Hugo says:


    Hmmm… sorry, I think I’ve messed up your page width


  5. DarkSuiyoken says:


    It’s ok, lol.

    Try using swfObject to load in your swf.

    And for the ExternalInterface calling, try to replace your “teste” to null instead. I’m not exactly sure what that argument does, but I didnt need it.

    It’ll also help if you set up this on your server and link me to it, so I can take a look.


  6. Hugo says:


    Man… no success here =(

    I`ve uploaded it: http://www.dmndesign.com.br/cal/teste_thickbox.html

    Thanks in advance!


  7. DarkSuiyoken says:


    Hey,

    For me, the HTML link didn’t work too..

    I noticed that the JS files aren’t in the directory where you linked them to be. They should be in a folder called “Scripts” where your html page is.


  8. Hugo says:


    Oooops, dude, sorry, forgot to upload the .js files… it’s ok now, the html works but the flash does not… :(


  9. DarkSuiyoken says:


    Hey Hugo,

    It’s actually working for me, you do not have the teste.html file right? That’s why it’s showing a page not found error within the iframe. Try changing your code to the following to see if Google loads up fine instead. =]

    import flash.external.ExternalInterface;
    Botao.onRelease = function(){
    ExternalInterface.call(“tb_show” , null ,“http://www.google.com/?keepThis=true&TB_iframe=true&height=500&width=770? , false);
    }


  10. Hugo says:


    Dude, I’ve tested with urls, files, everything… It was not working, I really dunno why. Maybe a typo somewhere?

    Well, thank you very much, I feel bad about wasting your time, so thank you very much once again.

    PS: http://www.dmndesign.com.br/cal/ is the project I’m working on, just to let you know =) Thanks!


  11. DarkSuiyoken says:


    Pretty sleek work there.

    Don’t worry about me wasting my time. =] I’m not too sure if this method of mine works 100% for everyone too, so I wanna know what will make it not work, and what it needs to work.

    Have you tried to embed your flash with swfObject instead?

    http://blog.deconcept.com/swfobject/


  12. Hugo says:


    Man, thank you very much once again. I’ve been working on that project, when it’s complete I’ll show ya ;) PS: email is gtalk too, in case you want it! Cya!


  13. DarkSuiyoken says:


    Hey, cool. Did it work in the end? =]


  14. jason says:


    Help! The html works but it wont work from flash


  15. jason says:


    the button seems to be calling a function that triggers the error: “undefined”


  16. DarkSuiyoken says:


    Hmm the undefined should be from another part of your script that used a trace command.

    Are you using Flash 8? Publishing with Flash 8?


  17. jason says:


    Can you please help me with the flash file. I have really need this project for Monday/


  18. DarkSuiyoken says:


    sure, email it to me at darksuiyoken[at]gmail[dot]com


  19. jason says:


    I emailed you the flash file. Thank You!


  20. jack says:


    Hello,

    My thickbox wont open.

    I have a i frame long movie and in one layer i have:

    import flash.external.ExternalInterface;
    but1.onRelease = function(){
    ExternalInterface.call(“tb_show” , null ,”next.html?KeepThis=true&TB_iframe=true&height=150&width=150″ , false);
    }

    in the other layer i have a button called but1.

    what did i do wrong? do u have a online example somewhere?

    thanks!


  21. Qbic says:


    great solution ;)


  22. Jeff Phillips says:


    You’re awesome buddy! Thanks a million. Works like a charm. I would have worked on this forever maybe if you hadn’t taken the few minutes to blog your findings. I googled “call thickbox from flash” and you were #2, (just below the article you mention in your post =).

    I’ll pass on the good karma as best I can!


  23. jerang says:


    Thanks for the great article. For those who have flash embeded in HTML and are having trouble with iframe interference, just add wmode=transparent as an attribute and paramater.


  24. Markc says:


    I’ve got this working in IE6, Firefox and Safari but can’t get it working in Opera – any ideas?


  25. DarkSuiyoken says:


    hi mark,

    I don’t really have the time to make it work for Opera right now. If you ever find a solution, do share it here! ;)


  26. Max says:


    Hey, you helped me a lot. Thanks!


  27. Brandon says:


    Hi,

    I am actually trying to do the same thing with my website–call thickbox from a flash movie, but I am having no luck. The HTML thickbox links work great, but I cant get the links to work from the flash movies.

    Is there anyway you could personally help me (by phone or email), and I would be willing to pay you for your time. If so, please send me an email.

    Thanks,
    Brandon


  28. tristen says:


    I know this is an older post but it would be nice if your example worked!


  29. Chris Homan says:


    Hey There,

    I came across this thread, and was hoping someone could help, im going crazy! I’ve been developing a site with jQuery tabs, innerfade, and swfObject, with much success. My plan was to integrate thickbox for the individual images, but for some reason, i can’t even get thickbox to kick in. The browser just goes right to the image in a new window. I know it’s something silly, could anyone help me out? I’ve worked with lightbox quite a bit, but even that wouldn’t work when i tried integrating it onto the page. Right now i’m just testing on one page, the first thumbnail (phoenix adult), that should definitely be doing some thickbox magic…have a look at the code…

    http://dev.creativehinge.com/portfolio_temp.php


  30. DarkSuiyoken says:


    Hi Chris,

    My post is about opening a thickbox frame from flash, but your site is actually purely Thickbox with HTML/CSS. Perhaps you should look on the ThickBox community for help for this.


  31. George says:


    Simply Excellent Post


  32. kppmbbwpuj says:


    lGVBav afjsokjjewil, [url=http://mzmgjmeuiwoy.com/]mzmgjmeuiwoy[/url], [link=http://wzanriwvqccc.com/]wzanriwvqccc[/link], http://lgrgfszslhhf.com/


  33. ricmetal says:


    thanks for that


  34. Chris says:


    Thanks alot for this!

    worked just fine, the .fla file was real handy!
    keep it up!


  35. Paul says:


    This worked perfectly! Thank you very much.


  36. Nando says:


    Any chance I can still get some help with this issue?
    I have it working on Safari and Firefox but will not work on IE.
    Here is what I have from Flash:

    ExternalInterface.call(“tb_show”,”Sample Game”,link+”?&keepThis=true&TB_iframe=true&height=550&width=375″,false);

    Where “link” is a variable that holds the link value pulled from an XML document. I also omitted the “null” parameter because when I added it just won’t work on ANY of the browsers..go figure.

    Again, this works on FF and Safari but IE gives me a- ‘null’ is null or not an object – error.

    Any help would be greatly appreciated.


  37. Nando says:


    Sorry, forgot to post a link to my site:

    http://www.internationalgamecard.com/sample.php

    Test on all browsers and notice the difference

    Thanks


  38. Nicole says:


    Hi, great script, but how do I use it on multiple areas/buttons. I have a map that I want to have modals popup on click on different countries.

    Thankss


  39. Edwin says:


    Hi Nicole,

    Depending on what you want the popup to show, all you need to do is to create the content in the popup as different HTML files and then reuse this function.

    For example:
    Button.onRelease = function(){
    ExternalInterface.call(“tb_show” , null ,”page.html?KeepThis=true&TB_iframe=true&height=150&width=150? , false);
    }
    Button2.onRelease = function(){
    ExternalInterface.call(“tb_show” , null ,”page2.html?KeepThis=true&TB_iframe=true&height=150&width=150? , false);
    }


  40. Edwin says:


    I’ve wrote a new tutorial to support ColorBox instead of ThickBox as the latter is no longer supported.

    http://bit.ly/aUcUjL

    Hope this will help someone here. Cheers!


  41. Erick says:


    This has been so helpful.. excellent job Edwin.. Two thumbs way UP!!!!


  42. Rizvi says:


    hey Edwin how are you and how is going your work? Edwin i am in a problem from last couple of week, i am trying to make a link between flash animated button and lightbox but still i am facing problem in it.

    so can you help me out if i give you complete information.


  43. Edwin says:


    Hi Rizvi, I’m sorry but I’ve been really swamped with work recently. This is just a wild guess, but you’re looking at a old post of mine. Can you check out this newer one? http://www.designfission.com/blog/2010/09/19/opening-a-colorbox-in-flash/


  44. Rizvi says:


    Hi Edi, thank’s for your reply. Edi the problem is that i have done the coding in flash, html and also in scripts. each and every thing is working fine, when i click my flash button the lightbox appear but the thing is that inside the lightbox i am trying to load another html page. i am still trying for that and i have check the coding and link as well, when i put the image it’s work perfectly but when i try to call html page it does not work.

    So can you help me out, or can you give any suggestion related to that.
    Thanks


  45. Rizvi says:


    Hey edi are you there? edi i am in a problem pls edi help me out. you can help me because you know flash very well. pls try to reply me as soon as you can.


  46. Edwin says:


    Hi Riz, I’m sorry but I am just too swamped with other work to help you out here. Please read the link I referred you to as that should solve your problem.


  47. Rebbeca Billops says:


    I really like the style and structure of this site? Are you able to let me know which wp design your using or is that this something you might have developed from scratch?


  48. Edwin says:


    I did this myself actually. :)


Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>