Skip to main content
Known Participant
June 30, 2009
Question

Fade in fade out images from folder.

  • June 30, 2009
  • 2 replies
  • 1938 views

Hello,

I am looking for script to load images from a folder to the stage and have the images fade in then fade out.  As the first one fades out I want the second one to fade in.  My students currently have done this in the timeline using tweening, however they have multiple images and this gets to be very long and tedious.  If it is possible to have a script to say "go get image 1 out of folder and fade it in then get image 2 out of folder and as image one fades out image 2 fades in.

If this has to be accomplished by making movie clips out of the impages and have the script get them from the library that is fine also.  I am new to AS3 and am attending a training in July to start and learn this Actionscript writing.  However my students need the effect now.  I am an instructor at a college and I like to be able to show the students how to do what their designs support.

If anyone can write this script for me it would be appreciated.

Thank You

Colleen

This topic has been closed for replies.

2 replies

Inspiring
June 30, 2009

I couldn't seem to attach the file. Here is the script which is all you need anyway.

//The script assumes that your images are in the same folder as the swf and that they are named
//I1, I2, I3 etc. I have not put in any limiting code to stop the tweening action so it will
//keep looking for images for infinity

import fl.motion.*;
import fl.motion.easing.*;
import fl.transitions.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.*;
import flash.display.Sprite;

stop();

var imageCounter:Number = 1;
var myRequest:URLRequest = new URLRequest("I" + imageCounter + ".jpg");
var myLoader:Loader = new Loader();
var fadeTween:Tween;

var img:Sprite = new Sprite();

    addChild(img); //this will be our stage image container
   
    img.alpha = 0; //start the alpha of the container at 0 so the loaded image doesn't show

    //event listener calls to loadComplete function when image is loaded
    myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
    myLoader.load(myRequest);

    function loadComplete(evt:Event)
    {    //convert loaded image to a bitmap
        var tempClip:Bitmap = Bitmap(evt.target.content);
        myLoader.unload(); //have to do this for the next load cycle or we get an error
        img.addChild(tempClip);
       
        fadeTween = new Tween(img, "alpha", null, 0, 1, 2, true); //tween will start automatically
        fadeTween.addEventListener(TweenEvent.MOTION_FINISH, fadeOut); //when tween ends call fadeout function
    }
   
    function fadeOut(evt:Event)
    {
        fadeTween = new Tween(img, "alpha", null, 1, 0, 2, true);
        //we could add an if statement that says if the imagecounter is at a certain number skip the eventlistener.
        fadeTween.addEventListener(TweenEvent.MOTION_FINISH, nextImage); //once fade out is complete increment and load next image
        imageCounter++;
    }
   
    function nextImage(evt:Event)
    {
        img.removeChildAt(0); //remove the previous image from the stage
        myRequest = new URLRequest("I" + imageCounter + ".jpg");
        myLoader.load(myRequest);
    }

Known Participant
July 1, 2009

thanks so much!!

I would like the picture to last longer so I assume on this line

fadeTween = new Tween(img, "alpha", null, 0, 1, 2, true); //tween will start automatically

I would change the 1 and 2 to higher number to make the images stay songer, I also assume that the 1, 2 is in seconds.

then at the end I want the last photo to stay on the stage, so my next assumption is just to tell it to stop, and the last image will stay on the stage.

i also need to place it in a certain area on the stage so my guess is I tell it to enterframe in x=? (whatever position number that will be) and Y=?, all this before your scripted starts.  I am going to try it.

thanks for your help, if I cannot get it I will send another message.

Colleen

Inspiring
June 30, 2009

Hey I am attaching an fla example that I whipped up.

You need to place your images into the same folder as the fla so that it will find them when the movie is run. Its a pretty straightforward example, but I would suggest you go and look at goasap.org or any other tweening library site since doing code tweens with just the base tween libraries in flash can become cumbersome.

Good Luck to you and your class!