Image Slider

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:

//Image Slider By John Bezanis for SWFspot
//Settings to play with
//the height of the images when not stretched
var maxheight = 40;
//the y position of the "floor" or where the images sit on 
var floor = 75;
//The amount an image scales to as the mouse gets closer 
var curvedistance = 160;
//The amount of gap in between each image
var sidegap = 5;
//The background color of the document. This is used for the reflection
var bgcolor = 0xFFFFFF;
/*no more settings to play with below here */
//Initialize the image count to 0
var imagecount = 0;
//if the get parameter "xmlfile" is not set, change the xml file to load the data to a default name
if (_root.xmlfile == undefined || _root.xmlfile == "") {
  //default name for the xml feed
  _root.xmlfile = "sliderfeed.xml";
}
var myXml:XML = new XML();
myXml.ignoreWhite = true;
//Load the xml file
myXml.load(_root.xmlfile);
//run when the xml file has loaded
myXml.onLoad = function() {
  //parse the xml file and load in the images
  loadImages();
};
//start loading in the images
function loadImages() {
  //traverse through each pic of the xml file
  for (imageIndex=0; imageIndex<myXml.childNodes[0].childNodes.length; imageIndex++) {
    //create a new instance of imagebox to load our pic,caption,and url into
    attachMovie("imagebox", "im" + imageIndex, this.getNextHighestDepth());
    //load in the pic
    eval("im" + imageIndex).pic = myXml.childNodes[0].childNodes[imageIndex].childNodes[0].childNodes[0].nodeValue;
    //load the caption
    eval("im" + imageIndex).caption = myXml.childNodes[0].childNodes[imageIndex].childNodes[1].childNodes[0].nodeValue;
    //load the url
    eval("im" + imageIndex).url = myXml.childNodes[0].childNodes[imageIndex].childNodes[2].childNodes[0].nodeValue;
    //set the index to the current index of the for loop
    eval("im" + imageIndex).index = imageIndex;
    //move this above the caption box
    eval("im" + imageIndex).swapDepths(captionbox);
    //increment the imagecount
    imagecount++;
  }
}
//run at the start of each frame
onEnterFrame = function () {
  //only run if the image have been loaded
  if (imagecount != 0) {
    //figure out which image the mouse is closest to on the x plane
    curmouseover = Math.max(0, Math.min(imagecount, imagecount*(_xmouse-sidegap)/(Stage.width-sidegap*2)));
    //if the current x position is greater than our strip's width, create a movieclip as a placeholder
    if (eval("im" + Math.floor(curmouseover))._x == undefined) {
      this.createEmptyMovieClip("im" + Math.floor(curmouseover), this.getNextHighestDepth());
      //Move the newly created clip to the width of the strip plus the sidegap
      eval("im" + Math.floor(curmouseover))._x = Stage.width+sidegap;
    }
    //if the current x position is past the strip's width, select the last pic  
    if (curmouseover>=myXml.childNodes[0].childNodes.length) {
      //move the last pic to the stage width minus the width of the pic
      eval("im" + Math.floor(curmouseover))._x = Stage.width-eval("im" + Math.floor(curmouseover))._width;
    } else {
      //else the x position is set based on the distance from the centerpoint of that index
      eval("im" + Math.floor(curmouseover))._x = _xmouse-(curmouseover-Math.floor(curmouseover))*eval("im" + Math.floor(curmouseover))._width;
    }
    //scale the image based on the image center's distance from x mouse position
    scale = Math.max(100, curvedistance-(Math.abs((eval("im" + Math.floor(curmouseover))._x+eval("im" + Math.floor(curmouseover))._width/2)-_xmouse))/4);
    eval("im" + Math.floor(curmouseover))._xscale = scale;
    eval("im" + Math.floor(curmouseover))._yscale = scale;
    //Set the y position to the floor minus the height of the pic 
    eval("im" + Math.floor(curmouseover))._y = floor-eval("im" +Math.floor(curmouseover)).image_mc._height*eval("im" + Math.floor(curmouseover))._yscale/100;
    //traverse through the images to the right of the current selected image, scaling and setting the x position
    for (curpos=Math.floor(curmouseover); curpos<imagecount-1; curpos++) {
      //scale the image based on the image center's distance from x mouse position
      scale = Math.max(100, curvedistance-(Math.abs((eval("im" + Math.floor(curpos))._x+eval("im" + Math.floor(curpos))._width*1.5)-_xmouse))/4);
      eval("im" + Math.floor(curpos+1))._xscale = scale;
      eval("im" + Math.floor(curpos+1))._yscale = scale;
      //set the x position to the x position of the last image plus the width and sidegap
      eval("im" + Math.floor(curpos+1))._x = eval("im" + Math.floor(curpos))._x+(eval("im" + Math.floor(curpos))._width+sidegap);
      //move the y position according to how much the image is scaled
      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;
    }
    //traverse through the images to the left of the current selected image, scaling and setting the x position
    for (curpos=Math.floor(curmouseover); curpos>0; curpos--) {
      //scale the image based on the image center's distance from x mouse position
      scale = Math.max(100, curvedistance-(Math.abs((eval("im" + Math.floor(curpos-1))._x+eval("im" + Math.floor(curpos-1))._width/2)-_xmouse))/4);
      eval("im" + Math.floor(curpos-1))._xscale = scale;
      eval("im" + Math.floor(curpos-1))._yscale = scale;
      //set the x position to the x position of the last image minus the width and sidegap
      eval("im" + Math.floor(curpos-1))._x = eval("im" + Math.floor(curpos))._x-(eval("im" + Math.floor(curpos-1))._width+sidegap);
      //move the y position according to how much the image is scaled
      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;
    }
  }
};
 

Create a movieclip named imagebox and place the following code into it (set its linkage identifier to imagebox as well):

//Import the glowfilter
import flash.filters.GlowFilter;
//Import Matrix, which is used for overlaying the glow gradient
import flash.geom.Matrix;
//use image_mc to load our image into
this.createEmptyMovieClip("image_mc", this.getNextHighestDepth());
//create a listener for the completion of the movie clip load
var mclListener:Object = new Object();
//run once the image loads
mclListener.onLoadInit = function(target_mc:MovieClip) {
  //set the height to the height specified on the main level
  image_mc._height = _parent.maxheight;
  //scale the image relative to the amount the height was scaled
  image_mc._width *= image_mc._yscale/100;
};
//create a loader for the movie clip
var image_mcl:MovieClipLoader = new MovieClipLoader();
//add the event listener to the loader
image_mcl.addListener(mclListener);
//load the image into the movieclip and keep track of the progress using the listener
image_mcl.loadClip(pic, image_mc);
//Create a glow movieclip
this.createEmptyMovieClip("mcglow", this.getNextHighestDepth());
//create a listener for loading in the image
var mclListener2:Object = new Object();
//run when the image has finished loading
mclListener2.onLoadInit = function(target_mc:MovieClip) {
  //set the height to the height set on the main level
  mcglow._height = _parent.maxheight;
  //scale the width relative to the height's scale
  mcglow._width *= mcglow._yscale/100;
  //flip the reflection and shrink the height 50%
  mcglow._yscale *= -.5;
  //move the reflection to the base line
  mcglow._y = _parent.maxheight+mcglow._height;
  //make sure the reflection is above the main image, so it is above the glow
  if (mcglow.getDepth()<image_mc.getDepth()) {
    image_mc.swapDepths(mcglow);
  }
  //store the glow width and height
  glowwidth = mcglow._width;
  glowheight = mcglow._height;
  //create a gradient to add a fade away effect
  target_mc.createEmptyMovieClip("gradient_mc", target_mc.getNextHighestDepth());
  //linear gradient
  var fillType:String = "linear";
  //set the color to the background color set on the main level
  var colors:Array = [_parent.bgcolor, _parent.bgcolor];
  //the strengths of the reflection
  var alphas:Array = [50, 100];
  //shapes where the gradient changes its color and alpha
  var ratios:Array = [0x00, 0xEE];
  //Matrix to store the gradient transformation
  var matrix:Matrix = new Matrix();
  //store the variables into the matrix
  matrix.createGradientBox(glowwidth*100/mcglow._xscale, glowheight*100/mcglow._yscale, Math.PI/2, 0, 0);
  //apply the gradient
  target_mc.gradient_mc.beginGradientFill(fillType, colors, alphas, ratios, matrix);
  //Draw the shape for the gradient. 
  target_mc.gradient_mc.moveTo(-1, -1);
  target_mc.gradient_mc.lineTo(-1, glowheight*100/mcglow._yscale-2);
  target_mc.gradient_mc.lineTo(glowwidth*100/mcglow._xscale+1, glowheight*100/mcglow._yscale-2);
  target_mc.gradient_mc.lineTo(glowwidth*100/mcglow._xscale+1, -1);
  target_mc.gradient_mc.lineTo(-1, -1);
  //the shape has been drawn
  target_mc.gradient_mc.endFill();
  //set the y position to the y position of the reflection
  target_mc.gradient_mc._y = -(glowheight)*100/mcglow._yscale;
};
//create a loader for the reflection
var image_mcl2:MovieClipLoader = new MovieClipLoader();
//create a listener for the reflection loading
image_mcl2.addListener(mclListener2);
//load the picture into the reflection and use an event listener to track its status
image_mcl2.loadClip(pic, mcglow);
//run on rollover
onRollOver = function () {
  //a glow filter
  var filter:GlowFilter = new GlowFilter(0x999999, 1, 2, 2, 2, 10, false, false);
  //apply the filter
  image_mc.filters = [filter];
  //set the caption on the main level to the caption of this image
  _parent.caption = caption;
};
//run on rollout
onRollOut = function () {
  //remove the glowfilter
  image_mc.filters = [];
  //set the caption on the main level to an empty string
  _parent.caption = "";
};
//open a url on mouse press
onPress = function () {
  getURL(url, "_parent");
};
 

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