Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
h34v3ns3nt

Advanced Animation with TimelineMax

Recommended Posts

Hello, im new to this board! My name is Jamie, and I have recently discovered the Greensock tools.

 

I understand TweenMax for basic animation and am just getting to grips with TimelineMax for advanced animation. I have a question regarding arrays and the staggered start time for 2 arrays I have setup. *im assuming I need 2 arrays in this case as there are 2 animation sequences, right to left and left to right. If you view the first animation attached you will see the animation I am trying to accomplish with an array (why not!)

 

The code I have used is from Carl Schooff at Snorkle.tv

http://www.snorkl.tv/2010/08/a-quick-lo ... ax-tweens/

 

Towards the end he says you can tween the array, I tried it and it works but only on one side naturally. Referring to the first file attached I would like the animation to read right to left first, then left to right and so on indefinately.

 

here is what I tried;

 

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

var rightleft_arr:Array = new Array(testimonialone_mc, testimonialthree_mc, testimonialfive_mc);
var leftright_arr:Array = new Array(testimonialtwo_mc, testimonialfour_mc, testimonialsix_mc);

var timeline:TimelineMax = new TimelineMax({repeat:-1});

for(var key:String in rightleft_arr){
var mc:MovieClip = MovieClip(rightleft_arr[key]);
timeline.append(TweenMax.from(mc, .5, {x:903, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(mc, 5, {x:13, ease:Linear.easeNone}));
timeline.append(TweenMax.to(mc, .5, {x:-357, blurFilter:{blurX:20}}));
}

/*for(var key:String in leftright_arr){
var mc:MovieClip = MovieClip(leftright_arr[key]);
timeline.append(TweenMax.from(mc, .5, {x:-279, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(mc, 5, {x:613, ease:Linear.easeNone}));
timeline.append(TweenMax.to(mc, .5, {x:983, blurFilter:{blurX:20}}));
}*/

 

You can see I commented out the second array, this is where I get stuck. I need a way of telling TimelineMax to run the first array, and then the second, back to the first and so on. If I can get this right then this opens up huge possibilities for future tweening with this engine.

 

Here is the code from the first file

 

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

var timeline:TimelineMax = new TimelineMax();

timeline.append(TweenMax.from(testimonialone_mc, .5, {x:903, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(testimonialone_mc, 5, {x:13, ease:Linear.easeNone}));
timeline.append(TweenMax.to(testimonialone_mc, .5, {x:-357, blurFilter:{blurX:20}}));

timeline.append(TweenMax.from(testimonialtwo_mc, .5, {x:-279, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(testimonialtwo_mc, 5, {x:613, ease:Linear.easeNone}));
timeline.append(TweenMax.to(testimonialtwo_mc, .5, {x:983, blurFilter:{blurX:20}}));

timeline.append(TweenMax.from(testimonialthree_mc, .5, {x:903, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(testimonialthree_mc, 5, {x:13, ease:Linear.easeNone}));
timeline.append(TweenMax.to(testimonialthree_mc, .5, {x:-357, blurFilter:{blurX:20}}));

timeline.append(TweenMax.from(testimonialfour_mc, .5, {x:-279, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(testimonialfour_mc, 5, {x:613, ease:Linear.easeNone}));
timeline.append(TweenMax.to(testimonialfour_mc, .5, {x:983, blurFilter:{blurX:20}}));

timeline.append(TweenMax.from(testimonialfive_mc, .5, {x:903, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(testimonialfive_mc, 5, {x:13, ease:Linear.easeNone}));
timeline.append(TweenMax.to(testimonialfive_mc, .5, {x:-357, blurFilter:{blurX:20}}));

timeline.append(TweenMax.from(testimonialsix_mc, .5, {x:-279, blurFilter:{blurX:20}}));
timeline.append(TweenMax.to(testimonialsix_mc, 5, {x:613, ease:Linear.easeNone}));
timeline.append(TweenMax.to(testimonialsix_mc, .5, {x:983, blurFilter:{blurX:20}}));

 

It works yes, but it would be nice to cut down on the amount of code and control the parameters of perhaps an entire array rather than each line individually which is the purpose of my post.

 

Can anyone help me?

Thanks

Jamie

Link to comment
Share on other sites

Hi Jamie,

 

I gotta say I really appreciate the clarity of your question and the effort that went in to explaining a fairly complex issue.

I've looked at your swfs (a huge help) and definitely know the results the solution should produce.

There are a few ways to tackle this and I'll probably come up with a solution somewhere right between the best and worst;)

 

I think where I'm headed with this is that each sequence will be converted to a new timeline with the following tweens:

1:clip slides on screen quickly

2:clip slides across screen a bit slower

3:clip zips out

 

then I will add all these sub timelines, to a main timeline.

 

most likely I will put all your clips into one array. then i'll loop through the array and all the odd numbered clips will be placed in a timeline that handles left > right movement, and even numbered clips will move right > left.

 

this is definitely a good exercise for me to get some real-world timelineMax experience!

 

I'll let you know when this is done. Would love for it to be today, but can't promise.

 

Best,

 

Carl

Link to comment
Share on other sites

Hi Carl,

 

Thanks for your help.

 

Can I just say, I notice this issue with the way timelineMax works. You have on your site a tutorial and some example fla's to get started where 4 coloured boxes move up, spin, move to the right and then up off the stage. Well yes I understand the logic behind the code, its how I got my first swf attachment to work from your excellent video.

 

Well lets change things around a little, say you wanted the boxes to start their animation in a different order rather than starting left to right, you have then a similar problem as me. I suppose using the append method you would just change the order of the actionscript, but once they are in an array (for the sakes of keeping the code clean and only having to change the values once) therein lies the problem.

 

I look forward to your solution

Thanks

Jamie

Link to comment
Share on other sites

Hey Jamie,

 

well I just couldn't let this rest...had to give it a shot.

 

the finished product can be viewed here:

http://www.snorkl.tv/dev/seriesBackAndForth/

 

THE CODE:

 

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

//create TimelineMax instance and set to repeat infinitely
var timeline:TimelineMax = new TimelineMax({repeat:-1});

//speed vars
var inOutDuration:Number = .5;
var slideDuration:Number = 3;

//array of all clips 
//note: since clips are named chronologically they don't need to be an array, but its nice:)
//we could just loop through them by name "t" + i
var boxes_arr:Array=new Array(t1,t2,t3,t4,t5,t6);


//loop through each item in the array
for (var key:String in boxes_arr) {
//create reference to each individual clip
var mc:MovieClip=MovieClip(boxes_arr[key]);

//detect clips with index of 0,2,4,6...
//by checking if the current index divided by 2 has a reminder aka modulo operation
if ((Number(key)%2)==0) {
	trace(key + " even");
	//create left -> right sequence
	timeline.append(TweenMax.to(mc, 0, {x:-200, y:12, blurFilter:{blurX:20}}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:20, blurFilter:{blurX:0}, delay:.5}));
	timeline.append(TweenMax.to(mc, slideDuration, {x:440, ease:Linear.easeNone}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:660, blurFilter:{blurX:20}}));
} else {
	//create right -> left sequence
	timeline.append(TweenMax.to(mc, 0, {x:660, y:12, blurFilter:{blurX:20}}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:440, blurFilter:{blurX:0}, delay:.5}));
	timeline.append(TweenMax.to(mc, slideDuration, {x:20, ease:Linear.easeNone}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:-200, blurFilter:{blurX:20}}));
}

}

 

Note the first append() in each sequence. I'm using this to initialize all the start values, instead of doing the .from() like you.

I only took this approach as it allows me to have my movie clips arranged however I want, fully visible off-stage (see image below). Makes it real easy for myself and clients to select and edit symbols without having to have them all on top of each other in separate layers or whatever. No real difference in the way the swf runs.

screen.png

 

I axed my idea of making each sequence its own timeline as I didn't see any advantage in that. Perhaps if each sequence needed to yoyo or have callbacks added it would make sense.

 

If you need any help deciphering the code just let me know. I'm really impressed with your ability to watch my vid and jump right in and try to build something like this. I can make videos til you turn blue, but unless you challenge yourself like this... its pointless. Great job! Honestly, it helped get my brain into gear this morning and revived my love for TimelineMax ! This was an excellent example of showing where TimelineMax really shines. Doing this on the flash timeline would have been a nightmare to setup or make global edits to.

 

I regret that I'm still not quite seeing your point:

"

Well lets change things around a little, say you wanted the boxes to start their animation in a different order rather than starting left to right , you have then a similar problem as me. I suppose using the append method you would just change the order of the actionscript, but once they are in an array (for the sakes of keeping the code clean and only having to change the values once) therein lies the problem."

 

to change the array I would do one of the following:

edit the array by hand in code

programmatically reverse the array : array.reverse()

 

The array simply lets you dictate the exact order the clips are added to the timeline. Its up to us to put them in their in the desired order. Does this help? If i'm totally misunderstanding, let me know.

 

I hope my code and examples help.

I'll attach a zip of the all the source for you and anyone else.

 

Carl

Link to comment
Share on other sites

Hi Carl,

 

Thanks for your reply. Ill have a look at your code and see what I come up with. In the meantime I stuck to the traditional methods of flash animation as I had deadlines to meet (yes, slap me!).

 

http://www.shoot-the-moon.co.uk/2010/testimonials.php

 

The link above shows the final animation in situ. Im itching to extend upon my timelineMax version of the animation, use your new code, and start adding in the underlying images as seen on the animation.

 

As it happens I need to do a new showreel for the creative page as well yet and I plan on using my new founded knowledge and create this completely in TweenMax and TimelineMax. Like you say the only way to learn new things is apply it to projects and this is how I have learnt everything I know, XHTML, CSS, Javascript, Flash, ActionScript. Simply by diving in and doing it.

 

I think after I re-read the latter part of my message it didnt make sense to me either so just ignore me there.

 

Anyway, thanks for your help. Keep the tutorial videos coming. You are a fan of mine on facebook now.

I look forward to seeing the next videos.

 

Jamie

Link to comment
Share on other sites

Very cool. Hey, sometimes we are forced to stick with what works for the moment. I am absolutely certain your experimentation will pay off.

Thanks for sharing the final product!

-Carl

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.
×