UPDATE: Version 2 of the class is now available here: http://www.ideaography.net/update-fullscreen-gallery-flash-class-v2/
For the last couple of month's, I've been delving deeper into developing class based Actionscript and I must it admit took me a while to get used to it, but once you pop, you can't stop. I'm not going to go into the many reason's why class based development is better than timeline, but for me its helped develop my skills to program properly and not take shortcuts that timeline scripting can provide.
Anyway, enough about classes and onto the gallery.
This is a simple one page, full screen gallery class that loads thumbnails and images via XML.
Instead of using of 1 image for the thumbnail and main shot, I decided the best option was to use a separate image for the thumbnail as I find that some images don't work well at a smaller sizes when there's lots of detail involved. The Bitmap data class is used to pre-load the main images as the thumbnails load so no extra waiting is needed once the thumbnail is clicked.
For the animation, the TweenLite class was used. I have included it in the zip file below, but you should visit the GreenSock blog if you want to learn more about how to use the class.
Each thumbnail has a short description which appears on rollover and is limited to about 10 words or so, but you can increase it by editing the description movieclip and playing about with the layout and size.
The structure of the XML is quite simple using an item for each image and attributes for image paths and description. Here's an example of the XML:
<data> <item img="images/img1.jpg" thumb="images/thImg1.jpg" desc="testing desc"></item> <item img="images/img2.jpg" thumb="images/thImg2.jpg" desc="Image description to go in here"></item> <item img="images/img3.jpg" thumb="images/thImg3.jpg" desc="testing desc"></item> <item img="images/img4.jpg" thumb="images/thImg4.jpg" desc="testing desc"></item> </data>
That's about it really, its very simple at the moment and I'll probably end up adding extra navigation for album into the class and other useful things once I have more time.
Here's the online demo of the gallery and the zip file with the Source files and code. Visit here for the updated source code.
Oops - Forgot to add Robert Penner's easing class to the zip file. robert penner easing class
76 responses so far ↓
1 admin // Dec 27, 2007 at 10:41 pm
If you have used this at all and have found it useful, please leave a comment. If you have any suggestions for improvement, added features or have found bugs, let us know.
2 Flash Framer // Dec 28, 2007 at 3:22 pm
Great source files and sweet gallery thanks
http://www.flashframer.com
3 Robyn // Jan 18, 2008 at 8:31 pm
I can’t seem to get it to work on my website… all I get is a black background (or sometimes it defaults to the "flash content" message, telling me I need to update my flash player, which is up to date..?!?)
… but it seems really cool from the samples!
4 Adam F // Jan 22, 2008 at 10:38 am
How would you go about adding a description to the full screen image? Beautiful work btw :)
5 admin // Jan 23, 2008 at 9:33 am
Easiest way would be to add an another attribute to each item for the long description.
Create a text box in flash for the long description to sit in, give it linkage properties so it can be targeted from the class.
In the class find where the xml attributes are assigned as variables to each item (you can find it under the line //store values per menu item) add another variable to pass the long description attribute into. i.e.
_currBtn.bLongDesc = galArray[i].attributes.attributeName
Then in the function _showLargeImage, attachmovie the text box you created earlier and pass the variable into it.
Hope that makes sense.
6 admin // Jan 23, 2008 at 9:35 am
Robyn — It Might have something to do with swfobject not working properly if you just see a black background.
Also check to see if you kept the folder structure correct so that flash is using the correct path to the xml file.
7 Ernie // Jan 25, 2008 at 4:07 pm
Was wondering how can you reposition the thumbnails where ever you want them?
AWESOME GALLERY BY THE WAY!
E*
8 Ernie // Jan 25, 2008 at 4:45 pm
Also does anyone know how come when I try to click out of the gallery it doesnt go away and just stays in front of everything?
E*
9 admin // Jan 26, 2008 at 6:08 am
to reposition the thumbs, change the value of menuContainerX and menuContainerY in the class. At the moment its set to 100×100.
Not sure what you mean by stays in front of everything, are you trying to use it in a layout of your own. if so, you can set the menuContainer._alpha to 0 to remove it when you dont need it or remove the movieclip from stage. (all the thumbnails sit in a movieclip)
10 Ernie // Jan 27, 2008 at 7:56 am
Awesome! I reposition them! thanks!
In what file can I find the menuContainer._alpha ?
Can locate it???
E*
11 admin // Jan 27, 2008 at 8:06 am
you have to add menuContainer._alpha = 0 in the function that will remove the thumbnails for gallery. Its not in there at the moment.
So if you want to show another section of your site and remove the gallery, i would set up a function to fade out the gallery and call it from the function that shows the new content.
If your using a fadeout, make sure that you use the onComplete variable of tweenlite to call the new area once the tween has finished. i.e
_removeGallery = function(newSectionToLoad){
TweenLite.to(_menuContainer,0.5,{_alpha=0;onComplete:function(){_menuContainer.removeMovieClip();_loadNewSection(newSectionToLoad)}}
}
*// newSectionToLoad would a variable to tell removeGallery which section of the site you want to load.
12 Ernie // Jan 27, 2008 at 9:55 pm
Heres the link so you can see what I mean. Click on the gallery link then on the first pic button then when the gallery comes up hit any navigation buttons.
Thanks for your help!
E*
13 admin // Jan 28, 2008 at 11:21 am
yeah you need to remove the container for the gallery when you go into different areas.
You should the following to the other buttons on the site:
_root.menuContainer.removeMovieClip();
and that should remove the gallery thumbnails for you.
14 Ernie // Jan 29, 2008 at 3:54 am
THANK YOU IT WORKED!!!
VERY AWESOME!
E*
15 Tim J. // Feb 1, 2008 at 6:30 am
Awesome gallery!
Is there a way to make the thumbnail buttons smaller or bigger?
Great Work!
T.j.
16 admin // Feb 5, 2008 at 11:19 pm
Yep, its easy enough to edit the size of the thumbnails.
You need to edit the “thumb” movieclip in the library and resize the elements inside to how you want it and edit the following elements in the class file
//width of cell(thumb plus space)
public static var cellWidth:Number = 130;
//width of cell (thumb plus space)
public static var cellHeight:Number = 100;
and that should be it basically.
17 thom grub // Feb 16, 2008 at 8:02 pm
thank you so much
18 hyacinth // Feb 23, 2008 at 9:53 am
I have portrait-sized images instead of landscape ones… how do I make it centered and not clipped when I view it on the large scale?
19 admin // Feb 27, 2008 at 4:06 am
I quick and easy way to fix this would be to put the portrait image into a landscape one and just have what ever the background colour is on the sides.
The best resolution i find for this gallery is to use 1024×768, so just add the image into that frame size and it should be ok.
20 jimai // Feb 28, 2008 at 11:45 pm
Awesome gallery. I am having some trouble using it though. Sometimes it loads vertically from top to bottom in a sigle row. When it does this, after the thumbs load and I click on one nothign happens, and the screen just goes black. Also, when this happens, not lal of the thumbs are visible, as you cant scroll down.
When I loads horizontally, everything works perfectly fine, but it doenst always load this way.
What do I do???
21 admin // Feb 29, 2008 at 7:55 am
very strange, i never seen the thumbs load vertically before. Do you have an example of the page where this happens?
22 jimai // Mar 3, 2008 at 10:28 pm
No example at the moment. I have taken everything donwn due to this issue. Do you have any idea as to why this might be happening???
23 admin // Mar 4, 2008 at 8:58 am
No idea why this would happen and without being able to see an example of debug the code it would be hard to provide a solution. What modifications, if any, did you make to the class to implement it into your project?
24 graphections // Mar 7, 2008 at 2:52 pm
After weeks of trying to figure this out myself…. I found your class Awesome man!!!
If there are more thumbs than can fit on the page, how do we load a new page of thumbs, with a next button.
I notice there are next and back buttons in the library..
Id love to figure this out, you rock!
Thanks
25 Huy // Mar 13, 2008 at 4:45 pm
A feature that would be awesome to be able to move around the image if the image is too big, especially for the vertical ones. As an example, take a look here: http://www.emmanuelrouzic.com/
The site is quite big, so the download will take a bit of time to load.
26 newbie // Mar 20, 2008 at 2:12 pm
I would like to know how to make this stay at 1000w x 700h to stay on the background image I am laying it on. It is working now but when I use it on my 1280 screen it resizes with the"TL" falls out of line background image. What would I use to modify it so the the image stays full screen. But the buttons appear on a 1000×700 container? Great Work..!
27 admin // Mar 20, 2008 at 10:58 pm
2 things would probably do it. Resize the fla to 1000×700 and in the embed code on the page, instead of using 100% for width and height, use the width and height.
var so = new SWFObject(”build.swf”, “sotester”, “1000″, “700″, “8″, “#000000″);
and that should fix it.
I’ll also get to the others questions above soon, just been crazy busy…
28 SM // Apr 9, 2008 at 11:45 pm
Is there anywhere that has instructions for using the template? I love it, just don’t know what do DO with it! :_
29 Wess // Apr 10, 2008 at 9:35 am
If i would like to start with a fullframe picture like http://www.brook-pifer.com/ and then click to show the thumbnails. Is it possible?
30 15+ Free, powerful and easy to integrate Flash image gallery - Ntt.cc // Apr 10, 2008 at 12:38 pm
[…] No.14 Fullscreen Gallery Flash Class […]
31 Las mejores galerías fotográficas « Diseño web y posicionamiento en buscadores // Apr 11, 2008 at 8:17 pm
[…] Fullscreen Gallery Flash Class Demo […]
32 BROCK // Apr 15, 2008 at 6:29 am
hey i was wondering how i would go about making a new line for the photos instead of them going in a line forever?
33 Apostolos Nikolakopoulos // Apr 20, 2008 at 1:51 am
I’m guessing you’re Greek. Do you do custom flash work? Do you want to do some work for me, if I can afford you, that is…
34 Apostolos Nikolakopoulos // Apr 20, 2008 at 1:51 am
I’m guessing you’re Greek. Do you do custom Flash work? Do you want to do some Flash work for me, if I can afford you that, is…
35 Serhat Yolaçan » 33 En Güzel Javascript ve Flash Galeri // Apr 20, 2008 at 10:51 pm
[…] Fullscreen Gallery Flash Class Demo […]
36 Gladys // Apr 22, 2008 at 4:28 am
Hi there. thanks for putting this up. It’s great. I was hoping you could guide me to be able to remove the "button" from the enlarged image (that bring us back to the thumbnail). I’d like to be thumbnail to open a SWF movie with another gallery in it. But I can’t seem to find where to disable that ‘button’
Thanks very much.
37 admin // Apr 23, 2008 at 9:21 am
wess - yep, it might be a bit tricky the way it currently loads, but in theory you should be able to call the onRelease function on the button of the image you want to enlarge at the start.
Brock - hmm strange i thought i did set it up in a grid system. Ill have to recheck the code now, that for pointing it out.
You can just remove the code thats in the onRelease button on the main image and it will stop it from removing the image. look for the code:
if ($currBtn.bShowing) { currFunc._showLargeImage($currBtn)
}
38 admin // Apr 23, 2008 at 9:23 am
SM - im in the process of simplifing the use of the gallery and creating some detailed instructions to go along with it so keep a look out for that (when i eventually finish it).
39 David // Apr 23, 2008 at 7:01 pm
Great script!
I’m wondering a couple things. It was asked before about having the thumbs start a new line instead of just continueing on in a line. I’d like to do rows of 5.
One other thing: can I limit the height of the large image so it doesn’t go off the screen? Right now if I’m on a 1280×768 screen the photos look great, but then if I put this on a widescreen monitor at say 1400×800, the large photo will resize so the width is 100%, not the height and the top and bottom of the image are cut off.
Thanks!
40 David // Apr 23, 2008 at 7:55 pm
I figured out the thumbnail column problem as your code is really tidy and easy to follow.
I still would like to figure out how to limit the height of the image.
41 admin // Apr 24, 2008 at 2:52 am
The easiest way to deal with portrait images for the gallery is to add the image into a horizontal canvas and use a background colour for the edges. That way it will always resize well on all screens. Best resolution for images is 1024×768.
If you wanted to do it via code, i guess you could add an additional attribute to the xml file setting image direction to portrait and run an if statement in the class to check for the attribute. If it exists, only resize the image according to height.
Another option code be to create a formula to distinguish between portrait and landscape images and resize accordingly.
42 Chevette // Apr 24, 2008 at 9:15 pm
Hi first of all thanks for the great work. One of the people above made a comment about the pictures loading vertically, and you requested a example page so you could debug. The site I made with your template loads the pictures vertically if I hit ‘f5′ to reload. Hope you can find the bug now.
I can’t seem to get the background image to work, just get a black background, any thoughts on that?
43 admin // Apr 25, 2008 at 1:22 pm
ahh i see it now. Very strange, could only replicate it in ie though. Does it do the same thing in firefox? My guess it would have something to do with the Stage.width code, as ive heard lately it can be buggy within ie. Ill look to change it around in my next update. thanks for that.
Did you put the background image in the flash or html? If html, just add another param for swfobject called wmode and set that to transparent.
If flash, how did you go about implementing the background into the fla.
44 David // Apr 25, 2008 at 6:56 pm
I have built a porfolio page in a separate swf file using your class. This file works great when run on its own. What I would like to do is dynamically load the portfolio swf into a movie clip in another file. When I do this everything seems to break. I was wondering if you have tried this and if so what I might do to get it working. My attempts to figure out what is going on haven’t gotten very far.
I really appreciate your time in writing this and answering all of our questions.
45 admin // Apr 26, 2008 at 7:41 am
ok, ive updated the class now to fix some of the bugs mentioned above and to make it easier to add it into an exising project.
http://www.ideaography.net/update-fullscreen-gallery-flash-class-v2/
46 David // Apr 26, 2008 at 11:43 pm
Thanks so much for reworking the class for us. I have downloaded it but when trying to compile the projects, I’m getting two errors in the imageGallery.as file:
The class or interface ‘XMLSA’ could not be loaded.
Any guesses as to what would fix this?
Thanks!
47 admin // Apr 27, 2008 at 8:18 am
Sorry, forgetful these days. Re-uploaded version 2 of the file with XMLSA class.
48 David // Apr 27, 2008 at 6:37 pm
This worked perfect in a test project I created. It has a catch when using it in my main project. I’m using one of those flipbook components and am using your class to put a portfolio on a page. Everything works great except that the full screen picture is contained inside the one page. It doesn’t go full screen like my test project or the project you package do. Any ideas of what I should look for to make the photos go full screen? I don’t have the book source so I can’t do anything there.
Thanks again!
49 admin // Apr 27, 2008 at 10:28 pm
i think changing “this.createMovieClip” where $imageContainer is created to “this._parent.createMovieClip” should do the trick. Basically you have to create the container clip outside of the flipbook so it can attach itself to the main _root.
50 David // Apr 28, 2008 at 12:54 am
I can’t thank you enough for your help. I look forward to see what additions you come up with for the future. This is the best portfolio code I’ve seen yet.
51 David // Apr 28, 2008 at 3:05 pm
One more question. It seems that clicking on the thumbnails doesn’t always bring up the right large image. Also, after looking at the first large image after loading the program, one of the thumbnails is duplicated in the list.
52 David // Apr 28, 2008 at 4:31 pm
Please ignore my question, it was a flipbook thing.
53 admin // May 1, 2008 at 1:07 pm
Just updated the class to fix a bug with the previous image showing when a button was clicked…
54 Izmir Web Design // May 1, 2008 at 11:53 pm
Thank you.
55 Gallerie gratuite per fotografie in flash e in javascript | Caputo's Blog // May 5, 2008 at 6:17 pm
[…] Agile Gallery usa XML Fullscreen Gallery Flash Class Demo usa […]
56 David // May 7, 2008 at 7:37 pm
I am trying to make my thumbails a square 120×120px and am running into a block. No matter what I do I can’t get them to turn out square on the page. I have resized the thumb movie clip and changed the xml file to reflect the new size. But the resulting thumbnails on the page are rectangular and some of the image is clipped. If you could point me in a direction to look I would greatly appreciate it.
Thanks!
57 admin // May 8, 2008 at 10:43 am
remove the mask iin the imgContainer movieclip and it should work
58 Ali // May 12, 2008 at 5:39 pm
Hey there..
Very cool. I’m addressing a question asked many times regarding the full pix being clipped on higher resolutions. Say i take a pix at a very high resolution of 3504 x 2336. When i look at this in full screen mode, i only see a small part of the full image. When i double click on the image in windows explorer, it automatically resizes the pix to the accoring seeable resolution. Would this be a feature that could be added?
59 David // May 12, 2008 at 8:07 pm
I’ve nearly got everything working thanks to you generous help. I’ve got one more problem that I can not find. I have two different swf files that use the class to produce a portfolio. The two swf files show different portfolios so there are no images alike (they are using separate xml files). The two swf’s are being dynamically loaded in a container movie clip. The first portfolio loaded works perfect, when the next button is hit and the second swf portfolio is loaded, the first four thumbnails show the large image from the previous swf file’s portfolio. It doesn’t matter the order I load the two swf portfolios. Any ideas?
60 David // May 12, 2008 at 8:39 pm
I have a little update if it might help. I am using one of the flipbooks to do this portfolio. As I said before, the first page showing a portfolio works perfect. The second page will display large images (the thumbnails are correct) from the first page.
61 David // May 12, 2008 at 8:46 pm
I do NOT mean to be a pest here, I think what you have done is great.
I have been looking into this and have found another fact. Say the first page has 4 images. The second page has 6. The first four large images on the second page will be from the first page, the last two large images will be that of the first two thumbnails on the second page. It is appending the array instead of creating a new array for each page. Any ideas on what I could do about this?
62 Mudska Studio Blog Lab » 33 Most Beautiful Javascript and Flash Galleries // May 14, 2008 at 10:30 am
[…] Fullscreen Gallery Flash Class Demo […]
63 admin // May 14, 2008 at 10:56 am
i uploaded a multple album example. I tweaked the class a little and modified the xml to allow for albums.
http://www.ideaography.net/update-fullscreen-gallery-flash-class-v2/
64 felix // May 17, 2008 at 2:12 pm
I’ve found the treasure
65 jammy // May 17, 2008 at 2:14 pm
I love gallery’s
66 Satty // May 17, 2008 at 2:17 pm
When I love at that amazing flashing thing it’s wery bright bye and i would like to see a photo like that
67 » Blog Archive » Fullscreen Gallery Flash Class v2 // May 27, 2008 at 7:01 am
[…] informacji oraz pliki źródłowe znajdują się tutaj Posted by m.j. Filed in web zabawki Leave a […]
68 Cool Fullscreen Flash | Shanghai Tech Writer // Jun 7, 2008 at 4:01 pm
[…] Fullscreen FlashFotoPlayer TemplateCool Fullscreen is a flash-based template, originally created by Chris Agisotis, but turned into a Picasa template by Paul van Roekel. You can generate this slideshow using Picasa […]
69 anna // Jun 8, 2008 at 8:43 am
thanks for the great application.
i also try to change the size of the thumbnails. but when i edit the thumbs in flash cs3 and try to export a swf file, i get a lot of compiler-errors for the imagegallery. as , even if i don’t change anything in the flash file.
please, can you help me?
thank you in advancce.
70 admin // Jun 9, 2008 at 7:48 am
ive updated the gallery @ http://www.ideaography.net/update-fullscreen-gallery-flash-class-v2/ to work with portrait images and fix some other issues. Let me know if there are any other issues.
anna - what are the compile errors your receiving? most probably its not finding the classes, so make sure when u extract the zip file to keep the folder structure or edit the class paths to point to your new path…
71 Free Flash Applications :Image Galeries, FLV Players, MP3 Players | Flex Tech // Jun 9, 2008 at 7:02 pm
[…] Fullscreen Gallery Flash Class […]
72 anna // Jun 10, 2008 at 2:33 pm
-when i try to export the swf with action script 3 ,also without changing anything in the flashfile , the error is
"symbol "imgcontainer": 1152 :there’s a conflict in the definition flash.display:displayobject.mask in the namespace public
-when i try to export with actionscript 2 the cerror is "no property with he name "back" and "quint".
-when i try to export with actionscript 1 , it shows me no error-message , but the swf file also doesn’t work…
unfortunately, i ‘m a newbie in flash… :-(
greetings, anna.
73 admin // Jun 12, 2008 at 12:18 am
anna - u need to export it to actionscript 2. The back and quint used the robber penner easing class, so u need to install the class in folder you extracted the flash files to.
Sorry forgot to include it in the zip file, but you can download it from here : http://www.robertpenner.com/easing/penner_easing_as2.zip
make sure u keep the directory structure when you unzip it.
74 anna // Jun 14, 2008 at 6:18 pm
thank you a 100000000000000000000000000 times :-)… i was really in despair.
i hope, now i will make it .
have a nice and sunny weekend , anna.
75 32 Flash и Javascript галереи | Дизайн-журнал №1. // Jun 23, 2008 at 8:17 pm
[…] Fullscreen Gallery Flash Class Demo […]
76 Bruce // Jul 1, 2008 at 4:43 am
Does the fullscreen galley work with CS3? I keep getting the error the current gallery is undefined. HELP! I love the galley I just wish I could get it to work.
Thanks!
Leave a Comment