ActionScript 2 Sliding Images Gallery
This file is a demo of a sliding images gallery, as used on my work site, http://www.thereformation.co.nz.
Basically images are loaded sequentially from an XML file into a movieClip, which is dynamically masked and then tweened. The gallery has support for text descriptions and also creates a dynamic image numbers navigation system which updates itself based off how many images you happen to load in. All text is CSS styled.
Contained in the .zip file are a Flash CS3 and Flash 8 source file, XML files, sample images, the tweenFilterLite class and the font used in the project.
Updates
09 June, 2008. File now supports multiple XML files
View Example
View an example of the project here; http://noponies.com/dev/slideimages/ (no preloader, 36k file size)
Source Files
Grab source files here; Sliding Images Gallery Source
Dependencies
TweenFilterLite http://www.tweenlite.com
Flash CS3 or Flash 8
February 20th, 2008 at 3:04 am
very interesting reading cool
February 20th, 2008 at 10:43 am
hey thank u for sharing..
very nicely done
March 13th, 2008 at 2:21 pm
hey nice gallery, really something i can use for my portfolio. i have been playing around and customizing it a bit, is it possible to load different xml files with te click of a button. thanx in advance and keep up this great site
March 13th, 2008 at 4:49 pm
Ronnie.
I’m sure that is possible. Just make sure you unload all the content in the gallery before you load a new one.
March 14th, 2008 at 3:29 am
Thanx for te quick respons
i figured out how to load two xlml files
i changed
slide.load(“slideimages.xml”); to slide.load(xmlFile);
placed it between a function
added two buttons
button1.onRelease = function () {
xmlFile = “xmlfile1.xml”;
loadXMLfunc();
}
button2.onRelease = function () {
xmlFile = “xmlFile2.xml”;
loadXMLfunc();
}
it loads in the xml but it keeps loading it in, any idea how to unload, i tried a few things but no luck
thanx in advance
March 14th, 2008 at 7:08 am
hey there its me again, found a strange thing in safari. if you click on the back and forward browser button and you go back to the gallery its a blank page. You have to reload the page to see the gallery, if you use firefox it’s ok. I use a mac with OSX 10.3
any idea what could be the problem.
March 14th, 2008 at 11:43 am
Sorry Dail, forget the previous post it happened because i wast testing it locally if its online its ok in safari
March 14th, 2008 at 12:41 pm
Try something like this to remove all the content. Just change the script to reflect the name of the movieClip that has the loaded content in it. I forget what one it is
/****************************************************************************
REMOVE ALL THUMBS METHOD
****************************************************************************/
//Use to clear old thumbs if you are going to add in a new set of thumbs
function removeAllThumbs():Void {
for (var i in imageHolder_mc) {
if (typeof (imageHolder_mc[i]) == “movieclip”) {
removeMovieClip(imageHolder_mc.getInstanceAtDepth(imageHolder_mc[i].getDepth()));
}
imageHolder_mc._height = imageHolder_mc._height
}
}
March 19th, 2008 at 3:49 am
Hoi Dail, thanks for sharing, I have a lot to learn on Flash, your site helps me a lot.
March 24th, 2008 at 2:55 am
hoi Dail,
Have a been trying to insert your script to remove all the content but no luck it keeps loading on top of each other.
March 24th, 2008 at 3:48 pm
Ronnie,
It can’t be removing the content if that is the case.So, are the old images still sitting in there?
March 30th, 2008 at 9:27 pm
Hi Dail,
Love this! Would work perfect with my portfolio site, but don’t know how to unload, so when I click on my “resume” button it goes to that scene and doesn’t still have the images etc. on the page… Hope this makes sense and you can help…
April 18th, 2008 at 10:04 am
I have to say this work of yours is Amazing Dale! Many Thanks!
Btw, my head is going to explode figuring out how to preload the images one by one so the scroller would be visible while the images are loading. Any idea on this? Thanks Bro!
April 18th, 2008 at 2:11 pm
Johnny,
I’m not quite sure of what you mean. The file does indicate the loading of each image. There is no “scroller” really, so I’m not sure what you mean by that.
April 21st, 2008 at 8:28 am
Thank you so much for this site! I’m a flash novice, and was able to use this for a portfolio site I’m making. I’ve modified it so the sliding function goes left and right. I’d love to make forward and back buttons to navigate, but can’t seem to figure it out. If you have any ideas about how to accomplish this, I’d love to read them. In any case, thanks for the tutorial as is.
April 21st, 2008 at 11:57 am
Molly,
Good job on modifying the slider. You should just be able to make a button, like the button that manually slides the images, but decrement the, butNavCounter–
April 21st, 2008 at 1:30 pm
Thanks Dale. I’m pretty pleased with myself for adjusting the sliding function, having never used Flash or AS before.
For the back/fwd buttons, the closest I’ve gotten is pasted below. It behaves erratically in practice. If you see anything obviously wrong here and wouldn’t mind sharing, I’d love to know. And thanks again for the tutorial site… I don’t think I ever would have figured this out otherwise.
—–
Forward_btn._visible =false
Forward_btn.onRelease = function(){
butNavCounter++
TweenLite.to(imageHolder_mc, 1, {_x:-(imageHolder_mc.getInstanceAtDepth(1)._width*butNavCounter)+offset, ease:Strong.easeOut});
if(butNavCounter== urls.length-1){
butNavCounter = -1
}
}
Back_btn._visible =false
Back_btn.onRelease = function(){
butNavCounter–
TweenLite.to(imageHolder_mc, 1, {_x:-(imageHolder_mc.getInstanceAtDepth(1)._width*butNavCounter)+offset, ease:Strong.easeOut});
if(butNavCounter== 0){
butNavCounter = urls.length-1
}
}
April 28th, 2008 at 4:26 am
Hi Dale, please disregard my first query. Can you give me a tip on how to add thumbnails on this gallery that will also be fetched thru the atached xml? Thanks and I have to say awesome work dude, one of the coolest I around!
April 28th, 2008 at 2:47 pm
Johnny,
Adding in thumbnails would require you to first add them to the XML, and then in the XML parsing code in Flash, add in a new array to store the thumbs. Then in the LoadLarge function, you would have to call a new thumbs loading function, passing the p value to each thumb, so if it is clicked it would slide the main images correctly. Its a little bit of work, but totally achievable. I can have a look at adding it, but I wont have time for a week.
May 3rd, 2008 at 1:09 am
Dude the coolest idea for a slick portfolio page in the universe. If you ever make a dumbed down version for us lesser beings out there to play with I’d be super interested and pay for the privilege. Very nice, you are ridiculous talented and got creative genius to boot. Why I envy you. Well done guys very shmick.
May 29th, 2008 at 6:09 am
Hi Dale Thanks for the tip! I’ll try to follow your instructions and update you if ever I get successful on my attempt. Just if ever you got some free time to add it please do so. Keep up the good work! Good Times Bro! =)
June 4th, 2008 at 5:58 am
A-up Dale,
i was wondering whether there was any way of adding a pre-loader bar to the loading of the initial swf and then the images?
cheers, and top work
:: ant
June 5th, 2008 at 9:32 am
Hi Dale,
I was able to make make the thumbnails work, however I can’t get to load the other xml sets properly. I used this code
/****************************************************************************
REMOVE ALL THUMBS METHOD
****************************************************************************/
//Use to clear old thumbs if you are going to add in a new set of thumbs
function removeAllThumbs():Void {
for (var i in thumbMask_mc.thumbBox_mc) {
if (typeof (thumbMask_mc.thumbBox_mc[i]) == “movieclip”) {
removeMovieClip(thumbMask_mc.thumbBox_mc.getInstanceAtDepth(thumbMask_mc.thumbBox_mc[i].getDepth()));
removeMovieClip(imageHolder_mc.getInstanceAtDepth(imageHolder_mc[i].getDepth()));
}
thumbMask_mc.thumbBox_mc._width = thumbMask_mc._width
imageHolder_mc._height = imageHolder_mc._height
}
}
/*sampleRemoveAllButton.onRelease = function(){
removeAllThumbs()
}*/
/************************************************************************
GALLERY BUTTON
************************************************************************/
gallery_btn.onRelease = function(){
//reset p
removeAllThumbs();
p = 0;
g = 0;
slide.load(“slide5.xml”);
loadThumbs();
loadLarge();
}
gallery_btn1.onRelease = function(){
removeAllThumbs();
p = 0;
g = 0;
slide.load(“slide4.xml”);
loadThumbs() ;
loadLarge();
}
But the content always shows error where only the large images are the ones that shows up with a text the text message undefined error on the end part of the images and the thumbnails doesn’t appear.
Would you be able to squeeze some time and give a hand? But if you are too busy then I understand. Again thanks for this script! Good times bro!
June 6th, 2008 at 11:09 am
Hi Dale,
Btw, I already tried all the possible movie clip name to replace the name you indicated but I just can’t seem get it to work. I ‘m not able to unload the loaded xml. Please provide some help if possible. Good Times Bro!
/****************************************************************************
REMOVE ALL THUMBS METHOD
****************************************************************************/
//Use to clear old thumbs if you are going to add in a new set of thumbs
function removeAllThumbs():Void {
for (var i in imageHolder_mc) {
if (typeof (imageHolder_mc[i]) == “THIS”) {
removeMovieClip(imageHolder_mc.getInstanceAtDepth(imageHolder_mc[i].getDepth()));
}
imageHolder_mc.removeChildAt(0);
imageHolder_mc._width = imageHolder_mc._width
}
}
June 8th, 2008 at 6:31 pm
Johnny,
I’ve updated the file, it now supports mulitple XML galleries
June 9th, 2008 at 5:55 pm
can this slide horizontally ?
June 9th, 2008 at 7:54 pm
eli,
At the moment, it does not. But to do so, just change all the _y’s to _x’s and heights to widths etc.
June 10th, 2008 at 4:46 am
hello dale,
i’ve been trying to figure out how to make a next and a previous button for this instead of that one button that says slide images.
is that possible?
June 10th, 2008 at 7:59 am
Hi Dale! This is great thanks for taking time to help I really appreciate! I just noticed that it works fine to change the xml set if the position of the picture is back to starting position. It disappears to another location if you try to change the set when it is on another location/picture other than the first one.
June 10th, 2008 at 1:28 pm
Johnny,
Ok, fixed that. Updated the source files.
June 10th, 2008 at 1:34 pm
Jim,
Just edit the existing button that slides the images to decrement the buttNav counter.
[cc lang="actionscript" tab_size="2" lines="60"]
slideImages_btn.onRelease = function() {
butNavCounter–//decincrement the counter variable, we set this to be 0 initially, which is the first image, so we add 1 to the start, to get
//to the next image with the first click
TweenLite.to(imageHolder_mc, 1, {_y:-(imageHolder_mc.getInstanceAtDepth(1)._height*butNavCounter)+offset, ease:Strong.easeOut});
//reset the counter var to create a loop. Note that we are setting it to -1, so that when this function runs again, butNavCounter becomes 0, which
//is the first image
if(butNavCounter== urls.length-1){
butNavCounter = -1
//butNavCounter = urls.length-1 //for making the image stop at the last one
//this.enabled =false //turn off the button if you stop the slides, good UI practice!
}
};
[/cc]
June 18th, 2008 at 10:00 am
Thanks for taking time to amaend the file Dale! One lasy question… I set the images to scroll horizontally… the rpbolem is they are using one width length giving big white spaces to portrait images. Is there a way for the container mc to handle the width of the large images automatically and not use a standard width?
June 18th, 2008 at 12:02 pm
Johnny,
Try adjusting this line
pos = pos+container._height;
June 20th, 2008 at 9:16 am
Hi Dale,
Great I was able to fix the big image distance part! I’m almost there dude, felt like I’ve gone so far with modifying your script ….of course also done with your help LoL.
This really is the “FINAL” question I swear to my ancestors! :
I am using images with different width, they don’t really scroll to each images exact width whenever i click a thumbnail causing the last 2 images to scroll out of the page. The tweenLite code that I was able to configure is:
target_mc.onRelease = function() {
targetLoc = target_mc.pictureValue;
TweenLite.to(imageHolder_mc, 1, {_x:-(imageHolder_mc.getInstanceAtDepth(1)._width*targetLoc)+offset, ease:Strong.easeOut});
Do you have a better suggestion regarding this so that a thumbnail click would make the large images scroll according to its exact width?
June 20th, 2008 at 5:49 pm
BTW I have uploaded it to my test server, please take time to view it so you’ll see how the tweenlite config behaves: http://dsite.my5gb.com/main.html
July 2nd, 2008 at 7:49 am
Hi Dale, this is great and sort of what ive been searching for fora few days now… from reading the other comments i see to make it go horizontal you just have to change the y to x values. but is there a way to make the images dragable to advance to the next or previous picture? kinda like these sites do: http://www.sonypictures.com/tv/shows/cashmeremafia/main.htm and http://filippasmedhagensund.com/#/commercial/kladdss08/1/ … cause this is the effect i am really after, and cant find out how to do anywhere. any advice on this would be greatly appreciated…thanks and keep up the awesome work!
July 16th, 2008 at 7:24 pm
johnny – if you somehow see this, is there anyway i could get ahold of your modified files for this? i checked out your test of it and it operates exactly how i need it too.
if you could be so kind please email me at vanitydesignstudios {at} gmai(.)com
July 17th, 2008 at 12:21 am
what are you trying to achieve Ian? I can’t actually see Johnny’s files..
July 17th, 2008 at 5:31 pm
essentially how he has the navigation as images and how also how the navigation slides over as you move over the ends, its on his testing site here, http://dsite.my5gb.com/main.html
July 17th, 2008 at 9:22 pm
Ian,
Gotcha, it wasn’t loading when I last tried to check it.
Its just a combination of the Thumbnail Scroller from the Simple XML Galleries on this site, either the AS2 or if you wanted, the AS3 version.
I would imagine that each thumbnail has an index number that when you click it, corresponds to the image in the sliding gallery, causing that image to slide into view in the sliding gallery part.
Pretty simple to do.
July 18th, 2008 at 5:57 pm
cool, i dont really have any AS experience but i do know flash besides that alright so it might take some tinkering but ill see what i can come up with, thanks!
July 18th, 2008 at 7:12 pm
Ian,
If I get a chance I’ll knock something up for you.
August 19th, 2008 at 7:00 am
Hey,
new to this site, fantastic work by the way.
Just one question, how do I change the existing images for ones of my own? im getting myslef all confused with this actionscripting, lol.
Any suggestions would be much appreciated,
Thanks,
Andy
August 20th, 2008 at 8:12 am
Hi Dale! Thank you very much again for your amazing work! I really appreciate the help you provided! Keep up the Good work man! Good times!
September 22nd, 2008 at 6:30 am
Wow! I really love your script – so simple and clean!!!
I’m not so much into XML -is there a possibility to add a second navigation-structure for each “project” (or what ever) where you can choose between the different pictures!?
E.g. on our work-site http://www.thereformation.co.nz/ | project 3 got 4 pictures and you want to browse them in a second menu!?
Can you give me a hint? Thanks for sharing your work!!!
Donation is on its way
Cheers
bird
October 10th, 2008 at 4:37 pm
Hello,
Would it be an easy task to add the “Tool Tip” feature to this idea? I’m certain it is, my feeble mind can’t seem to comprehend the idea.
Cheers,
Michael
October 29th, 2008 at 1:40 am
As many have said before me, excellent job and many thanks.
I’ve been playing around with the code to modify the “imageHolder_mc._y = offset;” so that the images cross fade instead of scrolling vertically. I also tried looking at the full screen browser XML gallery that you also have available but I couldn’t figure out where the transition effect lies.
Could you please kindly provide some guidance as to how to modify this particular gallery to change the transition effect to cross fading?
Thanks!
October 30th, 2008 at 10:46 am
Hi, I went to download the source files for this image gallery, but the file isn’t there anymore. Would it be possible for someone to re-upload it?
thanks!
October 31st, 2008 at 1:35 am
Hiromix,
I’ll check that out, and if its gone, re upload it.
October 31st, 2008 at 7:41 pm
hey Dale, Im having problems loading in swfs through the xml. they load in fine and work and all, but the next image overlaps the first and when i click to slide it goes way to far and passes over the one it ssupposed to go to. any ideas on how to fix this? i changed the sizes to fit with the swf and when i made all the corrections to a gallery with jpgs it work fine, but hte swf one does not.
October 31st, 2008 at 9:27 pm
Marcus,
Make sure your swfs have a background shape drawn in, so that their heights and widths are forced to the correct dimensions. Just draw the shape with an alpha of 0.
October 31st, 2008 at 9:27 pm
Hiromix,
The file is back now.
October 31st, 2008 at 9:29 pm
Ashkon,
thats pretty much impossible with this setup.
October 31st, 2008 at 11:04 pm
hi again, i just tried putting a transparent object in the back and gave it some more room at the top just to see, but it still is doing the same thing. here is what im getting….
http://mprattdesigns.com/slideCards/imageSlide.swf
I changed the dimensions of imageHouse to fit the attached swf . Is there some thing in the code i should be changing with the mask or slide code? like maybe something with this action?
TweenLite.to(imageHolder_mc, 1, {_y:-(imageHolder_mc.getInstanceAtDepth(1)._height*butNavCounter)+offset, ease:Strong.easeOut});
November 16th, 2008 at 12:02 pm
this file is bolted….. can you re-upload it please :-s
November 17th, 2008 at 6:08 am
Andreime,
Should be going now.
December 16th, 2008 at 11:21 pm
Hi Dale,
Thanks so much for the great file. I’m trying to figure out how to make the images slide upon clicking the image. The Slide Images button always wants to sit underneath the image. Any suggestions?
March 26th, 2009 at 5:16 pm
Hey there
A bit new to this. Is there a quick-ish fix to this?
I am loading smaller images (200px high) that are in the source code.
However when I test the movie the caption shows up quite far below the image as if the original height of the image is still there. Is there anywhere I can adjust it?