Options How to make an XML Image slider?, How was this site made?

[StudioAndy]

Hi everyone,

I've spent most of the day trying looking through forums/tutorials/templates etc. to help me re-create a slideshow similar to the link below:

http://www.sarahsilver.com

Can anyone help me, please? Thanks so much!

[flamereaper]

ok well i can probly help out. The first step is to create your xml file, otherwise an xml powered gallery is rather pointless. Best bet for this would be a simple format for the xml.

CODE

<images>
                   <image file="pics/picture1.jpg"/>
                   <image file="pics/picture2.jpg"/>
                   <image file="pics/picture3.jpg"/>
                   <image file="pics/picture4.jpg"/>
             ...... ect
         </images>

simple enough, you can change the addressing depending on your file setup.

Now for the fun part. The flash. There will be three main steps here. The first will be to setup and XML object and tell it what to do when it loads, and what to load. The second part will be writing the function to place each of the images in order. And finaly, the scrollBar feature.

OK lets go.

CODE

myXML = new XML();
   myXML.ignoreWhite = true;
         myXML.onLoad = function(){
             imageList = this.firstChild.childNodes;
             showImages(imageList);
         }
         myXML.load("my_xml_file.xml");  /// obviously replace this with your xml file location

Ok so that code creates a new XML object in flash and tells it to load your file, when the file is loaded, flash takes the contents of the first node (basicaly all the <image file...> tags) as an array, which we then parse into our function to display the images. which we will do now.

CODE

function showImages(list:Array){
         createEmptyMovieClip("imageStrip",_root.getNextHighestDepth());
         for(i=0;i<list.length;i++){
             imageFile = list[i].attributes.file;
             img_mc = imageStrip.createEmptyMovieClip("img_holder_"+i, i+1);
            loadMovie(imageFile,img_mc);
             img_mc._x = i*width_of_your_image;  // this is assuming all your images are the same size like in the example
         }
     }

Ok so basicaly this code creates a movie to hold our images in then loops through the array of image tags, and for each one it creates a new movieclip inside our image holder, and loads the image (taken from the xml's file attribute) and then places the image in that new holder, then it nudges it along so that all of the images line next to each other in order. (if you have images that are not all the same width, then let me know, there is a way to take that into account that i can tell ya)

so now. the scroll Bar. The final Feature. First you will need a movieClip in this movie clip you will need 2 things, some art for the bar, (starting at 0,0 and extending out to a + position on the xAxis is the easiest) and a button which will be our slider. give the button an instance name that you will remember (as well as giving the movie clip an instance name aswell). Now go back to our main timeline, and here we go.

CODE

scrollBar.slider_btn.onPress=function(){
         startDrag(this, false, 0, 0, width_of_scroll_bar, 0);
     }
     scrollBar.slider_btn.onRelease=function(){
         stopDrag();
     }
     onEnterFrame=function(){
         percent = (scrollBar.slider_btn._x / width_of_scroll_bar)*100;
         imageStrip._x = -(((imageList.length-#####)*width_of_images)/100)*percent;
     }

NOTE: where you see #### here what you want is the ammount of images that can ocupy the screen / area at any one time, otherwise the images all scroll off the stage and you get ugly blank space.

What this does is allow you to drag the slider, limited to the X axis and only the length of your scrollbar (swap out that valuen for the actualy length of your scrollbar obviously) then it constantly checks for the position of the slider, works out how far along it is in a percent, and then mimics this percent for the imageStrip, by placing it a certain percent of its own length in one direction.

If you want to add things like easing on the scrolling images, you'll have to work that out yourself, its not too hard though. And should you need to swap this all for a verticle system, you should be able to work that out yourself aswell.

Hope this all helps. Good luck.

[Sanny]

Thank you for this very simple and awesome tutorial. I tried the code and everything seems to work fine. Just having one problem. When I press the slider and move my mouse Up and Down the bar does the slider does the same. I need it to stay at the bottom of the images and not move.

Please help have been looking around for this kind of code since many days. Will be a great help.

ok well i can probly help out. The first step is to create your xml file, otherwise an xml powered gallery is rather pointless. Best bet for this would be a simple format for the xml.

CODE

<images>
                   <image file="pics/picture1.jpg"/>
                   <image file="pics/picture2.jpg"/>
                   <image file="pics/picture3.jpg"/>
                   <image file="pics/picture4.jpg"/>
             ...... ect
         </images>

simple enough, you can change the addressing depending on your file setup.

Now for the fun part. The flash. There will be three main steps here. The first will be to setup and XML object and tell it what to do when it loads, and what to load. The second part will be writing the function to place each of the images in order. And finaly, the scrollBar feature.

OK lets go.

CODE

myXML = new XML();
   myXML.ignoreWhite = true;
         myXML.onLoad = function(){
             imageList = this.firstChild.childNodes;
             showImages(imageList);
         }
         myXML.load("my_xml_file.xml");  /// obviously replace this with your xml file location

Ok so that code creates a new XML object in flash and tells it to load your file, when the file is loaded, flash takes the contents of the first node (basicaly all the <image file...> tags) as an array, which we then parse into our function to display the images. which we will do now.

CODE

function showImages(list:Array){
         createEmptyMovieClip("imageStrip",_root.getNextHighestDepth());
         for(i=0;i<list.length;i++){
             imageFile = list[i].attributes.file;
             img_mc = imageStrip.createEmptyMovieClip("img_holder_"+i, i+1);
            loadMovie(imageFile,img_mc);
             img_mc._x = i*width_of_your_image;  // this is assuming all your images are the same size like in the example
         }
     }

Ok so basicaly this code creates a movie to hold our images in then loops through the array of image tags, and for each one it creates a new movieclip inside our image holder, and loads the image (taken from the xml's file attribute) and then places the image in that new holder, then it nudges it along so that all of the images line next to each other in order. (if you have images that are not all the same width, then let me know, there is a way to take that into account that i can tell ya)

so now. the scroll Bar. The final Feature. First you will need a movieClip in this movie clip you will need 2 things, some art for the bar, (starting at 0,0 and extending out to a + position on the xAxis is the easiest) and a button which will be our slider. give the button an instance name that you will remember (as well as giving the movie clip an instance name aswell). Now go back to our main timeline, and here we go.

CODE

scrollBar.slider_btn.onPress=function(){
         startDrag(this, false, 0, 0, width_of_scroll_bar, 0);
     }
     scrollBar.slider_btn.onRelease=function(){
         stopDrag();
     }
     onEnterFrame=function(){
         percent = (scrollBar.slider_btn._x / width_of_scroll_bar)*100;
         imageStrip._x = -(((imageList.length-#####)*width_of_images)/100)*percent;
     }

NOTE: where you see #### here what you want is the ammount of images that can ocupy the screen / area at any one time, otherwise the images all scroll off the stage and you get ugly blank space.

What this does is allow you to drag the slider, limited to the X axis and only the length of your scrollbar (swap out that valuen for the actualy length of your scrollbar obviously) then it constantly checks for the position of the slider, works out how far along it is in a percent, and then mimics this percent for the imageStrip, by placing it a certain percent of its own length in one direction.

If you want to add things like easing on the scrolling images, you'll have to work that out yourself, its not too hard though. And should you need to swap this all for a verticle system, you should be able to work that out yourself aswell.

Hope this all helps. Good luck.

[didgits2k]

Thank You for the tutorial. You mentioned you had a solution for images that are not the same width.
I'd love to know.