Simple ActionScript 3 XML Gallery
Sample ActionScript 3 Flash file for a very basic bare bones XML gallery with a scrolling thumbnails track, simple XML based image descriptions, external CSS and simple load progress handling. As of Version 1.3, this gallery supports multiple XML files.
This file was built as a demonstration of procedural coding using ActionScript 3 and as a direct comparison to a very similar sample file created using ActionScript 2. At times it is helpful to see comparisons between two different scripting methods, so you can see what has changed and how to achieve the same basic functionality when contrasting ActionScript 2 to ActionScript 3.
Updated Feb, 2009. Fix for thumbNails loading issues. Fix for using a loader object repeatedly and an argument error under Flash Player 9. Please let me know if you are still having problems using this Gallery with FP9!. Re factoring code. Updated to latest tweenLite release (VERSION: 9.3).
Example
Go here to see it in action;?Ǭ†http://www.noponies.com/dev/simplegallery/
Source Files
Here is the relevant source file; Simple ActionScript 3 Gallery (5464) - 570.43 KB
By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions
Comparison
Here is an ActionScript 2 version of a similar file.
Dependencies
File uses TweenLite which is included in the zip download. File is a Flash CS3 & CS4 file, and as this is AS3, there is no Flash 8 version.
February 20th, 2008 at 6:26 am
Dail,
Love this gallery. Best free example I have seen (and I have been looking for a while!). One query though:
Your source files work perfectly but when I try to insert some blank keyframes infront, moving your gallery back a few frames, I see some static thumbs behind the scrolling ones. Wierd eh? The output file throws up two comments:
TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChild()
at MethodInfo-27()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at MethodInfo-27()
I’m not sure why just moving it has had this effect but I’m easily confused. Any help greatly appreciated.
February 20th, 2008 at 1:55 pm
Make sure that the actions layer also corresponds to where your content etc is. Like if you move the content to frame 3, then the actions also need to be in frame 3.
February 20th, 2008 at 4:11 pm
Wonderful example.
I am new to ActionScript and I am trying to figure out how to add multiple gallery support. Do you have an example of this?
MLewis
February 21st, 2008 at 3:33 am
Is there or will there be an AS 3 vertical scrolling version? Thanks in advance.
February 21st, 2008 at 11:23 am
TBennett,
I had not planned on doing that, but as people seem to want a version with multi gallery support I could probably add it. Adding in the multi gallery support will entail a rewrite, so its easy to make a vertical scrolling version.
February 23rd, 2008 at 9:36 am
This is a great example, and a really good way to get acquainted with AS3. I’m looking to load 2 thumbs at a time– when either are clicked, it brings up 2 larger images. The thumbLoader.load(new URLRequest….. only seems to work for one. Do you have any suggestions on how to tackle that?
Thanks again for the great code!
February 25th, 2008 at 11:02 am
Yes, it will only load one image at a time. You will have to write a function that you call with each click on your thumbs that loads in the two images that you want.
February 27th, 2008 at 6:27 pm
Hi, I found your blog via Google while searching for LL Cool J Gallery and your post regarding ActionScript 3 XML Gallery at noponies looks very interesting for me.
March 5th, 2008 at 5:46 am
Excellent example – thank you for this! I’m just wondering if you know how to make the gallery so that it slides independently and infinitely?… Basically cycling through like a loop.
Cheers!
March 5th, 2008 at 9:19 am
Hi there… I’m just wondering if there is a way of having the thumbnails scroll automatically without a mouse event and infinitely in a loop. Please help?…
March 5th, 2008 at 11:26 am
Zuri,
I’m sure that is easy to do. I have not got time to do it at the moment however.
March 15th, 2008 at 4:18 pm
Dail
Thank you for everything and for fixing the bug I mentioned, long time ago. You are the best.
March 22nd, 2008 at 1:31 pm
How would I make it load the first large image automatically so there is a large image on the page initially instead of a big blank space?
thanks
March 22nd, 2008 at 3:05 pm
One more question sorry,
I see in the code where it should fade in the large image and fade it back out when you view another image, but it doesn’t work, the large image isn’t fading in and out. I got it to fade in by changing where it said:
TweenLite.to(child, 3, {alpha:0});//alpha in the thumbnails
to
TweenLite.from(child, 3, {alpha:0});//alpha in the thumbnails
but I can’t get it to fade out when another image is clicked,
any ideas?
March 22nd, 2008 at 5:55 pm
Hi Kellie,
Looks like there was a small mistake on my behalf with the alpha. It should be fixed in the latest version of the files. Version 1.2 linked in above.
When I fixed that alpha problem I added in the ability to load in large images programatically.
To do so, loadBigImage(null, 2); where null represents the mouseEvent that would be there if this function was being called by a mouse event. And the ‘2′ represents the index of the image you want to load. So, ‘2′ will load the 3rd image in your XML file.
March 22nd, 2008 at 7:30 pm
wow, perfect, thank you so much!
March 23rd, 2008 at 5:16 pm
Hi Dail!
Thanks for being so helpful. I know you are busy but I’m just wondering how to customize the function so that I can load two images at once when clicked on thumbnail. I created a new tag in your xml right under
gallery1large/001.jpg
gallery1large/002.jpg
if it is not possible to do it like this I hope you can show me how.
thanks much!
March 23rd, 2008 at 6:15 pm
Emily, quickest way to do that would be to duplicate the function loadBigImage() function etc.
March 24th, 2008 at 5:40 am
Forgive me if this has been covered already, but I am fairly new to AS3 and I am having trouble getting this gallery to load a large image at the start. I have tried calling the loadBigImage function at the start using loadBigImage(null, 2); but I get an error because the function is not expecting to values. Do I have to make a copy of the loadBigImage function that does require two values and then call this instead?
Great gallery and thanks for any help.
March 24th, 2008 at 5:53 am
Dail…never mind. I just saw the updated file you posted yesterday. My bad, sorry for the confusion.
Thanks!
March 24th, 2008 at 4:22 pm
Matt,
No problem. Just glad to hear you got it sorted. I’m hoping to get some time to re write this example and make it a little more pretty.
March 25th, 2008 at 4:15 am
Dail -
With the current code, is it possible to have the thumbnail show which large image is currently being displayed? So when you clicked on it, it would stay full alpha while all others would be half alpha. If not, I’m guessing I could just set up an array when the thumbs are created and use that to turn one on and the others off.
Thanks
March 25th, 2008 at 10:50 am
Matt,
That functionality is not currently built in. You could do it how you suggest, or simply use events and dispatch an event each time a user clicks a thumb that tells all other thumbs to turn off. Or use a simple function that stores the last clicked on thumb, and when you click a new thumb, fade out the old one, and store the most recent one again..
March 28th, 2008 at 12:53 am
thanks a lot!
March 30th, 2008 at 2:54 pm
I’ve been using your example to create a similar gallery except with two horizontal rows…displaying three thumbs on each row. So I’ve basically just doubled the size of the scrollPaneHeight and corresponding mask and added/modified the code below found in the thumbnail block:
changex = thumbLoader.content.width+paddingX;
changey = thumbLoader.content.height+paddingY;
var rows:int = 2;
child.x = int(p/rows)*changex;
child.y = int(p%rows)*changey;
Everything works great except there is an empty spot where the very first thumb should be (1st row, 1st column) – the remaining thumbs in both the top and bottom rows display fine. Any idea on whats causing this?
And thanks so much for providing this code…it has been an excellent learning tool.
March 30th, 2008 at 5:01 pm
Seth,
That sounds kinda strange. Sounds a little bit like the changeX var is getting incremented before the first clip loads in, so it ends up being shuffled one increment sweep away from 0.
March 30th, 2008 at 6:30 pm
That was exactly right. I was thinking about it wrong as I had the first thumb actually loading in the first column but second row – which is why I was confused by that first holder being empty.
Thanks again…I will certainly be making a donation for your work as it has saved me a great deal of time!
March 30th, 2008 at 7:51 pm
Seth,
Glad to hear you got it sorted. No problem.I’m just glad you find the site useful.
April 1st, 2008 at 12:47 am
Thank you so very much. I’ve never dealt with XML and I have very little experience with AS3. It was written so clearly that i was able to use it to my advantage. Once again THANK YOU! Much appreciated
April 4th, 2008 at 8:59 am
Dail,
I have run into an error. When I run the slide show, I now get the following two errors:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at MethodInfo-68()
And this one as well:
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/removeChild()
at MethodInfo-68()
The thumbnails load fine, but the first large image does not loading. If I click a thumbnail it’s large image loads just fine, it just seems to be the very first image.
I am still new to AS3 so the error messages are rather cryptic to me.
Any ideas?
Thanks
Matt
April 4th, 2008 at 10:40 am
Dail,
I figured out the error I was receiving. I had renamed my CSS file and did not correct it in my Flash file. Sorry for the confusion.
I have another error now. When I load the gallery in the Flash player it works just fine. Also the HTML file created when I publish the file works just fine, but when I put the gallery in the real page I want it to go in, it doesn’t load the first large image and for some reason puts two light blue lines across the top of the Flash movie. Have you heard of this before?
Thanks
Matt
April 4th, 2008 at 10:47 am
I should have mentioned I am experiencing this error in FireFox (2.0.0.13), and Safari (3.0.4) on the mac. It works just fine in Opera (9.26) on the mac, IE 7, IE 6, FireFox(2.0.0.13) on the PC.
Thanks
April 4th, 2008 at 5:14 pm
Matt,
The blue line is a progress bar indicator. The demo file on the site here displays that progress bar.
As for your other errors, check that the XML is correct, and that your file names match what is in your XML document etc.
April 5th, 2008 at 12:28 pm
Dail,
Seth was dealing with a missing thumbnail in the fist row, first column. How was that fixed? I haven’t figured out a way to decrement the necessary variable and load the thumbnail in beginning of the array.
Thanks!
April 5th, 2008 at 1:21 pm
One other question.
I’d like to style the thumbnail border through the use of an empty movie clip that “child” can load into. Am I on the right track, or have I gone completely wrong?
April 5th, 2008 at 2:24 pm
Neil,
I think Seth was loading the first thumb into the second row by mistake. So, perhaps he was setting the y value for the first thumbs position before it had actually loaded.
That sounds like a good approach for creating a border. It should work with no problem.
April 6th, 2008 at 12:54 pm
The styled movie clip worked great…I’m still having some trouble figuring out how to load the thumbnail in the right position.
Any ideas?
April 6th, 2008 at 7:09 pm
Neil, are you trying to load the thumbs into columns and rows, or just a single row of thumbs?
Email me your AS at the mail address in the “about” page if you get stuck.
April 7th, 2008 at 6:35 am
Dail -
Thanks for the reply. Upon further investigation I don’t think it is a problem with the XML. When I view my gallery in the Flash Player it works just fine. The first image loads just fine. I only get the problem when I try to view the gallery in the page it will reside in.
Any ideas?
Thanks again,
Matt
April 7th, 2008 at 11:36 am
Dail,
I figured out the problem. It apparently has something to do with the AC_RunActiveContent.js file that Flash creates when you publish a movie. If I don’t use the one Flash created for me when I made my gallery, the gallery doesn’t work. I have no idea what would be causing this issue, but that seems to have been the cause of my troubles.
On to a new problem…I noticed when I was testing my gallery that when I have less thumbnails than the number I set to display, the thumbnails jump around on mouse over. So say I set visThumbs to 5 and only have 2 images in my XML file, when I mouse over one of the thumbs, they both jump over to the right of what I guess is the edge of the scroller pane. Then they work as intended. Is there any way to have it not use a scroller if there are less images than what is specified in visThumbs? Or is it something I broke while fiddling around?
Sorry for all the trouble.
Thanks
April 7th, 2008 at 12:40 pm
Matt,
That is expected behaviour really. But, if you want to turn off the scrolling action, add in an if/else test that checks to see if the total thumbs width is less than the width of the thumb track, if it is, then don’t add the scrolling event listeners. Something like the below;
if (p==xmlData.pic.length()) {
//add the scroll listeners when we have content and its ready to scroll
if(child.width*p+(padding*(p-1)>scrollPaneWidth){
addScrollListeners()
}
//clear the loading thumbs text
thumbLoad_txt.text = “”;
//demo loading in larget image via non click method
//loadBigImage(null, 2)
}
April 9th, 2008 at 10:39 am
Dail,
I’m currently trying to load separate xml files. I have a function that will load one of two files attached to a movie clip. When I load the xml, the large images load fine, but I need to find a way to reset the thumbnails and reload them.
Any ideas?
Thanks!
April 10th, 2008 at 8:01 pm
Neil,
Check the source files above. There is a new method for removing all the content. In fact, with this method, the gallery now supports multiple XML files.
Let me know if there are bugs.
April 23rd, 2008 at 6:00 am
First of all thanks a lot.
Yours gallery was just where I was looking for..
I use it in my site full screen and center the images with:
loader.content.x = stage.stageWidth/2 – loader.width/2;
loader.content.y = (stage.stageHeight-50)/2 – loader.height/2;
But now and then, at first load, it somehow doesn’t get the widh and height values of the first large image which then shows up with it’s left top corner in the center of the stage…
any sugestions how to fix this??
April 23rd, 2008 at 11:44 am
Dave,
You should just be able to position the clip that the large images load into, rather than the images themselves.
April 23rd, 2008 at 1:39 pm
Thanks for your swift replay.
I hope I understood you right and I tried :
largeContent.x = stage.stageWidth/2 – loader.width/2;
largeContent.y = (stage.stageHeight-50)/2 – loader.height/2;
instead, but the result is the same.
If there is no cache in te browser it doesn’t read the actual values of the first image.
As I want to center the images on the stage and the images have diverent dementions I can not give it a fixed position..
As soon as I call the large imges via the thumbnails it’s fine.
any idea..?
April 24th, 2008 at 12:40 am
Dave,
It wont work the way you have it because you are still basing part of your centering calculations off the size of the loader. The loader wont have any content in it, so has no width prop. This problem is demonstrated by how it does work when the loader has got actual content in it, and everything works fine.
Try;
largeContent.x = stage.stageWidth/2 – largeContent.width/2;
largeContent.y = (stage.stageHeight-50)/2 – largeContent.height/2;
Which will work to center that largeContent clip.
April 24th, 2008 at 1:07 am
I think I found it..
I changed
loader.contentLoaderInfo.addEventListener(Event.INIT, loadLargeInit);
to
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadLargeInit);
which seems to do the trick.
April 28th, 2008 at 1:00 pm
This helped a ton…great job!
April 29th, 2008 at 2:43 pm
I’m trying to create a border on the thumbnails through “child.graphics.lineStyle” but it doesn’t show up. Maybe it has something to do with the masking? Any help?
April 30th, 2008 at 8:02 am
Well I’ve been able to get the border showing through an new movieclip. But when I position this in child, the border changes alpha on rollover. Can somebody help me so it doesn’t fade?
var mc:MovieClip = new MovieClip();
mc.graphics.lineStyle(2, 0xFFFFFF, 1)
mc.graphics.lineTo(107, 0);
mc.graphics.lineTo(107, 60);
mc.graphics.lineTo(0, 60);
mc.graphics.lineTo(0, 0)
mc.alpha = 1;
mc.x = 0;
mc.y = 0;
child.addChild(mc);
May 2nd, 2008 at 1:05 pm
How is it possible to load the large image on top on the thumbnails?
May 2nd, 2008 at 3:38 pm
Vinnie,
Have a look at setChildIndex in the Flash Help docs. I’d say, just run that line once all the thumbnails have loaded in, telling the largeImageHolder clip to move to a level above the thumbnails.
May 2nd, 2008 at 3:39 pm
MisterCrash,
That sounds like you need to change the targetting of the rollOver function to just the thumb that holds the image itself.
May 2nd, 2008 at 7:07 pm
Dale,
thank you very much for that hint. Obviously it works perfectly this way.
May 4th, 2008 at 7:47 am
Hi Dale,
i have been trying to build a multiple page gallery: i have noticed that when i load a new gallery before the last one has finished loading it creates this error:
TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChild()
at MethodInfo-45()
and causes it to display the information a bit more randomly – the previous gallery is sometimes displayed and/or thumbanails out of sync with the main image?
Any ideas how to fix this?
Sam.
May 11th, 2008 at 11:08 pm
Hi,
I love this Simple AS3 XML Gallery. The one problem I noticed is that if a user clicks on another image while the current one is loading it causes errors.
It’s the same trouble I was having making my own as3 gallery. I’m not that good at actionscript so I used simple code to remove all event listeners while any image is loading. It’s not such a good method though because it doesn’t let a user cancel the current load and select another image. I don’t know how to fix it otherwise because I’m just learning to code! Any suggestions?
Cheers
Paul
May 12th, 2008 at 8:55 am
First off, thanks a million for posting this, I’ve been looking for something like this for a while.
I wanted to ask a few questions:
1. I’m trying to modify things a little so that when my thumb is clicked, the large image appears in the center. I’ve already moved my text so that it displays at the bottom above the thumbnails. Just not sure how to get my main image to display in the center of the page. My photos will be different sizes so I don’t think I can use a set value. Once again, thanks for this awesome gallery!
May 12th, 2008 at 4:01 pm
Paul,
Ok, looks like a loader error. I’ll look into it.
Cole,
Try;
largeContent.x = stage.stageWidth/2 – largeContent.width/2;
largeContent.y = (stage.stageHeight-50)/2 – largeContent.height/2;
May 13th, 2008 at 9:05 am
Perfect, that works like a charm, thank you very much for that.
May 15th, 2008 at 10:55 am
This is a great gallery and does everything I was looking for. I have modified it a little and was wondering if there anyway to set the registration point of the thumb? I am doing a mouse event that scales the image when you mouse over, right now the registration point is set in the top left and I would like it to be in the center.
Thank you!
Alycia
May 18th, 2008 at 8:50 am
Hey Dale, I’m trying to use the multiple gallery by assigning a function to my xml menu, it works like a charm. BUT when clicked once the first thumbnail of the previous gallery is still displayed (with the right link though). AND when clicked the second time it loads in the right thumbnail.
cleanOutThumbs();
xmlLoader.load(linkrequest);
loadThumbs();
Any idea? I’m like trying forever to get it fixed.
May 19th, 2008 at 12:26 pm
Alycia,
There are a couple of classes that can set the registration point, and you can look at the matrix transform class in the Flash help.
May 19th, 2008 at 12:27 pm
MisterCrash,
I’ll have a look at that in the files, and see what is going on. Will try to go over them tomorrow.
May 20th, 2008 at 12:49 pm
MisterCrash
I had a look at the file, and traced the various vars etc, they all seem to be getting reset in the version I have, with the correct image loading in again each time. Are you by any chance adding in extra content to the thumbnails track? Try tracing its numChildren at the end of the thumbnails removal function. This will tell you if you have left over content.
May 20th, 2008 at 12:50 pm
Paul,
I’ve updated the file, and that load bug should be fixed.
May 22nd, 2008 at 5:23 am
I dont have any leftovers after removal (get a nice countdown till 0) I’m thinking its the way that I load in the thumbnails is where it goes wrong. Because I dont use the loadXml function but xmlLoader.load(new URLRequest(xmlFile)) I skip the part where I create the new XML file (and the old one gets overwritten?) This because I don’t know how to re-write the function to my needs, so I can enter my URL-request into the loadXml function. Let me know what you think, I’ll browse some forums in the meanwhile.
May 22nd, 2008 at 9:13 am
Another awesome piece of work. Got it working perfectly too. Is there anyway to make the slides automatically change if no one clicks on a thumbnail?
May 28th, 2008 at 12:39 am
i looked over the previous posts so i wouldn’t double post, so i apologize if i have, but i was wondering if it is possible to apply this concept to scroll text vertically when mouse_over the top and bottom of the text box.
i was looking to place text with links in the text box and scroll up and down with mouse_over. i know it’s possible, i just haven’t found the best way to do it.
i’m using as 3 by the way.
May 28th, 2008 at 4:33 pm
Josh,
You mean within this file, or using the scrolling technique in a different file. Have a look at the scroll property of textfields. Make a button with an enterframe listener on it, that when you mouseOver,scrolls your text.
June 4th, 2008 at 4:23 pm
Hello,
Nice work it really helped me get a better understanding of xml and as3.
I was wondering if you could shed some light on how to load the thumb nails into a physical container (movieClip on stage). I would like to add a skin around the thumb nails. Any clues?
Thanks again.
June 5th, 2008 at 12:19 pm
Hi Dale, i downloaded few day ago your xml gallery, actually i put it into my blog like a flash photo viewer application, i made some adjustments. I will add a link to your blog in my blogroll. Also i write a post for this modifications and of course a link to this post. Best Regards!! From Mexico.
June 5th, 2008 at 12:59 pm
Billy,
I think someone has managed to achieve what you are attempting further up in the comments for this file.
June 5th, 2008 at 2:18 pm
I managed to go about it in a slightly diferent way with alot of help from a developer. her is the solution.
var mythumbHolder = new (getDefinitionByName(”thumbRoom1_mc”) as Class);
//mythumbHolder.x =50;
//mythumbHolder.y =50;
//mythumbHolder.pictureValue = pictureValue++;
mythumbHolder.container.pictureValue = pictureValue++;
child = new MovieClip();
//dynamic var to give us and index position, meaning we can access the associated large image
//residing in this XML node.
//child.pictureValue = pictureValue++;
mythumbHolder.container.addChild(thumbLoader.content);
child.addChild(mythumbHolder);
//event listeners for rolling over and clicking thumbnails
child.addEventListener(MouseEvent.MOUSE_OVER, overThumb);
child.addEventListener(MouseEvent.MOUSE_OUT, offThumb);
child.addEventListener(MouseEvent.CLICK, loadBigImage);
Basically it adds the thumbs to a movieClip in the library and then a container in that movie clip for masking purposes. It works now
Thanks again.
June 5th, 2008 at 2:49 pm
One more question. How would you go about setting up the scroller to only scroll say 20pixles onClick of a button (picture 2 arrows on either end of the scroller.)
Again thanks for any help.
June 12th, 2008 at 8:37 am
Wow, a linear AS3 code without mind blowing packages and classes.
Thanks, this is a great example to go on with my work.
June 16th, 2008 at 3:46 am
Hi there,
First of all, thx for sharing an awesome gallery.
i downloaded the Simple AS 2 and Simple AS 3.
So, i got some question.
Simple As2 is easier for me to edit the FORM .
I can just simple grab the form and show the big thumb at the place i want.
but when i come to Simple AS3 . I dont know where should i edit the FORM.
I cannot select the big thumb form and the horizontal small thumb slide image.
*FORM refer to those BIG THUMB showing area.
So? any idea to fix it ? =)
Regards,
LJ Jun
June 18th, 2008 at 11:57 am
Hi LJ,
In this version, the thumbtrack etc is dynamically created via actionScript. If you want to use your own drawn elements, add them in, but just make sure that their instance names match the variable names that Flash expects to find within the script.
June 19th, 2008 at 1:11 am
Hi dale,
thx for ur reply.
after i reading whole part action script of the fla file
thts made me insane =)
i met some question , and cannot fix it after try some way.
hope dale can point me some way.
– Can i overlay the “content” on the “big thumb”?
I think is some effect similar to “as3_slideviewer_v4″
Thx.
Regards,
LJ Jun
June 19th, 2008 at 5:07 am
Hi Dale,
I have had a good look through the posts above and this has been brought up a couple of times… love this example but I would like to see how you would make the thumbs scroll vertically.
Even if you could please point me to the relevant areas to change,
Thanks, Kim
June 20th, 2008 at 6:21 am
Hi Dale or anyone else that can help,
I’m really stuck on how to create a border for the thumbnails. I’m sure it’s really easy but everything I do causes very strange results.
I’ve tried creating an empty MovieClip and then loading the child MovieClip into it with addChild, but when I try to give the movieclip a border I get strange results
June 21st, 2008 at 8:07 am
Ok, I’ve managed to work out a solution all by my self. I added a border to the holder_mc exactly the same as each child is added.
June 26th, 2008 at 10:44 pm
Hi Dale,
Thanks a lot for providing this files. I’ve been playing with them and I manage to “customise” them in the way I want them to look/work. Everything runs great when I open the SWF file but it doesn’t seem to work when I try loading the SWF gallery from its parent SWF file (using myMC.loadMovie(”as3Thumbs.swf”);). Hope I’m making any sense here…
Carlos
June 27th, 2008 at 8:03 pm
Carlos,
What you are trying to do is use an ActionScript 2 command (loadMovie) with an actionScript 3 swf, which wont work..
June 28th, 2008 at 11:28 pm
Hey Dale,
Cheers for your answer. What’s the correct way to do it with AS3? I’ve just started playing around with AS3…
Thanks again,
C
June 29th, 2008 at 6:28 pm
Carlos,
Look in the Flash help at Loader().
Should be plenty of examples to get you started.
June 30th, 2008 at 3:21 am
Hey Dale,
I’ve decided to use the AS2 version this time. I’m far more comfortable with AS2 and unfortunately time is an issue with the project I’m working at
I’ll give this one a go when I have a little bit more time
Cheers man,
C
July 1st, 2008 at 3:03 pm
No problem Carlos
July 4th, 2008 at 7:31 am
Hey Man, how would one go about havening a equal padding space between thumb nails that are different sizes ?
If the thumbnails are all the same size the padding will be the same but as soon as one of the thumbs changes size the padding gos wonky. Any help would be great and thanks again.
July 9th, 2008 at 1:18 am
Hi there,
Thanks for posting great work!!
I was just wondering if anyone has been able to get the images to run a slide show loop without having to click on a thumbnail? and when a thumbnail has been clicked it fades to that image, pauses, then continues with the slide show loop?
I’ve been having a go and i don’t seem to be getting anywhere, if any one could point me in the right direction that would be great! in the mean time i will let you know if i crack it!
Kind regards,
July 11th, 2008 at 1:00 am
This is a great example!
having trouble using the external styles.CSS to apply styles to anything other than anchor link tags. how do you apply the .pink or the .dataText ?? can you set it in the XML or in the AS3? i’m trying to control the letter-spacing.
thanks!
July 25th, 2008 at 3:10 am
Hi Jenna,
I don’t know if you ever solved your slideshow problem but here is how I did it:
[cc lang="actionscript" tab_size="2" lines="60"]
//import the flash.utils.* so you can use timers
import flash.utils.*;
//add a variable to the variable list (5000) is 5 seconds and is
// the delay before the next picture
var myTimer:Timer = new Timer(5000);
//add event listener to the timer
myTimer.addEventListener(”timer”, timedFunction);
//now start the timer once the first image is loaded (I changed the
//line
//loader.contentLoaderInfo.addEventListener(Event.INIT,
//loadLargeInit);
//to
//loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadLargeInit);
//and added the start timer into loadLargeInit
myTimer.start();
//add this function which is played 5 seconds after the last image
//loaded
function timedFunction(eventArgs:TimerEvent):void
{
//stoptimer
myTimer.stop();
//change to a Tween if you want it to fade out
largeContent.removeChild(loadImage.content);
//check to see if we are at the end of the images
if (p == xmlData.pic.length()-1) {
//go back to the start
p = 0;
}
else {
//go to the next image
p++;
}
//add the next image
loadBigImage();
}
[/cc]
That should do it. I’ll try and check this blog in case you have any questions.
July 25th, 2008 at 9:12 pm
Adam,
Thanks for the contribution to the site!
August 1st, 2008 at 4:01 am
Hey Dale,
i downloaded your xml-gallery a few days ago! it really a great as3 work!!
i?Ǭ¥ve tried to costumize it and i got stuck in a problem!
how is it possible to load in the thumbs with a different size??
maybe the solution is a math random function or a class??
i can?Ǭ¥t find a tutorial else about that topic!! is it possible somehow??
thx in advanced for helping with that problem!!
greetz from austria!!
August 1st, 2008 at 2:04 pm
Roman,
You want to load in thumbs that each have different sizes? Width and height, or just width, or height changes?
August 1st, 2008 at 11:14 pm
hey dale,
i want to load in the thumbs just with a different width.
thx
August 2nd, 2008 at 6:30 pm
Roman,
It should handle that fine. But I have not tested it.
What exactly goes wrong when you try different width thumbnails?
August 3rd, 2008 at 12:08 am
Good morning Dale,
You do cool art by the way! I also do streetart, graffiti and illustration.
Back to the theme: if i have diffrent width thumbs the scrollpane scrolls into nowhere!
it does not stops when the last image is reached!
example: http://pixelkrieg.org/noponies/
would be cool if you help me to solve this problem!!
greetz ?Ǭ¥n?Ǭ¥ thx
August 3rd, 2008 at 9:22 am
Dale,
Your blog is awesome and has been tremendously helpful.
I used your XML gallery on my portfolio site and was wondering
how to automatically load the first slide. I know that this has been mentioned before, but I still don’t understand how you would do this. I tried loadBigImage (null, 2); but didn’t understand where to place it. Do I replace:
(event:MouseEvent = null, pictureToLoad:int = undefined)
with
(null, 2);
or do I have to make a new function?
Any help would be great. Please check out my site if you want!
Thanks.
August 3rd, 2008 at 7:00 pm
Roman,
Ok, you need to hardcode how wide you want the scroll area to be.
scrollPaneWidth = 500//thumbLoader.content.width*visThumbs+(padding*(visThumbs-1));//mask
scrollTrackWidth = 500//thumbLoader.content.width*xmlData.pic.length()+(padding*(xmlData.pic.length()-1));//scrolltrack
And then, because you are using a variable width thumbs, you need to re specify the width of the scrollTracks background sprite which creates a background for the scrolling track, so that mouse events don’t turn off when you move over a space between images in the scroll track.
Add this into the loadThumbs function,
[cc lang="actionscript" tab_size="2" lines="60"]
if (p==xmlData.pic.length()) {
//add the scroll listeners when we have content and its ready to scroll
//this if test below checks to see if there are enough thumbnails to actually need the scroll listeners
if (child.width*p+(padding*(p-1))>scrollPaneWidth) {
addScrollListeners();
}
//clear the loading thumbs text
thumbLoad_txt.text = “”;
//this line here is new
thumbTrackBg_mc.width = holder_mc.width
//demo loading in larget image via non click method
//loadBigImage(null, 2)
}
[/cc]
August 3rd, 2008 at 7:05 pm
trueTree.
You can load it when all the thumbnails have loaded, or earlier by uncommenting the line
//loadBigImage(null, 2)
If you look at my post above, you can see where that line is commented out. Uncomment it, and your first image etc will load when the thumbs have finished loading.
August 3rd, 2008 at 11:11 pm
Hey Dale,
Thanks for your help!
You were really polite and helpfull!
Greetz from Graz/Austria!!
August 6th, 2008 at 7:52 am
This looks like what I’ve been looking for. However, I think the as3_simple_xml_gallery_v1_4.zip is corrupted.
August 6th, 2008 at 11:51 am
Felix,
I just did a test download, and it worked fine.
August 6th, 2008 at 3:22 pm
Dale,
I got it to load the first image automatically.
You are awesome. Thank you so much for your
help. I really appreciate it!
Look forward to your posts.
-truetree
August 6th, 2008 at 5:28 pm
Dale,
One more question. I want the large images to be linked
with an a href tag, but I don’t know where to place it.
I tried placing the a href tag after & around the image reference in the xml
file, but it didn’t work:
gallery1large/001.jpghttp://www.thepalebrood.com
Any ideas?
August 6th, 2008 at 7:07 pm
You will have to add a new tag to the XML, like below.
[cc lang="xml" tab_size="2" lines="60"]
< ![CDATA[Image 02 - Here is some more, google.com]]>
[/cc]
Then in the .fla, you need to add a click event listener to the largeContent clip, and then in that event handler, just access the new url tag you have added to your XML, as below.
[cc lang="actionscript" tab_size="2" lines="60"]
largeContent.addEventListener(MouseEvent.CLICK, navToUrl);
function navToUrl(event:MouseEvent):void{
try {
navigateToURL(new URLRequest(String(xmlData.pic.url[targetThumbs])));
}
catch (e:Error) {
// handle error here
}
}
[/cc]
August 7th, 2008 at 12:59 pm
Dale,
Thank you so much for that. I was able to make the largeContent
navigate to a URL. The only problem is that there are certain large Images that I don’t want to do anything when clicked on. When I click on these images now, a blank window appears in the browser with an error message. Is there a way to disable the mouseEvent for
certain images?
August 7th, 2008 at 11:36 pm
truetree,
wrap the navigateToURL in an if statement that checks to see if the XML node for that image contains an actual URL.
prob something like
if(xmlData.pic.url[targetThumbs]))!=”"{
//do nav stuff
}
August 11th, 2008 at 3:37 pm
Dale,
This has been a great help switching over from AS2, thank you so much. I have a question, which I’m afraid will require a bit more code, but I thought I would ask it anyway.
The gallery is working perfect with stills, what I would like to do is use this gallery, but not only be able to view stills but also FLVs. So the thumbnails would remain stills, but when selecting one it loads the FLV up in the largeContent Sprite.
Any help on this would be great, I can’t get the AS3 xml video loading to work right with this gallery.
August 14th, 2008 at 5:41 am
Hi, just wondering how hard it would be to modify the thumbs bar to make a scroller that constantly loops as if it’s a carousel??
thanks
August 18th, 2008 at 5:14 pm
Thank you very much for sharing your code! Understanding your code helped me solve a tiny problem with loading external images from an xml file. The headache is gone now =) happy coding
August 20th, 2008 at 10:27 am
Hi,
Great little gallery which I’ve adapted to what I needed quite nicely. There’s just one little bug that I have tried to fix but haven’t managed to come up with a solution. I will mention at this point that I am not a code person what so ever, so apologies if I’m being daft.
I have created a gallery on my website with a number of seperate sections using seperate xml files for each gallery as seen here http://www.stick-man.co.uk/as3Thumbs.swf
The problem arises when switch to another gallery while the thumbnails for the previous one is still loading. It appears to me that which ever thumbnail was being loaded at the time of the switch gets put in as the first thumbnail of the first gallery.
I’ve put the source here http://www.stick-man.co.uk/as3Thumbs.txt for anyone to look at. Apologies for the messiness of the code and the cack handed way I’ve gone about some things but like I say, I’m not a coder.
Hope someone can help me out.
Thanks
August 20th, 2008 at 10:31 am
Sorry. Section above that reads “It appears to me that which ever thumbnail was being loaded at the time of the switch gets put in as the first thumbnail of the first gallery.”
is supposed to read “It appears to me that which ever thumbnail was being loaded at the time of the switch gets put in as the first thumbnail of the NEW gallery.”
August 20th, 2008 at 1:54 pm
Andy,
I probably need to add a loader.close() to the thumbnails loading section. If I get a chance, I’ll check it out.
August 20th, 2008 at 2:45 pm
Thanks. It would be much appreciated. You’ve helped me so much already just by producing this gallery and it would be great if I can get this little bug fixed.
August 31st, 2008 at 5:46 am
Hi Dale,
I was wondering if it was possible to add next and previous buttons to this file or how I would go about doing it?
Thanks!
September 1st, 2008 at 8:44 am
TrueTree,
did you happen to get your ‘if’ statement to work with the navigateToURL?
September 1st, 2008 at 12:26 pm
Matthew,
You could manually call the loadBigImage() method manually. But that would not update the thumbnails display.
September 2nd, 2008 at 3:15 pm
I have the ‘if’ statement working, however the ” must not exist in the call if you do not want the image to have a link. If it does it will open a window and immediately close it. Here’s the code I used:
largeContent.addEventListener(MouseEvent.CLICK, navToUrl);
function navToUrl(event):void{
if(xmlData.pic.url[targetThumbs]!=”");{
navigateToURL (new URLRequest(String(xmlData.pic.url[targetThumbs])));
}
}
September 2nd, 2008 at 3:18 pm
That should read the url tags must be removed from the pic calls in the xml file if you do not want the image to have a link. If the url tags are left empty it will open and blank window and immediately close it.
September 11th, 2008 at 9:57 am
Hi, Your script taught me a lot.
I used a version of this script in a Presentation with a navigation menu. this script comes in third frame. so I commented out the cleanOutThumbs(); function and moved it to the common action layer. everything works fine If I let all the images load but if I click on any navigation Item while the thumbs and Images are being loaded they do not get removed. the navigation buttons are set up as following example :
function goproducts(event:MouseEvent):void
{
//count is set to 1 upon entering the frame where I used the //script, in my case frame 3.
if (count == 1) {
cleanOutThumbs();
}
gotoAndStop(”products”);
}
producproducts.addEventListener(MouseEvent.CLICK,goproducts);
the problem is when I click upon a navigation item while an image loading or thumb loading is still in progress,the page changes but loading progress restarts and finally images from this frame end up overlapping content of all other frames. How to kill the loading progress as soon as I click on any navigation Item ?
September 11th, 2008 at 9:59 am
correction in above post,
products.addEventListener(MouseEvent.CLICK,goproducts);
September 11th, 2008 at 1:28 pm
hi,
as I posted earlier about the “cleaning up” problem I tried this :
function clearImages(); void{
if (loader!=null) {
loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadLargeProgress);
loader.contentLoaderInfo.removeEventListener(Event.INIT, loadLargeInit);
loader.unload();
loader = null;
}
if (thumbLoader!=null) {
thumbLoader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadThumbProgress);
thumbLoader.contentLoaderInfo.removeEventListener(Event.INIT, loadThumbs);
thumbLoader.unload();
thumbLoader = null;
}
thumbLoader = new Loader();
}
the problem now Is on first click upon any navigation Item I get an error message like this :
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::Loader/unload()
at technica_fla::MainTimeline/cleanOutThumbs()
at technica_fla::MainTimeline/goproducts()
on second click the navigation works.
how to resolve this?
September 11th, 2008 at 2:13 pm
it worked when I commented out the unload() methods; now the last bug remaining is when I Interrupt the loading of thumbnails while loading, I receive an obvious error of Null object Reference (#1009)
in thumbLoaded() function. I tried using if(thumbLoader!=Null) condition to avoid that but no work. if I stick to the code above(without using the unload()method) Is there a workaround to avoid this error?
September 12th, 2008 at 5:22 am
Hi Dale!
Another big THANK YOU for posting very good free piece of code.
At first, im no coder
But i adapted your code as a thumbnail gallery for flash panorama player. It works fine.
here is example http://www.panoramix.no/dognvill/index1.html
What im trying to do now is: have one xml file for few buttons. How can i do it? I understang that i can add tags like and it give it value true/false or anything like that. How to make flash read tags and show correct content for thumbs stripe after click on a button? (of course i can make xml for each button, but im looking for cleaner solution).
Thank You in advance
Regards
Wiktor
September 12th, 2008 at 10:32 am
hi Dale,
first, thanks for this gallery–it’s really great.
i am new to as3, so i hope this isn’t a stupid question.
i want to add a dynamic text field under the scroll bar and as the thumbnails scroll to the center of screen, i would like the name of the image to appear in the text field. i’ve spent hours trying to accomplish that and have had no success. i’m wondering if you have any suggestions.
thanks again,
paul
September 14th, 2008 at 12:32 pm
Vas,
I’ve made a minor update to the example. Download it again, and see if your issue goes away.
September 14th, 2008 at 12:34 pm
Wiktor,
This example does not really have the logic to choose what XML tags to use for each button. You could have one XML file, but you will need to change the way it is parsed and stored to make what you are trying to achieve work.
September 14th, 2008 at 12:36 pm
Phinto,
there are never any stupid questions
. What you want to do is fairly technically difficult. You would be better off to hook into the rollOver event of each thumbnail, and from that, find out its associated ID, and use that ID to get the appropriate text from your XML file and display it.
September 14th, 2008 at 5:28 pm
hi Dale,
i’ll play with that and see what i come up with.
thanks so much,
paul
September 15th, 2008 at 7:20 pm
Hi Dale,
Thanks for the update to the code. At an initial glance I thought this would fix my problem with thumbnail loading when changing galleries but I’m still getting exactly the same problem. If I change gallery while the thumbnails for the previous gallery are still loading, I get a thumbnail from the previous gallery as the first thumbnail of the new gallery. Would it help to move the ‘if (thumbLoader!=null)’ section to the cleanOutThumbs function? Is that even possible?
Thanks for your help. I’m learning slowly in no small part thanks to your examples.
Anyway, it’s 4am and time to stop tinkering. It’s something I need to sort out as I want to expand my gallery. I’ll let you know if I figure it out.
Regards
Andy
September 16th, 2008 at 6:45 am
thanx for reply,
i got problem that the value bigpicturetoload (in my case ) didnt correspond to proper thumbnail after loading new set of thums.
i made it finally with diffrent xml files (what cost me just few minutes to prepare them).
it works fine http://www.panoramix.no/dognvill/index.html
thank you again!
September 16th, 2008 at 12:02 pm
Andy,
Try adding this into the remove all thumbs method
[cc lang="actionscript" tab_size="2" lines="60"]
if (holder_mc.numChildren >0) {
//remove any loading thumbs – this is the new bit
if (thumbLoader!=null) {
thumbLoader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadThumbProgress);
thumbLoader.contentLoaderInfo.removeEventListener(Event.INIT, thumbLoaded);
thumbLoader.close();
thumbLoader = null;
}
[/cc]
September 16th, 2008 at 4:41 pm
Hi Dale,
Was the first thing I tried but I’m getting an error when I test it.
Error: Error #2029: This URLStream object does not have a stream opened.
at flash.display::Loader/close()
at as3Thumbs_fla::MainTimeline/cleanOutThumbs()
at as3Thumbs_fla::MainTimeline/loadGallery2()
September 16th, 2008 at 9:24 pm
I’ve finally been able to replicate what you are seeing with the duplicate thumb. I’ll track the issue down now.
September 17th, 2008 at 6:51 pm
Andy,
I think that issue may be gone. I was able to replicate it, and by changing to using an unLoad rather than a close I think its gone. Well, since making the change I have not been able to reproduce it. Of course, your experience may be different.
September 18th, 2008 at 3:56 am
Dale,
Awesome dude. Thanks for fixing that. Everything is working now as it should. Now I need to go through and understand the changes you made.
One problem with the new example you uploaded though is you changed line 139 which broke it. Changing it back to child.addChild(thumbLoader.content); got it working again.
Thanks again. Paypaling you a bit of beer money.
Andy
September 18th, 2008 at 11:43 am
Andy,
Odd that that change is giving you an error.
I have not been able to reproduce that problem. What was the error you got?
Randomly I noticed that my Debug install of the Flash player had reverted to the standard install, annoying.
September 18th, 2008 at 12:27 pm
Dale,
When I opened the .fla and test the movie in Flash, you click on one of the thumbnails it gives the error-
ReferenceError: Error #1069: Property pictureValue not found on flash.display.Loader and there is no default value.
at as3Thumbs_fla::MainTimeline/loadBigImage()
And this is from your example. I didn’t change anything. Putting .content back on the end of it made things all better.
Seems to work fine though if you export the swf and run it in Flash Player.
September 18th, 2008 at 1:47 pm
What am I on about. Just went back to look why the swf still plays and it doesn’t. So it doesn’t play either way. I’ve been awake for too long
September 21st, 2008 at 1:17 am
Andy,
I forgot to change an “event.target” into an “event.currentTarget”. Changing the way the images are loaded in, affects what object is the “target” of a mouseEvent. The object that contains the “pictureValue” variable that is used to track what thumb has been clicked is part of each thumbnails parent clip. So, in the largeImage loading function, instead of checking for the “target” we need to check for the events “currentTarget”, or the object that registered the event, which is the thumbnails parent.
Anyway, its fixed and working fine.
September 24th, 2008 at 1:47 am
I find that replacing
child.addEventListener(MouseEvent.CLICK, loadBigImage);
with
child.addEventListener(MouseEvent.MOUSE_DOWN, loadBigImage);
gives a more responsive navigation – since you can scroll along and click – that is “MOUSE_DOWN”, instead of the “CLICK” event, where mousebutton has to go down and up on the same thumbnail in order to load the big image.
September 28th, 2008 at 10:32 am
Hello Dale. I’m trying to change your gallery adding some buttons to back and forward these thumbs using TweenLite. But I’m not found one logic to this. Could you help me?
function addScrollListeners():void {
forw.addEventListener(MouseEvent.CLICK, startScrollDir);
back.addEventListener(MouseEvent.CLICK,startScrollEsq);
}
function startScrollEsq(e:MouseEvent):void {
holder_mc.x += Math.cos((-thumbMask_mc.x/scrollPaneWidth)*Math.PI)*scrollSpeed;
if (holder_mc.x>scrollPaneX) {
holder_mc.x = scrollPaneX;
}
}
function startScrollDir(e:MouseEvent):void {
trace(visThumbs);
trace(xmlData.length());
trace(”dir_holder_mc.x: ” + holder_mc.x);
trace(”dir_scrollPaneX: ” + scrollPaneX);
TweenLite.to(holder_mc, 1, {x:”-400″,ease:Circ.easeOut});
if(holder_mc.x < scrollPaneWidth){
holder_mc.x = scrollPaneX;
}
}
Thank you!
September 29th, 2008 at 1:13 am
Hi Dale,
have to say this has really helped to learn AS3, but I’m trying to expand a little and I have been trying for the past few weeks to bring your “AS3 sliding images gallery” together with this XML gallery.
so the thumbnails would still bring in the text but instead of of just loading one image file it would load the Sliding images.. I’ve done it with just bringing in an swf instead of adding new code but this gives it multiple xml pages and doesn’t make it easy to add new thumbs & mini galleries because a new swf has to be created everytime…
If what I’m trying to do entails a whole new script write then dont worry. Just it would be such an ace touch to have…….
thanks again
V
September 30th, 2008 at 7:40 am
Guess that was a bit too demanding…. ok how would I attach the NpSliderBar.as to the slider on here? ….
October 8th, 2008 at 11:22 am
love this setup, thanks.
if I add movieClips as children of “holder_mc”
to act as backgrounds, what is the easiest way to identify which one i’m on while still having the thumbnails be the main mouseover?
Thanks,
Michael
October 8th, 2008 at 7:34 pm
Michael,
Hmm, not actually sure about that one. You want to figure out what clip is loaded into the “holder_mc” movieClip?
October 8th, 2008 at 9:51 pm
is there a better way than “getChildByName”? for a series that is acting like a category header?
October 15th, 2008 at 10:33 pm
First off, I’d really like to thank you for a great script, and a great site too!
However, when I have the gallery on an individual frame, all the images still appear over whatever is on the other frames when you try to navigate back to them. How can I clear the stage when I navigate to another frame?
Apologies if this has asked before.
thanks!
October 16th, 2008 at 6:38 pm
Dale,
I’d like to thank you so much for your work here. I am trying to incorporate your scrolling thumbs script into a timed slideshow I already have working. At the moment I have totally failed and am hoping you could take a look. Since it’s a bunch of files and a bit different then what you have got going, I have uploaded a zip of everything to a directory on my site.
http://www.drewfulton.com/files/realestate.zip
In the file, the real-estate02.fla works fine with the slideshow and I am working on real-estate03a.fla to get this all to work together. Any help or suggestions would be wonderful.
Eventually, I want to use the switchimage() function to change out the big images when a thumbnail is clicked but for now I am just trying to get the thumbnails to even show up! Thanks
Drew
October 20th, 2008 at 7:40 pm
Hi Dale, I’m working on this project: http://www.verticeasociados.com/aldo and have a problem loading content in a thumbnails loaders clicking the images they hide the scroll and show only the big image and load the thumbs, the thumbs are inserted like this in the LoadLargeInit function like this —>
function loadLargeInit(event:Event):void {
//reset the progress bar – you need to remove this line if you remove the progress bar
loadBar.width = 0;
//add the large content to the stage or wherever
//first remove any existing content (if any) in our large image container
//if you wanted to do a cross fade, remove this if test, and run an oncomplete tween function for the
//fade in that removes the bottom child (old image) from the largeContent clip.
if (largeContent.numChildren>0) {
largeContent.removeChildAt(0);
}
largeContent.addChild(loader.content)
ministhumbs1.addChild(minis1.content)
ministhumbs2.addChild(minis2.content)
ministhumbs3.addChild(minis3.content)
ministhumbs4.addChild(minis4.content)
ministhumbs5.addChild(minis5.content)
ministhumbs6.addChild(minis6.content)
ministhumbs7.addChild(minis7.content)
But when I add more than 1 thumbs child the SWF give me the error #2007 how it happen? I really admire you, if you could help me my life will be saved. thanks for reading. if you need the entire code tellme thanks a lot
October 21st, 2008 at 12:07 am
Dale,
I’ve got it working as planned now. Thanks for a great script that I have now heavily modded.
Drew
October 21st, 2008 at 2:37 pm
Hi there, great script! I love it. I just have this strange thing occuring. I have about 5 menu items and each of them does “cleanOutThumbs” and then “loadXML” to open a different gallery.
My problem is that after a random number of times, where I click a thumbnail to see the next gallery, I get this:
—
Error: Error #2029: This URLStream object does not have a stream opened.
at flash.display::Loader/close()
at index_fla::menytips_detalj_13/loadBigImage()
at index_fla::menytips_detalj_13/thumbLoaded()
—
The odd thing is that it only seems to happen when I have uncommented loadBigImage(null, 0).
October 22nd, 2008 at 3:37 am
Oyvind,
Change
thumbLoader.close()
to
thumbLoader.unload()
November 11th, 2008 at 6:16 pm
Hello Dale
I just came by your blog, and found your script very interesting.
I got one question that i hope you will answer even though it may be stupid.
I’ve downloaded the zip > extracted the file > and opened the .fla
When i try to play it tells me:
Looks like there was an error loading the XML
Looks like there was an error loading the CSS file
what did i do wrong?
Many thanks
November 12th, 2008 at 9:56 pm
Hi, Dale. First of all, thnx for it. It’s a really nice job. Second, my english sux, I’m brazilian, so forgive me for any language mistake.
I’m a noob on flash works, and I’m having this problem when I publish it to a flash movie, it says: “Cannot open a protected movie”. I didn’t change anything, just “unzipped” it and published. It works perfectly when published to html, but it doesn’t on flash movie.
Do you have any idea of what’s going on?
November 14th, 2008 at 5:35 pm
Hi Dale,
Don’t know if this is already addressed in the comments but you mention in the source code “another smoother way to set up a scrolling panel” but it seems to be gone from the blog?
November 14th, 2008 at 9:40 pm
Michael,
I just downloaded it, and it worked fine.
November 14th, 2008 at 9:41 pm
Ryzzan,
Check the file permissions. Its definitely not protected in any way or form.
November 14th, 2008 at 9:42 pm
Trevor,
That class that I referred to has been removed from the site.
November 21st, 2008 at 9:58 pm
I’m very new to flash and AS3. I’m currently creating a flash website which exhibits my design work.
I was wondering how I could take your scrolling image gallery and link it to my currently created .fla file so that you can flow from my previously created content over to the xml scrolling gallery,
Thanks Dale.
November 27th, 2008 at 12:30 am
Dale,
Hey, nice file here. Thanks for releasing it to the public for free.
I have a combed through the above posts, and have not found anyone else having the same problem. btw: I’ve managed to get your file to work on its own.
- I have taken your code and put it into my fla.
- I moved all the external files into the same directory.
- I export to swf.
- only the buttons appear.
Somehow I got it to work once but it broke the next time I exported.
What am I doing wrong, anyone?
The other thing I just realized is when I export a new swf it doesn’t work, even though it was earlier…
I really appreciate your time,
Cameron
December 2nd, 2008 at 11:22 am
OK. I got it working now. Kind of.
But now I’m having path problems. It’s probably my lack of AS3 experience, but I can’t get this xml gallery code to work with functions or eventListeners outside of it in MC form. I’m trying to this:
root.ls.workBube.addEventListener(MouseEvent.CLICK,glBube);
function glBube(event:MouseEvent):void {
cleanOutThumbs();
loadXml(”bubeshko.xml?nocache=”+getTimer());
}
“ls” is my left side bar which is using liquid GUI code to hug the left side of the window. I want to keep that left alignment and have a button (”workBube”) also align left within the “ls” MC. Meanwhile the noponies xml gallery is within a liquid GUI centered MC on the Stage. Can these 2 MCs communicate with each other or do I have to get everything naked on the Stage?
BTW: the swf doesn’t work in when I preview it in flash, it only works in the html file. And I checked the file permissions, which seem normal.
Cheers,
Cameron
December 14th, 2008 at 9:11 am
well, I’ve got things working fairly well now. It just took some doing. I had to relocate the cleanOutThumbs function outside of the gallery code MC to get buttons in a different MC to be able to load new XML.
But now, however, I noticed that when I click on the load button twice the gallery breaks and only shows the thumbnails and the load progress bar hangs.
What could be causing this to happen?
Cheers,
Cam
December 17th, 2008 at 11:19 pm
The loadBigImage function only works when I click on a thumbnail, it can’t be called reliably any other way. Have any advice about how to modify the script to make it work outside of the gallery?
I would like to load a big image along with the gallery when a user clicks on an external button. How do I do that?
Thanks,
Cam
December 21st, 2008 at 5:04 pm
There may be something wrong with me, but both on my work, and at home the images are NOT clickable,
What am i doing wrong? I mean that your example isn’t clickable either.
December 22nd, 2008 at 9:53 am
Wow, this is the best gallery I have come across since one year!
Was trying out all kinds of different combinations of techniques, but it didn’t work out.
Is it true the thumbnails aren’t clickable? It seems like i’m missing out on a lot of functionality this way. Could you address me what I am doing wrong? Am I missing an update?
My software is up-to-date and I’m really struggling with the reason why the buttons aren’t working.
btw. my last post on this subject has dissapeared. am I asking the question the wrong way?
Greetings from Holland,
Marinus
December 23rd, 2008 at 5:24 am
it was asked before on how to add a next and prev button, i have gotten as far as:
prev_btn.addEventListener(MouseEvent.CLICK, loadBigImage);
if ( targetThumbs < xmlData.pic.length) {
}
i THINK xmlData.pic.length is the var that says the max value of thumbnails but i’m still having a bit of trouble finishing this, could you help?
thanks so much
December 23rd, 2008 at 9:08 pm
MARINUS84,
The thumbnails are clickable in the demo, the hand cursor is not triggered though.
December 23rd, 2008 at 9:09 pm
THEBEAR,
They should be clickable. The hand cursor is not triggered in the demo.
December 23rd, 2008 at 9:12 pm
RASTACODER,
Yes, the xmlData.pic.length is the max number of thumbs.
You need to use a boundary test, to see if you are below zero, or above the max number of thumbs. You can call the loadBigImage(null, picToLoad) handler to create your next and back buttons.
December 23rd, 2008 at 9:17 pm
Cam,
Make sure you call the function correctly, loadBigImage(null pictureToLoadId)
December 26th, 2008 at 1:29 pm
I do click them, but nothing happens. I’m not easily fooled by a not appearing hand
Thx, but it’s not working for me and i don’t know why. Not apple compatible maybe?
December 29th, 2008 at 1:52 am
MARINUS84,
Its made on an apple machine, so that wont be the issue.
I just downloaded, and ran the source file, it worked totally fine.
January 2nd, 2009 at 7:10 pm
Dale,
As far as the loadBigImage function I just uncommented the one you put in the code. It works the first time I click on my button, but the second time it doesn’t load the big image right, it just shows the progress bar. And it won’t load any big image after that if I click on the thumbnails. Not sure what’s going on. It seems like something is not getting cleared out.
Thank you so much for your time, I know you’re providing your files mostly for free, and I’m really grateful for it.
Thanks,
Cameron
January 6th, 2009 at 10:15 am
i am still getting the error below and i have read through this post many of times, what could be still producing this error…wow its 4am est lol
thanks again for this code i loves it.
Error: Error #2029: This URLStream object does not have a stream opened.
at flash.display::Loader/close()
at as3Thumbs_fla::MainTimeline/loadBigImage()
at as3Thumbs_fla::MainTimeline/thumbLoaded()
January 6th, 2009 at 10:20 am
i cannot reproduced that error when i comment out loadFirstImage(null, 0)
hmmm
January 6th, 2009 at 8:57 pm
Jay,
Try the new version I have uploaded, also you can replace the .close() method in your version with an .unload() method.
January 7th, 2009 at 2:13 am
changing the .close() to .unload() worked perfectly for v1.6 for the loadBigImage(null,0) function. Thanks Dale.
January 11th, 2009 at 7:39 pm
dude, i love you
January 13th, 2009 at 11:22 am
Thx for this excelent Flash.
To make it loop, simply duplicate the images in the XML file and change this function to this::
function scrollThumbs(event:Event):void {
holder_mc.x += Math.cos((-thumbMask_mc.mouseX/scrollPaneWidth)*Math.PI)*scrollSpeed;
if (holder_mc.x>thumbMask_mc.x) {
holder_mc.x = -(holder_mc.width/2);
}
if (holder_mc.x<-(holder_mc.width/2)) {
holder_mc.x = thumbMask_mc.x;
}
}
January 14th, 2009 at 4:37 pm
Howdy, Love the gallery it works great. I am on a mac and no issues.
Anyway, I am adding the gallery inside a movie where the first thing is I have your full screen image going then I am centering to the stage. I have a main_mc start playing and stop – I am using the gallery to show portfolio work. My issue is when I resize the window the whole movie clip moves like 1000 pixels to the left. Weird but I don’t nkow where to update inteh code for the gallery versus my code. Would be glda to post it all as a zip file. Here is the link … http://whelandesign.com/flash/gallery/as3_whelan3.html
thanks and peace
tim
January 14th, 2009 at 9:19 pm
just like Matt asked a while ago, i want to set the alpha of a clicked thumbnail to .5. and if you click another, they all reset and the clicked one is set to .5.
i’m kinda stuck by resetting the alpha of all the thumbs. can’t get the loop working. do you might have a suggestion?
January 14th, 2009 at 11:03 pm
You can do it using an event system, or a loop, with the loop approach probably working best for that gallery.
Add this function below;
function showActiveThumb(pictureToLoad:int):void {
for (var i:int = 0; i < holder_mc.numChildren-1; i++) {
if (holder_mc.getChildAt(i) is MovieClip) {
if (MovieClip(holder_mc.getChildAt(i)).pictureValue == pictureToLoad) {
holder_mc.getChildAt(i).alpha = .5;
} else {
holder_mc.getChildAt(i).alpha = 1;
}
}
}
}
Call this function by adding this line showActiveThumb(targetThumbs); into the loadBigImage function, after these lines;
//test to see if we have a mouse event or a simple function call
if (event != null) {
targetThumbs = event.currentTarget.pictureValue;
} else {
targetThumbs = pictureToLoad;
}
showActiveThumb(targetThumbs);
Make sure you take off the rollOver and rollOff alpha changes, as they will overwrite the click alpha.
January 14th, 2009 at 11:05 pm
Not sure whats going on there.
January 14th, 2009 at 11:45 pm
would anything be effected by the stage resizing?
thanks
January 15th, 2009 at 12:00 am
It would be, but I guess you need to reposition the gallery when the stage resizes
January 15th, 2009 at 10:17 pm
How could I have two of these in the same main_mc movie clip website?
Thanks
tim
January 16th, 2009 at 4:58 am
Two galleries?
I guess treat each one as an external swf and load them into your main mc.
January 16th, 2009 at 11:46 am
thank you very much for your quick reply and solution.
January 23rd, 2009 at 5:18 pm
Hum, I will try that one. I have switched a little and just have the one gallery. But I do not know how to get ride of the gallery when I click to another section. I tried the …
nav_mc.section1.addEventListener(MouseEvent.CLICK,removeThemAll);
nav_mc.section2.addEventListener(MouseEvent.CLICK,removeThemAll);
nav_mc.section3.addEventListener(MouseEvent.CLICK,removeThemAll);
//note the need to clear the thumbs with each load of new XML content
function removeThemAll(event:MouseEvent) {
cleanOutThumbs();
}
But I keep getting an error: (cannot access property of a null object reference)
Any thoughts would help. thanks -tim
January 24th, 2009 at 2:17 am
Hey,
Question: If cleanOutThumbs is used independently more than once, will a new gallery be able to load?
Thanks
January 25th, 2009 at 8:43 am
should be fine
January 25th, 2009 at 8:45 am
what else does your stack trace show, what line is the error at?
January 25th, 2009 at 9:26 am
I am getting quite a few errors that seam to me to be coming from timing issues. Like the images try to load before the xml gets a chance to. The errors are not consistent and are somewhat random.
here is my Action Script
http://www.michealwillett.com/test/AS3.txt
here is the site (exhibitions button, then The Human Condition)
http://www.michealwillett.com/test/main.html
Also, here is a zip of the entire project
http://www.michealwillett.com/test/site.zip
January 25th, 2009 at 9:49 pm
The only error I got was due to a frame label not being present (argument error), the gallery itself didn’t give me any errors.
January 25th, 2009 at 10:51 pm
I probably shouldn’t have changed my main.swf while I was having people look at it. You saw a version where I dropped the frame rate to see how that would affect the load. Perhaps that did help a bit. I’m still running into some issues, like some images not wanting to load from the thumbnail. And hang ups when the thumbs load.
http://www.michealwillett.com/test/main.html (high frame rate)
compared to
http://www.michealwillett.com/test/mainat12.html
(12 frames per second)
January 25th, 2009 at 10:53 pm
Hello againl, CAM I actually called it everytime a navigation button was click and the gallery loaded every time. I am new to as3 and somewhat programming so I do dumb things. What was happening was that the gallery wouldn’t go away when I went to t different section (http://www.whelandesign.com/portfolio/) so what I did was to removeChild(); when the timeline jumped to the new section and it worked without any errors.
I am not sure if that is the best method but currently it works.
peace -tim
January 27th, 2009 at 5:15 pm
First, Dale, thank you so much! I really appreciate the time and energy you’ve put into this project!
This is probably really obvious for most of you, but since I was trying to figure the answer out for hours, I will post it for the benefit of future searchers.
I was trying to get the text of the descriptions in front or on top of the large Image. I did this by replacing
addChild(largeContent);
to
addChildAt(largeContent, 0);
I have encountered problems with centering the image. I know there was a discussion at the top of the comments about replacing
largeContent.x = 50;
to
largeContent.x = stage.stageWidth/2 – largeContent.width/2;
This did not work for me at all (when I would trace largeContent.width it would always display 0.
so I moved
largeContent.x = stage.stageWidth/2 – largeContent.width/2;
to
if (event != null) {
targetThumbs = event.currentTarget.pictureValue;
largeContent.x = stage.stageWidth/2 – largeContent.width/2;
trace(largeContent.width);
} else {
targetThumbs = pictureToLoad;
}
now when I load the first image the left side aligns to the center of the stage. I have to click on an image twice for it to center. Any ideas what I’m doing wrong?
BTW I have made the
largeImgLoader.contentLoaderInfo.addEventListener
(Event.COMPLETE, loadLargeInit);
change.
Thanks again!
Ben
January 27th, 2009 at 6:11 pm
Hey, I figured it out.
I put the
largeContent.x = stage.stageWidth/2 – largeContent.width/2;
right before the end brackets of the
function loadLargeInit(event:Event):void {
……
largeContent.x = stage.stageWidth/2 – largeContent.width/2;
}
Thanks again for such a great tutorial!
January 28th, 2009 at 8:51 pm
First of all, thank you for sharing your code as it has been both educational and a time saver. One feature that has been mentioned in prior posts which I am still having difficulty implementing is to have the thumbnail images cycle when they have reached the end of the XML.
I have the thumbnails start to scroll automatically once they are loaded and initially, of course, the string of thumbs would end after the final XML image moved out of the bounds of the mask.
I have addressed this by incrementing “p” (p++) within a loop contained in the thumbLoaded function rather than incrementing it in the loadThumbs function. To be clearer, here is the added code:
if (p < xmlData.pic.length()-1) {
p++;
loadThumbs();
} else {
p = 0;
loadThumbs();
}
While this works, it does so by continually appending thumbnails to the “holder_mc” movieClip which I’m guessing is an ineffective method that could result in a hit to the CPU if allowed to run.
My feeling is that a better method would be that, once a thumbnail has moved out of the mask boundary, to move that thumbnail to a new position which appends it to the end of the “line”. I’m guessing that this should achieve the effect without the need to recreate existing objects.
Can anyone provide insight on how this would be accomplished? Also, I’ve read through the entire thread so, if this has already been explained and I simply couldn’t grasp the concept, I apologize.
Thank you
January 31st, 2009 at 11:16 am
Great gallery…
I’m trying to add a scrollbar and track to the text box, (not the normal one from flash’s compnents panel). Is there an easy way to implement this?
do you have any hints / tutorial links?
thanks
Jeff
February 2nd, 2009 at 6:35 am
Is anyone else having problems loading thumbnails in Flash 9 player?
February 4th, 2009 at 4:01 pm
Hello!
Why when I call the swf of the gallery through another swf, comes the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at as3Thumbs_fla::MainTimeline/frame1()
How can I solve?
Thanks!
February 5th, 2009 at 9:55 am
I’ve downloaded the source file, however, when i publish from within flash, it will only load one thumbnail. I click “reload thumbnails” but, it still only loads one. Why is this???
Thank you
February 5th, 2009 at 9:13 pm
Its looking to access the stage, so you will have to change the elements of the script that reference the stage.
February 5th, 2009 at 9:20 pm
Have you changed the XML etc? Its working fine here.
February 6th, 2009 at 3:29 am
Dale, thank you for your response, i’m unsure of the stage issue. Here is the error i get:
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::Loader/_load()
at flash.display::Loader/load()
at as3Thumbs_fla::MainTimeline/loadThumbs()
at as3Thumbs_fla::MainTimeline/thumbLoaded()
February 6th, 2009 at 9:40 pm
@Damonlee
What version of Flash are you using, and what version of the Flash Player do you have? This seems like the same error that one of my otehr classes have, when writing over the top of an existing loader object. Which, according to the docs, you should be able to do.
February 6th, 2009 at 9:57 pm
I have flash cs3 and flash player 9
February 6th, 2009 at 11:10 pm
@damonlee,
Ok, seems like there is some kind of issue with the loader class, and loading new content into a single loader instance. I’ll have to try to fix it. The issue doesn’t occur when using Flash Player 10, oddly.
February 18th, 2009 at 6:15 am
The gallery works perfect when I preview it in Flash however as soon as it’s published to HTML the thumb loader freezes on the first XML image. A I’ve rechecked my XML and made correct changes when adding new images. ny ideas why this might be happening?
Thanks, I appreciate it!
February 18th, 2009 at 6:44 am
I’m having the same issue as Matt however, I’m not sure how he resolved this:
MATT NEIGHED:
April 7th, 2008 at 11:36 am
Dail,
I figured out the problem. It apparently has something to do with the AC_RunActiveContent.js file that Flash creates when you publish a movie. If I don?¢‚Ǩ‚Ñ¢t use the one Flash created for me when I made my gallery, the gallery doesn?¢‚Ǩ‚Ñ¢t work. I have no idea what would be causing this issue, but that seems to have been the cause of my troubles.
So how did he fix it?
February 18th, 2009 at 7:54 am
Seems that the problem is just on a Mac in both Safari and Firefox. The AC_RunActiveContent.js is included in the directory and the thumb slider still freezes on 1st slide.
Thanks for any suggestions.
February 18th, 2009 at 8:04 am
I upgraded and published to Flash Player 10 and the issue was resolved. Sorry littering the post, I must have missed some of the recent discussion regarding this issue. Thanks for keeping this site exiting, I’ve learned a lot playing with all the AS3!
February 18th, 2009 at 8:05 am
@Bob,
What version of Flash are you using?
February 18th, 2009 at 7:53 pm
@Bob,
I think there is a bug in a version 9 flash players when using a single loader object repeatedly, as that issue you had disappears if you publish to Flash Player 10. I’ve made some enquires to get my suspicions confirmed, but no luck on that yet.
I’ve updated the file with what should be a fix.
February 21st, 2009 at 2:59 pm
Dale, first off great stuff. Im looking to add a feature to the gallery that zooms the thumbnail selected to the exact dimensions and coordinates as the large image and fades out once the large image has been fully loaded. Do you have any suggestions as to where to begin. I was thinking about duplicationg the thumbnail, then performing the tweens but honestly im not sure the best approach. Any suggestions would be greatly appreciated
February 21st, 2009 at 10:20 pm
@Curt,
I would probably use an approach where I captured the bitmapData of the thumbnail, drew it to a temporary movieClip and zoomed that. That way, the thumbnails are seperate from an zooming actions. Have a look at the Draw method of the bitmapData class.
February 23rd, 2009 at 12:09 pm
Hi Dale, thanks for the tip. im trying the method of the BitmapData.draw
and it will duplicate the thumbnail if i place the following code
var myBitmapData:BitmapData = new BitmapData(200, 200);
myBitmapData.draw(thumbContent);
var bmp:Bitmap = new Bitmap(myBitmapData);
this.addChild(bmp);
inside the “thumbloaded” function.
however, if i make a function from the MouseEvent.CLICK listener, with the same code
var thumbContent:MovieClip = event.target.content;
var myBitmapData:BitmapData = new BitmapData(200, 200,true);
myBitmapData.draw(thumbContent);
var bmp:Bitmap = new Bitmap(myBitmapData);
this.addChild(bmp);
it gives me an error of ”
ArgumentError: Error #2005: Parameter 0 is of the incorrect type. Should be type IBitmapDrawable.
at flash.display::BitmapData/draw()
at gametime6_fla::MainTimeline/duplicateClickHandler()”
im not sure why its giving me this error. any ideas would be much appreciated,
thanks a million,
curt
February 23rd, 2009 at 7:28 pm
Seems like the cast to MovieClip is not working. What happens if you trace thumbContent == IBitmapDrawable ?
February 23rd, 2009 at 8:53 pm
Dale,
i get this when i trace (thumbContent == IBitmapDrawable);
1176: Comparison between a value with static type flash.display:MovieClip and a possibly unrelated type Class.
the problem seems to be that when i use the following in the function ”
var thumbContent:DisplayObject = event.target.content;”
or any similar var to get the display object, the var is always returned as “null” when i try to trace the (thumbContent)
so then i can do anything with it.
i can use the BitmapData.draw on the holder_mc with out a problem, I just cant make a copy of any of its children. any ideas,
as always, thanks a million
curt
March 11th, 2009 at 12:46 pm
Hey there,
Thanks for such an inspiring resource! Seeing this made me want to learn more, so thanks!
Anyone know how to scale the thumbs bigger on MseOver. I changed the tween within the thumbs to scale, but it looks like it loads the thumbs from top left, so when it scales it stretches off the mask so you cant see it scale X and Y, only horizontal.
…know what I mean?
Any help would be greatly appreciated
March 13th, 2009 at 4:01 pm
where does loadBigImage(null, 2); go in the code? if I leave it where it is, and un-comment it, the flash movie breaks.
March 13th, 2009 at 9:56 pm
Its designed to load a large image via code, rather than by a mouse click.
March 17th, 2009 at 3:14 pm
Anyone know how to change the thumbnail load position from top-left to center of thumbnail??
Anyone…
March 18th, 2009 at 11:51 pm
Hi
if i place a swf instead of an image in the xml file it is loaded in the gallery (as thumbnail and bigimage).
But if i place the mouse over this movieclip in the gallery nothing happens (it should be animated by the roll-over event) and it stays stopped instead.
How can i listen to events on each single thumbnail ?
thank You for your help
March 19th, 2009 at 12:02 am
for example, can i set all the thumb’s alpha to .5 but raise this value to 1 for the thumbs with mouse over ?
thank you
dario
March 20th, 2009 at 3:11 pm
Hey there,
gallery works perfectly when published normally or to html. It does return errors:
“Looks like there was an error loading the XML”
“Looks like there was an error loading the CSS file”
when published to flash or using test movie.
Any idea what can be wrong? No changes made to original file, just unzipped.
March 21st, 2009 at 3:33 am
wonderful and SOLE free example of this type of gallery in as3. you are a noble, noble person to post this with source files and all… thank you. i’ve built a very primative xml gallery on my website, but this one is definitely light years ahead of the one i made. will be studying your source code for the coming weeks. thanks again!!
-hank
March 21st, 2009 at 8:14 pm
i’m importing swf instead of jpg files into the gallery; there are some rollover buttons on them.
can you give me please some help to understand why if i run in a flash player the movie the rollover on each item works but not if i open the main file in html page ?
Thank you
March 24th, 2009 at 1:06 pm
i’ve updated my Flash Activex and Plugin and everything seems to work fine finally,
This is a great Class.
thank You
March 25th, 2009 at 10:53 pm
Hello again,
where can i set the pixelfumes’ reflection properties ?
March 26th, 2009 at 12:42 pm
You cant set those in the simple gallery as they don’t exist within it.
March 30th, 2009 at 1:30 am
Hey Dale,
Just downloaded and tried the latest files and noticed that with loadBigImage(null, 0) uncommented I sometimes get the error-
TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChild()
at green_fla::MainTimeline/loadLargeInit()
I am at a loss at why it should only happen when an image is manually loaded or why it only happens sometimes. I still have a lot to learn. Was wondering if you could shed some light on this.
Many thanks
March 30th, 2009 at 7:21 pm
Hi Dale,
Your code has saved me a lot of time. I am trying to add a scroll bar at the bottom of the thumbnails, but haven;t succeeded yet.
Can you please advice me on this.
Many thanks
March 31st, 2009 at 12:38 am
Seems to be happening most when I change galleries too. Oh, and the green.fla in the error i pasted above is obviously what I renamed as3Thumbs.fla
April 1st, 2009 at 10:14 am
Sounds like the child you are trying to add does not yet exist, so its some kind of order of instantiation problem. If I get a chance I’ll look at it.
April 2nd, 2009 at 5:25 pm
thanks for this code – works great (when I don’t screw it up!)
it’s awesome that you answer everyone’s questions, and help we, inferior coders… you saved me three days work
April 21st, 2009 at 6:52 pm
this might be worth looking into:
I wanted to load the first image so I uncommented the line “//loadBigImage(null, 0).” However, you might notice that due to the if statements, this will be executed twice and your first image will attempt to load twice which has caused errors in my use. To fix it, I changed the second if statement to an “else if”
For example, if p is 23 and the xmlData.pic.length() is 24, the first if statement will execute and call loadThumbs. Since loadThumbs increments p, the second if statement will be allowed to immediately run after. This if statement will be entered a second time when loadThumbs calls thumbLoaded.
May 8th, 2009 at 2:50 am
Thanks Tim. That sorted out the problem I was having. So simple now I look at it. And thanks again Dale for all your hard work.
May 10th, 2009 at 10:14 am
hey there! I found a bug in the gallery and can’t figure out how to fix it.
the bug:
when you load new thumbnails it messes up the thumbnails and large images so when you click on a thumbnail it shows a wrong large image. you can see the same bug in your example gallery. click on the load new thumbs and then click the first thumb. it shows the wrong image.
May 10th, 2009 at 11:13 am
edit: I fixed the problem by moving p++; from loadThumbs() to thumbLoaded()
May 11th, 2009 at 11:36 am
Hi Dale,
I am pretty new to flash and actionscript 3 so sorry for the silly questions.
Firstly how do i move the thumbnails scroller to go above the large image?
Secondly is there a way that once the image is loaded it stays in the browser’s memory. I have added some swf in the gallery and it works fine but when one returns to a previously viewed swf it needs to reload again. Is it possible for it not to reload a second time?
Thanks very much for this gallery and all the other great stuff on this site.
May 12th, 2009 at 6:51 am
Hi Dale, could you please tell how to make when mouse over the thumbnail it become bigger like this sample http://www.template-guide.com/preview/2385/ also it would be very cool if the thumbnail can have reflection/shadow in the bottom.
Thank you very much for your share and hard work.
May 21st, 2009 at 9:24 pm
Hi,
thanks for the code.
I have been making some changes, all has been going well except for one odd glitch.
I have added centering of different size images.
I have a frame that tweens to fit the size of a new image.
So I fade the image in .5
then tween the frame to the new size with a delay of .5
then fade in the image with a delay of 1.
Heres the problem as soon as I add that last delay I get a quick flash of the image when the thumbnail is clicked, it vanishes, then fades in as it should.
the frame stuff makes no difference, I can comment it out. Its the delay on fade in.
try this
TweenLite.to(largeContent, 4, {alpha:1,delay:1,ease:Circ.easeOut});//alpha in the large image
thanks
mark
May 22nd, 2009 at 5:48 am
Hi Dale
Thanks so much for sharing and answering questions!It is so kind of you.
Your coding helps me a lot and it works great. I am new to AS and I hope you don’t mind I ask this question : How can I set to load the first large image when we first click the window? Currently it looks a bit empty on the page so I think if it could automatically load the first image that would be wonderful.
Thanks again!
May 26th, 2009 at 9:20 am
I’ve been customising this gallery a little and (similar to Seth’s post http://www.blog.noponies.com/archives/16#comment-762 ) I’ve added two extra columns to the thumbnails (now 4×3). It’s almost working perfectly, but the thumbnails load in columns from left-to-right, instead of loading in rows from top-to-bottom. Does anyone know why this might be happening?
June 9th, 2009 at 7:36 pm
Hi Dale,
You have some really awesome work! I have a question if you have some time for it.. how would you get this thing to work in a self-contained movie clip that you can put anywhere on the stage? When I put it all in an mc, the text output box still shows the thumbs loading, but neither the thumbnails or the big photo actually shows up.
Thanks!!
June 17th, 2009 at 5:58 pm
Hi,
great educational script, thanks!
I have set it up twice on a page.
I have the standard gallery in one movie clip.
In another movie clip I have altered it so that I just have the thumbnails showing up in a vertical layout.
I want the thumbnails in the vertical clip to cause the regular one to load another gallery xml file.
Basically add that loadNew function to the vertical thumbs and have the xml gallery file to load listed in the xml file for the vertical thumbs.
Any help greatly appreciated.
July 3rd, 2009 at 11:09 am
Hello,
Just wanted to thank you for the script, it has been a huge help!
The comments as well I may add