09 November 2009

Free AS2 Script for Rotating Website Banner or Slideshow in Flash


This is a simple AS2 function to turn a normal flash MovieClip into a rotating banner or fading photo slideshow for a website. Timings and speeds are customisable, it works with any size images and will even work with animated content. All you have to do is put one photo on each frame of a Movie clip and the script does the rest.
Full instructions and demo below...
  1. Make a Movie Clip on the stage containing one photo* on each frame. Add as many as you like but there must be one on every frame in the MC for it to work correctly.
  2. In the properties panel, label the instance "banner"
  3. Copy the code below onto the same frame as the banner clip

    * alternatively you can create a new movie clip some of the frames and do a little animation inside it.


 Please see right hand panel before copying>



//Rotating Banner Function by Crondesign.com 2009
///////////////////////////////////////
//SETTINGS::::::::::::::::::::::::::::
fadespeed=5 //speed of transition
interval=4 //seconds to wait on each image

///////////////////////////////////////
//SETUP:::::::::::::::::::::::::::::::
banner.stop()
//make duplicate of banner called bannerB:
duplicateMovieClip(banner,'bannerB',banner.getDepth()-1)
bannerB.stop()

//START BANNER:
//run the gobanner function on a loop:
setInterval(gobanner,interval*1000)


///////////////////////////////////////
//FUNCTIONS::::::::::::::::::::::::::::
//Changes the banner image:
function gobanner(){
//jump bannerB to the next frame and stop any animation:
nextImg(bannerB)
stopChildren(bannerB)
//fade out the main banner:
banner.onEnterFrame=function(){
with(this){
_alpha-=1*fadespeed
if(_alpha<=0){//when fade is complete:
//stop the fade:
onEnterFrame=null
//jump the invisible banner to the next frame:
_parent.nextImg(this)
//and make it visible:
_alpha=100
}
}
}
}
//jumps a MC ahead one frame on a loop:
function nextImg (mc:MovieClip){
if(mc._currentframe==mc._totalframes){
mc.gotoAndStop(1);
}else{
mc.nextFrame();
}
}
//stops all child movie clips:
function stopChildren(mc:MovieClip){
for (var m in mc){
if (typeof(mc[m]=="movieclip")){
mc[m].stop();
}
}
}


Alternatively you can download the fla here

2 comments:

cron said...

To start the banner on a random image. Replace the "SETUP" block of code with the following:

i=random(banner._totalframes)+1
banner.gotoAndStop(i)
//make duplicate of banner called bannerB:
duplicateMovieClip(banner,'bannerB',banner.getDepth()-1)
bannerB.gotoAndStop(i)

Anonymous said...

Thanks - super helpful!

Post a Comment