Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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);
}
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Thank You
Colleen Bredahl
Art/Art Marketing
Copy link to clipboard
Copied
Hello.
OK I tried but have no idea what I am doing. I changed the 1 and 2 and that kept the image longer.
I tried adding this script at the end to keep the last image on the stage
if (ImageCounter == 6 ) {
removeEventListener
however no images show up now.
Removing the above script I made sure your script worked and I tried to move the image to a certain position on the stage
onEnterFrame = function(x=414, y=200)
nothing happens here either.
When your script is finished running the images, I get this error
Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.
No idea what this means either.
Could you please help me through these last hurdles. School ends on July 10th and the student has a good design, just need to get it functioning.
I can't wait for the seminar, next week won't be here fast enough. Hopefully I can get some good books to help me with the coding.
Thank You
Colleen Bredahl
Art/Art Marketing
Copy link to clipboard
Copied
Whoosh, sorry I haven't replied right away been busy with a couple of things.
If you want to stop the last picture from fading out then put the if statement on the addeventlistener line in the loadComplete function. My comment is in a bad place for that as I have it in the fadeOut function although it could be done there too.
add to a new line right above the addeventlistener line in loadcomplete
if(imageCounter != 6) //adding this will prevent the last picture in your folder from fading out.
fadeTween.addEventListener(TweenEvent.MOTION_FINISH, fadeOut); //when tween ends call fadeout function
if you want to move the coordinates for the images then you just need to make the change to the img sprite since that is the container object for the images. So after the line that says img.alpha just add the following
img.x = 100;
img.y = 200; or whatever coordinates you need.
in the tween declaration your are correct that the 2 is the number of seconds that the image will tween for in both functions. Also the true at the end of the tween declaration tells the tween function to use seconds. If you change it to false it will run the tweens in milliseconds. Which you may not need, but if you need a tween to run shorter then one second you will need to set that boolean to false.
Hope this got to you in time.
Copy link to clipboard
Copied
YEAH!!!!!
You are so amazing!!!
Works Great!!!
Thank You
Colleen Bredahl
Art/Art Marketing
Copy link to clipboard
Copied
I am so sorry, I am just a pain.
One more thing if it is possible.
The images that will load are different widths, so when I put img.x=whatever they are not all centered on the x axis. Is there anyway that no matter what width the image is it can be in the center? I tried img.x=center, no good. img.y= is not a problem. The image lands on the y exactly where I want it. I tried to look but again I have no idea what to write. Please help one last time!
Thank You
Colleen Bredahl
Art/Art Marketing
Copy link to clipboard
Copied
No problem at all
.
Ok, so the line that reads
img.x = somenumber;
cut and paste that line right after this line in the loadComplete function
img.addChild(tempClip);
img.x = somenumber;
Then right after the pasted line add this.
img.x = img.x - img.width/2;
This way it will bump the image to the left by half it's width every time. That should center it to the x coordinate you are setting in img.x. You have to reset the x coordinate every time a new image loads so that the img sprite doesn't keep bumping to the left. You could do the samething with the y coordinate if you needed to as well.
Copy link to clipboard
Copied
This worked perfect!! Instead of changing the x position with every photo that loads, I divided the stage width by 2 and put that in the x number and when the code told it to divide by 2 again it set the center point to the center of the stage and photo. I really appreciate your help, the student is very excited about how his project turned out. my next goal is to learn to write script. Thanks so much for your help.
Thank You
Colleen Bredahl
Art/Art Marketing
Copy link to clipboard
Copied
No problem at all. FYI you may want to check out this website goasap.org. Moses Gunesch has created a tweening engine that allows you to create your own script based tweening toolkit. If you decide to give it a whirl and you need examples or something you can email me at thisisjimmy@yahoo.com.
Copy link to clipboard
Copied
that sounds great!
Thank You
Colleen Bredahl
Art/Art Marketing
Get ready! An upgraded Adobe Community experience is coming in January.
Learn more