Where's My Delay?

[beno]

Hi;

I hve this code:

 

while (i <= _totalSlides)

{

var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()});

timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:j-_w}) );

++i;

trace(i);

}

 

Now, that trace prints out numbers 6-12 as it should...however, it does so without any delay and before my images are printed to screen. There is a 2.5 sec delay before the images print to screen, but what I want is a 2.5 sec delay for *every* iteration of the loop. Before the loop I fill up a container (mc) with 5 images. I next run the loop to: (1) slide the images over, and (2) call the NextSlide fn that will lop off one image and insert another, then (3) repeat the whole process until we run out of images (slides). It ain't doin' that and the problem appears to be in my while loop.

TIA,

beno

[Carl]

hey beno

 

the main source of trouble is that in your loop you are recreating a timeline many times. I believe that in each iteration of the loop you are overwriting the timeline that was created in the previous iteration of the loop. further more if the values of j and w aren't changing, you are also telling the container to tween to the same place a bunch of times so you will probably only notice one tween happening.

 

to start try something like this

 

//Have one timeline created outside the loop
var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()});

//then use your loop to add TweenLites to the parent timeline
while (i {

//each time you append a new TwennLite, make sure the ending x value is different 
timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:(j-_w)* i or someEquationToGenerateAUniqueValueForTheEndPositionOfEachTween}) );
++i;
trace(i);
}

 

also your onCompleteNextSlide may work better if it happens on the end of each Tween that is added and not the parent timeline.

 

There is a good chance that I'm not understanding your situation completely and my advice may not be completely helpful, but perhaps it will help get you closer to having this work.

 

Carl

[beno]

Your advice about adding the timeline once was of course very good. Here's the revised code:

 

var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()});

while (i <= _totalSlides)

{

timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:j-_w}) );

++i;

}

 

I'm not tracing i because I've done that both here and in NextSlide and it traces exactly what I expect. What happens in that fn is that I remove all the slides in the parent container (each slide is in its own container, contained in the parent container), move the slides over one, drop one off and add a new one (hence the iteration of i) and add them all once again to the parent container. That's why I don't change the values of j or _w. Anyways, it's still only performing the tween once Here's NextSlide and AddSlide, which is called by the former. A lot of cleaning up to do, but here goes:

 

function AddSlides():void

{

var _const:Number = new Number();

_const = (Math.round((i+_numOfSlides/2)/_numOfSlides));

var _const_mod:Number = new Number();

_const_mod = _const*_numOfSlides%imagesArray.length;

if (_const_mod == _numOfSlides)

{

_const = 1;

} else {

_const = 0;

}

var _mod:Number = new Number();

_mod = i%_numOfSlides;

_one = _const*_numOfSlides+_mod;

_two = _const*_numOfSlides+_mod+1;

_three = _const*_numOfSlides+_mod+2;

_four = _const*_numOfSlides+_mod+3;

_five = _const*_numOfSlides+_mod+4;

_six = _const*_numOfSlides+_mod+5;

img0.myArray = [imagesArray[_one], "index.py", _w, _h, ((_w+spacer)*j)+_x+600, _y];

img1.myArray = [imagesArray[_two], "index.py", _w, _h, ((_w+spacer)*(j-1))+_x+600, _y];

img2.myArray = [imagesArray[_three], "index.py", _w, _h, ((_w+spacer)*(j-2))+_x+600, _y];

img3.myArray = [imagesArray[_four], "index.py", _w, _h, ((_w+spacer)*(j-3))+_x+600, _y];

img4.myArray = [imagesArray[_five], "index.py", _w, _h, ((_w+spacer)*(j-4))+_x+600, _y];

img5.myArray = [imagesArray[_six], "index.py", _w, _h, ((_w+spacer)*(j-5))+_x+600, _y];

container0.addChild(img0);

container1.addChild(img1);

container2.addChild(img2);

container3.addChild(img3);

container4.addChild(img4);

container5.addChild(img5);

parent_container.addChild(container0);

parent_container.addChild(container1);

parent_container.addChild(container2);

parent_container.addChild(container3);

parent_container.addChild(container4);

parent_container.addChild(container5);

}

 

function NextSlide():void

{

spacer = 10;

j = i%_numOfSlides;

var container:MovieClip = new MovieClip();

img.myArray = [imagesArray[j], "index.py", _w, _h, (_w+spacer)*j+_x+70, _y];

if (container0.parent)

{

container0.parent.removeChild(container0);

}

if (container1.parent)

{

container1.parent.removeChild(container1);

}

if (container2.parent)

{

container2.parent.removeChild(container2);

}

if (container3.parent)

{

container3.parent.removeChild(container3);

}

if (container4.parent)

{

container4.parent.removeChild(container4);

}

if (container5.parent)

{

container5.parent.removeChild(container5);

}

if (_one > _numOfSlides)

{

_one = _one - _numOfSlides

}

if (_two > _numOfSlides)

{

_two = _two - _numOfSlides

}

if (_three > _numOfSlides)

{

_three = _three - _numOfSlides

}

if (_four > _numOfSlides)

{

_four = _four - _numOfSlides

}

if (_five > _numOfSlides)

{

_five = _five - _numOfSlides

}

if (_six > _numOfSlides)

{

_six = _six - _numOfSlides

}

AddSlides();

container.addChild(img);

}

 

TIA,

beno

[Carl]

Hello Beno,

 

I'm glad things are getting closer.

 

The sum of all your code is a bit much to digest. This isn't a criticism of your code, just the fact that its a bit rough to look at it all and make any real sense of it without knowing the full scope of what it is trying to accomplish.

 

That being said, your recent explanation does help quite a bit. In general terms it seems you are re-sorting your images each time you want them to tween.

 

Back to the key issue of the tween not repeating, I think the expectations of what the following code should do is where the problem lies:

 

var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()});
while (i {
timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:j-_w}) );
++i;
}

 

this is the only place that any animation takes place. its also the only place that the x property of parent_container is referenced.

 

the only thing that loop does is something SIMILAR to

 

TweenLite.to(parent_container, 1, {delay:1, x:j-_w})

TweenLite.to(parent_container, 1, {delay:2, x:j-_w})

TweenLite.to(parent_container, 1, {delay:3, x:j-_w})

TweenLite.to(parent_container, 1, {delay:4, x:j-_w})

TweenLite.to(parent_container, 1, {delay:5, x:j-_w})

TweenLite.to(parent_container, 1, {delay:6, x:j-_w})

...

TweenLite.to(parent_container, 1, {delay:7, x:j-_w, onComplete:nextSlide})

 

(i've simplified the delay)

the focus here is on the fact that each new TweenLite that is being created in the loop is tweening the same object (parent_container) to the same final x position (j-_w)

 

once the first tween runs, parent_container is at an x of j-_w... so all subsequent tweens have nowhere to move parent_container TO as it is already there.

 

in addition, the onComplete:NextSlide will only fire once the timeline completes all of its tweens. From what I gather you want an image to tween, some re-sorting to occur, tween another image and so on. I don't believe that the use of the loop with TimelineMax in its current state is going to achieve that goal.

 

Again, just trying to offer my 2 cents. Its much easier for me to troubleshoot a specific functional problem of a GreenSock implementation than to troubleshoot what isn't working when it is combined with much more complex mathematics and conditional statements.

 

From a development standpoint it might be easier to create a button on the stage that calls the nextSlide() function.

get that function to visually re-sort / reposition your assets without tweening.

once you are positive that nextSlide() can infact get the next slide on the screen and move others around then consider how it can be animated efficiently.

 

Right now there is too much like:

 

j = i%_numOfSlides;

var container:MovieClip = new MovieClip();

img.myArray = [imagesArray[j], "index.py", _w, _h, (_w+spacer)*j+_x+70, _y];

 

that is impossible to understand without further context whether there is something in the TimelineMax set up that is causing the delay problem or something elsewhere.

 

If you get things running better and need help cleaning something up GreenSock-related, let me know.

 

Best of luck on your project

 

Carl

[beno]

Carl wrote:

 

once the first tween runs, parent_container is at an x of j-_w... so all subsequent tweens have nowhere to move parent_container TO as it is already there.

 

in addition, the onComplete:NextSlide will only fire once the timeline completes all of its tweens. From what I gather you want an image to tween, some re-sorting to occur, tween another image and so on. I don't believe that the use of the loop with TimelineMax in its current state is going to achieve that goal.

 

Right. I updated the code thus:

 

i = 6;

while (i <= _totalSlides)

{

var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()});

if (i > 6)

{

timeline.append(TweenLite.to(parent_container, 0, {x:j}) );

timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:j-_w}) );

} else

{

timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:j-_w}) );

}

++i;

}

 

That way I should be repositioning the parent container so it can be re-tweened. Now, regarding the timeline having to tween everything before it can call NextSlide, not so, because if I trace(i) in NextSlide, it successfully prints out every value of i that I expect. Regarding adding a button to click through, for some reason I'm having trouble even adding text to this class that is called by another class through a mask. Even if I widen the mask and try to place the text on top of the slide show, it doesn't show up. Will keep playing with it. Meanwhile, any other comments would be appreciated.

TIA,

beno