Newest Articles

8 Ball Pool
Photo Reel
Image Color Tinting using Actionscript
3d Rotating Image Cube
Image Slider with Easing
Catapult Game


Popular Articles

True Fullscreen Flash Mode
8 Ball Pool
FLV Player
Image Slider
Mp3 Player with XML Playlist
Album Slide


Random Articles

Page Flipper
XHTML Image Mapper
Photo Reel
Picture Puzzle
Music Player
onEnterFrame vs setInterval


Links

Foundation-Flash
Tutorial4Me
MickM
TutorialQuest
Tutorialsphere.com - Free Online Tutorials
Newgrounds
TWiT
Link to SwfSpot
Swf Spot



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
Total Views: 23601
Views in the Past 7 Days: 260


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
Questions and Suggestions
Add descriptions for each image, that would be great. Or Title, and description.
April 8th 2007 02:04AM   -   scott
Very interesting ... i used it... and work very well thanks
May 15th 2007 04:05AM   -   kostas
was trying to get to work, but keep getting: Error opening URL "file:///C|/dev/design/dev/taxslayer.com/flash/undefined"
September 10th 2007 10:09AM   -   buzz
had to be in same area as default page
September 10th 2007 10:09AM   -   buzz
Not working properly Please upload total files in a root
December 19th 2007 07:12AM   -   Avijit Brahma
This rotator looks like good solution for my needs (though randomization would be preferable). The blur is a nice touch! However, I'm having problems resizing the movie. I want to use 765x195 and not 550x400. Changing the Flash stage size and/or the display image script width and height to match in lines 52 and 53 above only allows a thin band of an image to appear at roughly 765 x 50. I'm testing both PNGs and JPGs at 765x195 dimensions. Is there some way to allow me to change the size of the movie to suit my needs? Thanks!
January 3rd 2008 16:01PM   -   Cliff
Hmm it seams like the blur effect is eating 50% of the CPU ! I have tried on different maschines. But still a nice flash script. Good work.
January 29th 2008 05:01AM   -   Jens
great job! thank You. for those who had problems with resizing: i think i found a bug, and little modification fix it. line 43: eval("displayImage"+currentTop)._width*=Stage.height/eval("displayImage"+currentTop)._height; should probably be: eval("displayImage"+currentTop)._width*=Stage.width/eval("displayImage"+currentTop)._width; line 48 vice versa.. it makes sense for me and works =)
February 9th 2008 16:02PM   -   tasiek
Cliff, To shuffle the order add this function: Array.prototype.shuffle = function() { var randomNum:Number; for (i=0; i<this.length; i++) { if (this[i] == undefined) { i = i-1; } tmp = this[i]; randomNum = Math.floor((Math.random()*(this.length-1))+1); this[i] = this[randomNum]; this[randomNum] = tmp; } }; Then modify the onLoad area like so: myXml.onLoad = function() { //CTT Create an array of number range from 0 to length and shuffle it allNodesArray = new Array(); nodeLength = myXml.childNodes[0].childNodes.length; for (k=0; k<nodeLength; k++) { allNodesArray[k] = k; } allNodesArray.shuffle(); currentImage = myXml.childNodes[0].childNodes.length-1; for (imageIndex=0; imageIndex<myXml.childNodes[0].childNodes.length; imageIndex++) { //CTT use my shuffled array for the index. Replace childNodes[imageIndex] with childNodes[number] //The childNodes will be loaded in the order of the random array number = allNodesArray[imageIndex]; imageList[imageIndex] = myXml.childNodes[0].childNodes[number].childNodes[0].childNodes[0];
April 20th 2008 18:04PM   -   Christian
This is brilliant, thank you. I tried Tasiek's suggestion to fix the resizing issue, but it didn't work. Editing lines 52 and 53 did, though. Change them to the following and the holders should fit the stage, whatever size it is: eval("displayImage"+currentTop)._x=(Stage.width-eval("displayImage"+currentTop)._width)/2; eval("displayImage"+currentTop)._y=(Stage.height-eval("displayImage"+currentTop)._height)/2;
May 14th 2008 07:05AM   -   Dan
any tips as to how to alter this if i want to add some more controls like 1 - 2 - 3 - 4 buttons that would jump to specific images instead of just moving from one image to the next? also wanted to add links to the images but i can't seem to figure out how..
June 25th 2008 23:06PM   -   jake
i got it to work perfect on my site, thank you so much, and for those who are having issues with scale and size, all you got to do is: download file source, go into flash, rezise the content(background, movie clips) remember there are 2 movieclips that are not visible so make sure you resize those too or it would not work, then go on line 43 and 48 and change them to what TASIEK said on his reply here, and lastly, go to line 52 and 53 and change the width 550 and height 400 to whatever size you want Good luck :)
June 28th 2008 02:06AM   -   Angel
Hi, I was trying above example with local images but it shows "Error opening URL "e:\flash_nilesh\images\26-pic1.jpg". I didn't get wats going wrong with my XML or actionscript. Please give me if there is any solution for this Thanks
July 4th 2008 09:07AM   -   Nilesh
Hello, this script is grate!! just what i was looking for. On thing, is it possible to rotate the images?? I want everything to be like 20º Cc. Thanks Gonzalo
September 2nd 2008 15:09PM   -   Gonzalo
Add a Question or Suggestion
name:
website (optional):
captcha type the characters into the box
message (5000 characters or less):