Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: FadeIn/FadeOut Slideshow Continuously

  1. #1
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default FadeIn/FadeOut Slideshow Continuously

    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!

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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):

    Code:
    setInterval(nextImage, 5000)
    Note: time in is milliseconds

  3. #3
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    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

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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)

    Code:
    // 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.

  5. #5
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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
    Code:
    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

  7. #7
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default

    Or use this:
    in the head:
    Code:
    <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:
    Code:
    <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

  8. #8
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Medyman,

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

    Code:
    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...

  9. #9
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  10. #10
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •