How do I nest multiples time lines?

[ngrinchenko]

I am lost at seemingly "simple" thing, at least I think it worked out for me before.

I have 3 timelines which have to play one after another. So to time them together I put a delay on each next time line. I would like to do it a proper way and nest them into one main time line.

Each individually they work fine.

So, here are my timelines:

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

var prdctIntroFlashUp_tl:TimelineMax = new TimelineMax({timeScale: .2, repeat:1, yoyo:true, delay: 2});

var AppsIntroLightUp_tl:TimelineMax = new TimelineMax({timeScale: 1, delay: 4});

then after the code for these timeLines I try to do this:

var myTimeline:TimelineMax = new TimelineMax();
myTimeline.append(prdctIntroFlashUp_tl);
myTimeline.append(AppsIntroLightUp_tl);
myTimeline.append(IntroCollage_timeLine);

 

I also tried this code:

var myTimeline2:TimelineMax = new TimelineMax();
myTimeline2.appendMultiple([ (prdctIntroFlashUp_tl),
	 (AppsIntroLightUp_tl),
	 (IntroCollage_timeLine)],
	 -.2,
	 TweenAlign.START,
	 0);

But it works (kind of) only on START. If I do SEQUENCE - nothing happens

 

What did I miss? I tried to delete the repeat:1, yoyo:true and all the delays, but to no avail...

[Carl]

This block of code actually looks quite good:

 

 

var myTimeline:TimelineMax = new TimelineMax();
myTimeline.append(prdctIntroFlashUp_tl);
myTimeline.append(AppsIntroLightUp_tl);
myTimeline.append(IntroCollage_timeLine);

 

That will only work as you intend if each nested timeline is built with all its tweens prior to being appended to myTimeline. If those timelines are empty (have a duration of 0) before they get appended, they won't be adding any time to myTimeline and thus all of them will be appended at a time of 0.

 

Try populating the timelines with tweens before appending them, if you aren't already doing that.

 

If you still have problems let us know.

[ngrinchenko]

If I follow your explanation correctly then it seems that I am doing everything right and still it doesn't work. To be presize it doesn't work properly. I have a blank screen for about 15 sec. and then everything animates without any seen transitions, except for movement in a sec to full completion. It supposed to be a soft animation which starts right away without any delay. Just a reminder all the code works if I don't use nested timelines set up.

Here is my code in its entirety:

stop();
import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;

///////////////////////////////////////////
//sets all Apps images to dark
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.coolingreflectionsIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.towerspectaculaireIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.PinkPassionIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.gazingglowIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.BubbleOasisIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.icysophisticationIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.RosesGallasGaloreIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.FlamelessTabletopAccentsIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.CrystalSparkleIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.CountryTowerIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.ButterflyGlowIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});
TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.SilverBloomIntro_btn, 0, {colorMatrixFilter:{contrast:1.5, brightness: .25, saturation: 0.5}});

///////////////////////////////////////////
////TimeLine starts
var IntroCollage_timeLine:TimelineMax = new TimelineMax({timeScale: .5});

////////
IntroCollage_timeLine.appendMultiple([ TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.coolingreflectionsIntro_btn, .5, {y:"-120", autoAlpha:0, blurFilter:{blurX:100, blurY:5, quality:2}}),
		 TweenMax.from(IntroIMGS_COLLAGE.prdctsIntro.Spot4SMTIntro_btn, .4, {x:"+88", autoAlpha:.13, blurFilter:{blurX:100, blurY:11, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.towerspectaculaireIntro_btn, .3, {y:"+77", autoAlpha:0, blurFilter:{blurX:0, blurY:100, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.PinkPassionIntro_btn, .25, {y:"+140", autoAlpha:0, blurFilter:{blurX:100, blurY:22, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.prdctsIntro.SumixDisc3SMTIntro_btn, .3, {y:"-124", autoAlpha:0, blurFilter:{blurX:0, blurY:100, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.SilverBloomIntro_btn, .3, {autoAlpha:0, blurFilter:{blurX:0, blurY:100, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.ButterflyGlowIntro_btn, .3, {x:"-120", y:"+124", autoAlpha:0, blurFilter:{blurX:25, blurY:75, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.gazingglowIntro_btn, .5, {scaleX:1.4, scaleY:1.4, x:"99", y:"+55", autoAlpha:0, blurFilter:{blurX:100, blurY:5, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.CountryTowerIntro_btn, .5, {scaleX:1.4, scaleY:1.4, x:"-83", y:"+24", autoAlpha:0, blurFilter:{blurX:100, blurY:5, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.CrystalSparkleIntro_btn, .4, {x:"+70", y:"-57", autoAlpha:0, blurFilter:{blurX:60, blurY:5, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.FlamelessTabletopAccentsIntro_btn, .3, {x:"+190", autoAlpha:0, blurFilter:{blurX:100, blurY:25, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.RosesGallasGaloreIntro_btn, .3, {x:"+45", y:"-89", autoAlpha:0, blurFilter:{blurX:100, blurY:35, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.prdctsIntro.SubFloraLytelIntro_btn, .3, {x:"+120", y:"-144", autoAlpha:.13, blurFilter:{blurX:25, blurY:75, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.prdctsIntro.FloraLyteIntro_btn, .3, {x:"+115", y:"+119", autoAlpha:.13, blurFilter:{blurX:100, blurY:35, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.icysophisticationIntro_btn, .3, {y:"-229", autoAlpha:0, blurFilter:{blurX:10, blurY:100, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.prdctsIntro.Toronado20Intro_btn, .4, {x:"+77", autoAlpha:.13, blurFilter:{blurX:55, blurY:22, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.prdctsIntro.LyteRing6SMTIntro_btn, .4, {x:"-10", y:"+57", autoAlpha:0, blurFilter:{blurX:60, blurY:5, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.AppsIntro.BubbleOasisIntro_btn, .3, {y:"-229", autoAlpha:0, blurFilter:{blurX:10, blurY:100, quality:3}}),
		 TweenMax.from(IntroIMGS_COLLAGE.prdctsIntro.EMini9Intro_btn, .5, {y:"+129", autoAlpha:0, blurFilter:{blurX:100, blurY:3, quality:3}})],
	 -.2,
	 TweenAlign.START,
	 0);

///product pictures light up and dim
var prdctIntroFlashUp_tl:TimelineMax = new TimelineMax({timeScale: 3, repeat:1, yoyo:true, delay: 1});
prdctIntroFlashUp_tl.appendMultiple([ TweenMax.to(IntroIMGS_COLLAGE.prdctsIntro.EMini9Intro_btn.EMini9_ON, .7, {alpha:1, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.prdctsIntro.LyteRing6SMTIntro_btn.LyteRing6SMT_ON, 1.7, {alpha:1, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.prdctsIntro.Toronado20Intro_btn.Toronado20_ON, 1.7, {alpha:1, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.prdctsIntro.FloraLyteIntro_btn.FloraLyte_ON, .7, {alpha:1, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.prdctsIntro.SubFloraLytelIntro_btn.SubFloraLytel_ON, .7, {alpha:1, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.prdctsIntro.SumixDisc3SMTIntro_btn.SumixDisc3SMT_ON, 1.5, {alpha:1, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.prdctsIntro.Spot4SMTIntro_btn.Spot4SMT_ON, .7, {alpha:1})],
	 -.5, //offset number, i.e. how long it waits before to start
	 TweenAlign.SEQUENCE,//START tweens start times are aligned, or TweenAlign.SEQUENCE so they start one after another
	 -0.9);//n = staggers the TweenAlign.START time,

///application pictures bright up
var AppsIntroLightUp_tl:TimelineMax = new TimelineMax({timeScale: 1, delay: 2});
AppsIntroLightUp_tl.appendMultiple([ TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.coolingreflectionsIntro_btn, .7, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.towerspectaculaireIntro_btn, 1.7, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.PinkPassionIntro_btn, 1.7, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.gazingglowIntro_btn, .7, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.BubbleOasisIntro_btn, .7, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.icysophisticationIntro_btn, 1.5, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.RosesGallasGaloreIntro_btn, 1, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.FlamelessTabletopAccentsIntro_btn, .5, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.CrystalSparkleIntro_btn, .5, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.CountryTowerIntro_btn, 1.2, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.ButterflyGlowIntro_btn, 1.7, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut}),
	 TweenMax.to(IntroIMGS_COLLAGE.AppsIntro.SilverBloomIntro_btn, 1, {colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}, ease:Sine.easeOut})],
	 -.5, //offset number, i.e. how long it waits before to start
	 TweenAlign.SEQUENCE,//START tweens start times are aligned, or TweenAlign.SEQUENCE so they start one after another
	 -0.9);


//nest another TimelineMax inside your timeline...
var myTimeline:TimelineMax = new TimelineMax();
myTimeline.append(prdctIntroFlashUp_tl);
myTimeline.append(AppsIntroLightUp_tl);
myTimeline.append(IntroCollage_timeLine);

[Carl]

If the flash player is delaying for 15 seconds and then the animation renders in its completed state it sounds like you are taxing your processor too much. I noticed that you are doing a lot of blurs.

Also it appears your offset value is negative in your appendMultiple() which means you intend the group of Tweens to be inserted before each timeline starts?

 

Do this.

 

Only put 2 Tweens in each timeline. Remove the blur filter and use a simple x or y tween.

 

Test

 

Any better?

 

If not please provide this simplified file which only had enough code to replicate the issue.

 

From what you have shown it doesnt look like you are doing something really wrong. Thanks.

 

 

[ngrinchenko]

I did not work. I made two simplified versions.

Version 1:"openingCollage3C_test" is where timeLines are not nested and play one after another by setting up delays.

Version2:"openingCollage3CNested_test" is where timeLInes are nested, delays are removed. However they do not play as expected. I have a delay on the screen and then everything animates in already with rendered. So it looks like blur and alpha tween already happened while there was a delay and then x,y position tweened in.

As a side question. I personally like blur effect and tend to use it quite often. I did remove it as you suggested, but perhaps because there are only five mc's on the screen it did not seem to matter. So I put it back in. I would like to ask you what are the sensible guidelines for using a blur tween. For example: I should or should not apply blur to moving mc's? I should have it on the smallest area as possible? Ignore the quality settings? Make blur in the smaller settings possible, i.e. 10 is much better then 100? Should I use blur as sparingly as possible?

openingCollage3C_test.fla.zip

openingCollage3CNested_test.fla.zip

[Carl]

a few things

 

You mixed up the names of your files so it was a little confusing.

openingCollage3C_test does have nested timelines

openingCollage3CNested_test does NOT have nested timelines.

 

In the file where you have nested timelines you are appending your timelines in the WRONG order or at least differently than the other file

 

 

var myTimeline:TimelineMax = new TimelineMax();

myTimeline.append(prdctIntroFlashUp_tl);
myTimeline.append(AppsIntroLightUp_tl);
myTimeline.append(IntroCollage_timeLine); //this should be first

 

introCollage is at the end but I think you want it at the beginning.

introCollage does from-alpha:0 tweens thus hiding all the elements immediately and the other animations are not visible because of this.

 

In the file that you claim works you set up and play the timelines in this order:

 

var IntroCollage_timeLine:TimelineMax = new TimelineMax({timeScale: .4});
var prdctIntroFlashUp_tl:TimelineMax = new TimelineMax({timeScale: 3, repeat:1, yoyo:true, delay: 2});
var AppsIntroLightUp_tl:TimelineMax = new TimelineMax({timeScale: 1, delay: 3});

 

fix your nested timelines to work in this order and you will be fine:

 

var myTimeline:TimelineMax = new TimelineMax();

myTimeline.append(IntroCollage_timeLine);
myTimeline.append(prdctIntroFlashUp_tl);
myTimeline.append(AppsIntroLightUp_tl);

 

As for the blur filter, just use it with caution and don't expect too much if you are using it on LARGE assets, its a Flash limitation, nothing to do with TweenLite. Its obvious that it isn't a problem at all the way you are using it.

[ngrinchenko]

Thanks, I can't believe I missed that. I was so much preoccupied with "difficult " part of 3 individual timeLines, that simple 3 nested time lines were never under the radar to double check.

[Carl]

no problem. it happens.