Album Slide
Description: A dynamic photo album read from an xml file
Author: John Bezanis
Added: November 4th 2007
Version: Flash 8
Total Views: 21938
Views in the Past 7 Days: 373
This applet reads an xml file and puts together an image slider where an image is displayed at a larger size when clicked. The images are automatically scaled for best fit, and any dimensions will work. There are 3 attributes within each image node; the thumbnail, the caption for the pic, and the fullsized pic. Example format for the xml file:
<?xml version="1.0"?>
<images>
<image><thumb>thumbofpic1.jpg</thumb><caption>Pic 1 caption</caption><pic>pic1.png</pic></image>
<image><thumb>thumbofpic2.png</thumb><caption>pic 2 description</caption><pic>pic2.jpg</pic></image>
</images>
The default url for the xml file is sliderfeed.xml, but it can be set with the variable xmlfile like so:
<object data="39-albumslide.swf?xmlfile=someotherxmlfile.xml" type="application/x-shockwave-flash" width="500" height="400">
<param name="movie" value="39-albumslide.swf?xmlfile=someotherxmlfile.xml"/>
</object>
The applet can be used with any background color, by changing the color in document properties and setting the variable bgcolor on the main level to that corresponding color.
The Stage can be set to any size, with some minor adjustments.
To change the size of the maximized image, open up the movie clip imageholder and resize the instance "canvas" to the new dimensions. Exit out of the movie clip imageholder and move it to the new location.
The slider can be resized as well. Open up the movie clip slidercontainer and resize the instance "bg" to the new dimensions. Exit out of the movie clip slidercontainer and move it to the new location.
The source code with line by line comments is available below:
Download the Source File
Download the Built swf File
Questions and Suggestions
Thank you so much for this! Helped me alot! :D
November 8th 2007 14:11PM - xnowandtheworldx
What are the licensing for this source?
Can this be edited and used in a commercial project?
November 13th 2007 03:11AM - Art
Hi, this is just what I've been looking for. But I can't open the Source file? I've got flash, but it just shows a blank screen?
Please Help!
November 14th 2007 13:11PM - Emma
double click on the single frame with the 'a' at the top, it should open the action script window below.
November 16th 2007 16:11PM - Chris
i cant get it to load, and Im also wondering if there is a way to link the images into a different folder instead of the index folder...
November 16th 2007 17:11PM - Chris
Which catalogues I must create? Please help?
November 19th 2007 10:11AM - me78
Any ideas on how to get this working with Actionscript 3.0 Seems to be an issues with the caption text. I would love to take advantage of this with some of the new features in 3.0.
I would also be great to have an option for auto scroll. So when it loads it will automatically "slideshow" the image until you take control.
November 21st 2007 23:11PM - JT
Does anyone know how to import this onto a larger canvas because the slider bar follows the mouse around the page, i know i need to change the parameters just not sure which ones! Thanks
November 29th 2007 13:11PM - Tim
I feel like a total moron but I cant figure out what exactly to do. Like step by step. If I saw the completed work I would lok at all the coding and stuff to figure it out but what I think there is here is a skeleton that I am to drop things in to to flesh it out. But without a completed version I have no clue what to do any help would be great.
Thanks
December 2nd 2007 11:12AM - Robert
I have this working perfect, what do I need to take out script wise that it comes in to the center and doesnt slide, just magnify's....
December 2nd 2007 23:12PM - Mike
Any suggestions as to how this can be accomplished in as3?
December 4th 2007 14:12PM - pbillyo
I am having trouble loading my images. My previews never move past the loading icon. Any suggestions? Any help would be greatly appreciated.
December 4th 2007 23:12PM - JRS
John Thanksssss!!!!! you are a genious, love this program.
Thanks again is perfect, about a month looking for program like that.
Greetings From Argentine.
December 6th 2007 12:12PM - Liliana
Hi, for an eventual update!! Is it possible to make that the xml read directly the contents of a pics directory and that it creates automatically thumbnails rather than have to create a thumbnail and coding the xml for every pics to be made show? Thank you!!
December 7th 2007 11:12AM - Pascal
I have no idea how to get this working...anyone help??
December 8th 2007 13:12PM - Gabriel
I have also no idea how to get this working, actually I have need a tutorial that how can use it.
December 16th 2007 13:12PM - demiralkanlar
Also make sure you remove all slashes (/'s) from the xml image location. It now works perfectly.
Enjoy!
December 18th 2007 02:12AM - Koziru
Ok I've spent a day getting the error that constantly has the preloader on the screen. this is because the actionscript is conflicting with the javascript and it's confused with the file locations. This looping preloader problem goes away once you move the images into the same folder as the stadard player files are. Note: make sure to change the path in the xml file to just the base directory too.
December 18th 2007 02:12AM - Koziru
Any ideas on how to make this work ... instructions anyone?..I'm new to this
December 19th 2007 04:12AM - grouch
Hi there
Anyone any idea how you make some more dynamic text come up at the side of the main image (more of a description relating to each pic) after you've clicked on the thumbnail?
Thanks
Giggs
December 20th 2007 11:12AM - Giggs
OK it works great! Just one more question, where does this go? <object data="39-albumslide.swf?xmlfile=someotherxmlfile.xml" type="application/x-shockwave-flash" width="500" height="400">
<param name="movie" value="39-albumslide.swf?xmlfile=someotherxmlfile.xml"/>
</object>
December 20th 2007 14:12PM - JRS
Im trying to use 3 of these sliders with different images in one project. They all work except they all load the same images as the first slider i view even though my xmls are named differently. im changing the xml name in the slider container. _parent._root.xmlfile = "sliderfeed02.xml"; Any suggestions?
December 21st 2007 07:12AM - Dan
how do you change the font and the size of the caption? is there any ways that i can enter text in multiple lines rather than a single one? help please...
December 21st 2007 12:12PM - ryan
To change the font size and amount of lines, select the caption box and change the properties in the properties window.
December 21st 2007 16:12PM - JRS
in your source file it doesnt include images just an fla file that has a pre-loader but doesnt actually work their are bugs and error warnings across the board. would be nice if you had a step by step tutorial on how we can create our own files in stead of copying over yours id like to learn how to create this image gallery myself.
December 23rd 2007 22:12PM - charlotte
i dint get any imaged folder, should i download if from the site please help its urgent, i dint get the xml file too, should i create that too or please give me a solution.
December 26th 2007 10:12AM - Hari
finaly i found it out myself thanks for this tutorial
December 26th 2007 11:12AM - Hari
Excellent! It was very helpfull!
Alin
December 28th 2007 07:12AM - alin
Hi friends, i need to get this working in a 1024x768 size eyond a limit the stip of images follows the mouse how to control that part, i need to alter the measurment not sure of which part. ge me a soulution.
December 28th 2007 08:12AM - Hari
Don't even waste your time unless you have a real good knowledge of Flash and how to use XML. This is total crap !
January 3rd 2008 00:01AM - Colin
Hi everything works great except that the image box is distorting some of my images. I have some Vector illustrations that are coming out with very jagged outlines and some of the other images are coming out pixely. I've increased the size of the image box from 500 X 300 px to 982 X 607 px but it displays the images as distorted in the original unchanged box as well. I've tried changing image formats but it does not help. If there is anything anyone can think of to fix this problem it would be much appreciated.
Thanks
January 6th 2008 08:01AM - Miki
it's a nice gallery! But there is one big question: How can I get the border away, if a photo is selected?
January 7th 2008 23:01PM - meike
And how can I delete the shadow of the pictures? Please help!
January 8th 2008 00:01AM - meike
When I enter a Url of a remote machine into the XML file the image does not load but the reflection does without the gradient shadow. I moved the images to the same machine and all is fine.
An example is to put in the Google image in the xml file.
Any help would be appreciated.
January 17th 2008 03:01AM - Steve
Steve, are the xml file and flash file on different domains? If so, that's probably the problem. You can get around this by writing a script on your own domain that reads the xml file on the other site and spits it out as an xml file on your own site.
January 18th 2008 06:01AM - John
Question, is it possible to use create a hyperlink from the main photo in the album to a new browser window?
Thanks,
Shawn
January 18th 2008 16:01PM - Shawn
Hi John,
The xml is on the same domain.
If I put 2 url's in the XML file, one local and one remote the local url works but the remote doesn't.
The remote url is sometimes loaded but the alpha shadow is solid.
If I then move the remote file to my machine and change the xml file to the local address it works, so its not the image.
Many thanks for a great program,
Steve
January 20th 2008 17:01PM - Steve
I may have been unclear, it appears to be the difference between an http reference and a local drive reference.
Steve.
January 21st 2008 20:01PM - Steve
Steve, I think it's a built in sandbox security feature of flash.
January 22nd 2008 06:01AM - John
I know what you mean, I will run up a proxy and test some more,
Many thanks
Steve
January 23rd 2008 01:01AM - Steve
What is with question: is it possible to create a hyperlink from the main photo in the album to a new browser window.
Please any solution.
January 25th 2008 16:01PM - Dragoljub
GREAT! xD
February 3rd 2008 17:02PM - Mello
Statement must appear within on/onClipEvent handler.What dose that mean...Pleas help:((
February 9th 2008 16:02PM - Ana
Hi i am a beginner at flash as2 but getting better... anyways this gallery system is amazing kind like the mac navagation, the only thing is i have tried to emplement this in a website for a customer at 1024x768 res and 2 Q
1.is it possible to restrict the _xmouse.onRollOver event to only the sliderbox/bg, you said at the top of the page with small adjustments this can be acheived???
2.when the 1st thumb is rolled over (far left one) and the curser goes further to the left the scroll panel follows it, but im sure if i find a solution to the first question this question will be solved.
any help with this would be greatly appreciated,
thanks in anticapation. jared
February 16th 2008 05:02AM - jared
John you are a diamond in the rough, this is excellent work and the code is sweet.
February 19th 2008 10:02AM - Peter Hagan
This is great! Thanks.
Pascal, if you specify the same image for the thumb and the pic it will automatically reduce the pic to a thumbnail image.
I'm hoping there is a way to change this to just specify the images filename and caption.
Thanks again John!
February 26th 2008 10:02AM - Sarah
Great script. If you enhance this, I would suggest a fourth XML var for additional text to load next to the enlargement, and they both fade in together. Then you really have a thumb/caption to enlargement/details album. I tried to do this m'self and mucked everything up. Any quick code and/or process suggestions? Other, than "quit screwin' up?" ;-)
February 28th 2008 16:02PM - Bobby
How could you do the reflection on photo list?
March 6th 2008 03:03AM - ming
Beautiful work man! thanx alot! keep up the excellent work.
March 9th 2008 17:03PM - Luciano
Thank you so much........Awesome...super stylish
March 11th 2008 07:03AM - mbba
Hi. Did jared or any one figure how to constrict the xmouse to just bg? I want to keep the images inside the slidecontainer and not allow them to be dragged left outside the bg. Thanks.
March 13th 2008 11:03AM - Phil
Hi guys,
This is great! But heres the problem. When i have finished creating this and i test the *.swf file, it works beautifully. But as soon as i test it on the internet, it only displays a white square with the preloader in the center of the white box.
Any idea's how to solve this?
Cheers guys
- Ryan
March 17th 2008 15:03PM - Ryan
The .swf should be in the same directory as the xml file and images.
March 19th 2008 08:03AM - biboi
hello, is it possible to have more sliders in one project, each with different .xmls and image folders??similar question has been put here already but IŽd really like to know some solution for this??thanks a lot
March 19th 2008 10:03AM - Fan
this works fine as a .swf and built into a html page but as soon as i upload that html page onto a remote server I just get a Whit screen and preloader. the swf fla html and xml are all in the same folder but no joy how do i solve this problem
March 28th 2008 15:03PM - James
After a little work I got this working beautifully as just a simple swf. However, as soon as I load it into a table in an html file, it just hangs at the preloader. I've got all my files for this in the same folder, does anyone have any suggestions for how to solve this?
March 29th 2008 12:03PM - Matt
So after some more messing around, I seem to have solved the problem I had with this just hanging at the preloader:
It seems that your html file with the embedded swf file also has to be in the same directory as your xml and swf files. As soon as I resaved my html file to that directory, it worked like a charm!
Hope that saves some frustration for a few of you
March 29th 2008 15:03PM - Matt
Just a quick little tidbit about this: you can load a few different types of files in the xml (not just jpg of gif), including swf which is helpful if you want to have dynamic content loaded from the slide menu
April 1st 2008 11:04AM - Bert
to the author,
can u pls make it more clearly?? for us newbie??
tnx
April 3rd 2008 00:04AM - eric
Hi everyone,
well i seem to have this functioning really nicely but want different buttons on my page to link to 5 different galleries.
each gallery with it's own pictures and sliderfeed ie. folder1/sliderfeed1.xml
i changed the slidecontainer to have multiple frames each frame pointing to a differnet xml file. and the buttons pointing to those differnt frames. they each work individually however once one xml file is loaded then no others will be.
i think i somehow need to unload the current xml.. please can anyone help?????
and have tried a few work arounds like removing movieclip to no avail.
thanks in advance
GG
April 8th 2008 08:04AM - GG
thanks lot.this tutorial fully usefull.keep helping for rokies like us..
chears....
April 11th 2008 07:04AM - TheTurk
Hi, I have insert the swf file with button .but seem like the swf load like a still image and the button inside the swf cannot click. did anyone know how to put a swf file inside the albumslides and can use the button function? Thx
April 14th 2008 04:04AM - KVN
I loaded SWF's instead of JPG's for the sole purpose of having buttons on the images and it worked fine. I'd recommend making your button in a separate flash file, preview it in flash to make sure it works, then publish it and load the published file into the flash document you're building to load instead of the images. Preview that to make sure it works, then publish it and modify the XML document to load an SWF file instead of a JPG
April 14th 2008 12:04PM - Matt
hi, this is great but I have problems with the slider.. First one is, When I run the movie in fullscreen the bg part follows the mouse cursor to the right end of the stage but to the end of the screen. Which line of the codes make this work well ? thx
April 21st 2008 04:04AM - olcay
For those who have problem with slider width you can use this simple solution. Masking the slidercontainer. So the image won't display outside of the box.
April 24th 2008 13:04PM - b1naryc0de
Hi, is it just me or anybody having trouble to download the build SWF file? help please? Thank you kindly
May 21st 2008 03:05AM - Yazeus
hi! how does this work? any help please... i can't either edit this.. please need help .. thaks!
June 5th 2008 05:06AM - dan
Alright!! i made it! paste this // <images>
<image><thumb>thumbofpic1.jpg</thumb><caption>Pic 1 caption</caption><pic>pic1.png</pic></image>
<image><thumb>thumbofpic2.png</thumb><caption>pic 2 description</caption><pic>pic2.jpg</pic></image>
</images> // to dreamweaver or notepad and edit the filename of the picture you want to use and save as a filename sliderfeed.xml. But first save all the picture you want to be part of you slide in the index folder. Download the sourcefile in the top of this discussion and save it to the index folder. Also the sliderfeed.xml must be save on the index folder.. just try and explore it and edit anything you want.. a BIG thanks to this tutorial!
June 10th 2008 03:06AM - dan
Hi, no it's not just you Yazeus, i can't either download the build SWF file, don't know what's the deal.
June 10th 2008 06:06AM - Christelle
i really love the slide but could anyone tell me whats the problem?
i had downloaded the .fla file and edited the xml file. but then when i try to test the .fla file an error occurred telling that theres an error with the picture's url. i check the url of the picture i included in my xml file and its definitely right. what do you think is the problem?
June 17th 2008 21:06PM - nevermind
Thank You verry much vor all this
you are fantastic :)
ciao ciao
pino
June 29th 2008 13:06PM - nonnopino
Add a Question or Suggestion