Recent Posts

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Lightbox2 & Flash AS3 Redux

Back in October I was building a Flash site and it required the use of a gallery. Since I almost always use LightBox for galleries, I wanted to do the same for this site. Problem is, I could not get LightBox to work with Flash AS3.

I search all over for a solution, but none would work. I ended up getting it to work using a variety of methods, and subsequently wrote a blog post detailing how I did it. Original post it here.

However, not everyone who read that post could get it to work. And when I tried to recreate the file, I could not do it. My original file worked, but new files would not.

A commentator named Rio questioned if the LightBox version may be the issue. And after checking into it, I found it was the issue. My original file used LightBox version 2.03.3 but my new files were using 2.04.

Comparing source code it appears the new version is quite different from previous versions. So I simply used my original LightBox files and sure enough, everything fell into place and works fine now.

I made some slight changes to the codes, by adding a Trace to the Flash file to ensure the button was working, and I slightly altered the JavaScript.

See it in action here.

Download the Source File here.

Here are the revised instructions using LighBox 2.03.3 and Flash AS3:

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.

1
2
3
4
5
DaThumb.addEventListener(MouseEvent.CLICK,da_thumb);
function da_thumb(event:MouseEvent):void {
	trace("test");
	ExternalInterface.call("Design_Gallery", "your/image/link.jpg", "Membership Card");
}
  • DaThumb – Instance name of our button
  • da_thumb – Unique event name for our custom action.
  • _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 and JavaScript calls to our LightBox files.

    17
    18
    19
    20
    
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    	<script src="js/prototype.js" type="text/javascript"><!--mce:0--></script>
    	<script src="js/scriptaculous.js?load=effects" type="text/javascript"><!--mce:1--></script>
    	<script src="js/lightbox.js" type="text/javascript"><!--mce:2--></script>

    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.

    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    
    <script type="text/javascript"></script><script type="text/javascript">
    function Design_Gallery(url,caption) {
    var imgLink = document.createElement('a');
    imgLink.setAttribute('href', url);
    imgLink.setAttribute('title', caption);
    imgLink.setAttribute('rel','lightbox', '[design]');
    Lightbox.prototype.start(imgLink);
     
    }
    </script>

    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"

    Here is a quick video showing where the codes etc were added.

    95 Comments »

    95 Responses to “Lightbox2 & Flash AS3 Redux”

    1. rio

      This is easy to understand. Now, i can get it work fine.
      Thanks for your help.

      rio


    2. Slake

      For some reason my lightbox works in Chrome, and firefox but not IE. I get “script error” in IE.

      Any help would be appreciated, and aside from that.. great work.


    3. MrMyles

      @Slake: Hey Slake. Can you post a link to your test site so I can see the error?


    4. Slake

      http://www.stevemocrae.com/studio/

      It’s very unfinished so basically once it loads click “Web Development” then click the one thumbnail that pops up. It works fine in chrome, but not IE. Thanks in advance.


    5. Slake

      And apparently my flash isnt even loading in IE now.. sigh. I’ll see if I can fix that.


    6. MrMyles

      @Slake: I must have checked it as you were working on it. First time around it did not load in FF, but then refresh and it was good to go.

      Checked in IE, and it loads but with errors and it does not load the LightBox.

      I notice you use an abbreviated embed/object code. I would suggest using the full embed code for the Flash file. You can see full code on the example page i set up.

      Your also not loading the ActiveRunContent script. That needs to be loaded in order to load Flash the way you are.

      <script language="javascript">AC_FL_RunContent = 0;</script>
      <script src="AC_RunActiveContent.js" language="javascript"></script>

      See if that helps.


    7. Slake

      Okay, so you completely solved not only the lightbox problem, but another problem I was having. You are awesome, and thank you!

      Now, I don’t mean to drift off topic, but if your willing I am having a few issues with the new embed code. I’m sure it’s just few little tweaks, but I’m having some trouble with it. The lightbox now works in IE, but I can’t get the flash itself to center anymore. Also, the flash no longer shows in chrome (and I assume FF) at all. Again, I’m sure it’s just the embed code but if you could have another quick peak, I would really appreciate it.

      Thanks again regardless, you helped a ton!

      Slake


    8. Winnipeg Web Design

      @Slake: Glad to help. Centering is not working because of your styles.
      You have

      	background-position: top;
      	margin-top;
          margin-left: 0px;
      	margin: 0px;

      It is missing a # for the top margin, and if you set the left to 0, it will stick everything to the left. Remove the left margin.
      Then wrap the Flash file in a dive with a center alignment.

      The top margin is important to have a # there, if you use it. If no number, it will invalidate all styles. So either give it a number, or remove the call.

      Your style is also trying to call a background image, but the image is not found on the server. At least not where it is looking for it.

      Fix your style issue and test again to see if it works.

      Winnipeg Web Design’s last blog post..Willy Cruz & The Big Dub Style Sound


    9. Slake

      Everything is now working great, thank you SO much! Great work.


    10. MrMyles

      Good to hear!


    11. Slake

      Hi, yeah it’s me again.

      Is it possible to set this Lightbox up in flash with imagesets, as seen on the lightbox2 site? I have it working fine with a single image.

      http://www.stevemocrae.com/studio – Click on Web Development, then click Steve Mocrae.

      Thanks.


    12. MrMyles

      @Slake: Technically, it should be possible. But I have yet to be able to do it. The gallery I used it on, has 11 images, so I would like to use the gallery function. But I have tried numerous things, none have worked.

      If you, or anyone else, can figure that out, I would love to know.


    13. "Yeti"

      @MrMyles

      I’m not sure if you have seen this person’s post, but he doesn’t use Actionscript 3, so I have been having trouble with the image sets myself. Maybe it’ll help you, maybe it won’t. Hopefully it’ll help, so I can read hear and see how to implement it too. 😀

      http://blog.codefidelity.com/?p=18


    14. "Yeti"

      @MrMyles

      I’m not sure if you have seen this person’s post, but he doesn’t use Actionscript 3 (as he uses “getURL”), so I have been having trouble with the image sets myself. Maybe it’ll help you, maybe it won’t. Hopefully it’ll help, so I can read hear and see how to implement it too. 😀

      http://blog.codefidelity.com/?p=18


    15. "Yeti"

      @MrMyles: Ah crap, I don’t know if you got the post or not, here I’m re-posting.

      Anyways, this person gets the imagesets to work, but he doesn’t use actionscript 3 (he uses “getURL”). I’ve been having trouble getting it to work. Hopefully you can tweak it somehow. Looking forward to your solution.

      http://blog.codefidelity.com/?p=18


    16. MrMyles

      @“Yeti”: They are using AS2, and a different method to call LB. I used AS3 and had to use a different method as the AS2 method does not work in AS3. The site I was building, needed AS3 for other parts, so I had no choice but to go that route and find a way to do it in AS3.

      If you do not need to use AS3 for anything in your Flash file, use AS2, and the method they illustrate. As it certainly does work and is easier to do (I think). But if you need to use AS3, you will need to use the method I outlined.

      As I said though, I tried numerous possibilities, including the ones at CodeFidelity. And hacked versions of what they did mixed with what I did. Got no love from any attempt, so I just stick with 1 image at a time.

      Thanks for the tip though.


    17. "Yeti"

      @MrMyles: I apologize for the double post earlier.

      Well, the fla I have requires AS3, so I’m in your same position (with less skill, haha). Thanks for responding back. I’m still searching the net for a solution for the multiple images. If I happen upon it, I’ll let you know. Thanks.


    18. Slake

      Hello again!

      I’ve been redoing my portfolio stuff, but I’m having a problem. The LB works fine. However, my flash site is not visible in the background. Any help would be great.

      To view, go to http://www.stevemocrae.com/studio and click on “Web Development” then any of the projects in there.

      Thanks,
      Slake


    19. President

      pff, i’m getting stuck into thiss

      “builder” is not defined – error


    20. MrMyles

      @Slake: Nice site Slake. Now that you mention it, yeah the overlay is not transparent. Hmmmm, wonder why?


    21. MrMyles

      @President: Can you give more info? AS2 or AS3? What code did you use? When does the error pop up?


    22. President

      @MrMyles:

      AS3..

      i can click correctly (trace), but there is no “lightbox” appearing..

      error @ line 133.. line 133 says
      if (versionStr == -1 ) { //ln 133
      return false;
      }

      President’s last blog post..Autodelen stijgt in populariteit


    23. MrMyles

      @President: When do you get that error? On the HTML page, or in Flash?


    24. President

      in debug screen @ IE

      President’s last blog post..Autodelen stijgt in populariteit


    25. MrMyles

      @President: Got a link?


    26. MrMyles

      @President: You have the wrong version of Light box. As shown in the post, you need 2.03.3 but you are using 2.04. Downgrade your script and it will work.


    27. President

      THX, that will now work..

      [edit] bad luck 🙁
      the img wouldn’t load.. must i have “relative” path’s or absolute?

      “ExternalInterface.call(“Design_Gallery”, “/sponsorlogos/absoluut.jpg”, “Membership Card”);”
      or
      “ExternalInterface.call(“Design_Gallery”, “http://www.minirock.be/dink/sponsorlogos/absoluut.jpg”, “Membership Card”);”

      President’s last blog post..Autodelen stijgt in populariteit


    28. MrMyles

      @President: I use relative, but no reason direct would not work. Just make sure the image is where you say it is in Flash.


    29. Slake

      Hey Myles,

      I’ve re routed my site to http://www.e7studios.com/ but I still have not fixed my situation. I notice on the example file used here, the flash in the background disappears as well.

      If we could work on correcting this somehow, I’d be very happy. 🙂

      Slake


    30. christina

      Thank you soo much for this tutorial…..I’ve been pulling my hair trying to figure this out from tutorials that have only used Lightbox in AS2.

      Questions,

      1. If I am generating links and images from an XML file through Flash, what would I need to add for this to work?
      2. How can I change the blue background color and make it transparent?

      Thanks again for all your help!


    31. MrMyles

      Hi Christina
      The blue background can be changed in the CSS file to any colour you need. But I have yet to get the transparent overlay to work. I have tried dozens of things, none works. So I have just settled for it as is. Not as nice as it could be, but close enough. I would love to hear if anyone has been able to crack that overlay issue though.

      I am unsure of what to do when loading from XML files. I have not had a need to try this yet. Though I have an upcoming project that might need me to do it, but that is not for some time yet, and may not be needed either.

      Thanks

      Myles


    32. Michael

      Re: The blue color

      Go to the lightbox.css file (css -> lightbox.css) and find the settings for “background-color”.

      In the source files you make available on this site it has a value set to: “00467e”

      That’s where the blue overlay is coming from.

      Reset that value to “000” and it should work fine. Alternately, you can just download ‘clean’ lightbox files from the developer’s site.


    33. MrMyles

      Thanks.

      Changing the colour is easy, no question. It is the transparency of the colour that is an issue. The Flash file underneath the overlay is not visible.

      Yes, download clean code, just make sure you have the right version, as new versions do not work with this.


    34. Michael

      Actually it is transparent, or translucent… At least on my half-arsed test it was.

      I wasn’t sure until I added a link to a jpeg in my html so that it appeared below the swf on the Webpage when it loaded. When the grey background came up, the jpg was visible underneath the lightbox effect.

      The problem (if there is one) seems to be with the swf file. When the lightbox effect initiates, it seems to remove the swf file from the stage.

      Of course it comes back when the lightbox effect is ‘removed’ so it’s not that catastrophic. Not sure what the fix is for that though.

      Great piece of code though. Thanks.


    35. Nirali

      Great code indeed…i had been trying to figure this out since about 8-10 hours and only this post really helped me do this with AS3. 🙂 …I am going to work on loading the images from xml ; hence will let you know soon.

      Thanks again


    36. MrMyles

      Thanks. Please do let me know how XML loading goes. Certainly would be a good idea to do that to ease site updates.

      Myles


    37. Nirali

      Hi all,

      The transparent background worked for me when i used the .js files from “http://www.huddletogether.com/projects/lightbox2/” and included lightbox++….i don’t know why though:)…


    38. Nirali

      I have 1 issue i need to discuss. I need to use 2 kinds of lightboxes in my website. Say one with white boundary and the other with black. Will i need to replicate all the lightbox files??


    39. MrMyles

      Hi Nirali

      I have never thought of doing that, in Flash or otherwise. Not sure it is possible.

      Any reason you need to do it that way?


    40. Jarno

      Hi,

      I downloaded the source files and opened the index.html. But when I click the image in the index it won’t start lightbox. I checked the version of lightbox and it’s: v2.03.3 so that is ok. I’m using firefox on a mac. The demo on top of this page is working fine.

      Am I doing something wrong?


    41. Jarno

      o, i found out that when i upload the files that is does work. Why isn’t it working on my hard disk?


    42. MrMyles

      @Jarno: Hi Jarno.

      In the sample, when loading locally, Flash will give security errors. It is due to the way the images are direct linked to my site.

      You can edit the files to link to your own local images and not get the error.

      Thanks

      Myles
      .-= MrMyles´s last blog ..Cash Flow Liens – XSP to WordPress =-.


    43. Âvalanche

      Hi Mr Myles,
      TY for this Tutorial,
      I figured out the Transparent overlay.

      I added :
      [code]
      background-color:#ffffff;
      border:1px solid black;
      /* for IE */
      filter:alpha(opacity=60);
      /* CSS3 standard */
      opacity:0.6;
      [/code]

      to the lightbox.css, “#overlay” part.

      here’s the test page:
      http://zendik.org/test/

      I have a Question, maybe you can help?
      when Lightbox is on top of my page,
      I can’t figure out why the “CloseX” button at the bottom is Missing, I’ve changed the lightbox.css but that didn’t do anything…?
      any Ideas?

      ThankYou again for this Tutorial.
      Âvalanche


    44. MrMyles

      @Âvalanche: Cool Site!

      Checking your sample, IT WORKS! Thank-you. Going to go back to my files and test it out, thanks!

      For the close button, it is not on your server. It is looking for the button here:
      http://zendik.org/images/close.gif
      .-= MrMyles´s last blog ..Cash Flow Liens – XSP to WordPress =-.


    45. MrMyles

      @Âvalanche: Are you sure it is not completely hiding the Flash? Load more into your Flash movie or border it in Flash, then have it open a smaller image and see if you can still see your Flash file.

      In mine, I can still see the background, the Flash file is still covered though.


    46. Âvalanche

      MyMyles-
      Yes your right the Flash is being Hidden.
      I’m sorry about that.

      http://zendik.org/test/

      Âvalanche


    47. MrMyles

      No problem. I really thought that was it when I saw your site.


    48. Âvalanche

      HI Again MrMyles,
      I’ve been creating an AS3 XML gallery and using LightBox to showcase the Images, I’ve been using your codes, and Scripts as a Starting point.
      I got flash to call LightBox but I’m not sure why LightBox can’t find the Images.

      Here’s the URL: http://zendik.org/test/indexXML1.html

      I’m not sure if its the AS in Flash or Your LightBox Script or Your Html Codes, that I need to Modify.

      If you have some Time can you take a Look at this AS3 Code?

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      163
      164
      165
      166
      167
      168
      169
      170
      171
      
      import fl.controls.ProgressBar;
      import flash.net.URLRequest;
      import flash.net.navigateToURL;
      import fl.transitions.Tween;
      import fl.transitions.easing.*;
      import fl.transitions.TweenEvent;
      import gs.TweenMax;
       
      var columns:Number;
      var my_x:Number;
      var my_y:Number;
      var my_thumb_width:Number;
      var my_thumb_height:Number;
      var my_images:XMLList;
      var my_total:Number;
       
       
      var container_mc:MovieClip;
      var preloaders_mc:MovieClip;
       
       
      var x_counter:Number = 0;
      var y_counter:Number = 0;
       
      var my_tweens:Array = [];
      var container_mc_tween:Tween;
      var full_tween:Tween;
       
      var myXMLLoader:URLLoader = new URLLoader();
      myXMLLoader.load(new URLRequest("revGallery.xml"));
      myXMLLoader.addEventListener(Event.COMPLETE, processXML);
       
      function processXML(e:Event):void {
      	var myXML:XML = new XML(e.target.data);
       
      	columns = myXML.@COLUMNS;
      	my_x = myXML.@XPOSITION;
      	my_y = myXML.@YPOSITION;
      	my_thumb_width = myXML.@WIDTH;
      	my_thumb_height = myXML.@HEIGHT;
      	my_images = myXML.IMAGE;
      	my_total = my_images.length();
       
      	createContainer();
      	callThumbs();
       
      	myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
      	myXMLLoader = null;
      }
       
      function createContainer():void {
      	container_mc = new MovieClip();
      	container_mc.x = my_x;
      	container_mc.y = my_y;
      	addChild(container_mc);
       
      	container_mc.addEventListener(MouseEvent.CLICK, callFull);
      	container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
      	container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
      	container_mc.buttonMode = true;
       
      	preloaders_mc = new MovieClip();
      	preloaders_mc.x = container_mc.x;
      	preloaders_mc.y = container_mc.y;
      	addChild(preloaders_mc);
      }
       
      function callThumbs():void {
      	for (var i:Number = 0; i &lt; my_total; i++) {
       
      		var thumb_url = my_images[i].@THUMB;
       
      		var thumb_loader = new Loader();
       
      		thumb_loader.load(new URLRequest(thumb_url));
      		thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
       
      		thumb_loader.name = i;
       
      		thumb_loader.x = (my_thumb_width+10)*x_counter;
      		thumb_loader.y = (my_thumb_height+10)*y_counter;
       
      		if (x_counter+1 &lt; columns) {
      			x_counter++;
      		} else {
      			x_counter = 0;
      			y_counter++;
      		}
      		var preloader_pb:ProgressBar = new ProgressBar();
      		preloader_pb.source = thumb_loader.contentLoaderInfo;
      		preloader_pb.x = thumb_loader.x;
      		preloader_pb.y = thumb_loader.y;
      		preloader_pb.width = my_thumb_width;
      		preloader_pb.height = my_thumb_height;
      		preloaders_mc.addChild(preloader_pb);
       
      		preloader_pb.addEventListener(Event.COMPLETE, donePb);
      	}
       
      }
       
      function thumbLoaded(e:Event):void {
      	var my_thumb:Loader = Loader(e.target.loader);
      	container_mc.addChild(my_thumb);
       
      	my_tweens[Number(my_thumb.name)]=new Tween(my_thumb, &quot;alpha&quot;, Strong.easeIn, 0,1,1, true);
      	TweenMax.to(my_thumb, 1, {colorMatrixFilter:{colorize:0x000000, amount:0.35, saturation:0}});
      	TweenMax.to(my_thumb, 1, {dropShadowFilter:{color:0x000000, alpha:0.35, blurx:25, blury:25, alpha:0.35, distance:2}});
      	my_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbLoaded);
      }
       
      function callFull(e:MouseEvent):void
      {
      	var URLReq:URLRequest = new URLRequest (my_images[e.target.name].@FULL);
      	try{
      		 ExternalInterface.call(&quot;Design_Gallery&quot;,&quot;URLReq&quot;);
      	}catch (e:Error){
      		trace(e);
      	}
      }
       
      function donePb(e:Event):void {
      	var my_pb:ProgressBar = ProgressBar(e.target);
      	preloaders_mc.removeChild(my_pb);
      	my_pb.removeEventListener(Event.COMPLETE, donePb);
      }
       
      function tweenFinished(e:TweenEvent):void {
      	var my_loader:Loader = Loader (e.target.obj);
      	my_loader.unload();
       
       
      	container_mc.addEventListener(MouseEvent.CLICK, callFull);
      	container_mc.buttonMode = true;
      	container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
      	container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
       
      	var my_tween:Tween = Tween(e.target);
      	my_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
      }
      function onOver(e:MouseEvent):void {
      	var my_thumb:Loader = Loader(e.target);
      	TweenMax.to(my_thumb, 0.45, {colorMatrixFilter:{colorize:0x000000, amount:0, saturation:1}});
      }
       
      function onOut(e:MouseEvent):void {
      	var my_thumb:Loader = Loader (e.target);
      	TweenMax.to(my_thumb, 1, {colorMatrixFilter:{colorize:0x000000, amount:0.35, saturation:0}});
      }
       
       
       root.addEventListener(MouseEvent.MOUSE_MOVE,f);
      var t:Timer=new Timer(5,0);
      t.addEventListener(TimerEvent.TIMER,moveF);
       
      function f(e:MouseEvent) {
          t.stop();
          t.start();
      }
       
      var speed:Number = .20;
       
      function moveF(e:TimerEvent) {
          container_mc.y=speed*container_mc.y+(1-speed)*(500-container_mc.height)*root.mouseY/500;
       
          if (Math.abs(container_mc.y-(500-container_mc.height)*root.mouseY/500)&lt;1){
              container_mc.y = ((500-container_mc.height)*root.mouseY/500);
          }
       
          e.updateAfterEvent();
      }

      Here’s what my .xml Looks Like:

      ThankYou for your Time
      Âvalanche


    49. Âvalanche

      Here what the .xml looks like:

      …P.S….”Im not sure why this didn’t post with the other codes”

      Âvalanche


    50. MrMyles

      @Âvalanche Sorry man, did not see you posted again. I’ve never done an XML gallery so I cannot say for sure, and I am only guessing here. LightBox is activated, so that part appears correct.

      My guess is the XML file with the image locations. Try using direct links for the images instead of relative links.

      Then if that works, you know your AS3 is correct, and the XML is correct, there is just an issue with the XML locating the images.


    51. bunnyface

      i would really like some help with this . . i cant seem to make the image pop up and appear. these are the files im using ! and im going crazy ! !
      http://www.magdalenabrown.com/Lightbox/VLB_FLA_TEST


    52. MrMyles

      @bunnyface Watch where your scripts are.

      You are trying to load them from an engine folder, but you put them in a js folder.

      You have :

      8
      9
      10
      11
      
      <link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
      	<script src="engine/js/prototype.js" type="text/javascript"><!--mce:0--></script>
      	<script src="engine/js/scriptaculous.js?load=effects" type="text/javascript"><!--mce:1--></script>
      	<script src="engine/js/lightbox.js" type="text/javascript"><!--mce:2--></script>

      You should have:

      8
      9
      10
      11
      
      <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
      	<script src="js/prototype.js" type="text/javascript"></script>
      	<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
      	<script src="js/lightbox.js" type="text/javascript"></script>

    53. bunnyface

      Hey MrMyles,
      Thanks for helping me out –
      I had it that way originally because thats how lightbox had set it up, it had the js folder in a engine folder. Any how i have changed it like you suggested and its still not working. * confused*
      im sure its something simple im not doing correctly, i just cant figure out what ! 🙁
      is there maybe somthing wrong with my flash file? ive been over it 20 times !


    54. bunnyface

      – and in fact on further examination, im sure its the flash movie, i used the exact code used in the demo, i simply replaced the .swf file. and it still wont work. so i must be doing something wrong there. 🙁


    55. Myles

      You are not using Lightbox V2.03.3 as instructed. You are using Lightbox Slideshow V1.

      Different script, with different coding. I have never used that version so I cannot comment on it.

      But if you use the same scripts as the tutorial, it will work.
      .-= Myles´s last blog ..Cash Flow Liens – XSP to WordPress =-.


    56. bunnyface

      ok just for the record im feeling really blond right now. in my defense i know nothing about this.- but its nice that is changing. thanks. 🙂


    57. bunnyface

      ok this is still not working, i have the correct version of lightbox
      ( http://webscripts.softpedia.com/scriptDownload/Lightbox-JS-Download-23560.html)
      and i have followed through the flash instructions-

      added the correct code, and this is still not working. im pulling my hair out here-
      not sure where im going so wrong.

      http://www.magdalenabrown.com/Lightbox/VLB_TEST_3/

      I even just downloaded ur example file, and changed the .swf file and edited the code a bit . and i still cant make it happen. 🙁


    58. bunnyface

      and after more pulling this apart, i even tried to use the downloaded example, but simply replacing the “membership-card.png”, and changing the code in flash to fit, and its still not working.. i dont mean to be annoying, i promise if i can get this working i will go away .. lol ..


    59. MrMyles

      http://www.magdalenabrown.com/Lightbox/VLB_TEST_3/test_2.html

      Works fine, though you need to link the script images (close/load).
      http://screencast.com/t/yUBaenzm


    60. bunnyface

      ok so it seems it works when its uploaded to the internet , but not when its stored local on my mac. weird on my part there. you said i need to link the script images (close/load). ? not sure what you mean?


    61. MrMyles

      Yes, it never works when loading locally, security issues in Flash. You should get a security warning when you load the file locally, and it will prevent the functions.

      You are loading the script images from../images, but should only be using images/ as the images folder is in the same directory as the Flash file.

      Edit the JS file to have the correct image location.

      var fileLoadingImage = "images/loading.gif";		
      var fileBottomNavCloseImage = "images/close.gif";

      and

      <img src="images/loading.gif"/>
      <img src="images/close.gif"/>

    62. bunnyface

      ooooh i get it now – thank you soo much for taking the time to help with this ! ! this is the best thing ever !


    63. Myles

      Glad to help.


    64. bunnyface

      … .. * blush* one last question… is there any possible way to do this in AS2. It looks like me and AS3- are not good friends.


    65. Myles

      @bunnyface Yes, there are many tutuorials covering LightBox and Flash using AS2.

      Try this one: http://blog.codefidelity.com/?p=18

      Or Google for many more.

      Getting LightBox to open from Flash is pretty easy when using AS2. AS3 is the tricky one.
      .-= Myles´s last blog ..Cash Flow Liens – XSP to WordPress =-.


    66. bunnyface

      Hi There Myles,

      i realise at this point this is waaaaay beyond being ur problem, ( this isnt even a question about your tutorial in particular) but it seems im having serious trouble making things work. The tutorial link you sent me is quite simple enough to follow, but for some reason it just wont make the light box appear. ive spent weeks trying to make light box work, and im feeling really stupid . –
      if at any point you get a chance and could look at my link, if anything stands out as to why this is not working like it should i would love to hear.

      http://magdalenabrown.com/Lightbox/BOX/box2.html


    67. Myles

      Unless I am not seeing it, you do not have your lightbox scripts installed in that file.

      Add the lightbox scripts and css files to the HTML mthen try it.
      .-= Myles´s last blog ..Cash Flow Liens – XSP to WordPress =-.


    68. bunnyface

      so thats what is confusing me, – what is the code i am meant to be putting into the html doc.

      It has this in it already ….

      function LightboxDelegate(url,caption) {
      var objLink = document.createElement(‘a’);
      objLink.setAttribute(‘href’,url);
      objLink.setAttribute(‘rel’,’lightbox’);
      objLink.setAttribute(‘title’,caption);
      Lightbox.prototype.start(objLink);
      }

      and even when i add …… ( as shown in http://magdalenabrown.com/Lightbox/BOX/box3.html )



      . . .

      it still does not appear to work.

      Am i meant to be adding them this way or another way ?

      – Thank you for your help 🙂


    69. bunnyface

      *sorry for second post, code disappears when i add it to this text box *
      so thats what is confusing me, – what is the code i am meant to be putting into the html doc.

      It has this in it already ….

      *
      function LightboxDelegate(url,caption) {
      var objLink = document.createElement(‘a’);
      objLink.setAttribute(‘href’,url);
      objLink.setAttribute(‘rel’,’lightbox’);
      objLink.setAttribute(‘title’,caption);
      Lightbox.prototype.start(objLink);
      }
      *

      and even when i add …… ( as shown in http://magdalenabrown.com/Lightbox/BOX/box3.html )

      *

      *

      it still does not appear to work.

      Am i meant to be adding them this way or another way ?

      – Thank you for your help 🙂


    70. bunnyface

      *sorry for second post, code disappears when i add it to this text box *
      so thats what is confusing me, – what is the code i am meant to be putting into the html doc.

      It has this in it already ….

      script type=”text/javascript”>
      function LightboxDelegate(url,caption) {
      var objLink = document.createElement(‘a’);
      objLink.setAttribute(‘href’,url);
      objLink.setAttribute(‘rel’,’lightbox’);
      objLink.setAttribute(‘title’,caption);
      Lightbox.prototype.start(objLink);
      }


      </script

      it still does not appear to work.

      Am i meant to be adding them this way or another way ?

      – Thank you for your help 🙂


    71. Myles

      Your only adding a small snippet of the code needed to actuvate LB from Flash, but your not actually loading any of the LB files in the HEAD of your document.

      1
      2
      3
      4
      5
      
      <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
       
      	<script src="js/prototype.js" type="text/javascript"></script>
      	<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
      	<script src="js/lightbox++.js" type="text/javascript"></script>

      .-= Myles´s last blog ..Cash Flow Liens – XSP to WordPress =-.

      Your only adding a small snippet of the code needed to actuvate LB from Flash, but your not actually loading any of the LB files in the HEAD of your document.


    72. Ernie

      IT WORKED!!! YOUR THE MAN!!!

      SO DID ANYONE FIGURE OUT IF THE GALLERY FEATURE IS POSSIBLE OR ALSO VIDEO???

      Please hit me up 🙂

      THANKS SOOO MUCH!!!


    73. MrMyles

      Glad it worked.
      No, as far as I know the gallery has not been solved.
      Video is not possible with LightBox, only ThickBox or one of the other overlay flavours.


    74. Ernie

      Thanks for writing back!

      Do you think it is possible to use ThinkBox using the same script you have here?

      Or would it be totally different?


    75. Essan

      Hej again, thanks for replying my message, and i am still trying to fix it. But why doesnt your source file work in PC? The MACOSX file..


    76. MrMyles

      The OSX files are hidden systems files the Mac Archiver throws in there. Delete them and use the files NOT in the OSX folder.


    77. Essan

      Okey, thanks very much. Now i remembered that my website is in AS2, not AS#.. That’s why it doesnt work..


    78. Karim

      Hi MrMyles it worked but i wanna know how can i add more images:

      ExternalInterface.call(“Design_Gallery”, “images/image-1.jpg”, “Picture 1”);

      I want more then one:D

      Thanks ALLOTTT!!!


    79. MrMyles

      As do I. I would love to get the gallery function working, but nothing I tried works with galleries. Just single images.


    80. Karim

      whaha I thought you would not respond because of the time went by, i also have the transparacy problem and can’t get it to work:( i will post the galery problem on FlashFocus maybe they know the answer.

      Thanks alott also for the quick responding.


    81. MrMyles

      If you can use AS2, it will work.
      If you find a solution to do the gallery in AS3, please post back here as I would love to know.


    82. Karim

      but i build the whole site in AS3, is it then still possible?


    83. MrMyles

      Like I said before, I cannot get the gallery function to work in AS3. It might be possible, but I have yet to do it. If you do find a solution though, I would be interested in knowing what it is.


    84. Karim

      No i mean i build the website in as3 is it possible to make a as2 script in as3? and i will post the answer if i know it offcourse:D


    85. MrMyles

      No. If you are using AS3, you need to use AS3 scripts. If you are building a full site in Flash, you should have single files for each “page”. So each page has it’s own Flash file. Then on your gallery page, use AS2 instead of AS3 (unless you need AS3).

      If everything your doing requires AS3, then you cannot use AS2 scripts. Need to stick with one.


    86. Karim

      Yes everything is in as3 so i wanna stick with that i posted on two forums the question about the gallery, now just hope!


    87. David Puerto

      I am using this code in my portfolio. I am executing the Lightbox from Piecemaker2 and it’s AS3, it was simple to implement and write the function for the AS3 in piecemaker but I’m having trouble launching the image. I know it has to do with the path… I think because of the caption piece… I tried to remove it but Idk what’s the deal. If anyone would like to work with me on developing a solution for this to work with the XML and gallery please email me.


    88. MrMyles

      Hey David.

      Cool site. Like the Flash banner. Is that where you are using LightBox? If so, looks like it works, but I see nowhere you need a gallery.
      I have never heard of Piecemaker2.


    89. canaan77

      Hi guys!

      I have followed the guide and I think the most of it is working now:).

      When I finally insert my swf file (the buttonthumbnails made in Flash that will open Lightbox) in Dreamweaver and click on the thumbnail the Lightbox viewer pops up.
      So far so good. But at the end of the guide I am told to locate (or add) the wmode and script access tag in my RunContent JavaScript.
      The problem is that I don’t get this Runcontent Javascript in my html code when i insert the swf file.

      So I can’t find the ‘allowScriptAccess’,’sameDomain’ anywhere.

      Maybe I’m doing something wrong? Probably, because I’m a novice at Flash:O.

      So how and where should I add the wmode and script access tag when I don’t get this RunContent Javascript?

      Maybe I’m doing something wrong when it comes to the swf file?
      Maybe I’m not supposed to just drag it into the index.html (body tag in Dreamweaver)?
      But if not, how can I link to my swf file?

      This is the code after I have inserted my swf file in the body tag:


      <!–

      Content on this page requires a newer version of Adobe Flash Player.

      <!–

      I would be very grateful for some help:).

      /canaan77


    90. canaan77

      Ooops…it seem that my code in my last message disappeared.
      One more try.

      This is the code after I have inserted my swf file in the body tag:


      <!–

      Content on this page requires a newer version of Adobe Flash Player.

      <!–

      I would be very grateful for some help:).

      /canaan77


    91. MrMyles

      @canaan77 Can you post a link to the site? I have never dragged and dropped anything into DreamWeaver. I always copy and paste the code into the Source pane.

      To post your code here, wrap it in code tags your code here


    92. canaan77

      Hello again!

      I’m making the site for a friend and I’m sorry but he hasn’t uploaded it yet.
      (I’m working with the site locally).
      He’s on vacation for some weeks so I’m afraid he can’t help me to upload it.
      But I will follow your recommendation and post the code into the code tags.
      Hope it works:).

      This is the code after I have inserted my swf file in the body tag:


      <!--

      Content on this page requires a newer version of Adobe Flash Player.

      <!--

      The code below is also added when I have inserted my swf file:

      Thanks in advance

      /canaan77


    93. MrMyles

      @canaan77 without seeing you site, I cannot offer much help. Do you not have a test server? Maybe email me the files so I can see them?


    Trackbacks

      Lightbox2 & Flash AS3 | Currently Creative

    Leave a Reply

    *



    Article Topics

    Past Articles