Newest Articles

MegaCombs
Flash Media Player
XML Driven Pie Chart
Base Defender
Hangman Game
8 Ball Pool


Popular Articles

True Fullscreen Flash Mode
Mp3 Player with XML Playlist
FLV Player
3d Rotating Image Cube
Infinitely Zooming Image
Hangman Game


Random Articles

Motion along a Path
XHTML Image Mapper
Music Player
LED Text Scroller
8 Ball Pool
Moving Clouds and Waving Grass


Links

Shapes the Game
Reddit
Newgrounds
TWiT
Link to SwfSpot
Swf Spot

Contact me on Google+



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


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
Comments Currently Disabled