3 Replies Latest reply on Feb 21, 2010 10:12 AM by Ned Murphy

    Fly-in from left

    Winston2 Level 1

      Can someone give me a hint on this? With the code below I am able to load some images, each one stays on the screen for a certain interval then fades away. How can I modify the code so that the image "flyes in" from the left, stays for a couple seconds, then fades away. I tried a second tween but that did not seem to work. Any help is greatly appreciated. Thank you.

       

       

      import mx.transitions.Tween;
      import mx.transitions.easing.*;

      //new instance of the XML class to be used to load the XML file.
      var myShowXML = new XML();
      myShowXML.ignoreWhite = true;
      myShowXML.load("slideshow.xml");


      myShowXML.onLoad = function() {
      _root.myWidth = myShowXML.firstChild.attributes.width;
      _root.myHeight = myShowXML.firstChild.attributes.height;
      _root.mySpeed = myShowXML.firstChild.attributes.speed;

      _root.myImages = myShowXML.firstChild.childNodes;
      _root.myImagesNo = myImages.length;


      createContainer();
      callImages();
      };

      //create the movie clip container
      function createContainer() {
      _root.createEmptyMovieClip("myContainer_mc",_root.getNextHighestDepth());

      }

      function callImages() {
      _root.myMCL = new MovieClipLoader();
      _root.myPreloader = new Object();
      _root.myMCL.addListener(_root.myPreloader);


      //creating an array so we can reference the images later
      _root.myClips_array = [];

      _root.myPreloader.onLoadStart = function(target) {

      _root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100,20);
      _root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;
      _root.myText_txt._y = (Stage.height-_root.myText_txt._height)/2;
      _root.myText_txt.autoSize = "center";

      };

      _root.myPreloader.onLoadProgress = function(target){
      _root.myText_txt.text = "Loading.. "+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";
      }

      _root.myPreloader.onLoadComplete = function(target) {
      _root.myClips_array.push(target);
      target._alpha=0;


      if (_root.myClips_array.length == _root.myImagesNo) {

      //x and y location of the text
      _root.myText_txt._y = 200
      _root.myText_txt._x = 500
      moveSlide();
      myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);
      }
      }

      // loop to load all of the images
      for (i=0; i<_root.myImagesNo; i++) {
      temp_url = _root.myImages[i].attributes.url;
      temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());
      _root.myMCL.loadClip(temp_url,temp_mc);
      }
      }


      function moveSlide() {
      current_mc = _root.myClips_array[_root.target_mc];
      new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);


      _root.target_mc++;
      if (_root.target_mc>=_root.myImagesNo) {
      _root.target_mc = 0;
      }

      _root.myText_txt.text = _root.myImages[target_mc].attributes.title;
      next_mc = _root.myClips_array[_root.target_mc];
      new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

      }

        • 1. Re: Fly-in from left
          Ned Murphy Adobe Community Professional & MVP

          You would have to use another tween to have it move in.  What did you try that did not work?

          • 2. Re: Fly-in from left
            Winston2 Level 1

            I added the second tween that you see here:

             


            function moveSlide() {
            current_mc = _root.myClips_array[_root.target_mc];
            new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);
            new Tween(current_mc,"_x", Easing.None.easeNone,100,300,2,true);

             

            Previewing it again, I realize that there are two things that I want that I'm not getting now.

            1. I don't want an initial picture showing.

            2. After a second or so I'd like a picture to come sliding in from the left.

            3. It remains in the middle of the screen for a couple seconds then fades away.

            4. Steps 2 and 3 are repeated for all the pictures referenced from the XML file.

             

            Thank you.

            • 3. Re: Fly-in from left
              Ned Murphy Adobe Community Professional & MVP

              The tweens should work at the same time, but the one you show would have the current mc moving out, not the next one moving in.

               

              As far as delaying things between images goes, look into using the setTimeout function.  When your mc moves in you can have it trigger a setTimeout to go off in a few seconds that will initiate a function to change the images.  You can use such a setTimeout to start things off as well.  If you assign your Tweens to variables you can assign listeners for them so that you can have a function that intiates the setTimeout...

               

              _tw1 = new Tween(next_mc, "_alpha", Regular.easeIn, 0, 100, 1, true);

              _tw2 = new Tween(next_mc, "_x", Regular.easeIn, 0, 100, 2, true);

               

              _tw2.onMotionFinished = startTimer;

               

              function startTimer(){

                   // start a timeout function

              }

               

              The function that your setTimeout uses can manage getting the movies exchanged