Learning TimelineLite

[bdavey311]

Hola again,

 

I'm in the mood to figure out all the new tools you have provided so please bare with the noob questions

 

I'm trying to have a sequence of animations with text animating in. I'm not able to get any of these to work.

 

Am I importing it correctly, and is my code even close?

 

import com.greensock.plugins.*;
TweenPlugin.activate([blurFilterPlugin, AutoAlphaPlugin]);

import com.greensock.*;
import com.greensock.easing.*;

var timeline:TimelineLite = new TimelineLite();
timeline.append( new TweenLite(txt1_in, 1, {y:"-230", ease:Back.easeOut}) );
timeline.append( new TweenLite(txt2_every, 1, {blurFilter:{blurX:0}}) );
timeline.append( new TweenLite(txt3_market, 1, {y:"-2.5", ease:Elastic.easeOut}) );

 

Thanks in advance!

BD

[GreenSock]

Yep, your imports look fine - are you working with AS3? And did you make sure you've got the classes "installed" (just make sure the "com" directory is in the same directory as your FLA - see http://blog.greensock.com/get-started-tweening/ for details)?

 

If you're still having trouble, could you zip up your FLA and post it so we can see what's going on?

[bdavey311]

Ah AS2, so is the difference basically getting rid of the quotes around the property's values and add the underscore? Such as the _y:

timeline.append( new TweenLite(txt1_in, 1, {_y:-23, ease:Back.easeOut}) );

 

It worked so I would imagine that's the case.

 

Do I have to do the import com.greensock.*; if I want to use the timelineLite or Max?

[bdavey311]

Yep - could still use the help with my file. CS4 ok?

 

Basically what I want to happen is that I don't want the txtMC movieclip to activate/animate until the other animations are done. I thought that putting a delay on it would give me the time I was looking for but I noticed that doesn't stop the animations inside the movieClip from animating. So what's the best way to get all the text animations to activate only when called on? Put a delay inside of that? Surely there is a better way

 

Thanks again man.

BD

[bdavey311]

So I'm hoping you have a great sense of humor and find this funny. But! I was thinking that it would be dope to have some examples/tutorials on the site, such as the intro animation you put together right when you get to the page showing all the new features. Then I noticed that the motionBlur was apart of it and that it wouldn't make any sense for you to just offer that up. SO! With that being said - what if I were to join Club greensock to one support everything you have done. And 2 - dissect that dope file you got there and see the best ways to use these classes?

 

Like I said - sense of humor. But I swear to god I'm stumped every step of the way and something like that would be sweet. That's all I got. Much love and peace!

 

bD

[GreenSock]

First of all, the quotes have nothing to do with AS2/AS3 - they just indicate whether or not you want the value to be interpreted as relative to the current value or not. And the com.greensock package includes the timeline classes too, so yes, all you'd need to do is import com.greensock.*;

 

The reason the TimelineLite in your txtMC is animating immediately is because nothing tells it not to - Flash runs the code on your MovieClip immediately when it's on the stage. There are lots of ways you can delay the running of that code, though:

 

1) Wrap it in a function like animateIn() and just call that function when you're ready.

 

2) pause() the TimelineLite initially and then when you're ready to play it, just call timeline.play() or timeline.resume() or timeline.restart().

 

3) Integrate that code into a main TimelineLite that drives all your stuff. I've attached a new FLA that demonstrates this concept. The beauty of using TimelineLite/Max to build your animation is that you can control them so easily and nest them inside of each other as deeply as you want.

 

By the way, I noticed you activated BlurFilterPlugin and AutoAlphaPlugin multiple times in your FLA - that doesn't hurt anything but it's unnecessary. Also, you used startAt in a TweenLite, but that's a TweenMax-only feature.

 

As for getting the intro FLA and ActionScript, I have offered to share that with "Shockingly Green" Club GreenSock members. Just got a comment the other day about how the person found the way it was set up to be fascinating (not that it's amazing or anything - in fact, it was whipped together in a rush over the course of about a day, so it could surely be structured better).

 

Anyway, I hope this helps.

[bdavey311]

Wow. That file is waaaaaay cleaner and makes a lot more sense. The $150 is a little much for now - but I'm sure I can swing the $50 man. Especially with responses as quick as this.

 

What if I didn't want the text to come in as such a straight forward sequence? Before one finishes have the other start? And then I believe I'll be done asking questions for the days.

 

bD

[GreenSock]

What if I didn't want the text to come in as such a straight forward sequence? Before one finishes have the other start?

 

No problem! That's exactly what the "offset" parameter is for in the append() and appendMultiple() methods. So, for example, if you want to offset the insertion time by -0.5 seconds so that the tween that's getting appended overlaps with the end of the timeline by 0.5 seconds, you'd do:

 

timeline.append( new TweenLite(...), -0.5);

 

and remember, insert() and insertMultiple() allow you to specify EXACT insertion points for your tweens, so you can input a tween at precisely 2.5 seconds like this:

 

timeline.insert( new TweenLite(...), 2.5);

 

And if you want to throw a bunch of tweens at it and have them staggered by a certain amount, you can do that easily with the "stagger" parameter of appendMultiple() and insertMultiple(), like:

 

timeline.appendMultiple([tween1, tween2, tween3], 0, TweenAlign.START, 0.25);

 

This appends the 3 tweens to the end of the timeline and staggers their start times by 0.25 seconds. You may also like the TweenMax.allTo() method because you can tween a bunch of targets to the same values and stagger their start times too. TweenMax.allTo() can be used in conjunction with TimelineLite.appendMultiple() or TimelineLite.insertMultiple() too. TONS of options and flexibility. Seriously, once you get the hang of it, you'll wonder how you lived without TimelineLite/Max

[bdavey311]

Wow dude. I'm starting to understand how this works and it is pimp! Sooooooo many questions though because wrapping my head around this is nuts. So instead of bothering you I went through the documentation and picked up as much as I could. But my main question is probably the one I need to understand the most. Does the order of the actionscript obviously affect the timeline? So is the timeline created reading the actionscript from top to bottom and and whatever "append" is next in the code determines that it comes next? Or how does that work? Trying to visually understand this is a trip. Not going to lie.

 

Also - is all text a pain in the ass to animate? Mine doesn't come out very clean and gets on my nerves. I have a feeling that's just flash.

 

Finally, this was my new favorite chunk of code I played around with that sort of changed my life:

tl.appendMultiple([ TweenLite.to(txtMC.txt4_there, 1,{_x:37.85, _alpha:100, ease:Cubic.easeOut}),
				TweenLite.to(txtMC.txt5_are, 1,{_x:100.8, _alpha:100, ease:Cubic.easeOut}),
				TweenLite.to(txtMC.txt6_eager, 1,{_x:167.8, _alpha:100, ease:Cubic.easeOut}),
				TweenLite.to(txtMC.txt7_buyers, 1, {_x:271.8, _alpha:100, ease:Cubic.easeOut})], -1, TweenAlign.START, 0.1);

 

 

Thanks again for everything.

 

bD

[GreenSock]

Does the order of the actionscript obviously affect the timeline? So is the timeline created reading the actionscript from top to bottom and and whatever "append" is next in the code determines that it comes next?

 

Yep, append() always adds to the end. So if you append(tween1) and then append(tween2), the order will be tween1, tween2. But if you append(tween2) and then append(tween1), it would go tween2, tween1.

 

Does that answer your question?

 

Glad to hear you're diggin' it.

[bdavey311]

Does it does read from top to bottom for the order of events. That's great!

 

Brian

[GreenSock]

Yeah, ActionScript always runs from top to bottom.

 

timeline.append(tween1);
timeline.append(tween2);
timeline.append(tween3);
//result: tween1, tween2, tween3

[bdavey311]

Right on man. Like I said - Because of your positivity and genuine response for helping people out I've signed up for club GreenSock. I then realized that you had the sale going on and became a full member. Much appreciated for everything and much love!

 

PeaceOut!

Brian

[GreenSock]

Right on man. Like I said - Because of your positivity and genuine response for helping people out I've signed up for club GreenSock. I then realized that you had the sale going on and became a full member. Much appreciated for everything and much love!

 

Very cool of you, Brian. Thanks so much for the support. Guys like you who pitch in really keep this project going and make it all possible.

 

I'm working on a little video tutorial for the basics of the timeline classes and hope to post it within the next week or so. I think a lot of people are coming from the same perspective (wanting to understand the value of TimelineLite/Max but not quite getting it initially because it's a new way of thinking about animation and sequencing). Hopefully the video will help, although it sounds like you've already got the concept down and may not need the video. Keep an eye on the blog for the video post.

 

Cheers!