Choppy Banner Transitions using Tweener class

[Tandaemonium]

Hi, I've made this banner that is apparently choppy. All the layout was done in Flash, and all of the animations are handled in the document class. It's basically an init function followed by a series of addTween's, each scene having it's own function, and then looping back.

I am using Tweener, and the client is saying it looks terribly choppy. I didn't know/couldn't tell on my machine, but upon looking at the screen of a slower comp, yeah it's terrible.

For the life of me I cannot figure out how to get the tweens to go smoother. That said there are some telltale clues on the trouble spots. I notice that any tweens related to only the alphas, that is the fades, tween fine with no problem. It's any movement of x or y that it goes all jittery. Also all of my fades are pretty much no longer than 1.5s. Each of my movements which involve some ginormous images (dimensionwise) are 3.5-5s long.

Other things of note:

Yes I am removing all tweens after each loop cycle. Firebug shows that there is no memory leak, but it does show some huge processing 75-90% occurring right when those movements (especially if there is also scaling) are happening - processing spikes.

The frame rate was at 31 to begin with, but is now ramped up to 60 which improved things slightly.

Here is a link to the banner in action:
http://tarkettna.johnsonite.com/

Yes, in retrospect, doing this in After Effects would probably have been the better tool to use even though some text rendering quality will be sacrificed, but this is so far into it, it would be nice to be able to fix what exists without having to start all over. Plus, I'd really like to move on to something else besides this bloody banner!

[neznein9]

*add a preloader!

I see what you mean about the choppy transitions. I'm on a decently fast core duo mbp so I'm sure a lot of users are seeing much worse.

Since you're not using any of the crazy features of Tweener, I recommend you switch over to a lighter weight tween engine that just handles display-objects. Personally I'm a fan of TweenLight, but if you're really ambitious you could also use Go.

Also, using smoothing on your images will make them animate more nicely but it does add a step of rendering into the engine so it can slow things down. More important than that though is the size of the images...make sure the imagery is only as big as it needs to be...the slowdown in your piece has the feeling of large images scaled down or images with a big dpi or something of that nature...and put in a little compression, it should help out filesize a lot and (not positive) i think it will animate a little faster with less information to manipulate.

[Tandaemonium]

The piece has a preloader already in there. Let's see what else...most of the images are big...imported psds, though 72dpi and i have all images compressed to 60 quality except for 2 which are 80.

Currently there is smoothing only on the scaling scenes. I added smoothing on all of them once to see if that would improve things, but it was negligible and depending on the machine tested, could be worse.

I'll try tweenlite as you suggested.

What sucks even more...client had someone else do another banner for a different section that is 100% smooth using timeline tweens that's making me look bad. Sigh.

[neznein9]

Make sure those psds arent heavily layered or anything...personally I'd use photoshop's save for web to make sure the files are clean and lightweight before you start using them.