Image Rotator with blur and fadeout

Description: Images are loaded through an XML file and scaled to fit the screen. There is a blur and fade out transition between images.
Author: John Bezanis
Added: March 22nd 2007
Version: Flash 8

Images are loaded in through an XML file, specified by the GET parameter XMLfile. After 200 frames, the next image is loaded and the transition begins, blurring and erasing the previous image. If the applet runs slow, remove the 4 lines used for the blurring. XHTML usage example:

<object data="http://www.bezzmedia.com/swfspot/resources/27-imagerotator.swf?XMLfile=http://www.bezzmedia.com/swfspot/resources/27-imagerotator.xml" type="application/x-shockwave-flash" width="480" height="360"><param name="movie" value="http://www.bezzmedia.com/swfspot/resources/27-imagerotator.swf?XMLfile=http://www.bezzmedia.com/swfspot/resources/27-imagerotator.xml"/></object>

XML file used in the example

Main code for the rotation:

import flash.filters.BlurFilter;
stop();
counter=-1;
//Check if the GET parameter XMLfile is set, if not use a default file
if(_root.XMLfile==undefined || _root.XMLfile==""){
  _root.XMLfile="27-imagerotator.xml";
}
//Fix the size of the content
Stage.scaleMode = "noScale";
//There are 2 movie clips used, and they are rotated
currentTop=0;
//Get the percentage loaded of the next image
function getPercentLoaded(){
  return(100*eval("displayImage"+currentTop).getBytesLoaded()/eval("displayImage"+currentTop).getBytesTotal());
}
//Set the current image to the next image
function nextListImage(){
  currentImage=(currentImage+1)%imageList.length;
  return currentImage;
}
//Set the current image to the previous image
function previousListImage(){
  currentImage=(currentImage-1)%imageList.length;
  if(currentImage<0){currentImage=imageList.length-1;}
  return currentImage;
}
//Reset the delay counter, swap the images in depth, and make the top invisible
function nextImage(){
  counter=200;
  currentTop=(currentTop+1)%2;
  eval("displayImage"+currentTop).swapDepths(eval("displayImage"+((currentTop+1)%2)));
  eval("displayImage"+currentTop)._alpha=0;
  return currentTop;
}
//Scale the image to fit the window
function fitImages(){
  stageRatio=Stage.width/Stage.height;
  docprops=stageRatio+" "+Stage.width+" "+Stage.height;
  topImageRatio=eval("displayImage"+currentTop)._width/eval("displayImage"+currentTop)._height;
  if(isNaN(topImageRatio) || topImageRatio==Infinity){
  }else if(topImageRatio<stageRatio){
    if(eval("displayImage"+currentTop)._height!=Stage.height){
      eval("displayImage"+currentTop)._width*=Stage.height/eval("displayImage"+currentTop)._height;
      eval("displayImage"+currentTop)._height=Stage.height;
    }
  }else{
    if(eval("displayImage"+currentTop)._width!=Stage.width){
      eval("displayImage"+currentTop)._height*=Stage.width/eval("displayImage"+currentTop)._width;
      eval("displayImage"+currentTop)._width=Stage.width;
    }
  }
  eval("displayImage"+currentTop)._x=(550-eval("displayImage"+currentTop)._width)/2;
  eval("displayImage"+currentTop)._y=(400-eval("displayImage"+currentTop)._height)/2;
}
var imageList:Array = Array();
var myXml:XML = new XML();
myXml.ignoreWhite = true;
myXml.load(_root.XMLfile);
//Load the xml file and parse it
myXml.onLoad = function() {
  currentImage=myXml.childNodes[0].childNodes.length-1;
  for(imageIndex=0;imageIndex<myXml.childNodes[0].childNodes.length;imageIndex++){
    imageList[imageIndex]=myXml.childNodes[0].childNodes[imageIndex].childNodes[0].childNodes[0];
  }
  //reset the delay counter
  counter=200;
  //load an image
  loadMovie(imageList[nextListImage()], eval("displayImage"+nextImage()));
}
onEnterFrame=function(){
  counter--;
  //if the xml file has loaded
  if(imageList.length>0 && counter>(-1)){
    //if the delay counter hits 0, load the next image
    if(counter==0){
      loadMovie(imageList[nextListImage()], eval("displayImage"+nextImage()));
    } 
    //start the transition after the next image has loaded
    if(eval("displayImage"+currentTop)._alpha<100 && eval("displayImage"+currentTop).getBytesLoaded()==eval("displayImage"+currentTop).getBytesTotal() && eval("displayImage"+currentTop).getBytesLoaded()>0 ){
      //scale the new image
      fitImages();
      //quality of the blur
      quality = 2;
      //The next 4 lines apply a blur to the transition. Remve these lines if the applet runs slow
      var filter:BlurFilter = new BlurFilter(eval("displayImage"+((currentTop+1)%2))._alpha, eval("displayImage"+((currentTop+1)%2))._alpha, quality);
      eval("displayImage"+currentTop).filters=[filter];   
      var filter2:BlurFilter = new BlurFilter(eval("displayImage"+currentTop)._alpha, eval("displayImage"+currentTop)._alpha, quality);
      eval("displayImage"+((currentTop+1)%2)).filters=[filter2];        
      
      //fade one in and one out
      eval("displayImage"+currentTop)._alpha+=4;
      eval("displayImage"+((currentTop+1)%2))._alpha-=4;
      //image is still loading
    }else if(eval("displayImage"+currentTop).getBytesLoaded()!=eval("displayImage"+currentTop).getBytesTotal()){
      counter=200;
    }
  }
}

The source file is available for download

Download Source File

Comments Currently Disabled