Jump to content


Chunky Text Animation

Recommended Posts

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);

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...

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.

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.