Multiple tweens stopping and starting (jerky motion)

[lastnerve]

I love this tween engine and I'd love to learn how to use it properly.

 

The code below is my attempt to get an image of a baseball bat to swing. I got that far, but the movement is a little jerky. When I slowed it down (as in the code below) I could see that each tween clearly starts and stops instead of giving one continuous motion.

 

So is there a way to write a single tweenLite that provides 5 or 6 different motions without the stops and starts?

 

function swingBat(mc:MovieClip):Void {
var startx = mc._x;
var starty = mc._y;

//create the timeline
var bat_Timeline:TimelineLite = 
new TimelineLite({tweens:
	[new TweenLite(mc, 1, {_xscale:100, _yscale:80, _x:startx - 60, _y:starty + 20, _rotation:30, ease:Linear.easeNone}), 
	new TweenLite(mc, 1, {_xscale:100, _yscale:100, _x:startx, _y:starty, _rotation:0, ease:Linear.easeNone}), 
	new TweenLite(mc, 1, {_xscale:60, _yscale:100, _x:startx - 60, _y:starty - 40, _rotation:-90, ease:Linear.easeNone}), 
	new TweenLite(mc, 1, {_xscale:100, _yscale:100, _x:startx - 120, _y:starty - 60, _rotation:-180, ease:Linear.easeNone}), 
	new TweenLite(mc, 1, {_xscale:60, _yscale:100, _x:startx - 60, _y:starty - 40, _rotation:-90, ease:Linear.easeNone}), 
	new TweenLite(mc, 1, {_xscale:100, _yscale:100, _x:startx, _y:starty, _rotation:0, ease:Linear.easeNone})], 
	align:TweenAlign.SEQUENCE, onComplete:manageClick});

[lastnerve]

I found one thing that slowed down my tweens.

I started with:

import com.greensock.*;	// this code creates a performance hit

 

and changed to this:

import com.greensock.TweenLite;
import com.greensock.TimelineLite;
import com.greensock.TweenAlign;
import com.greensock.easing.*;

 

and my tweens now run faster and smoother.

 

I'd still like to know if there's a better way to string several motions tweens together.

[GreenSock]

First off, import com.greensock.* will have absolutely NO performance hit on your tweens. The only slight performance hit will be when you compile your SWF, it might take Flash a bit longer to compile. That's all. The reason for the compile speed hit is just because it has to look at all the classes in that package to figure out which ones are there. During runtime, though, it makes absolutely positively no difference.

 

As for stringing tweens together "without the starts/stops", I assume you mean that you want to have them play concurrently instead of one-after-the-other? That's no problem at all - just use TweenAlign.NORMAL instead of TweenAlign.SEQUENCE for your align property that you're passing into the TimelineLite. Or you can insert() each tween at any spot. Tweens can be anywhere on a TimelineLite, and overlap as much as you want. Does that answer your question?

[lastnerve]

Thanks for the reply. I understand what you mean about "import com.greensock.*;" not creating a performance hit; it didn't make sense to me either. However, there is a noticeable difference in one of my tween sequences when I use it. I can't explain why.

 

I didn't mean that I want to run tweens concurrently; I meant to ask if there is a method of "chaining" tweens, i.e., one tween triggering the next in the sequence. However, after reading more about GS I see that such "triggering" is not necessary.

 

I tried to use insertMultiple, but couldn't get it to work, so I'll keep trying.

Thanks a lot for the help.

[GreenSock]

Ah yes, there are actually several ways to set up sequences:

 

1) use the "delay" property.

TweenMax.to(mc, 1, {x:100});
TweenMax.to(mc, 1, {y:50, delay:1}); 

 

2) Use an onComplete:

TweenMax.to(mc, 1, {x:100, onComplete:nextStep});
function nextStep():void {
   TweenMax.to(mc, 1, {y:50});
}

 

3) (my favorite:) Use the new TimelineLite or TimelineMax class:

 

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.insertMultiple( [TweenMax.to(mc, 1, {x:100}), TweenMax.to(mc, 1, {y:50})], 0, TweenAlign.SEQUENCE);

 

The timeline option opens up a bunch of other possibilities too because you can control the group as a whole very easily, add onStart/onUpdate/onComplete callbacks, etc.

 

Enjoy!