Lightbox2 & Flash AS3

I use LightBox2 all the time. When I build a gallery on a site, I almost always use LightBox. Light weight, easy to use, and looks great.

How easy? Just download the files form HuddleTogether upload to your server, add a quick snippet to your links and away you go. Works on more than just galleries, you can use it to play movies like Apple.com does, or load whole html pages in the DOM window. Great stuff.

I have never had an issue with it until recently. I recently ran into 2 snags with the program.

  1. XSitePro 2
  2. Adobe Flash CS3 using AS3

The issue with XSP can be overcome with some restriction and I will write about that in a few days. The AS3 issue took 5 hours of Googling and lots of trial and error. I did get it to work, though I am still working on getting the grouping working.

Here is the final result of what I did to get Lightbox2 to work with AS3. Please keep in mind, this is assuming you already have Lightbox installed on your server.

EDIT: It was discovered that you need LightBox V2.03.3 in order for this to work. Revised post here: Lightbox2 & Flash AS3 Redux

Using Adobe Flash CS3, make sure under your Publish Settings you are set to run AS3.

Now add your image thumbnail to your stage and using Convert to Symbol, convert it to a button.

Using your Property Inspector, give the thumbnail and Instance Name.

Add a New Layer to your scene and open the Actions Palette. In the action Palette add the following code.

DaThumb.addEventListener(MouseEvent.CLICK,da_thumb);

function da_thumb(event:MouseEvent):void {
     ExternalInterface.call("Design_Gallery", "your/image/link.jpg", "Design Gallery");
}
  • DaThumb – Instance name of our button
  • da_thumb – Unique event name for our custom action.
  • Design_Gallery – Our Function.
  • your/image/link.jpg – Link to the full size image on your server.
  • Design Gallery – Title of the image (still trying to get this to work).

Publish your movie then open the HTML file your movie will be used on. In the HEAD of the html file we need to add the CSS and JavaScript calls to our LightBox files.

	
   
	
		
	

Once we have the scripts and CSS loaded onto our page we need to set some custom JavaScript to work with our Flash file. Place this code right after the above scripts.


What this does is work with the Action Script we used in our Flash file.

  • function Design Gallery – Our Function we set up
  • href – The link we used
  • title – The title we set
  • rel – The light box call we need.

This will enable our Lightbox JavaScript to work with our Flash AS3 script. The gallery will almost work now. If used, it will not display correctly as Flash, by default, is the top most element on a page. We need to edit our object and embed codes so that the LightBox overlay will appear on top of our Flash movie.

Locate (or add) the wmode tag in your RunContent JavaScript and your Script Access Tag and set them to the following.

'wmode', 'transparent',
'allowScriptAccess','sameDomain',

Then do the same in the object and embed tags.

wmode="transparent"
allowScriptAccess="sameDomain"

Then upload to your server. Should work fine now. You may need to adjust variable to suit your needs, and if you have more than one image then each needs it’s own custom EVENT NAME in order to work. I hope this helps anyone searching for how to do this. I spent 5 hours searching and for some strange reason, nothing worked. I had to take bits of several to make one that works.

Any questions, post them in the comments and I will see what I can do to help answer it. More importantly, if anyone can get the group settings working so I can load multiple images in the same LightBox gallery, please post a comment so I can get it running.

Myles

53 thoughts on “Lightbox2 & Flash AS3

  1. Pete says:

    Hey thanks for all your help….getting this to work has been driving me insane. The problem i’ve been getting is from the code in the action palette. The error reads 1120:access of undefined property (name of button). Thanks for your help in advance!

  2. MrMyles says:

    @Pete: Hey Pete.

    Have you made sure you are running with AS3 and not AS2?

    If so, can you give more info on what you have an have not done? When does the error come up?

  3. Pete says:

    Thanks for responding so quickly. I am using as3 and I get the error when I go to test the flash movie. I put this:

    DaThumb.addEventListener(MouseEvent.CLICK,da_thumb);

    function da_thumb(event:MouseEvent):void {
    ExternalInterface.call(“Design_Gallery”, “your/image/link.jpg”, “Design Gallery”);
    }

    into the actions palette where I need to (exactly the same as above execpt I changed DaThumb to the name of my button) and when I publish or test the movie is when I get a compiling error that I mentioned in the first post.

    I know that the lightbox works outside of flash because I linked to what I wanted to via in the HTML file itself and the lightbox worked fine. My problem is getting the action in as3 to call the scripts in the header the same way I linked to it in HTML.

  4. MrMyles says:

    @Pete: Hey Pete.

    I am just on my way out but will have a reply for you tomorrow. It may be where the action is placed (scene or clip) in comparison to where the button is placed.

  5. Pete says:

    I got the error to go away, but it still doesn’t work. Now the link does nothing. I think the problem is that I am trying to use your solution with videobox. It was modeled off of lightbox2, but still different. I thought I might be able to get it to work with what you posted. Again, I know it works when not used through as3, so the problem is that i need to have something like that custom javascript that you have here but for videobox instead of lightbox. If you feel like taking a look at what videobox is, you can check it out here: http://videobox-lb.sourceforge.net/
    I’m not good with writing javascript, i’m really only able to understand what it does. Maybe you can take a look and hopefully it will be simple to fix.

    I look forward to what you have to say tomorrow and thanks again for the help.

  6. MrMyles says:

    @Pete: What did you do to make the error go away?
    I will check out the VideoBox, possibly today, and see if I can get some results calling it from Flash.

  7. Pete says:

    To get the error to go away I put the action a frame before and for some reason that worked. All my other links worked the way I was using them besides that one. Anyway, thank you so much for your help. It is truly appreciated. I look forward to see your results from videobox

  8. MrMyles says:

    Hey Pete.

    Sorry, swamped here. Can you send me your FLA file so I can look at it?

  9. Pete says:

    No problem. Thanks so much for being so willing to help.

    You can get the FLA file as well as the HTML file here:

    [link removed]

    And you can get the Script files for video box here (the three js files similar to the ones you get with lightbox2)

    [link removed]

    The spot where I am trying to put the action is in the secen “capping” at frame 54.

    I’m still very new to flash, so please bare with the code in the action palette. I’m sure I did many things in a nonsensical way. Let me know if you have any questions.

    Thanks again!

  10. MrMyles says:

    @Pete: Got it.
    I will let you know what I can do.

    I removed the file links after download. No need for everyone to see them 😀

    Myles

  11. MrMyles says:

    @Pete: Hey Pete.

    You did not send me the video, so I cannot test for sure if it works or not, but I found errors in your AS3 code.

    You wrote:

    view.addEventListener(MouseEvent.CLICK,da_thumb);
     
    function da_thumb(event:MouseEvent):void {
         ExternalInterface.call("Design_Gallery('bk.swf','Design Gallery','320','280')");
    }
    

    But it should have been:

    view.addEventListener(MouseEvent.CLICK,da_thumb);
     
    function da_thumb(event:MouseEvent):void {
         ExternalInterface.call("Design_Gallery","bk.swf","Design Gallery","320","280");
    }
    

    Try that ammended code and see if it works. I get no errors with it, but as I said, I did not have the movie to test with.

  12. Pete says:

    I’m sorry, I should have told you that I originally tried to use that code and it didn’t work. The code that I had in there was another one I tried and it failed as well.

    the link for that movie is [link removed] – this is about a 10 min video……so i uploaded a smaller one you can try.

    you can get that here – [link removed] – (this one is only about 15 sec)

    if you dont want to change the actionscript code use the bk.swf file, if you want to use the shorter clip, you just have to change bk.swf to character.mov in the as3 code.

    I really don’t think the problem is with the actionscript code though, I think it is with the custom javascript code in the html file. I only think this because since it was custom for lightbox2 and not videobox, it is probably trying to call the lightbox2 js files and not the videobox ones.

    If you take a look at the code for the 3 js files and 1 css files in the header above the custom javascript code that is there, its called videobox.js, swfobject,js, and mootools.js, and they are located in a folder called js on the server. If you look at the code you have posted in the blog, the three files are prototype.js, scriptaculous.js, and lightbox.js. They are all supposed to be located in a folder called scripts on the server. I don’t know if this affects the javascript you wrote to communicate with flash, but I have a feeling it does.

    Thanks again, I hope that I’m not becoming a nuisance with all of this. I really really appreciate the help.

  13. MrMyles says:

    @Pete: This will take more work than I have time for today.
    The script I used in the document was for LightBox, and it uses the prototype.js which VideoBox does not.
    Which means

    Lightbox.prototype.start(imgLink);
    

    is invalid.

  14. Pete says:

    I figured it would be a problem like that. Do you think you will still be able to help me out with it or will it be too much trouble? I’m not in any real rush to complete this site, its become more of a drive to get this to work more then anything.

  15. MrMyles says:

    @Parker: Hey Parker.
    I removed your file link, and will download it on Monday (if needed). Without looking at your source file, I see 1 problem.
    You do not have the Lightbox scripts installed on your server.

    You need to download them from the link in the OP, then install them on your server in a folder called scripts.

    Do that, then try the site.

  16. Myles says:

    @Parker: No idea why, but for some reason instead of opening your card, it blanks out the screen.
    Note though, your script should be placed on frame four, not frame one as you have in your file. It needs to be placed at the same frame as the button.

    I will let you know what happens later today.

    Myles’s last blog post..YouTied – Logo design

  17. Pete says:

    Hey quick question for you. I was reading your intro blurb about lightbox2 and you mention that it will do video. From what I found in other online forums, I need to use videobox to get a lightbox for video. However, if I could just use lightbox2, I would rather just use that and this way we wouldn’t have to struggle with videobox. Can you confirm that lightbox2 works with video?

  18. MrMyles says:

    @Pete:
    I edited the post. I thought it was LightBox that did video, but it is ThickBox.

    I will give that a shot when I am back in the office on Wednesday.

  19. Pete says:

    Hey,

    Thanks for looking this up. Sorry I’m not getting back to you until now, I was away for a couple days. I’m going to hopefully try it out tomorrow if I have time. I’ll let you know how it goes.

    Pete

  20. Pete says:

    Hello again,

    So I tried the link you sent me and I couldn’t get it to work. Then I found this other site that has been some help.

    http://blog.codefidelity.com/?p=18#comment-46693

    I can get the lightbox to work with a link in the HTML file but not within flash. Maybe you can take a look at it and let me know if what they are saying on the site should work.

    Thanks,
    Pete

  21. MrMyles says:

    @Pete: Hey Pete.

    Code Fidelity is one of the first sites I went to trying to get this to work. But I could not get their method to work either. No idea why. No idea why they use grey text on a black background either, but that is another story.

    I am wondering if this is a hit/miss thing. Every method I tried failed, except the method I wrote above, which I got mostly from trial and error and mashing code together. However it does not work for everyone, much like all the other sites codes I tried. They worked for them, but not me.

    I am going to create a new file later this week, and will enable LightBox on it. If it works in the new file, I will make a video on it as well as publish the file and example source file for people to use.

    Myles’s last blog post..Health & Fitness E-cover Graphics

  22. Pete says:

    Hey I was just wondering if you had any luck with the new file. Hope all is well.

    Pete

  23. rio says:

    Hi. I have been trying but just can’t get it work. can you give me a hand?
    here is a test site with action script.

  24. MrMyles says:

    @rio: Hi Rio.

    Thanks for the reply. I just did it on a second project and had success. So early next week (Monday) I am going to make a follow up post to this, and it will include a video and example file. I cannot see anything different in the above steps from what I have been doing with success, so I do not know why it would not work for you. Check back on Monday for the new post.

    Thanks

    Myles

  25. rio says:

    hey Myles.
    Thanks for checking it out for me. i decided to solve this with as2, which seem to work with me.
    I will be looking forward to your next post.

    Do you think it has anything to do with my lightbox ver? i use Lightbox v2.04.

    Thanks.

    rio

  26. MrMyles says:

    @rio: Rio, you just cracked it.

    My original files I used above, were using Lightbox v2.03.3 and it worked without issue. However in test files like yours, it would not work. I created a new test file, with the latest LightBox and I could not get it to work.

    But when you suggested the version, I imediately opened and compared current and past LightBox scripts and they are drastically different.

    So I replaced them with the 2.03.3 files and it worked fine.
    You can see my test file here:
    http://canadabymotorcycle.ca/creative/blog/LightBoxFlash/

    Post, video and source coming soon.

  27. rio says:

    Oh great. It works. finally it works.!!

    now i can move to next job.

    Thanks so much for your help.

    rio

  28. Thiago says:

    Hello. I’m trying to use this function with flash but it doesn’t work. The code in flash is very simple and, calling the function directly from the html file, doesn’t work also. Where I’m getting wrong?

  29. MrMyles says:

    @Thiago: Need more info. Are you using AS2 or 3? Which version of LightBox are you using? Got a link to where it is being used?

  30. Thiago says:

    Hello MrMyles. Thanks for the quick reply.

    I’m using AS3 and LightBox 2. Here’s a link to the page: http://thiagosaife.com/adriana_paiva/teste/
    It’s just test with the button. Actually, the page itself cannot call the function. Look at the code of this page:

    Untitled Document

    "function Design_Gallery(url) {
    	var imgLink = document.createElement('a');
    	imgLink.setAttribute('href', url);
    	imgLink.setAttribute('title', 'Design Gallery');
    	imgLink.setAttribute('rel','lightbox','[Design Gallery]');
    	Lightbox.prototype.start(imgLink);
    }
    Design_Gallery('1.jpg');
    
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','550','height','400','src','teste','quality','high','pluginspage','wmode','transparent','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','teste','allowScriptAccess','sameDomain'); //end AC code
     
      
      
      
      <param name="allowScriptAccess" value="sameDomain"
      

    Note that i’m calling the function inside the page, passing the parameter url. The real function of my page won’t be like this. The flash will call the lightbox function.

  31. MrMyles says:

    @Thiago: Hi.

    Not sure I follow.

    1) Why do you have:

    Design_Gallery(‘1.jpg’);

    2) What do you mean by the real function of the page won’t be like this?

    Rather than trying to do it differently first, it is better to create it as needed. Instead of adding or altering the code. Get it running, then try and alter it.

    You show what you did in the HTML file, but not in you Flash file. I need to know what codes you used in the Flash file.

    Thanks

    Myles

  32. Thiago says:

    Hi MrMyles.

    Here’s the as code:
    thumb_btn.addEventListener(MouseEvent.CLICK, abre);

    var req:URLRequest = new URLRequest();
    req.url = “1.jpg”;

    var imagem:String = req.url;

    function abre(evt:MouseEvent):void {
    ExternalInterface.call(“Design_Gallery”, imagem);
    }

    Thanks

  33. Thiago says:

    I’m using this imagem variable because, in the real application, I will change it’s value everytime i click in a diferent image.

  34. MrMyles says:

    @Thiago: Since your method is different than what I have done, I cannot say why it does not work.
    Send me the FLA file (email is on the right side of the page) and I will look it over and see what I can do.

    Myles

  35. Thiago says:

    How can i attach a file into your contact form? Anyway, i’ll upload the file and sendo you the link to download the fla.

    Thanks

  36. Jon says:

    use this code for the javascript, it will include the title for the image

    
    function Design_Gallery(url, ttl) {
    var imgLink = document.createElement('a');
    imgLink.setAttribute('href', url);
    imgLink.setAttribute('title', ttl);
    imgLink.setAttribute('rel','lightbox','[Design Gallery]');
    Lightbox.prototype.start(imgLink);
     
    }
    
    
  37. Andrew says:

    Hi MrMyles,

    I have been reading your thread and I’m still confused on how to use lightbox in Flash (i’m using cs4)

    *Do you have to have your website uploaded to see lightbox working or does it work when testing in flash?
    *also where do the bigger images go for lightbox as my thumb nails go in the flash file?

    Please HELP!!
    Cheers

  38. MrMyles says:

    Hi Andrew.

    See the revised tutorial here: http://canadabymotorcycle.ca/creative/blog/2009/01/07/lightbox2-flash-as3-redux/

    There is a sample file there, and a demo of it here:
    http://canadabymotorcycle.ca/creative/blog/LightBoxFlash/

    The thumbnails are in your Flash file, but the large images need to be on your server. You are direct linking to the images.

    DaThumb.addEventListener(MouseEvent.CLICK,da_thumb);
    function da_thumb(event:MouseEvent):void {
    	trace("test");
    	ExternalInterface.call("Design_Gallery", "your/image/link.jpg", "Membership Card");
    }
    

    Myles

  39. Andrew says:

    Thanks for getting back so quickly!! gd tutorial but i’m using actionscript2.0.

    can u also answer my 2questions plz.

    hope u can help

  40. MrMyles says:

    Hi Andrew.

    This is for AS3, not AS2. There are plenty of other tutorials for AS2 that work (and are easier) but this is just for AS3.

    As I said, large images are stored on the server not in Flash.

    PReview will not work, as you need to add code to the HTML file for the Lightbox effect. the Preview, does not allow you to edit the HTML file, as it creates it on the fly.

  41. Andrew says:

    Soz I didnt see that below the link.

    K thats what I wanted to know as no one has said that anywhere.

    do you know any gd ones *AS2 tutorials,vid wud be gr8 =)

    also I want to put a caption underneath the picture and then have that next to go through other images.

  42. Essan says:

    Hej man, your tutorials is amazing, and i realy need to understand everything, but unfortunately i’m not, cuz i’m new on this thing.

    So i’m wondering, what do you mean with “Make sure u have lightbox installed in ur server”, and “Locate (or add) the wmode tag in your RunContent JavaScript and your Script Access Tag and set them to the following.”.. Can please explain a little bit, would be very nice of you, thanx!

  43. MrMyles says:

    Hi.

    Lightbox is a script that resides on your server. You need to download it, configure it and upload it to your server. Once there, test it in a plain HTML file to ensure everything works. Instructions for this are provided with the Lightbox download.

    The wmode tag is in the javascript for your Flash file. Setting it to Transparent allows whatever is below the Flash file to appear.

    You should read and follow the update to this tutorial though.
    http://canadabymotorcycle.ca/creative/blog/lightbox2-flash-as3-redux/

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.