Newest Articles

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


Popular Articles

True Fullscreen Flash Mode
3d Rotating Image Cube
8 Ball Pool
Hangman Game
Catapult Game
Mp3 Player with XML Playlist


Random Articles

Combs
Spark Effect
XML Driven Pie Chart
LED Text Scroller
Bouncing Ball with Smoke Effect
Flash Media Player


Links

Foundation-Flash
Reddit
Newgrounds
TWiT
Link to SwfSpot
Swf Spot

Contact me on Google+



rss feed

Image Rotator with blur and fadeout

Image Rotator with blur and fadeout
AddThis Social Bookmark Button
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:
  1. import flash.filters.BlurFilter;
  2. stop();
  3. counter=-1;
  4. //Check if the GET parameter XMLfile is set, if not use a default file
  5. if(_root.XMLfile==undefined || _root.XMLfile==""){
  6.   _root.XMLfile="27-imagerotator.xml";
  7. }
  8. //Fix the size of the content
  9. Stage.scaleMode = "noScale";
  10. //There are 2 movie clips used, and they are rotated
  11. currentTop=0;
  12. //Get the percentage loaded of the next image
  13. function getPercentLoaded(){
  14.   return(100*eval("displayImage"+currentTop).getBytesLoaded()/eval("displayImage"+currentTop).getBytesTotal());
  15. }
  16. //Set the current image to the next image
  17. function nextListImage(){
  18.   currentImage=(currentImage+1)%imageList.length;
  19.   return currentImage;
  20. }
  21. //Set the current image to the previous image
  22. function previousListImage(){
  23.   currentImage=(currentImage-1)%imageList.length;
  24.   if(currentImage<0){currentImage=imageList.length-1;}
  25.   return currentImage;
  26. }
  27. //Reset the delay counter, swap the images in depth, and make the top invisible
  28. function nextImage(){
  29.   counter=200;
  30.   currentTop=(currentTop+1)%2;
  31.   eval("displayImage"+currentTop).swapDepths(eval("displayImage"+((currentTop+1)%2)));
  32.   eval("displayImage"+currentTop)._alpha=0;
  33.   return currentTop;
  34. }
  35. //Scale the image to fit the window
  36. function fitImages(){
  37.   stageRatio=Stage.width/Stage.height;
  38.   docprops=stageRatio+" "+Stage.width+" "+Stage.height;
  39.   topImageRatio=eval("displayImage"+currentTop)._width/eval("displayImage"+currentTop)._height;
  40.   if(isNaN(topImageRatio) || topImageRatio==Infinity){
  41.   }else if(topImageRatio<stageRatio){
  42.     if(eval("displayImage"+currentTop)._height!=Stage.height){
  43.       eval("displayImage"+currentTop)._width*=Stage.height/eval("displayImage"+currentTop)._height;
  44.       eval("displayImage"+currentTop)._height=Stage.height;
  45.     }
  46.   }else{
  47.     if(eval("displayImage"+currentTop)._width!=Stage.width){
  48.       eval("displayImage"+currentTop)._height*=Stage.width/eval("displayImage"+currentTop)._width;
  49.       eval("displayImage"+currentTop)._width=Stage.width;
  50.     }
  51.   }
  52.   eval("displayImage"+currentTop)._x=(550-eval("displayImage"+currentTop)._width)/2;
  53.   eval("displayImage"+currentTop)._y=(400-eval("displayImage"+currentTop)._height)/2;
  54. }
  55. var imageList:Array = Array();
  56. var myXml:XML = new XML();
  57. myXml.ignoreWhite = true;
  58. myXml.load(_root.XMLfile);
  59. //Load the xml file and parse it
  60. myXml.onLoad = function() {
  61.   currentImage=myXml.childNodes[0].childNodes.length-1;
  62.   for(imageIndex=0;imageIndex<myXml.childNodes[0].childNodes.length;imageIndex++){
  63.     imageList[imageIndex]=myXml.childNodes[0].childNodes[imageIndex].childNodes[0].childNodes[0];
  64.   }
  65.   //reset the delay counter
  66.   counter=200;
  67.   //load an image
  68.   loadMovie(imageList[nextListImage()], eval("displayImage"+nextImage()));
  69. }
  70. onEnterFrame=function(){
  71.   counter--;
  72.   //if the xml file has loaded
  73.   if(imageList.length>0 && counter>(-1)){
  74.     //if the delay counter hits 0, load the next image
  75.     if(counter==0){
  76.       loadMovie(imageList[nextListImage()], eval("displayImage"+nextImage()));
  77.     } 
  78.     //start the transition after the next image has loaded
  79.     if(eval("displayImage"+currentTop)._alpha<100 && eval("displayImage"+currentTop).getBytesLoaded()==eval("displayImage"+currentTop).getBytesTotal() && eval("displayImage"+currentTop).getBytesLoaded()>0 ){
  80.       //scale the new image
  81.       fitImages();
  82.       //quality of the blur
  83.       quality = 2;
  84.       //The next 4 lines apply a blur to the transition. Remve these lines if the applet runs slow
  85.       var filter:BlurFilter = new BlurFilter(eval("displayImage"+((currentTop+1)%2))._alpha, eval("displayImage"+((currentTop+1)%2))._alpha, quality);
  86.       eval("displayImage"+currentTop).filters=[filter];   
  87.       var filter2:BlurFilter = new BlurFilter(eval("displayImage"+currentTop)._alpha, eval("displayImage"+currentTop)._alpha, quality);
  88.       eval("displayImage"+((currentTop+1)%2)).filters=[filter2];       
  89.      
  90.       //fade one in and one out
  91.       eval("displayImage"+currentTop)._alpha+=4;
  92.       eval("displayImage"+((currentTop+1)%2))._alpha-=4;
  93.       //image is still loading
  94.     }else if(eval("displayImage"+currentTop).getBytesLoaded()!=eval("displayImage"+currentTop).getBytesTotal()){
  95.       counter=200;
  96.     }
  97.   }
  98. }

The source file is available for download

Download Source File
Comments Currently Disabled