4 Replies Latest reply on May 13, 2008 11:23 AM by

    Problem with the FOR statement.....again!

      Hi everyone,

      Well I'm still trying to do a car slideshow using external files and can't seem to see the end. The current movie is here:

      http://www.virtuallglab.com/projects.html

      I also attach the code. My problem is I had originally set up an animation with 2 pictures sliding in with some text, and then wait 4 seconds before sliding out, and then next pictures and text would slide in and so on, using a setInterval.
      The problem is the FOR loop seems to skip the setInterval and the function "wait", so it just loops quickly and jumps to last picture, so on the example above, it just slides the last picture (i=9) and that's it!

      Can you not include another function within a FOR statement. Or is there a way to tell the FOR loop to wait until all motion is finished?

      Any help greatly appreciated

      ***************************************************

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


      for (i=0; i<10 ; i++) {

      var picLeft = "pics/"+i+".jpg";
      var picRight = "pics/"+i+"b.jpg";
      var txtToLoad = "text/"+i+".txt";

      this.createEmptyMovieClip("leftHolder",1);
      leftHolder.loadMovie(picLeft,i,leftHolder.getNextHighestDepth());
      leftHolder._x = -200;
      leftHolder._y = 15;

      var leftTween:Tween = new Tween(leftHolder, "_x", Strong.easeOut, leftHolder._x, 10, 2, true);

      this.createEmptyMovieClip("centerHolder",2);
      centerHolder.loadMovie(picRight,i+"b",centerHolder.getNextHighestDepth());
      centerHolder._x = 180;
      centerHolder._y = 250;

      var centerTween:Tween = new Tween(centerHolder, "_y", Strong.easeOut, centerHolder._y, 15, 2, true);

      text._x = 600;

      myData = new LoadVars();
      myData.onLoad = function(){
      text.carText.text = this.content;
      };
      myData.load(txtToLoad);

      var textTween:Tween = new Tween(text, "_x", Strong.easeOut, text._x, 420, 2, true);

      myInterval = setInterval(wait, 4000);



      function wait() {
      var leftTweenFinished:Tween = new Tween(leftHolder, "_x", Strong.easeOut, leftHolder._x, -200, 1, true);
      var centerTween:Tween = new Tween(centerHolder, "_y", Strong.easeOut, centerHolder._y, 250, 1, true);
      var textTween2:Tween = new Tween(text, "_x", Strong.easeOut, text._x, 600, 1, true);
      clearInterval(myInterval);

      }
      }


      ***************************************************************************************** ***
        • 1. Re: Problem with the FOR statement.....again!
          Rothrock Level 5
          There is no way to tell a for loop to wait. That is not what they do.

          The entire for loop will execute (if possible, and it doesn't enter some kind of continuous infinite loop) completely before each time the frame is rendered.

          If you want to spread things out over time you need to use the setInterval -- but not inside a for loop! If you do that you immediately set however many intervals as your loop has. In this case you will also assign the ids for those intervals to the same variable, effectively overwriting the value so you will never be able to clear most of those intervals.

          So you need to rethink you whole structure. Set up some kind of counter and limit like this:

          var slidesToShow:Number=10;
          var curSlide:Number=0;

          Then have your setInterval increment the curSlide each time it is called and check to see if it has shown all of them. That is where your "loop" comes in.

          As for the other part of your question -- yes you actually have two different issues going on -- again you cannot make a for loop wait for anything. So no there is no way to pause it while you wait for your tween to end. But you can be notified when a tween ends.

          Check out the documentation about the tween class in the help files. There you will find the onMotionFinished event. So you can set up one of those to start whatever needs to be started when the tween has finished.

          You should also use the MovieClipLoader class to load your images, because you have no idea how long it will take to load them. Using that class you get a nice event (onLoadInit) that tells you when the asset is ready to be used.

          Finally I'm thinking you might want to use setTimeout instead of setInterval. It only goes once, while setInterval repeats forever. So I would think your algorithm would be something like this.

          1. load external asset
          2. when ready animate in and set onMotionFinished handler
          3. when motion is finished start loading next asset and setTimeout for 4 seconds.
          4. when 4 seconds is up or the clip is loaded (which ever takes longer) go to 2 and repeat.

          If this is going to be run locally on a hard drive or CD you won't have any problem with the length of time it takes to load the external assets, but if it is over the web it will take time.

          • 2. Re: Problem with the FOR statement.....again!
            Thanks a lot Rothrock, I changed the code to the following and it worked exactly as I wanted it to:

            ***************************************************************************************

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

            var i:Number = 0;

            function slideshow() {

            var picLeft = "pics/"+i+".jpg";
            var picRight = "pics/"+i+"b.jpg";
            var txtToLoad = "text/"+i+".txt";

            this.createEmptyMovieClip("leftHolder", 1);
            leftHolder.loadMovie(picLeft, i, leftHolder.getNextHighestDepth());
            leftHolder._x = -200;
            leftHolder._y = 15;
            var leftTween:Tween = new Tween(leftHolder, "_x", Strong.easeOut, leftHolder._x, 10, 2, true);

            this.createEmptyMovieClip("centerHolder", 2);
            centerHolder.loadMovie(picRight, i+"b", centerHolder.getNextHighestDepth());
            centerHolder._x = 180;
            centerHolder._y = 250;
            var centerTween:Tween = new Tween(centerHolder, "_y", Strong.easeOut, centerHolder._y, 15, 2, true);

            text._x = 600;
            myData = new LoadVars();
            myData.onLoad = function() {
            text.carText.text = this.content;
            };
            myData.load(txtToLoad);
            var textTween:Tween = new Tween(text, "_x", Strong.easeOut, text._x, 420, 2, true);

            myInterval = setInterval(wait, 4000);

            function wait() {
            var leftTweenFinished:Tween = new Tween(leftHolder, "_x", Strong.easeOut, leftHolder._x, -200, 1, true);
            var centerTween:Tween = new Tween(centerHolder, "_y", Strong.easeOut, centerHolder._y, 250, 1, true);
            var textTween2:Tween = new Tween(text, "_x", Strong.easeOut, text._x, 600, 1, true);
            clearInterval(myInterval);

            leftTweenFinished.onMotionFinished = function() {
            i++;
            if (i<10) {
            slideshow();
            } else {
            i = 0;
            slideshow();
            }
            };
            }
            }
            slideshow();

            ***************************************************************************

            Will now look into the movieClipLoader class and sort the loading......

            Thanks again
            • 3. Re: Problem with the FOR statement.....again!
              Rothrock Level 5
              Great that worked out for you. Just on a personal stylistic note....

              I wouldn't call your variable counter variable i. Personally I only use i inside of loops and for sort of temporary varaibles. Something more "local" if you will. In a year when you need to come back and update this or reuse it you might find just "i" to be a bit cryptic and confusing. So I really recommend giving it a name that means something, for example, "currentPic" or "counter" or event "index".

              I know it is a bit more typing and all, but good variable naming really helps.

              Also I would change that 10 to be a variable that is declared near the top. Again it is easy right now, but when you update this in 6 months time it might be hard to find where that number is.

              Final piece of advice on things you never asked about. Hey, its free! :)

              I never setInterval without first clearing it. It always seems like, "Hey, there is no way it could be set, so I don't need to clear it." But I've found it doesn't hurt. So right before you set it I would add

              clearInterval(myInterval);

              1 person found this helpful
              • 4. Re: Problem with the FOR statement.....again!
                Advices are always welcome, thanks again for your help.