FadeIn/FadeOut Slideshow Continuously

[tomyknoker]

Hi all,

I have the following file which creates a really simple slideshow... At the moment you currently have to click to fade out and then fade back in to the next image... I just want it to run and play 10 images continuosly fading in and out... Can anyone help me edit my code would be much appreciated!

[Medyman]

I haven't looked at your code but by the way you describe it you probably have a funciton called something like nextImage to progress the animation.

Instead of having an onRelease event trigger the function, just use setInterval to run the function very 5 seconds (or w/e time you want):


setInterval(nextImage, 5000)

Note: time in is milliseconds

[tomyknoker]

Thanks medyman... Still a little confused... Here is my code if that helps, it's not too much...


var baseurl = _url.substr(0,_url.lastIndexOf("/")+1);
var dir = baseurl + "bleachfadeloadedimages";
var images = ["city","light","cars"];

playFade = function(){
this.gotoAndStop(this._currentframe + this.speed);
}
loadFade = function(){
var lod = this.fader.contents.getBytesLoaded();
var tot = this.fader.contents.getBytesTotal();
if (lod && tot && lod == tot){
this.speed = -1;
this.onEnterFrame = playFade;
}
}
pressForNext = function(){
this.speed = 1;
delete this.onPress;
}

fading_symbol.onFadeOut = function(){
this.speed = 0;
this.fader.contents.loadMovie(dir + "/" + images[0] + ".jpg");
images.push(images.shift());
this.onEnterFrame = loadFade;
}
fading_symbol.onFadeIn = function(){
this.speed = 0;
this.onPress = pressForNext;
}

fading_symbol.gotoAndStop(fading_symbol._totalframes); // straight to onFadeOut

[Medyman]

Hello tomyknoker...

I think you're overcomplicating the effect that you have going here. Here is a code snippet that I have that might help you. It's for a 3 image slideshow but that's easy to change (change % 3...to % 10)


// Start the slideshow on a setInterval
var slideShowTimer:Number = setInterval(nextImage, 5000);
var counter:Number = 0;

// The workhorse function, gets called by setInterval, and should run every 5 seconds.
function nextImage():Void {
var img:MovieClip = images[counter % 3];
img.swapDepths(counter);
trace(img.getDepth());
img._alpha = 0;
img._visible = true;
img.alphaTo(100, 2, "easeOutSine", null, {func:cleanUpPrevious, args:[(counter-1) % 3]});
counter++;
}

// A function to be used in the tween callback to make the image that was just covered up invisible.
function cleanUpPrevious(image:Number):Void {
images[image]._visible = false;
}

// Show first image immediately.
nextImage();



Now, this uses the fuse kit. If you don't have it, install it.
This code is for a simple cross fade but I'm sure you can modify it for a full fade out and fade back in.

Post back if you have any more questions.

[tomyknoker]

Thanks Medyman ok well it looks great! I have just started to play around with the Fuse kit... THis is probably an obviously dumb question but where do the images get loaded from? Or do I need to add this to the code?

[Medyman]

The example above uses already existing MCs on the stage so you will have to create 10 MCs and then code them to load in images.

if you don't know how...it's very simply done using a for loop. Rename your 10 MCs to Pic1 through Pic 10


for (i=1;i<11;i++) {
var tmpClip:MovieClip = eval ("Pic" + i)
tmpClip.loadMovie("images/"+i+".jpg")
}


this also assumes that all your images are in a folder called images and named 1.jpg to 10.jpg

[chechu]

Or use this:
in the head:

<script language="JavaScript1.1">
<!--
var slidespeed=2000
var slideimages=new Array("imgs/SPvolvo.gif","imgs/SPobjectif.gif","imgs/SPdamier.jpg")
var slidelinks=new Array("http://www.modern.be","http://www.objectifmag.be","http://www.hoteldamier.be")
var newwindow=1

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

Where you wish it appear:

<a href="javascript:gotoshow()"><img src="imgs/SPvolvo.gif" name="slide" border=0 style="filter:blendTrans(duration=3)"></a>

<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>
Just change the img's and links to yours

[tomyknoker]

Hi Medyman,

Thanks for that, so then would it be something like this?


import com.mosesSupposes.fuse.*;

ZigoEngine.register(Fuse, PennerEasing);

// Start the slideshow on a setInterval
var slideShowTimer:Number = setInterval(nextImage, 5000);
var counter:Number = 0;

// The workhorse function, gets called by setInterval, and should run every 5 seconds.
for (i=1;i<11;i++) {
var tmpClip:MovieClip = eval ("Pic" + i)
tmpClip.loadMovie("images/"+i+".jpg")
tmpClip._alpha = 0;
tmpClip._visible = true;
tmpClip.alphaTo(100, 2, "easeOutSine", null, {func:cleanUpPrevious, args:[(counter-1) &#37; 3]});
i++;
}

// A function to be used in the tween callback to make the image that was just covered up invisible.
function cleanUpPrevious(image:Number):Void {
images[image]._visible = false;
}

// Show first image immediately.
nextImage();

It's not loading the images though, but I'm not getting any errors...

[Medyman]

Not quite....

You got rid of the nextImage(); function.

You want to keep the 1st code I posted and use the for loop to populate movielips with the content.

These are going to be seperate code blocks.

[tomyknoker]

Hi Medyman... Ok put it all together again, but when I run it now it says 'undefined' in the output window... :(

[Medyman]

I'm sorry...
I forgot to mention the biggest caveat to this.

Name your images image1_mc, image2_mc, image3_mc, etc...

[tomyknoker]

I don't get it :( just keeps saying undefined... not sure what I am not doing right...

[Medyman]

Post your .fla
I'll have a look

[tomyknoker]

Thanks Medyman, I posted the fla and images here (http://www.curiousclothing.com/slideshow.zip), hopefully you can see what I am doing wrong I am sure it's something simple... Atleast I hope so. I also wanted to know once I get it working, say on frame 10 I want to have another 10 different images slideshow'ing... Is that possible? Or would I just dupliacte all the code from the first frame, and change the target folder for the images?

Thanks for all your help!

[Medyman]

tomyknoker, which version of Flash are you using? I'm getting an "Unexpected file format." error.

I don't have CS3 yet so if that's what you're using I won't be able to see your .fla unless it has a back saving feature.

[tomyknoker]

Hi Medyman... Try the link again... Hope it works now :)