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

5 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!

Natasha said...

Hi Cron
How do I animate third frame the opposite way to how it appears on the stage at the moment (sliding into a stage and out when the next frame appears on) also how difficult would be to ad arrows < and > for manual change if needed?

Ciarán O'Kelly said...

Hi Natasha,
To add the internal animations on each slide you need to create a movie clip and place it on that frame. Just remember it needs to be shorter than the interval paramater or the end of the animation will be cut off.
You can simply edit the movieclip on frame 3 to animate in the opposite direction.

The < and > arrows would be a little tricky as you would need to stop the automatic Interval and restart it after the click.

Meiqing Xu said...

jordan shoes
canada goose jackets uk
hermes handbags
kobe shoes
michael kors uk
ralph lauren
buy red bottoms
louis vuitton handbags outlet
rolex replica watches
christian louboutin outlet
20161228caiyan

Post a Comment

Cron Design Studio: Dublin based web design & software development