Jump to content
Search Community

nested timelines

lister110 test
Moderator Tag

Recommended Posts

I have a some animated text appending each other using TweenMax and TimeLine lite. Im pretty new to AS and was wondering how I create a nested Timeline. What I would like is the mc_1, mc_2 and mc_3 to animate (Turn blue) as the mc_4 fades in. At the moment each one has to allow the other to finish. Here is the code (My code may look a little whack as I'm pretty new to AS)

 

file.jpg

http://www.velvetsou...ashBanners.html

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
//initialize settings with a 0 duration tween outside of the timeline:
TweenLite.to(mc_1, 0, {_x:780});
TweenLite.to(mc_2, 0, {_x:780});
TweenLite.to(mc_3, 0, {_x:780});
TweenLite.to(mc_4, 0, {_alpha:0});
TweenLite.to(mc_5, 0, {_alpha:0});
var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});

//move mc_1 on stage;
timeline.append( new TweenMax(mc_1, .2, {_x:164, ease:Circ.easeOut}) );
timeline.append( new TweenMax(mc_1, .8, {tint:0xAEAFB3}));

//move mc_2 on stage ;
timeline.append( new TweenMax(mc_2, .2, {_x:272, ease:Circ.easeOut}),.8 );
timeline.append( new TweenMax(mc_2, .8, {tint:0xAEAFB3}));
//move mc_3 on stage ;
timeline.append( new TweenMax(mc_3, .2, {_x:404, ease:Circ.easeOut}),.8 );
timeline.append( new TweenMax(mc_3, .8, {tint:0xAEAFB3}));
//move mc_4 on stage;
timeline.append( new TweenMax(mc_4, 1, {_x:164, _alpha:100}) );	  
//fade all on the stage;
timeline.appendMultiple([ new TweenMax(mc_1, 1, {_alpha:0}),
	new TweenMax(mc_2, 1, {_alpha:0}),
	new TweenMax(mc_3, 1, {_alpha:0}),
	new TweenMax(mc_4, 1, {_alpha:0})], 2);

//fade in last animation;
timeline.append( new TweenMax(mc_5, 1, {_x:164, _alpha:100}) );	  
//fade out last animation;
timeline.append( new TweenMax(mc_5, 1, { _alpha:0}),3 );
function myFunction(){
timeline.restart();
}

 

update: I thought Id create a new timeLineLite variable but I cant understand how to trigger the timeline instance at the right time. I want it to change colour as the line underneath fades in. But only at that time.

//change all to blue TESTING;
var tl:TimelineLite = new TimelineLite();
tl.appendMultiple([ new TweenMax(mc_1, 1, {tint:0x0085CF}),
 new TweenMax(mc_2, 1, {tint:0x0085CF}),
 new TweenMax(mc_3, 1, {tint:0x0085CF})], 5);

 

Thanks

 

Rob

Link to comment
Share on other sites

Hi. Congrats on what you have accomplished so far, you seem to be doing quite well.

 

There are a few ways of doing this.

 

The most straight-forward way is probably just to use appendMultiple to tween mc_1, mc_2, _mc_3 to blue while mc_4 fades in:

var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});

//move mc_1 on stage;
timeline.append( new TweenMax(mc_1, .2, {_x:164, ease:Circ.easeOut}) );
timeline.append( new TweenMax(mc_1, .8, {tint:0xAEAFB3}));

//move mc_2 on stage ;
timeline.append( new TweenMax(mc_2, .2, {_x:272, ease:Circ.easeOut}),.8 );
timeline.append( new TweenMax(mc_2, .8, {tint:0xAEAFB3}));
//move mc_3 on stage ;
timeline.append( new TweenMax(mc_3, .2, {_x:404, ease:Circ.easeOut}),.8 );
timeline.append( new TweenMax(mc_3, .8, {tint:0xAEAFB3}));
//move mc_4 on stage;

// *** NEW ***
// *** turn 3 clips blue while mc_4 fades in


timeline.appendMultiple([
 new TweenMax(mc_1, 1, {tint:0x0085CF}),
 new TweenMax(mc_2, 1, {tint:0x0085CF}),
 new TweenMax(mc_3, 1, {tint:0x0085CF}),
 new TweenMax(mc_4, 1, {_x:164, _alpha:100})], 1);

//fade all on the stage;
timeline.appendMultiple([ new TweenMax(mc_1, 1, {_alpha:0}),
	new TweenMax(mc_2, 1, {_alpha:0}),
	new TweenMax(mc_3, 1, {_alpha:0}),
	new TweenMax(mc_4, 1, {_alpha:0})], 2);

//fade in last animation;
timeline.append( new TweenMax(mc_5, 1, {_x:164, _alpha:100}) );  
//fade out last animation;
timeline.append( new TweenMax(mc_5, 1, { _alpha:0}),3 );
function myFunction(){
timeline.restart();
}

 

If you want to use a nested timeline do this:

 

var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});

//move mc_1 on stage;
timeline.append( new TweenMax(mc_1, .2, {_x:164, ease:Circ.easeOut}) );
timeline.append( new TweenMax(mc_1, .8, {tint:0xAEAFB3}));

//move mc_2 on stage ;
timeline.append( new TweenMax(mc_2, .2, {_x:272, ease:Circ.easeOut}),.8 );
timeline.append( new TweenMax(mc_2, .8, {tint:0xAEAFB3}));
//move mc_3 on stage ;
timeline.append( new TweenMax(mc_3, .2, {_x:404, ease:Circ.easeOut}),.8 );
timeline.append( new TweenMax(mc_3, .8, {tint:0xAEAFB3}));

// **** NEW ****
// use insert and provide a label
// since the label does not yet exist, TimelineLite will add one at the current end of the timeline

timeline.insert( new TweenMax(mc_4, 1, {_x:164, _alpha:100}), "intro_mc_4" );


//fade all on the stage;
timeline.appendMultiple([ new TweenMax(mc_1, 1, {_alpha:0}),
	new TweenMax(mc_2, 1, {_alpha:0}),
	new TweenMax(mc_3, 1, {_alpha:0}),
	new TweenMax(mc_4, 1, {_alpha:0})], 2);

//fade in last animation;
timeline.append( new TweenMax(mc_5, 1, {_x:164, _alpha:100}) );  
//fade out last animation;
timeline.append( new TweenMax(mc_5, 1, { _alpha:0}),3 );
function myFunction(){
timeline.restart();
}

// **** NEW ****


//Create timeline
var tl:TimelineLite = new TimelineLite();
tl.appendMultiple([ new TweenMax(mc_1, 1, {tint:0x0085CF}),
 new TweenMax(mc_2, 1, {tint:0x0085CF}),
 new TweenMax(mc_3, 1, {tint:0x0085CF})]);

//insert the timeline at label "intro_mc_4" label
timeline.insert(tl, "intro_mc_4");

 

 

Either solution should work fine. Also, take a look at v12 of the platform (if you aren't using it already). It contains a lot of new convenience methods for creating the same effects with much less code.

http://www.greensock.com/v12/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...