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. =)
Hi there, I tried to implement your code but got no success… nothing happens, is it complete?
Hi,
Yea, it is complete… Can you show me your page and your code?
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!
Hmmm… sorry, I think I’ve messed up your page width
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.
Man… no success here =(
I`ve uploaded it: http://www.dmndesign.com.br/cal/teste_thickbox.html
Thanks in advance!
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.
Oooops, dude, sorry, forgot to upload the .js files… it’s ok now, the html works but the flash does not…
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);
}
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!
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/
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!
Hey, cool. Did it work in the end? =]
Help! The html works but it wont work from flash
the button seems to be calling a function that triggers the error: “undefined”
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?
Can you please help me with the flash file. I have really need this project for Monday/
sure, email it to me at darksuiyoken[at]gmail[dot]com
I emailed you the flash file. Thank You!
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!
hi jack,
you can get the source files from my this post:
http://designfission.com/blog/2007/10/21/followup-opening-a-thickbox-iframe-in-flash/
great solution
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!
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.
I’ve got this working in IE6, Firefox and Safari but can’t get it working in Opera – any ideas?
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!
Hey, you helped me a lot. Thanks!
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
I know this is an older post but it would be nice if your example worked!
Did you look at the newer post?
http://designfission.com/blog/2007/10/21/followup-opening-a-thickbox-iframe-in-flash/
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
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.
Simply Excellent Post
lGVBav afjsokjjewil, [url=http://mzmgjmeuiwoy.com/]mzmgjmeuiwoy[/url], [link=http://wzanriwvqccc.com/]wzanriwvqccc[/link], http://lgrgfszslhhf.com/
thanks for that
Thanks alot for this!
worked just fine, the .fla file was real handy!
keep it up!
This worked perfectly! Thank you very much.
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.
Sorry, forgot to post a link to my site:
http://www.internationalgamecard.com/sample.php
Test on all browsers and notice the difference
Thanks
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
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);
}
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!
This has been so helpful.. excellent job Edwin.. Two thumbs way UP!!!!
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.
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/
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
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.
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.