Newest Articles

Photo Reel
Image Color Tinting using Actionscript
3d Rotating Image Cube
Image Slider with Easing
Catapult Game
Mp3 Player with XML Playlist


Popular Articles

True Fullscreen Flash Mode
FLV Player
Image Slider
Mp3 Player with XML Playlist
Album Slide
Page Flipper


Random Articles

FLV Player
Custom Right Click Menu
Focus in on an Image
Spark Effect
Krypto Movie Quotes
Instantiating an Object


Links

Foundation-Flash
Tutorial4Me
MickM
TutorialQuest
Tutorialsphere.com - Free Online Tutorials
Photochopz
Newgrounds
TWiT
Link to SwfSpot
Swf Spot



rss feed

Image Slider

Image Slider
AddThis Social Bookmark Button
Description: An image slidebar similar to the related videos on youtube or the mac dock
Author: John Bezanis
Added: October 7th 2007
Version: Flash 8
Total Views: 43873
Views in the Past 7 Days: 587


The picture slider grabs data from an xml file. It grabs the url of the image, a caption, and a url to go to when the image is clicked. Images are scaled based on their distance from the x mouse position, getting larger as they get closer to the mouse. There is a constant distance between images. Each image has its own reflection and a glow when the mouse moves over it.
Code for the main stage:
  1. //Image Slider By John Bezanis for SWFspot
  2. //Settings to play with
  3. //the height of the images when not stretched
  4. var maxheight = 40;
  5. //the y position of the "floor" or where the images sit on
  6. var floor = 75;
  7. //The amount an image scales to as the mouse gets closer
  8. var curvedistance = 160;
  9. //The amount of gap in between each image
  10. var sidegap = 5;
  11. //The background color of the document. This is used for the reflection
  12. var bgcolor = 0xFFFFFF;
  13. /*no more settings to play with below here */
  14. //Initialize the image count to 0
  15. var imagecount = 0;
  16. //if the get parameter "xmlfile" is not set, change the xml file to load the data to a default name
  17. if (_root.xmlfile == undefined || _root.xmlfile == "") {
  18.   //default name for the xml feed
  19.   _root.xmlfile = "sliderfeed.xml";
  20. }
  21. var myXml:XML = new XML();
  22. myXml.ignoreWhite = true;
  23. //Load the xml file
  24. myXml.load(_root.xmlfile);
  25. //run when the xml file has loaded
  26. myXml.onLoad = function() {
  27.   //parse the xml file and load in the images
  28.   loadImages();
  29. };
  30. //start loading in the images
  31. function loadImages() {
  32.   //traverse through each pic of the xml file
  33.   for (imageIndex=0; imageIndex<myXml.childNodes[0].childNodes.length; imageIndex++) {
  34.     //create a new instance of imagebox to load our pic,caption,and url into
  35.     attachMovie("imagebox", "im" + imageIndex, this.getNextHighestDepth());
  36.     //load in the pic
  37.     eval("im" + imageIndex).pic = myXml.childNodes[0].childNodes[imageIndex].childNodes[0].childNodes[0].nodeValue;
  38.     //load the caption
  39.     eval("im" + imageIndex).caption = myXml.childNodes[0].childNodes[imageIndex].childNodes[1].childNodes[0].nodeValue;
  40.     //load the url
  41.     eval("im" + imageIndex).url = myXml.childNodes[0].childNodes[imageIndex].childNodes[2].childNodes[0].nodeValue;
  42.     //set the index to the current index of the for loop
  43.     eval("im" + imageIndex).index = imageIndex;
  44.     //move this above the caption box
  45.     eval("im" + imageIndex).swapDepths(captionbox);
  46.     //increment the imagecount
  47.     imagecount++;
  48.   }
  49. }
  50. //run at the start of each frame
  51. onEnterFrame = function () {
  52.   //only run if the image have been loaded
  53.   if (imagecount != 0) {
  54.     //figure out which image the mouse is closest to on the x plane
  55.     curmouseover = Math.max(0, Math.min(imagecount, imagecount*(_xmouse-sidegap)/(Stage.width-sidegap*2)));
  56.     //if the current x position is greater than our strip's width, create a movieclip as a placeholder
  57.     if (eval("im" + Math.floor(curmouseover))._x == undefined) {
  58.       this.createEmptyMovieClip("im" + Math.floor(curmouseover), this.getNextHighestDepth());
  59.       //Move the newly created clip to the width of the strip plus the sidegap
  60.       eval("im" + Math.floor(curmouseover))._x = Stage.width+sidegap;
  61.     }
  62.     //if the current x position is past the strip's width, select the last pic 
  63.     if (curmouseover>=myXml.childNodes[0].childNodes.length) {
  64.       //move the last pic to the stage width minus the width of the pic
  65.       eval("im" + Math.floor(curmouseover))._x = Stage.width-eval("im" + Math.floor(curmouseover))._width;
  66.     } else {
  67.       //else the x position is set based on the distance from the centerpoint of that index
  68.       eval("im" + Math.floor(curmouseover))._x = _xmouse-(curmouseover-Math.floor(curmouseover))*eval("im" + Math.floor(curmouseover))._width;
  69.     }
  70.     //scale the image based on the image center's distance from x mouse position
  71.     scale = Math.max(100, curvedistance-(Math.abs((eval("im" + Math.floor(curmouseover))._x+eval("im" + Math.floor(curmouseover))._width/2)-_xmouse))/4);
  72.     eval("im" + Math.floor(curmouseover))._xscale = scale;
  73.     eval("im" + Math.floor(curmouseover))._yscale = scale;
  74.     //Set the y position to the floor minus the height of the pic
  75.     eval("im" + Math.floor(curmouseover))._y = floor-eval("im" +Math.floor(curmouseover)).image_mc._height*eval("im" + Math.floor(curmouseover))._yscale/100;
  76.     //traverse through the images to the right of the current selected image, scaling and setting the x position
  77.     for (curpos=Math.floor(curmouseover); curpos<imagecount-1; curpos++) {
  78.       //scale the image based on the image center's distance from x mouse position
  79.       scale = Math.max(100, curvedistance-(Math.abs((eval("im" + Math.floor(curpos))._x+eval("im" + Math.floor(curpos))._width*1.5)-_xmouse))/4);
  80.       eval("im" + Math.floor(curpos+1))._xscale = scale;
  81.       eval("im" + Math.floor(curpos+1))._yscale = scale;
  82.       //set the x position to the x position of the last image plus the width and sidegap
  83.       eval("im" + Math.floor(curpos+1))._x = eval("im" + Math.floor(curpos))._x+(eval("im" + Math.floor(curpos))._width+sidegap);
  84.       //move the y position according to how much the image is scaled
  85.       eval("im" + Math.floor(curpos+1))._y = floor-eval("im" + Math.floor(curpos+1)).image_mc._height*eval("im" + Math.floor(curpos+1))._yscale/100;
  86.     }
  87.     //traverse through the images to the left of the current selected image, scaling and setting the x position
  88.     for (curpos=Math.floor(curmouseover); curpos>0; curpos--) {
  89.       //scale the image based on the image center's distance from x mouse position
  90.       scale = Math.max(100, curvedistance-(Math.abs((eval("im" + Math.floor(curpos-1))._x+eval("im" + Math.floor(curpos-1))._width/2)-_xmouse))/4);
  91.       eval("im" + Math.floor(curpos-1))._xscale = scale;
  92.       eval("im" + Math.floor(curpos-1))._yscale = scale;
  93.       //set the x position to the x position of the last image minus the width and sidegap
  94.       eval("im" + Math.floor(curpos-1))._x = eval("im" + Math.floor(curpos))._x-(eval("im" + Math.floor(curpos-1))._width+sidegap);
  95.       //move the y position according to how much the image is scaled
  96.       eval("im" + Math.floor(curpos-1))._y = floor-eval("im" + Math.floor(curpos-1)).image_mc._height*eval("im" + Math.floor(curpos-1))._yscale/100;
  97.     }
  98.   }
  99. };
  100.  
Create a movieclip named imagebox and place the following code into it (set its linkage identifier to imagebox as well):
  1. //Import the glowfilter
  2. import flash.filters.GlowFilter;
  3. //Import Matrix, which is used for overlaying the glow gradient
  4. import flash.geom.Matrix;
  5. //use image_mc to load our image into
  6. this.createEmptyMovieClip("image_mc", this.getNextHighestDepth());
  7. //create a listener for the completion of the movie clip load
  8. var mclListener:Object = new Object();
  9. //run once the image loads
  10. mclListener.onLoadInit = function(target_mc:MovieClip) {
  11.   //set the height to the height specified on the main level
  12.   image_mc._height = _parent.maxheight;
  13.   //scale the image relative to the amount the height was scaled
  14.   image_mc._width *= image_mc._yscale/100;
  15. };
  16. //create a loader for the movie clip
  17. var image_mcl:MovieClipLoader = new MovieClipLoader();
  18. //add the event listener to the loader
  19. image_mcl.addListener(mclListener);
  20. //load the image into the movieclip and keep track of the progress using the listener
  21. image_mcl.loadClip(pic, image_mc);
  22. //Create a glow movieclip
  23. this.createEmptyMovieClip("mcglow", this.getNextHighestDepth());
  24. //create a listener for loading in the image
  25. var mclListener2:Object = new Object();
  26. //run when the image has finished loading
  27. mclListener2.onLoadInit = function(target_mc:MovieClip) {
  28.   //set the height to the height set on the main level
  29.   mcglow._height = _parent.maxheight;
  30.   //scale the width relative to the height's scale
  31.   mcglow._width *= mcglow._yscale/100;
  32.   //flip the reflection and shrink the height 50%
  33.   mcglow._yscale *= -.5;
  34.   //move the reflection to the base line
  35.   mcglow._y = _parent.maxheight+mcglow._height;
  36.   //make sure the reflection is above the main image, so it is above the glow
  37.   if (mcglow.getDepth()<image_mc.getDepth()) {
  38.     image_mc.swapDepths(mcglow);
  39.   }
  40.   //store the glow width and height
  41.   glowwidth = mcglow._width;
  42.   glowheight = mcglow._height;
  43.   //create a gradient to add a fade away effect
  44.   target_mc.createEmptyMovieClip("gradient_mc", target_mc.getNextHighestDepth());
  45.   //linear gradient
  46.   var fillType:String = "linear";
  47.   //set the color to the background color set on the main level
  48.   var colors:Array = [_parent.bgcolor, _parent.bgcolor];
  49.   //the strengths of the reflection
  50.   var alphas:Array = [50, 100];
  51.   //shapes where the gradient changes its color and alpha
  52.   var ratios:Array = [0x00, 0xEE];
  53.   //Matrix to store the gradient transformation
  54.   var matrix:Matrix = new Matrix();
  55.   //store the variables into the matrix
  56.   matrix.createGradientBox(glowwidth*100/mcglow._xscale, glowheight*100/mcglow._yscale, Math.PI/2, 0, 0);
  57.   //apply the gradient
  58.   target_mc.gradient_mc.beginGradientFill(fillType, colors, alphas, ratios, matrix);
  59.   //Draw the shape for the gradient.
  60.   target_mc.gradient_mc.moveTo(-1, -1);
  61.   target_mc.gradient_mc.lineTo(-1, glowheight*100/mcglow._yscale-2);
  62.   target_mc.gradient_mc.lineTo(glowwidth*100/mcglow._xscale+1, glowheight*100/mcglow._yscale-2);
  63.   target_mc.gradient_mc.lineTo(glowwidth*100/mcglow._xscale+1, -1);
  64.   target_mc.gradient_mc.lineTo(-1, -1);
  65.   //the shape has been drawn
  66.   target_mc.gradient_mc.endFill();
  67.   //set the y position to the y position of the reflection
  68.   target_mc.gradient_mc._y = -(glowheight)*100/mcglow._yscale;
  69. };
  70. //create a loader for the reflection
  71. var image_mcl2:MovieClipLoader = new MovieClipLoader();
  72. //create a listener for the reflection loading
  73. image_mcl2.addListener(mclListener2);
  74. //load the picture into the reflection and use an event listener to track its status
  75. image_mcl2.loadClip(pic, mcglow);
  76. //run on rollover
  77. onRollOver = function () {
  78.   //a glow filter
  79.   var filter:GlowFilter = new GlowFilter(0x999999, 1, 2, 2, 2, 10, false, false);
  80.   //apply the filter
  81.   image_mc.filters = [filter];
  82.   //set the caption on the main level to the caption of this image
  83.   _parent.caption = caption;
  84. };
  85. //run on rollout
  86. onRollOut = function () {
  87.   //remove the glowfilter
  88.   image_mc.filters = [];
  89.   //set the caption on the main level to an empty string
  90.   _parent.caption = "";
  91. };
  92. //open a url on mouse press
  93. onPress = function () {
  94.   getURL(url, "_parent");
  95. };
  96.  

Html code for this applet:
<object data="http://www.bezzmedia.com/swfspot/resources/36-imageslider.swf?xmlfile=http://www.bezzmedia.com/swfspot/photofeed.php"
type="application/x-shockwave-flash" width="500" height="120" >
<param name="movie" value="http://www.bezzmedia.com/swfspot/resources/36-imageslider.swf?xmlfile=http://www.bezzmedia.com/swfspot/photofeed.php" />
</object>

You can set the path to your xml file by changing http://www.bezzmedia.com/swfspot/photofeed.php to the location of your xml feed.

Format of the xml file:
<?xml version="1.0"?>
<images>
<image>
<pic>picurl.jpg</pic>
<caption>Some Quote</caption>
<url>http://www.urltogotowhenclicked.com</url>
</image>
<image>
<pic>anotherpicurl.jpg</pic>
<caption>Another Caption</caption>
<url>http://www.urltogotowhenclicked.com</url>
</image>
</images>

Download the source file below:

Download Source File
Questions and Suggestions
Could you break down the steps for: Create a movieclip named imagebox and place the following code into it (set its linkage identifier to imagebox as well). Do I click new flash actionscript to start a new movieclip? once the code is in it, how so i set its linkage identifier to imagebox?
October 11th 2007 19:10PM   -   Erika
Hey, im using your code for my website to display some of my featured websites and im having problems with it and a drop down code im using for my navigation. The drop downs are going behind the swf file and not on top. Now ive tried switching just about everything up and one of two things happens; the flash works and the drop down doesnt. or the drop down works and the flash comes up blank. If i try putting a regular flash object script in there the drop down works fine as well as the flash, but whats happening here is that i think the xml file link is what's messing this up for me. p.s. the drop down only works in IE, so if your looking at it in any other program its gonna look alot worse then what im explaining. thanks
October 17th 2007 17:10PM   -   Tom
Hey again, now having problems linking to the xml sheet. entered exactly as you did...
October 17th 2007 17:10PM   -   Tom
Tom, the errors are in your xml file. there shouldn't be dashes in the xml. Try copying the above xml. Also, here's an XML schema validator: http://schneegans.de/sv/
October 18th 2007 08:10AM   -   John
Erika, take a look at the source file. It should help.
October 18th 2007 08:10AM   -   John
Can I load the pictures into a movieclip inside flash. like for a photogallery??? Instead of the button opening a page.
October 19th 2007 03:10AM   -   what is the image box for
Hello John - I have a very dificult situation, I have a logo(I've made it in the Corel draw) - when I'm exporting it to the Flash it doesn't look very nice any more :(. Could You help me please with an answer what should I do - Thank You very much...
October 21st 2007 06:10AM   -   Gunars
10-23 Update: Better smoothing for images.
October 23rd 2007 07:10AM   -   John
What is the best size and format for the images. Just looking for a recommendation.
October 23rd 2007 16:10PM   -   Bob
65 pixels high seems to work out nicely. You could go a little lower than those dimensions. The demo uses 50x50 images of png, gif, and jpg types. They all seem to work fine.
October 24th 2007 07:10AM   -   John
Hi, thanks for this!...i have two problem, i want to put it on a flash site, but when i load this movie, on to of other flash this images get the same size of the main flash the (width of the main flash) can i make only to show the gallery of the size of the gallery flash no the main flash, i'm loading it with loadmovie, and the second is ther a way that when i press a image on the gallery it load a swf. on top of the main gallery?.....i try to put in the URL of the XML this: <url>example.swf</url> but i cant get it to work.. thanks1..
October 25th 2007 13:10PM   -   AB
AB, Open up the symbol imagebox and at the end of the script you will see this: onPress = function () { getURL(url, "_parent"); }; Change it to what you want a button press to do. To change the size of the slider within the swf, you could place everything within a new movieclip. Draw a box in that movieclip the size you want for the slider, and paste the main stage code into this movieclip. Change wherever it says Stage.width and Stage.height to this._width and this._height.
October 25th 2007 19:10PM   -   John
This is absolutely brilliant!!! I love it. Thank you! Any idea how I would add a kind of padding to the left and right of the sliding area... I want to overlay a gradient on both ends so that the images fade away into the background when they move out of the visible area. so I would need the left and right most image to move slightly further into the middle of the stage.
October 26th 2007 06:10AM   -   Jasper
p.s. I create two boxes with gradient fills and then made them into symbols and added these to your loadImages function eval("im"+imageIndex).swapDepths(gradleft); eval("im"+imageIndex).swapDepths(gradright); I made the boxes very narrow as the outermost image goes underneath it when mouseover. The same sort of happens in your example, where the outermost images are already sort of on their way out of the frame when you have your mouse in the middle of that image.
October 26th 2007 08:10AM   -   Jasper
Do not work John, :S, i send you a file with the modification i made to it, look into it...... so you know what i'm doing wrong, thanks!... :D
October 26th 2007 14:10PM   -   AB
This is not working at all with my version of flash MX. Normal? TX
October 26th 2007 19:10PM   -   janedoe
This code requires at least flash 8.
October 27th 2007 11:10AM   -   John
Brilliant, John, just brilliant. I have a problem, though: the captions for the images aren't showing up. I've formatted the XML file exactly as above, but the text isn't showing.
October 27th 2007 22:10PM   -   Alan
Alan, Sorry I forgot to add you need to create a textfield on the main stage, with type dynamic, and set the var box to "caption".
October 28th 2007 15:10PM   -   John
Finally!! I have been looking all over for this! THANK YOU! Jasper, that's a great idea, I added the gradient symbols and it looks awesome! Wow...I'm so excited : D I feel like I should pay you for this, lol.
October 30th 2007 03:10AM   -   Kristen
Hi, Nice script...a nice scroller....thanks Could u please tell me that can we have a automatic scroll to the images....i mean when it loads it should be scrolling right to left.... Thanks in Advance
October 31st 2007 01:10AM   -   Vinay
This is great! However i wish it did something else when you clicked the thumbnail instead of just link to a site, I rather have it so it opens the image up larger within the flash file, guess i will be attempting to tweak it if i can >_<
November 2nd 2007 03:11AM   -   Kevin
Hey Kevin, I'm actually working on this as the next article. It should be up within a week.
November 2nd 2007 06:11AM   -   John
Hi, is there a possibillity for opening the links in a new window? Thanx in advance.
November 2nd 2007 09:11AM   -   Maillard
Maillard, myabe i can help you out, just double click on the imagebox MC, and in the actions panel, at the end, theres something that said: getURL(url,"_parent"); change thats to this: getURL(url,"_blank");...this should work.... bye :D
November 2nd 2007 16:11PM   -   AB
HI Is there a way to have the images scroll slower (scrolling into the page) ? Thank!
November 4th 2007 01:11AM   -   tommy
tommy, the scroll speed moves according to how many images are in the strip. The less the images, the slower the scroll speed.
November 4th 2007 16:11PM   -   John
hi, thank you for this great script. i would like the click on thumbnails to stream mp3's. i think i've to script that in xml. so that every thumb can play a different song. and i'll have to add the right function on line 92 in the imagebox movieclip. can you help me please with the script?
November 5th 2007 05:11AM   -   houdini
I think you should create new swfs each with one mp3 an then look for: //open a url on mouse press onPress = function () { getURL(url, "_parent"); }; (you'll find it in the imagebox action script) and change it to:' //open a swf on mouse press onPress = function () { unloadMovieNum(1); //use to end any open swf in that level loadMovie(url,1); }; now just update the xml urls to have the link to the swfs
November 5th 2007 11:11AM   -   tommy
the line brakes are gone but I hope you get the point
November 5th 2007 12:11PM   -   tommy
does anybody knows how to fix the script so that once you scroll onto a "sidegap" between the image it keep scrolling on it and not just "jump" over it? /n Thx
November 5th 2007 12:11PM   -   tommy
I was wondering if you could help me with my problem. I wanted to set a 'target' in xml. For example- the way it is set up now, the link will go in the same browser window- I want to have the link open up in a new tab or window. for example in html I can add- target="_blank" for a link. Is there a way to accomplish this in xml? or within the flash script? In dreamweaver I tried to add code to see if it would hint at anything such as a "target" but I had no such luck. Please let me know if you can help- thanks! Jesse
November 5th 2007 15:11PM   -   Jesse
If you read my above post- John had already answered it- see below- THANKS AGAIN JOHN! "Maillard, myabe i can help you out, just double click on the imagebox MC, and in the actions panel, at the end, theres something that said: getURL(url,"_parent"); change thats to this: getURL(url,"_blank");...this should work.... bye :D"
November 5th 2007 15:11PM   -   Jesse
i was play with the script trying to modify it to scroll vertically instead of horizontally, i switched all the x's and y's, and height / widths. it works great, the only problem is when you scroll all the way to the top the thumbnail doesn't stop until it hits the bottom of the page, it should stop at the top. it's equivalent to scrolling left and the first picture not stopping until it's the last image seen on the right. any ideas?
November 7th 2007 13:11PM   -   grant
AS2.0??? Lol....
November 8th 2007 09:11AM   -   AsianSpark
I have downloaded the source file, saved it as an SWF and used your XML feed but it will not work? Am I missing something? I have even downloaded your swf you use on here, and tried that on my site and it won't work? Yet if I change the path to point to the swf on your site it works fine? Can someone tell me what the heck I'm doing wrong?
November 9th 2007 03:11AM   -   Lee
[URL=http://srqflwgz.com]pjboufzr[/URL] voqfmkfr http://lamzwrak.com awqouczm qjubdgdk <a href="http://nxijkfvx.com">pwwnjlbs</a>
November 10th 2007 10:11AM   -   xxhiwcpr
I am in the same boat with Lee. I am using this in a .Net web project, and it won't work when I run it under localhost, but if I just view the html page it works. Very wierd, and it won't work live.
November 10th 2007 14:11PM   -   Chris
Ok I got mine to work, it was just a problem with directories. Anyways, how can I make the caption font color white?
November 12th 2007 00:11AM   -   Chris
would anyone be willing to walk me through this to figure out what all Im not doing right? It'd be greatly appreciated! j_hippensteel@hotmail.com
November 12th 2007 16:11PM   -   Jared H
Is it possible to use this slide bar nested in the following way: main timeline>home_mc>slidebar_mc>(slide bar code) I've been trying to do this for hours with no luck in order to change the size of the slider in the way you mentioned above inside a movie clip, but there are only Stage.width and no Stage.height. Basically I'm trying to make the slide bar smaller so it looks like the edges only go to the end of a box graphic it is in, instead it scrolls across the whole width of the project, please help.
November 16th 2007 00:11AM   -   J
Hi, is it possible to add a new field under caption, such as a number for example. I want the pictures to say the caption and also a number under it, please tell me how to do it. Thanks, Alex
November 20th 2007 23:11PM   -   Alex L
John, Can you create instructions step by step with images and script in flash? I'm newbie and really love this image slider. Happy Thanksgiving
November 21st 2007 18:11PM   -   John
plz how i can change font size and color Thanks for you :)
November 22nd 2007 04:11AM   -   soso al7eloah
How Do I Turn Glow Off?
November 22nd 2007 13:11PM   -   Sam
hi! just asking, how do you change glow colour when you roll over an image?
November 27th 2007 00:11AM   -   eric
Has anyone managed to get this to automatically scroll from say left to right before users actually mouse over the scroller?? If you have please can you post up some examples, I had a go but it didn't go very well... Thanks
November 29th 2007 05:11AM   -   Lee
thanks a lot. i've got another little question on your great script. what if i want the image slider to load three different sliderfeed(1-3).xml at frames 25, 30 and 35? it seems that it loads the xml just once and then uses the same on all frames... i duplicated the img holder new mc three times and changed the xml path. it all works, but won't refresh the xml... does anyone know about?
December 2nd 2007 10:12AM   -   hudini
Hi John, Congratulation on this tutorial and thanks to chering it with us. It's work fine for me but as "AB" when i load this movie, on to of other flash this images get the same size of the main flash the (width of the main flash) can i make only to show the gallery of the size of the gallery flash no the main flash. As you said, I create a new movieclip call "menu". Draw a box in that movieclip the size I wanted for the slider, and paste the main stage code into this movieclip. I changed wherever it says Stage.width and Stage.height to "this._width" and "this._height". I don't make this to work. Can I have more precision or any advices?
December 5th 2007 11:12AM   -   ben
Nice SWF! Just a suggestion: You can make your code more concise and legible by using naming shortcuts. For instance, if you did something like var thisItem:String = "im" + Math.floor(curpos+1), you could replace all instances of < "im" + Math.floor(curpos+1) > with < thisItem > (or whatever name you prefer). This makes the code much shorter and easier to read. Also, I'd recommend replacing your eval()s.
December 6th 2007 14:12PM   -   philip
Excellent app. I have one problem though, I am pretty new to Flash, and I am using CS3. How do I create the video file? Is it just a normal flash document. I have the source file and the xml file and I have the html on my page, but I don't know how to create the necessary video. Help Please!
December 7th 2007 15:12PM   -   Matt
I have the same problem, when I upload this movie to main stage hi take new dimension. And if I put new mc and put inside, when I go with mouse outside of mc picture came with mouse to the end of the screen... Is it possible someone to explain procedure how to solve that problem ?
December 10th 2007 08:12AM   -   dimesion
I agree with J. I can't seem to find stage.width and stage.height either. What line is this on? Awesome tutorial btw. J wrote: "I've been trying to do this for hours with no luck in order to change the size of the slider in the way you mentioned above inside a movie clip, but there are only Stage.width and no Stage.height. Basically I'm trying to make the slide bar smaller so it looks like the edges only go to the end of a box graphic it is in, instead it scrolls across the whole width of the project, please help. "
December 11th 2007 17:12PM   -   Jason
Is it possible 2 use this tut without XML?...ifso plz tell me how
December 12th 2007 17:12PM   -   Gerard
how can i remove the glow behind the images??
December 12th 2007 17:12PM   -   noelleee
Hi there New to this, how do you create the XML file? can it link to a folder of images instead? What is the XML file called in the Action Script code on this downloaded sample? Any help appreciated Thanks Giggs
December 13th 2007 08:12AM   -   Giggs
Hello, Just a quick problem, has ANYONE GOT THIS WORKING?!?!?!?! If so please help, all I get is a blank thing. Please (aim---adm012now)THANKS!
December 13th 2007 19:12PM   -   dude
It works fine, but only problem is if you want to put this menu in some other flash project. He take dimension of new project, and you have menu on whole new project...
December 14th 2007 04:12AM   -   Ivan
Great tutorial. Work very good and it's easy to customize. My question is how can we set the size for blank browser window? getURL(url, "_blank"); for example width=300, height=350 Hello dude. put your images in folder images and change the xml file ?xml version="1.0"?> <images> <image> <pic>images/yourpic1.jpg</pic> <caption>Some Text</caption> <url>http://www.nba.com</url> </image> <image> <pic>images/yourpic2.jpg</pic> <caption>Some Text 2</caption> <url>http://www.yahoo.com</url> </image> <image> <pic>images/yourpic3.jpg</pic> <caption>Some Text 3</caption> <url>http://www.google.com</url> </image> <image> <pic>images/yourpic4.jpg</pic> <caption>Some Text 4</caption> <url>http://www.msn.com</url> </image> </images>
December 19th 2007 11:12AM   -   ljuba
So, I know that this requires Flash 8. I have 6 (Flash MX), what are the chances of a noob like myself finding something like this that I can mess with for Flash MX?
December 21st 2007 17:12PM   -   Willie
Does anyone actually administer this site? Although I see half the questions are not that valid, some a good valid questions which could enhance this script - But no one is bothering to answer them?? Pretty disapointing really....
January 2nd 2008 10:01AM   -   Lee
Hey Lee, I try to answer the questions. Some are just poorly written, have already been solved, or can't be easily solved. If you'd like to answer some of these questions, it would be great.
January 2nd 2008 21:01PM   -   John
Hi John, Great scripting... Any chance you figured out a way to make it scroll smoothly over the gap between images rather than jumping over it? I believe Tommy asked a similar or same question back in November. I absolutely love the results, I'm just concerned some might find it to be a bit too jumpy. If you come up with something please post it ASAP! THANKS!!!
January 10th 2008 13:01PM   -   Chris
John, one more question. I'm using Flash CS3 Professional. I have my slider working nicely but I could never get my reflection gradient to work. The reflection appears but has no gradient over it at all. So it look like a squished, flipped version of the main image with no depth... Any help would be appreciated.
January 11th 2008 10:01AM   -   Chris
Thanks for an awesome flash applet, however I am having issues with the line of code: onPress = function () { getURL(url, "_parent"); }; It works well in the flash environment itself, however if I try to embed the flash applet within a webpage, I do not get any action when I click on an image. The onPress event does not appear to fire. I am using Flash CS3 with IE 7, and have saved the project as a CS3/Flash 9 source base. I am not sure if I should keep it in Flash 8 or if there is something I need to change to make it work in IE7. Any security settings I need to update? Any ideas on what I need to do? Thanks in advance.
January 16th 2008 22:01PM   -   Ripperjack
Hi, great... any how do this 5 images count set default number 3 for center. but run as first of left. How do set number 3 for center. Thanks
February 8th 2008 16:02PM   -   Eucario
I think it should have a preloader.
February 11th 2008 00:02AM   -   Tha M.C.
I can't get this to work!! I've tried everything I can think of. I can't get it to work locally or online, it doesn't work if I use my xml and link to your swf file or vice versa. It only works if I link to your xml and your swf. I have no idea what I am doing wrong.
February 25th 2008 13:02PM   -   Sarah
I finally got it working correctly. Thanks for this. Is it possible to set it so none of the images are scaled up on loading? I want the images to all be same height until mouse moves over the image slider.
February 25th 2008 21:02PM   -   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
good
March 11th 2008 01:03AM   -   govind
Love you mate!! Its really cool
March 20th 2008 00:03AM   -   Gunjan
Hi guys I love this tutorial, and am using the slider template all over the place. Thanks alot. I have a problem, is there any way to use this, or somethign like it, using an older version of flash? cheers
March 20th 2008 16:03PM   -   felix
felix, there are classes used in this applet that require a minimum of flash 8.
March 20th 2008 19:03PM   -   John
There anyway to get rid of the shadow and make the speed slower?
April 4th 2008 14:04PM   -   mike
Is there anyway to have swfs load instead of jpegs for the images?
April 10th 2008 04:04AM   -   kellie
I'm looking to add a gradient to both sides of the flash file so that the images fade out of the frames on the left and right, but when I add the gradients to both sides of the box the gradient moves out along with the images. you can see what I have so far below reclaimevehicles.com anybody have a solution?
April 10th 2008 11:04AM   -   derek
Derek, draw the gradients on the main stage, on a new layer above the slider's layer.
April 10th 2008 17:04PM   -   john
I want to use this in frameset. I thought to add "target=,,," but I can not find where to add it. How can I do that?
April 12th 2008 03:04AM   -   note
I am creating a site that uses ASP.NET and web services to display images, can this be used with Web Services?
April 13th 2008 15:04PM   -   James
I found that in imagebox, thank you.
April 14th 2008 00:04AM   -   note
I figured out how to use it with Web services, however I have another problem. When I test it, only one image shows up (I have four images display) I think it may have to do with the way I am handling the onEnterFrame event and the loadImages event. Can the onEnterFrame function be defined in the loadImages function?
April 14th 2008 11:04AM   -   James
After several debugging sessions, I figured out my problem. For some reason, this.getNextHighestDepth was not creating unique depths so I set it to 100 + imageIndex. Thanks for the great tutorial. James
April 14th 2008 22:04PM   -   James
How can I size the movie to fit a previous created flash file I am working on. It seems to get sized according to the document size but I want to fit it to a specific size to fit my current page I am working on. Geo
April 24th 2008 10:04AM   -   Geo
Have to say this is such a great little slider.. With a bit of fiddling you can really do a lot with it - Thanks
May 19th 2008 01:05AM   -   Chairs
@ James I'd be interested in seeing some examples of what you have done with this using ASP.NET and web services?? Have you got a blog or anything??
May 19th 2008 01:05AM   -   Cars
Thanks so much for the script. One of the best tutorial for the guy like me who just started doing AS. May your knowledge grow eternally!
May 23rd 2008 05:05AM   -   MK
Is there any way to make the transparent parts of a .png image show up as, transparent, instead of white? Great tutorial, btw!! thanks!!!
May 23rd 2008 18:05PM   -   Troy
hudini, I had the same issue. I fixed it by commenting out the line: if (_root.xmlfile == undefined || _root.xmlfile == ""), essentially hardcoding the xml filename in the AS in the next line (remove the IF statement condition).
May 25th 2008 11:05AM   -   Troy
Hello - Great script John. Got it to work in about 15 minutes, but am trying to figure out how to have the images automatically scroll at a set pace when the mouse is not over the imagebox. Is this an easy mod? Thank you.
May 27th 2008 17:05PM   -   Chris G
Love it. Have you got a blogg or anything
June 9th 2008 10:06AM   -   chocolate01
Has any one figured out how to remove the shadow, the question has been asked about 10 times and still no answer! Thank you
June 20th 2008 23:06PM   -   
Add a Question or Suggestion
name:
website (optional):
captcha type the characters into the box
message (5000 characters or less):