Looping Nested TimeLine stops progress of the main TimeLine

[ngrinchenko]

Parallel timeLines vs. Linear timeLine

I have a nested timeLine inside the main timeLine. I need the nested timeLine to be looping in the middle of the animation sequence.

The problem seems to be that when I specified {repeat:-1, yoyo:true} then there will be no progression to the next "append" function until the {repeat:-1, yoyo:true} will be done. And it will be done never since the repeat:-1. How do I make a nested timeLine to cycle repeatedly through its tweens, yet allow the rest of timeLine to go on and finish when it is intended.

I know I can switch this bit of animation at the very end and it should have a 99% effect of what I would like.

But I would want to know if there is a technical solution to this problem.

Can I make my nested timeLine to start running and at some point of time while it is still running the next append will start to run. Presently I specified the next append to start at -1.4 into the nested timeLine. However the nested timeLine still keeps on running/looping while the main timeLine still finishes its animation and then still keeps on looping when the main timeLine has stopped.

 

 

 

var nestedTimelineRGBflashing:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

nestedTimelineRGBflashing.appendMultiple([TweenMax.from(floraLytes_mc.RGBflashingFL_mc.amberRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									   TweenMax.from(floraLytes_mc.RGBflashingFL_mc.orangeRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									  TweenMax.from(floraLytes_mc.RGBflashingFL_mc.redRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									   TweenMax.from(floraLytes_mc.RGBflashingFL_mc.purpleRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									  TweenMax.from(floraLytes_mc.RGBflashingFL_mc.pinkRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									   TweenMax.from(floraLytes_mc.RGBflashingFL_mc.whiteRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									  TweenMax.from(floraLytes_mc.RGBflashingFL_mc.tealRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									   TweenMax.from(floraLytes_mc.RGBflashingFL_mc.greenRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									  TweenMax.from(floraLytes_mc.RGBflashingFL_mc.blueRGB_mc, .5, {autoAlpha:0, tint:0xffffff }),
									   TweenMax.from(floraLytes_mc.RGBflashingFL_mc.amberRGB_1_mc, .5, {autoAlpha:0, tint:0xffffff })],
									  -.75,
									  TweenAlign.START,
									  0.1);

SFL1_timeLine.append(nestedTimelineRGBflashing);

SFL1_timeLine.append(TweenMax.from(backgroundBottom_mc, .4, {scaleY:0}), -1.4);
SFL1_timeLine.append(TweenMax.from(txtAPP_mc, 1.2, {autoAlpha:0, tint:0xffffff}), -1.2);

[GreenSock]

It wouldn't really make sense to append() something after an infinite tween/timeline since there would be no end. But you can definitely place your tween(s) wherever you want on the timeline - just use the insert() method instead of append(). For example:

 

var nested:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});
nested.append(...);
...
var master:TimelineMax = new TimelineMax();
master.append(nested);
master.insert( TweenMax.from(mc, 1, {autoAlpha:0}), nested.duration); //puts it right after the first iteration of "nested"

 

Or you can use a hard number there. It's very flexible - you can place things pretty much anywhere.

 

Does that clear things up?

[ngrinchenko]

Thanks, it does clear thing a bit, but still some more murky for me.

According to my novice understanding there has to be an error in the code which I can not decipher. Here is my code based on yours:

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;


var nested_timeLine:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});//yoyo:true makes it go backwards and forwards//yoyo:false would make it go forward and start from beginning to forward again
nested_timeLine.appendMultiple([TweenMax.from(shape21_mc, .125, {autoAlpha:0, tint:0xffffff }),
							    TweenMax.from(shape22_mc, .125, {autoAlpha:0, tint:0x0fffff }),
							    TweenMax.from(shape23_mc, .125, {autoAlpha:0, tint:0x00ffff })],
							    -.01, //offset number, i.e. how long it waits before to start
							    TweenAlign.START,//tweens start times are aligned, or TweenAlign.SEQUENCE so they start one after another
							    0.1);


var master_timeLine:TimelineMax = new TimelineMax({timeScale: .5});

master_timeLine.append(TweenMax.from(shape11_mc, .5, {autoAlpha:0, scaleY:0}));
master_timeLine.append(TweenMax.from(shape12_mc, .5, {autoAlpha:0, scaleX:0}), -.2);
master_timeLine.append(TweenMax.from(shape13_mc, .5, {autoAlpha:0, scaleX:0}), -.2);


master_timeLine.append(nested_timeLine);
master_timeLine.insert(TweenMax.from(nested_timeLine, 1, {autoAlpha:0}), nested_timeLine.duration); //puts it right after the first iteration of "nested"

master_timeLine.append(TweenMax.from(shape3_mc, .2, {autoAlpha:0, scaleY:0}), -.1);

 

I think the error is in the line:

master_timeLine.insert(TweenMax.from(nested_timeLine, 1, {autoAlpha:0}), nested_timeLine.duration); //puts it right after the first iteration of "nested"

The tween after the inserted timeLine "shape3_mc" appears before anything else on the screen and stays this way.

In the output panes I get the following message:

ReferenceError: Error #1069: Property alpha not found on com.greensock.TimelineMax and there is no default value.

at com.greensock.plugins::AutoAlphaPlugin/onInitTween()

at com.greensock::TweenLite/init()

at com.greensock::TweenMax/init()

at com.greensock::TweenMax/renderTime()

at com.greensock.core::SimpleTimeline/renderTime()

at com.greensock::TweenLite$/updateAll()

 

Also in the line of code "master_timeLine.insert" the "insert" does not get highlighted as an "append" would... But "insert" is the proper function?

[Carl]

the error you are receiving is due to the fact that a TimelineLite/Max does not have an alpha property so it can not be tweened.

 

your new code is a bit different than the initial code you posted.

now that you have tweens in the master timeline BEFORE the nested timeline gets inserted the timing of when things get inserted AFTER the nested timeline is done playing once needs to be calculated differently.

 

in your original question the nested_timeline was the FIRST thing in the master timeline and that made it very easy to just use duration of the nested timeline as the insertion point of the following tween.

 

your code could be:

 

var master_timeLine:TimelineMax = new TimelineMax({timeScale: .5});

master_timeLine.append(TweenMax.from(shape11_mc, .5, {autoAlpha:0, scaleY:0}));
master_timeLine.append(TweenMax.from(shape12_mc, .5, {autoAlpha:0, scaleX:0}), -.2);
master_timeLine.append(TweenMax.from(shape13_mc, .5, {autoAlpha:0, scaleX:0}), -.2);

//before the nested timeline that never ends gets added figure out what the current duration of the master timeline is.

var insertionTime:Number = master_timeline.duration;

master_timeLine.append(nested_timeLine);

/* this following line should not be here as a timeline doesn't have an alpha
master_timeLine.insert(TweenMax.from(nested_timeLine, 1, {autoAlpha:0}), nested_timeLine.duration); //puts it right after the first iteration of "nested"
*/


//in order to insert the next tween into the master timeline we need to add the duration of 1 iteration of the nested timeline to the insertionTime recorded above

insertionTime+=nested_timeline.duration;

master_timeLine.insert(TweenMax.from(shape3_mc, .2, {autoAlpha:0, scaleY:0}), insertionTime);

 

I would strongly suggest that any tweens that get added to master_timeline after nested_timeline is done playing once should all be in ANOTHER nested timeline so that their timing can easily happen in relationship to each other. Once you introduce a tween or timeline that repeats forever into a master timeline it makes it difficult to add new things.

[Carl]

oh, and as far as the code coloring in Flash goes, it only changes the color of codes that are part of the as3 language.

 

it just so happens that append() is also a method of the Matrix3D class (and perhaps others) http://help.adobe.com/en_US/FlashPlatfo ... ml#append()

[ngrinchenko]

Thanks for your help.

Looks like its working with this "insert" method code:

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;


var nested_timeLine:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});
nested_timeLine.appendMultiple([TweenMax.from(shape21_mc, .125, {autoAlpha:0, tint:0xffffff }),
							    TweenMax.from(shape22_mc, .125, {autoAlpha:0, tint:0x0fffff }),
							    TweenMax.from(shape23_mc, .125, {autoAlpha:0, tint:0x00ffff })],
							    -.01, //offset number, i.e. how long it waits before to start
							    TweenAlign.START,//tweens start times are aligned, or TweenAlign.SEQUENCE so they start one after another
							    0.1);


var master_timeLine:TimelineMax = new TimelineMax({timeScale: .5});

master_timeLine.append(TweenMax.from(shape11_mc, .5, {autoAlpha:0, scaleY:0}));
master_timeLine.append(TweenMax.from(shape12_mc, .5, {autoAlpha:0, scaleX:0}), -.2);
master_timeLine.append(TweenMax.from(shape13_mc, .5, {autoAlpha:0, scaleX:0}), -.2);

//before the nested timeline that never ends gets added figure out what the current duration of the master timeline is
var insertionTime:Number=master_timeLine.duration;

master_timeLine.append(nested_timeLine);

//in order to insert the next tween into the master timeline we need to add the duration of 1 iteration of the nested timeline to the insertionTime recorded above

insertionTime+=nested_timeLine.duration;

master_timeLine.insert(TweenMax.from(shape3_mc, .2, {autoAlpha:0, scaleY:0}), insertionTime);
master_timeLine.insert(TweenMax.from(shape31_mc, .2, {autoAlpha:0, scaleY:0}), 1.75);
master_timeLine.insert(TweenMax.from(shape32_mc, .2, {autoAlpha:0, scaleY:0}), 2);
master_timeLine.insert(TweenMax.from(shape33_mc, .2, {autoAlpha:0, scaleY:0}), 2.5); 

 

But what do I do if I have a fairly complex animation which is best arranged with an "append" method. I experimented with various code settings and got things woking as well. However due to my inexperience I am not sure if it just happened as a glitch or this is actually how an "append" would work in my case of an inserted looping timeLine.

My idea was that I keep on building the nested timeLines as "building blocks" of the main timeLine. An then I will keep on appending them.

Please take a look if my code reflects the idea:

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;

//setting up the first nested timeLine
var nested_timeLine:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});
nested_timeLine.appendMultiple([TweenMax.from(shape21_mc, .125, {autoAlpha:0, tint:0xffffff }),
							    TweenMax.from(shape22_mc, .125, {autoAlpha:0, tint:0x0fffff }),
							    TweenMax.from(shape23_mc, .125, {autoAlpha:0, tint:0x00ffff })],
							    -.01, //offset number, i.e. how long it waits before to start
							    TweenAlign.START,//tweens start times are aligned, or TweenAlign.SEQUENCE so they start one after another
							    0.1);

//setting up the second nested timeLine
var nested_timeLineTwo:TimelineMax = new TimelineMax();
nested_timeLineTwo.appendMultiple([TweenMax.from(shape3_mc, .125, {autoAlpha:0, tint:0xffffff }),
							       TweenMax.from(shape31_mc, .125, {autoAlpha:0, tint:0x0fffff }),
							       TweenMax.from(shape32_mc, .125, {autoAlpha:0, tint:0x0fffff }),
							       TweenMax.from(shape33_mc, .125, {autoAlpha:0, tint:0x00ffff })],
							       0.1,
							       TweenAlign.START,
							       0.1);

//setting up the master timeLine
var master_timeLine:TimelineMax = new TimelineMax({timeScale: .5});

master_timeLine.append(TweenMax.from(shape11_mc, .5, {autoAlpha:0, scaleY:0}));
master_timeLine.append(TweenMax.from(shape12_mc, .5, {autoAlpha:0, scaleX:0}), -.2);
master_timeLine.append(TweenMax.from(shape13_mc, .5, {autoAlpha:0, scaleX:0}), -.2);

//before the nested timeline that never ends gets added figure out what the current duration of the master timeline is
var insertionTime:Number=master_timeLine.duration;

master_timeLine.append(nested_timeLine);

//in order to insert the next tween into the master timeline we need to add the duration of 1 iteration of the nested timeline to the insertionTime recorded above

insertionTime+=nested_timeLine.duration;

master_timeLine.append(TweenMax.from(nested_timeLineTwo, .2, {}), insertionTime);

[Carl]

I'm glad you got it working.

 

But what do I do if I have a fairly complex animation which is best arranged with an "append" method. 

 

you could build your entire master timeline without the the nested infinitely looping animation then when the timeline is fully built, insert the nested looping timeline where you want it to be. something like:

 

//build master timeline however you like:
var m:TimelineLite= new TimelineLite();

m.append( TweenLite.to (m2, 1, {x:100}) )

m.append( TweenLite.to (m3, 1, {y:0}) )

m.append( TweenLite.to (m4, 1, {x:300}) )


//insert nested AFTER the master is completely built
var nested:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

nested.append( TweenLite.to(m1, 1, {rotation:360} ) );

m.insert(nested, 1);

 

the problem with putting the looping timeline in first is that it causes its parent timeline never to end and thus there is no where to append anything else to.

 

also the following line of code doesn't appear that it should do anything

 

master_timeLine.append(TweenMax.from(nested_timeLineTwo, .2, {}), insertionTime);

[ngrinchenko]

Thanks Carl,

I think I got it. For an experiment sake I complicated your code just a little bit and put the nested timeLine exactly where I wanted:

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;


//build master timeline however you like:
var m:TimelineLite= new TimelineLite();

m.append( TweenLite.to (m2, 1, {y:100}) )

m.append( TweenLite.to (m3, 1, {y:150}) )

m.append( TweenLite.to (m4, 1, {y:100}) )

m.append( TweenLite.to (m5, 1, {y:150}) )

m.append( TweenLite.to (m6, 1, {y:100}) )
//"n" = time where "nested" gets inserted, which is the sum off all the mc's run times before time "n"

m.append( TweenLite.to (m7, 1, {x:122}) )

m.append( TweenLite.to (m8, 1, {x:183}) )

m.append( TweenLite.to (m9, 1, {x:244}) )

m.append( TweenLite.to (m10, 1, {x:305}) )

m.append( TweenLite.to (m11, 1, {x:366}) )



//insert nested AFTER the master is completely built
var nested:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

nested.append( TweenLite.to(m1, 1, {rotation:360} ) );

m.insert(nested, 5); //number 5 refers to the "n", which is the sum off all the mc's run times before time "n"

 

My mistake was that I saw the code lines representing the time order of the tweens. Which is true in the append method.

So then if I wanted to occur something between tween "m5" and "m7" I would start implementing the code in that space.

 

As you showed me I have to do it with the time calculations.

To my surprise timescale will affect the entire timeLine, including the looping nested time line.

I hoped it would work this way.

 

BTW, your snorkl.tv series help me a lot in understanding the GreenSock. My website is getting better as I go through your tutorials...