Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 40
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question adding Fade-in to XML random slideshow flash

    hi guys im working on a random slideshow gallery that uses xml to populate the mc, and it works great, but now i want to add a fade-in effect for each 1 of the pics, or maybe a cross-fade,this is the script i have so far, any help will be appreciated.

    Code:
    pauseTime = 2000;
    
    xmlImages = new XML();
    xmlImages.ignoreWhite = true;
    xmlImages.onLoad = loadImages;
    xmlImages.load("images.xml");
    
    function loadImages(loaded) {
    	if (loaded) {
    		xmlFirstChild = this.firstChild;
    		imageFileName = [];
    		totalImages = xmlFirstChild.childNodes[0].childNodes.length;
    		for (i=0; i<totalImages; i++) {
    			imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
    		}
    		randomImage();
    	}
    }
    function randomImage() {
    	if (loaded == filesize) {
    		var ran = Math.round(Math.random() * (totalImages - 1));
    		picture_mc.loadMovie(imageFileName[ran], 1);
    		pause();
    	}
    }
    function pause() {
    	myInterval = setInterval(pause_slideshow, pauseTime);
    	function pause_slideshow() {
    		clearInterval(myInterval);
    		randomImage();
    	}
    }

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    You will need to utilize the tween class of flash. Here is a tutorial, if it stinks there are more out there!

    http://www.oman3d.com/tutorials/flash/tweenclasseasing/
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the link, i know i can make the movie clip holder _alpha = 0
    from start and the have something like this:

    Code:
    function fade(picture_mc,alpha){
            this.onEnterFrame=function(){
                    i++;
                    picture_mc._alpha = 100-i;
                    if (picture_mc._alpha <=alpha){
                            delete this.onEnterFrame;
                    }
            }
    }
    but i just dont know how to implement this to be part of the random rotation, i tried to make it part of the random function, but it did happen, i guess because i didnt figure out how to tell the script to increment the alpha to make it visible. anyhow im lost :P
    any ideas why?

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    XML Slide Show Tutorial http://www.webzo.org/tutorials/flash...-slideshow.php
    Tween Class Tutorial http://www.oman3d.com/tutorials/flash/tweenclasseasing/

    I will show you how to merge these two tutorials into one script that does what you are wanting. Typically merging two tutorials like this isn't too difficult if you can understand the code, so take the time to actually understand what the code is doing and this sort of thing becomes like cake.

    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    
    pauseTime = 2000;
    
    xmlImages = new XML();
    xmlImages.ignoreWhite = true;
    xmlImages.onLoad = loadImages;
    xmlImages.load("images.xml");
    
    function loadImages(loaded) {
    	if (loaded) {
    		xmlFirstChild = this.firstChild;
    		imageFileName = [];
    		totalImages = xmlFirstChild.childNodes[0].childNodes.length;
    		for (i=0; i<totalImages; i++) {
    			imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
    		}
    		randomImage();
    	}
    }
    function randomImage() {
    	if (loaded == filesize) {
    		var ran = Math.round(Math.random() * (totalImages - 1));
    		picture_mc._alpha = 0;  // Start image clip as invisible
    		picture_mc.loadMovie(imageFileName[ran], 1);  //Load random image from xml
    		var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    		pictureTweenIn.onMotionFinished = function () { // When done fading
    			_root.pause();  // Start pause() function
    		}
    	}
    }
    function pause() {
    	myInterval = setInterval(pause_slideshow, pauseTime);
    	function pause_slideshow() {
    		clearInterval(myInterval);
    		var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
    		pictureTweenOut.onMotionFinished = function () { // Once faded out
    			_root.randomImage();  // Call next randomImage()
    		}
    	}
    }
    The code is commented, which this is a fairly simple way of merging the code in the two examples.
    Last edited by gnomeontherun; 12-21-2007 at 04:32 AM. Reason: clarifications
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • The Following 2 Users Say Thank You to gnomeontherun For This Useful Post:

    christyjoy (12-27-2007), mochden (01-03-2008)

  • #5
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I started a project needing to do the exact same thing today - thank you so much for your response, jeremy.

    It works just fine for me until I add the script for the Tweening. I went back to the original site and went through their tutorial and still didn't get it to work. This is the error message I get:

    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 28: There is no property with the name 'onMotionFinished'.
    pictureTweenIn.onMotionFinished = function () { // When done fading

    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 38: There is no property with the name 'onMotionFinished'.
    pictureTweenOut.onMotionFinished = function () { // Once faded out


    I'm using Flash MX 2004, which may be the problem, but I was wondering if you had any insight on this?

  • #6
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    http://www.kirupa.com/developer/actionscript/tween.htm

    There is some information about this at the bottom, which shows that the .onMotionFinished property fails because its not supported before Flash 8.

    Try to change this in the code:

    Code:
    var pictureTweenIn:Object = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    Code:
    var pictureTweenOut:Object = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
    		pictureTweenOut.onMotionFinished = function () { // Once faded out
    I think that may fix it, but anything before mx 2004 can't handle this code I believe.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #7
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for that, jeremy -

    i found a disc with flash 8 that my roommate had, so i'm able to use that original code, but now (of course) there's a new challenge...

    my intention is to have this "slideshow" running 4 times. i have 4 movieclips (all named differently) and have repeated the block of code 4 times, making changes to the variables as needed. however, when i play the movie, the result is each movie clip loads its random image, but only the first movie clip continues to go through to more images. the rest of the movieclips remain static on the first image they generated.

    i've tried renaming everything i could, to no avail. also, i removed the if (loaded == filesize) lines from the randomImage function in case it was causing it to stop, but that didn't work either.

    here is the code i used for the second movie clip:

    Code:
    pauseTime2 = 2000;
    
    xmlImages2 = new XML();
    xmlImages2.ignoreWhite = true;
    xmlImages2.onLoad = loadImages2;
    xmlImages2.load("images2.xml");
    
    function loadImages2(loaded) {
    	if (loaded) {
    		xmlFirstChild2 = this.firstChild;
    		imageFileName2 = [];
    		totalImages2 = xmlFirstChild2.childNodes[0].childNodes.length;
    		for (i2=0; i2<totalImages2; i2++) {
    			imageFileName2[i2] = xmlFirstChild2.childNodes[0].childNodes[i2].attributes.title;
    		}
    		randomImage2();
    	}
    }
    function randomImage2() {
    	if (loaded == filesize) {
    		var ran2 = Math.round(Math.random() * (totalImages2 - 1));
    		picture_mc2._alpha = 0;  // Start image clip as invisible
    		picture_mc2.loadMovie(imageFileName2[ran2], 1);  //Load random image from xml
    		var pictureTweenIn:Tween = new Tween (picture_mc2,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    		pictureTweenIn.onMotionFinished = function () { // When done fading
    			_root.pause2();  // Start pause() function
    		}
    	}
    }
    function pause2() {
    	myInterval2 = setInterval2(pause_slideshow2, pauseTime2);
    	function pause_slideshow2() {
    		clearInterval2(myInterval2);
    		var pictureTweenOut:Tween = new Tween (picture_mc2,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
    		pictureTweenOut.onMotionFinished = function () { // Once faded out
    			_root.randomImage2();  // Call next randomImage()
    		}
    	}
    }
    do you know of anything else i could change to get the slideshow effect to work on more than one movie clip? thanks so much for your help.

  • #8
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well first there are some issues with duplicating code like this. First is the problem that it is likely to cause the error you are describing. Second is that the code becomes too bulky to manage because its duplicated in so many locations. So the other option is to write the functions in a way that allows you to pass all of the variables to the functions and then return the proper values. When you copy the same code and only change a couple variable names there tend to be issues, so reducing the code so it is reusable works best. The code provided might not even be the best code for this, but it was what the original poster used.

    I'm not able to rewrite all of this, because I think thats a little too much help. But another suggestion is to look for another tutorial which uses multiple slideshows and learn from this post about how to incorporate the tweens.

    If you start to rewrite anything or find another tutorial which allows multiple instances, post it here if you have questions or just figure it out for others to see!
    Last edited by gnomeontherun; 12-28-2007 at 03:06 AM.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #9
    New Coder
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry for the late respond, i went out of town for the holidays, thanks a lot jeremy for the help, It worked well for me. happy new year :P

  • #10
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    multiple movie clips + random loading

    Hi Christjoy..

    Just read through this string of posts and was wondering whether you had found sample code that enabled multiple instances of the mc to be populated by external images + xml?

    Any help appreciated.
    cheers!

  • #11
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    You want to have a SWF with lets say 3 of these scrollers in it?

  • #12
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by jeremywilken View Post
    XML Slide Show Tutorial http://www.webzo.org/tutorials/flash...-slideshow.php
    Tween Class Tutorial http://www.oman3d.com/tutorials/flash/tweenclasseasing/

    I will show you how to merge these two tutorials into one script that does what you are wanting. Typically merging two tutorials like this isn't too difficult if you can understand the code, so take the time to actually understand what the code is doing and this sort of thing becomes like cake.

    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    
    pauseTime = 2000;
    
    xmlImages = new XML();
    xmlImages.ignoreWhite = true;
    xmlImages.onLoad = loadImages;
    xmlImages.load("images.xml");
    
    function loadImages(loaded) {
    	if (loaded) {
    		xmlFirstChild = this.firstChild;
    		imageFileName = [];
    		totalImages = xmlFirstChild.childNodes[0].childNodes.length;
    		for (i=0; i<totalImages; i++) {
    			imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
    		}
    		randomImage();
    	}
    }
    function randomImage() {
    	if (loaded == filesize) {
    		var ran = Math.round(Math.random() * (totalImages - 1));
    		picture_mc._alpha = 0;  // Start image clip as invisible
    		picture_mc.loadMovie(imageFileName[ran], 1);  //Load random image from xml
    		var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    		pictureTweenIn.onMotionFinished = function () { // When done fading
    			_root.pause();  // Start pause() function
    		}
    	}
    }
    function pause() {
    	myInterval = setInterval(pause_slideshow, pauseTime);
    	function pause_slideshow() {
    		clearInterval(myInterval);
    		var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
    		pictureTweenOut.onMotionFinished = function () { // Once faded out
    			_root.randomImage();  // Call next randomImage()
    		}
    	}
    }
    The code is commented, which this is a fairly simple way of merging the code in the two examples.
    Thanks a lot Jeremy for this clean code

    But.. I don't want it to pick a random image, but I want it to play the images from the beginning to the end, like: a, b, c, etc. Then when the last image is reached it plays again from the beginning. I don't know how to do that, please help me out

    (sorry for the bad English )

  • #13
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts

    XML Slideshow Loaded by the Order of XML

    Well you don't have to do much to change things. The only changes are removing the random selection, and then having the current indicator increase until it reaches the end where it resets. Best of luck.

    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    
    pauseTime = 2000;
    
    var current = 0; // This will be our current photo indicator
    
    xmlImages = new XML();
    xmlImages.ignoreWhite = true;
    xmlImages.onLoad = loadImages;
    xmlImages.load("xmlimages/icons.xml");
    
    function loadImages(loaded) {
    	if (loaded) {
    		xmlFirstChild = this.firstChild;
    		imageFileName = [];
    		totalImages = xmlFirstChild.childNodes[0].childNodes.length;
    		for (i=0; i<totalImages; i++) {
    			imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
    		}
    		nextImage();
    	}
    }
    function nextImage() {
    	if (loaded == filesize) {
    		picture_mc._alpha = 0;  // Start image clip as invisible
    		picture_mc.loadMovie(imageFileName[current], 1);  //Load random image from xml
    		var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    		pictureTweenIn.onMotionFinished = function () { // When done fading
    			_root.pause();  // Start pause() function
    		}
    	}
    }
    function pause() {
    	myInterval = setInterval(pause_slideshow, pauseTime);
    	function pause_slideshow() {
    		clearInterval(myInterval);
    		var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
    		pictureTweenOut.onMotionFinished = function () { // Once faded out
    		current++; // Move current indicator up to next image
    			if (current >= totalImages) {  // Check that indicator is below list length, otherwise reset
    				current = 0;
    			}
    			_root.nextImage();  // Call nextImage()
    		}
    	}
    }
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #14
    Regular Coder
    Join Date
    Mar 2006
    Posts
    200
    Thanks
    27
    Thanked 2 Times in 2 Posts
    Hello,

    I have my slideshow up and running - and it all looks very pretty!

    There's only one small adjustment I'd like to make. I'm bringing my images in from the side, and moving them out the other side. However, while the image is moving out, it's leaving a large white space behind it until the next image starts moving in.

    Is there a way to start the new image coming in, while the old one is moving out? Making it seamless....

    I've had a play but I keep breaking it!!

    Here's my code:

    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    
    pauseTime = 3000;
    
    var current = 0; // This will be our current photo indicator
    
    xmlImages = new XML();
    xmlImages.ignoreWhite = true;
    xmlImages.onLoad = loadImages;
    xmlImages.load("xml.xml");
    
    function loadImages(loaded) {
    	if (loaded) {
    		xmlFirstChild = this.firstChild;
    		imageFileName = [];
    		totalImages = xmlFirstChild.childNodes[0].childNodes.length;
    		for (i=0; i<totalImages; i++) {
    			imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
    		}
    		nextImage();
    	}
    }
    function nextImage() {
    	if (loaded == filesize) {
    		picture_mc._alpha = 60;  // Start image clip as invisible
    		picture_mc.loadMovie(imageFileName[current], 1);  //Load random image from xml
    		var pictureTweenIn:Tween = new Tween (picture_mc,"_x",Regular.easeIn,-650,0,5,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    		pictureTweenIn.onMotionFinished = function () { // When done fading
    			var picture2TweenIn:Tween = new Tween (picture_mc,"_alpha",Regular.easeIn,60,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    				picture2TweenIn.onMotionFinished = function () {
    					_root.pause();  // Start pause() function
    				}
    		}
    	}
    }
    function pause() {
    	myInterval = setInterval(pause_slideshow, pauseTime);
    	function pause_slideshow() {
    		clearInterval(myInterval);
    		var picture2TweenOut:Tween = new Tween (picture_mc,"_alpha",Regular.easeOut,100,60,2,true); // After pause, start fade out
    		var pictureTweenOut:Tween = new Tween (picture_mc,"_x",Regular.easeOut,0,650,5,true); // After pause, start fade out
    		pictureTweenOut.onMotionFinished = function () { // Once faded out
    		current++; // Move current indicator up to next image
    			if (current >= totalImages) {  // Check that indicator is below list length, otherwise reset
    				current = 0;
    			}
    			_root.nextImage();  // Call nextImage()
    		}
    	}
    }
    Thanks!!

    Nicky

  • #15
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Since you are setting it up this way, you have two options. The code you are using won't work because you are trying to make picture_mc move around the stage in two cases at the same time. Essentially you are trying to have the picture_mc at two places at once, this is impossible.

    So without rewriting the code I will explain it for you to try. You can load all of the images into picture_mc so they are side by side (like one large image) and then have the picture_mc slide along. The other option is to have a picture_mc and a picture_mc2 that are sliding in/out simultaneously. I think option #2 does what you are asking, and option #1 is probably easier.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • Users who have thanked gnomeontherun for this post:

    nickyfraggle (09-09-2008)


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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