14 Oct
Opening a ThickBox iframe from Flash
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:
[code lang="actionscript"]
import flash.external.ExternalInterface;
Button.onRelease = function(){
ExternalInterface.call(”tb_show” , null ,”page.html?KeepThis=true&TB_iframe=true&height=150&width=150″ , false);
}
[/code]
If that doesn’t make sense to you, you need to see how ThickBox is launched with HTML originally:
[code lang="html"]
Click Here
[/code]
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 by Hugo on 14.10.07 at 5:00 pm
Hi there, I tried to implement your code but got no success… nothing happens, is it complete?
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
Hi,
Yea, it is complete… Can you show me your page and your code?
Posted by Hugo on 14.10.07 at 5:00 pm
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!
Posted by Hugo on 14.10.07 at 5:00 pm
Hmmm… sorry, I think I’ve messed up your page width
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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.
Posted by Hugo on 14.10.07 at 5:00 pm
Man… no success here =(
I`ve uploaded it: http://www.dmndesign.com.br/cal/teste_thickbox.html
Thanks in advance!
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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.
Posted by Hugo on 14.10.07 at 5:00 pm
Oooops, dude, sorry, forgot to upload the .js files… it’s ok now, the html works but the flash does not…
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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);
}
Posted by Hugo on 14.10.07 at 5:00 pm
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!
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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/
Posted by Hugo on 14.10.07 at 5:00 pm
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!
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
Hey, cool. Did it work in the end? =]
Posted by jason on 14.10.07 at 5:00 pm
Help! The html works but it wont work from flash
Posted by jason on 14.10.07 at 5:00 pm
the button seems to be calling a function that triggers the error: “undefined”
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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?
Posted by jason on 14.10.07 at 5:00 pm
Can you please help me with the flash file. I have really need this project for Monday/
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
sure, email it to me at darksuiyoken[at]gmail[dot]com
Posted by jason on 14.10.07 at 5:00 pm
I emailed you the flash file. Thank You!
Posted by jack on 14.10.07 at 5:00 pm
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!
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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/
Posted by Qbic on 14.10.07 at 5:00 pm
great solution
Posted by Jeff Phillips on 14.10.07 at 5:00 pm
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!
Posted by jerang on 14.10.07 at 5:00 pm
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.
Posted by Markc on 14.10.07 at 5:00 pm
I’ve got this working in IE6, Firefox and Safari but can’t get it working in Opera - any ideas?
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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!
Posted by Max on 14.10.07 at 5:00 pm
Hey, you helped me a lot. Thanks!
Posted by Brandon on 14.10.07 at 5:00 pm
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
Posted by tristen on 14.10.07 at 5:00 pm
I know this is an older post but it would be nice if your example worked!
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
Did you look at the newer post?
http://designfission.com/blog/2007/10/21/followup-opening-a-thickbox-iframe-in-flash/
Posted by Chris Homan on 14.10.07 at 5:00 pm
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
Posted by DarkSuiyoken on 14.10.07 at 5:00 pm
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.
Posted by George on 14.10.07 at 5:00 pm
Simply Excellent Post
Posted by kppmbbwpuj on 14.10.07 at 5:00 pm
lGVBav afjsokjjewil, [url=http://mzmgjmeuiwoy.com/]mzmgjmeuiwoy[/url], [link=http://wzanriwvqccc.com/]wzanriwvqccc[/link], http://lgrgfszslhhf.com/
Posted by ricmetal on 14.10.07 at 5:00 pm
thanks for that
Posted by Chris on 14.10.07 at 5:00 pm
Thanks alot for this!
worked just fine, the .fla file was real handy!
keep it up!
Posted by Paul on 14.10.07 at 5:00 pm
This worked perfectly! Thank you very much.