Chunky Text Animation

[Sinewave 1 Likes (Newbie)]

I've got a flash banner I'm designing with the v11 Beta.

 

The first set of copy slides in and animates very smoothly. But after that, the 2nd and 3rd sets of copy are very jittery.

I've checked and double checked the textfields and they are static and aliased for animation.

 

Does anyone have any insight onto why this is happening?

 

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

var seq1:TimelineMax = new TimelineMax();
seq1.append(new TweenLite(firstImage.msk, 1, {x:"368", ease:Cubic.easeOut, delay:.5}));
seq1.append(new TweenLite(firstImage.img, 1, {alpha:1, ease:Cubic.easeOut, delay:-1}));
seq1.insertMultiple(TweenMax.allTo([firstTxt1, firstTxt2, firstTxt3], 1, {x:"368", alpha:1, ease:Cubic.easeOut}), 0.5, TweenAlign.START, 0.1);
seq1.insertMultiple(TweenMax.allFrom([firstTxt1, firstTxt2, firstTxt3], 1, {blurFilter:{blurX:30}}), 0.5, TweenAlign.START, 0.1);
seq1.insertMultiple(TweenMax.allTo([firstImage.msk, firstTxt1, firstTxt2, firstTxt3], 8, {x:"40", ease:Cubic.easeOut}), seq1.duration);
seq1.insert(new TweenLite(firstTxt4, 4, {alpha:1, ease:Cubic.easeOut}), 1.5);
seq1.insert(new TweenLite(blue1.bar, 4, {alpha:.6, ease:Cubic.easeOut}), 1.5);
seq1.insert(new TweenLite(blue1.msk, 8, {x:"400", ease:Cubic.easeOut}), 1.5);
seq1.insert(new TweenLite(blue1, 8, {x:"90", ease:Cubic.easeOut}), 1.5);
seq1.insert(new TweenLite(blue1, 1, {x:800, ease:Cubic.easeOut}), 3.5);

seq1.insert(new TweenLite(white1.bar, 4, {alpha:.3, ease:Cubic.easeOut}), 1.5);
seq1.insert(new TweenLite(white1.msk, 8, {x:"-500", ease:Cubic.easeOut}), 1.5);
seq1.insert(new TweenLite(white1, 8, {x:"-20", ease:Cubic.easeOut}), 1.5);
seq1.insert(new TweenLite(white1, 1, {x:-800, ease:Cubic.easeOut}), 3.5);

seq1.insertMultiple(TweenMax.allTo([firstTxt1, firstTxt2, firstTxt3, firstTxt4], 1, {alpha:0, ease:Cubic.easeOut}), 4);
seq1.insert(new TweenLite(firstImage.img, 2, {alpha:0, ease:Cubic.easeOut}), 4);
seq1.insert(new TweenLite(secondImage.img, 3, {alpha:1, ease:Cubic.easeOut}), 4);

seq1.insertMultiple(TweenMax.allTo([secondTxt1, secondTxt2, secondTxt3], 1, {x:"368", alpha:1, ease:Cubic.easeOut}), 5, TweenAlign.START, 0.1);
seq1.insertMultiple(TweenMax.allFrom([secondTxt1, secondTxt2, secondTxt3], 1, {blurFilter:{blurX:30}}), 5, TweenAlign.START, 0.1);
seq1.insert(new TweenLite(secondImage.msk, 1, {x:884, ease:Cubic.easeOut}), 5);
seq1.insertMultiple(TweenMax.allTo([secondImage.msk, secondTxt1, secondTxt2, secondTxt3], 8, {x:"40", ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(secondTxt4, 4, {alpha:1, ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(white2.bar, 4, {alpha:.6, ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(white2.msk, 8, {x:"400", ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(white2, 8, {x:"90", ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(white2, 1, {x:800, ease:Cubic.easeOut}), 9);

seq1.insert(new TweenLite(blue2.bar, 4, {alpha:.3, ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(blue2.msk, 8, {x:"-500", ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(blue2, 8, {x:"-20", ease:Cubic.easeOut}), 6);
seq1.insert(new TweenLite(blue2, 1, {x:-800, ease:Cubic.easeOut}), 9);

seq1.insertMultiple(TweenMax.allTo([secondTxt1, secondTxt2, secondTxt3, secondTxt4], 1, {alpha:0, ease:Cubic.easeOut}), 9.5);
seq1.insert(new TweenLite(secondImage.img, 2, {alpha:0, ease:Cubic.easeOut}), 9.5);
seq1.insert(new TweenLite(thirdImage.img, 3, {alpha:1, ease:Cubic.easeOut}), 9.5);
seq1.insert(new TweenLite(thirdImage.msk, 2, {x:-560, ease:Cubic.easeOut}), 9.5);

seq1.insertMultiple(TweenMax.allTo([thirdTxt1, thirdTxt2, thirdTxt3], 1, {x:"368", alpha:1, ease:Cubic.easeOut}), 10.5, TweenAlign.START, 0.1);
seq1.insertMultiple(TweenMax.allFrom([thirdTxt1, thirdTxt2, thirdTxt3], 1, {blurFilter:{blurX:30}}), 10.5, TweenAlign.START, 0.1);
seq1.insertMultiple(TweenMax.allTo([thirdImage.msk, thirdTxt1, thirdTxt2, thirdTxt3], 8, {x:"40", ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(thirdTxt4, 4, {alpha:1, ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(white3.bar, 4, {alpha:.3, ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(white3.msk, 8, {x:"-500", ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(white3, 8, {x:"-20", ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(white3, 1, {x:-800, ease:Cubic.easeOut}), 13.5);

seq1.insert(new TweenLite(blue3.bar, 4, {alpha:.6, ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(blue3.msk, 8, {x:"400", ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(blue3, 8, {x:"90", ease:Cubic.easeOut}), 11.5);
seq1.insert(new TweenLite(blue3, 1, {x:800, ease:Cubic.easeOut}), 13.5);

seq1.insertMultiple(TweenMax.allTo([thirdTxt1, thirdTxt2, thirdTxt3, thirdTxt4], 1, {alpha:0, ease:Cubic.easeOut}), 14);

seq1.insert(new TweenLite(thirdImage, 1, {x:675, ease:Cubic.easeOut}), 14.5);
seq1.insert(new TweenLite(thirdImage.msk, 1, {x:-433, ease:Cubic.easeOut}), 14.5);
seq1.insert(new TweenLite(secondLast, 1, {alpha:1, ease:Cubic.easeOut}), 15);
seq1.insert(new TweenLite(secondLast.msk, 1, {x:148, ease:Cubic.easeOut}), 15);
seq1.insert(new TweenLite(finalTxt1, 1, {alpha:1, x:"10", ease:Cubic.easeOut}), 15.25);
seq1.insert(new TweenLite(finalTxt2, 1, {alpha:1, x:"10", ease:Cubic.easeOut}), 15.5);
seq1.insert(new TweenLite(lastWhite, 1, {alpha:.3, x:479, ease:Cubic.easeOut}), 15.5);
seq1.insert(new TweenLite(lastBlue, 1, {alpha:.5, x:400, ease:Cubic.easeOut}), 15.5);
seq1.insert(new TweenLite(firstLast, 1, {alpha:1, ease:Cubic.easeOut}), 15.75);
seq1.insert(new TweenLite(firstLast.msk, 1, {x:101, ease:Cubic.easeOut}), 15.75);
seq1.insertMultiple(TweenMax.allTo([f,i,d,e,l,i2,s], 5, {alpha:1, ease:Cubic.easeOut}), 15.75, TweenAlign.START, 0.1);

[GreenSock 17,899 Likes (Superhero)]

Keep in mind that when you apply a filter (blurFilter, colorMatrixFilter, glowFilter, whatever), Flash forces the cacheAsBitmap property to true on your DisplayObject which only allows it to land on whole pixels. That can make it look jittery when you're animating text. It has nothing to do with TweenLite bogging down the processor or anything - it's just the visual consequence of cacheAsBitmap. Try removing the filters and see if it resolves the issue.

[Sinewave 1 Likes (Newbie)]

Well I determined that it's not the blur filters causing the chunkyness. I might break it into a few different timelines to see if that does it.

On the other hand, I have another project where the blurfilters cause a color shift on some movieclips. -very annoying.