Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Fade in fade out images from folder.

New Here ,
Jun 30, 2009 Jun 30, 2009

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

TOPICS
ActionScript
2.0K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 30, 2009 Jun 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!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 30, 2009 Jun 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);
    }

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 01, 2009 Jul 01, 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 01, 2009 Jul 01, 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.

Thank You

Colleen Bredahl

Art/Art Marketing

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 02, 2009 Jul 02, 2009

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 06, 2009 Jul 06, 2009

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 06, 2009 Jul 06, 2009

YEAH!!!!!

You are so amazing!!!

Works Great!!!

Thank You

Colleen Bredahl

Art/Art Marketing

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 06, 2009 Jul 06, 2009

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 07, 2009 Jul 07, 2009

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 07, 2009 Jul 07, 2009

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 07, 2009 Jul 07, 2009

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 07, 2009 Jul 07, 2009
LATEST

that sounds great!

Thank You

Colleen Bredahl

Art/Art Marketing

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines