How to simplify my redundant Tweening...

[whatdawillyo]

Hello,

 

This is my first post.

 

First off: I love these Tween classes! Awesome stuff!

Second: I suck.

 

As you'll see from my code below I'm doing a repeating set of Tweens. I've done it in the most convoluted way possible.

 

Most people would settle for the fact that it works and looks fine. But I like things to be efficient and clean.

 

Here is a preview of the animation: http://www.willparedes.com/arena/c21/tween.html

 

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

/*This gets the whole show running*/
begin();


/*First animation of white fur lady*/
function begin():void {

TweenMax.to(white_c, 1.2, {x:480, ease:Expo.easeInOut});
TweenMax.to(white_b, 1.4, {x:480, ease:Expo.easeInOut});
TweenMax.to(white_a, 1.55, {x:480, ease:Expo.easeInOut});

TweenMax.to(white_c, 10, {x:560, delay:1.54});
TweenMax.to(white_b, 10, {x:560, delay:1.54});
TweenMax.to(white_a, 10, {x:560, delay:1.54});

TweenMax.to(white_c, 1.2, {x:1321, ease:Expo.easeInOut, delay:2.7, onStart:purple});
TweenMax.to(white_b, 1.4, {x:1321, ease:Expo.easeInOut, delay:2.7});
TweenMax.to(white_a, 1.55, {x:1321, ease:Expo.easeInOut, delay:2.7});
}


/*Animation of purple dress girl and tux*/
function purple():void {

TweenMax.to(tux_purple_c, 1.25, {x:480, ease:Expo.easeInOut});
TweenMax.to(tux_purple_b, 1.4, {x:480, ease:Expo.easeInOut});
TweenMax.to(tux_purple_a, 1.55, {x:480, ease:Expo.easeInOut});

TweenMax.to(tux_purple_c, 10, {x:560, delay:1.54});
TweenMax.to(tux_purple_b, 10, {x:560, delay:1.54});
TweenMax.to(tux_purple_a, 10, {x:560, delay:1.54});

TweenMax.to(tux_purple_c, 1.25, {x:1359, ease:Expo.easeInOut, delay:2.5, onStart:ppants});
TweenMax.to(tux_purple_b, 1.4, {x:1359, ease:Expo.easeInOut, delay:2.5});
TweenMax.to(tux_purple_a, 1.55, {x:1359, ease:Expo.easeInOut, delay:2.5});
}


/*animation of pink pants dude*/
function ppants():void {

TweenMax.to(ppants_c, 1.25, {x:480, ease:Expo.easeInOut});
TweenMax.to(ppants_b, 1.4, {x:480, ease:Expo.easeInOut});
TweenMax.to(ppants_a, 1.55, {x:480, ease:Expo.easeInOut});

TweenMax.to(ppants_c, 10, {x:560, delay:1.54});
TweenMax.to(ppants_b, 10, {x:560, delay:1.54});
TweenMax.to(ppants_a, 10, {x:560, delay:1.54});

TweenMax.to(ppants_c, 1.25, {x:1380, ease:Expo.easeInOut, delay:2.5, onStart:candy});
TweenMax.to(ppants_b, 1.4, {x:1380, ease:Expo.easeInOut, delay:2.5});
TweenMax.to(ppants_a, 1.55, {x:1380, ease:Expo.easeInOut, delay:2.5});
}

 

...and it goes on like that for all 6 images.

 

I appreciate any help in taming this ugly beast I've created.

 

- Will

[proffy]

Maybe the TweenMax.allTo could allow you to group your tweens (the stagger could replace the different timings you have between the 3 tweens of an element, i guess this wouldn't change so much the progressive movement feeling.

 

And you could also use a custom ease function, or work with ease functions' parameters to find a way to tween the elements only once. That way your code would be much simplier :

 

TweenMax.allto([myelem_a,myelem_b,my_elem_c],14 (sum of the in / between / out tweens timings),{x:targetX, ease:customEaseFunction},.15(for the stagger), nextFunction);

 

I don't know if it would be faster, but it certainly would be cleaner

[GreenSock]

Yep, allTo() may be helpful. Also, I'd recommend turning on smoothing for your images so that they don't get stuttery when they move slowly. Just right-click each image in the library, choose properties, and then check the allow smoothing checkbox.

[whatdawillyo]

OK I think I'm on the right trail...I started using TimeLineMax. This is what I've done so far. It's a little better than what I previously did but still seems like clunky code to me

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


begin();


function begin():void{
var myTimeline:TimelineMax = new TimelineMax();
myTimeline.insertMultiple(TweenMax.allTo([white_c, white_b, white_a], 3, {x:480, ease:Expo.easeInOut}, .2), 0);
myTimeline.insertMultiple(TweenMax.allTo([tux_purple_c, tux_purple_b, tux_purple_a], 5, {x:-100, alpha:.1, ease:Expo.easeOut}, .2), 2);
myTimeline.insertMultiple(TweenMax.allTo([white_c, white_b, white_a], 12, {x:"100", ease:Linear.easeNone}, 0), 3.5);
myTimeline.insertMultiple(TweenMax.allTo([white_c, white_b, white_a], 2, {x:1350, ease:Expo.easeInOut, onStart:purple}, .2), 4.25);
}


function purple():void{
var myTimeline:TimelineMax = new TimelineMax();
myTimeline.insertMultiple([new TweenMax(tux_purple_c, 5, {alpha:.2, ease:Expo.easeOut, delay:1}), new TweenMax(tux_purple_b, 5, {alpha:.5, ease:Expo.easeOut, delay:1}), new TweenMax(tux_purple_a, 5, {alpha:1, ease:Expo.easeOut, delay:1})], 0, TweenAlign.NORMAL, .2);
myTimeline.insertMultiple(TweenMax.allTo([tux_purple_c, tux_purple_b, tux_purple_a], 3, {x:530, ease:Expo.easeInOut}, .2), 0);
myTimeline.insertMultiple(TweenMax.allTo([ppants_c, ppants_b, ppants_a], 5, {x:-100, alpha:.1, ease:Expo.easeOut}, .2), 2);
myTimeline.insertMultiple(TweenMax.allTo([tux_purple_c, tux_purple_b, tux_purple_a], 12, {x:"100", ease:Linear.easeNone}, 0), 3.5);
myTimeline.insertMultiple(TweenMax.allTo([tux_purple_c, tux_purple_b, tux_purple_a], 2, {x:1350, ease:Expo.easeInOut, onStart:pants}, .2), 4.25);
}



function pants():void{
var myTimeline:TimelineMax = new TimelineMax();
myTimeline.insertMultiple([new TweenMax(ppants_c, 5, {alpha:.2, ease:Expo.easeOut, delay:1}),new TweenMax(ppants_b, 5, {alpha:.5, ease:Expo.easeOut, delay:1}), new TweenMax(ppants_a, 5, {alpha:1, ease:Expo.easeOut, delay:1})], 0, TweenAlign.NORMAL, .2);
myTimeline.insertMultiple(TweenMax.allTo([ppants_c, ppants_b, ppants_a], 3, {x:530, ease:Expo.easeInOut}, .2), 0);
myTimeline.insertMultiple(TweenMax.allTo([candy_c, candy_b, candy_a], 5, {x:-100, alpha:.1, ease:Expo.easeOut}, .2), 2);
myTimeline.insertMultiple(TweenMax.allTo([ppants_c, ppants_b, ppants_a], 12, {x:"100", ease:Linear.easeNone}, 0), 3.9);
myTimeline.insertMultiple(TweenMax.allTo([ppants_c, ppants_b, ppants_a], 2, {x:1400, ease:Expo.easeInOut, onStart:candy}, .2), 4.35);
}

 

I'm not clear what the difference is between insertMultiple, appendMultiple.

 

Also: what's the difference between myTimeline.insertMultiple (new TweenMax... and just using myTimeline.insertMultiple(TweenMax...

 

I really opened up a can of worms on myself with this project.

 

Thanks for your replies so far. I envy the geniuses on this forum.

[GreenSock]

insertMultiple() allows you to define exactly where you want the tweens to go (like "at the 3 second point") whereas appendMultiple() adds them to the very end of the timeline (hence the word "append"). Remember, tweens can overlap as much as you want inside a TimelineLite/Max.

 

There is really no difference between doing insert(new TweenMax(...)) and insert(TweenMax.to()). Some people prefer the object oriented approach and others like the static methods. Use whatever you like.