Newest Articles

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


Popular Articles

True Fullscreen Flash Mode
Catapult Game
Hangman Game
Infinitely Zooming Image
3d Rotating Image Cube
Base Defender


Random Articles

Glowing Orb
Image Slider with Easing
Page Flipper
Image Color Tinting using Actionscript
12 Hour Clock with Hands
Motion along a Path


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