I’ve been working on a project recently and made a pod component. There’s a requirement which has the text animating on the pods as they scale up and down. However, we’ve been stuck because the text animation is jerky and jittery and looks wrong.

There are lots of pages about this problem, and the solutions vary from making bitmap data copies (which look crap when they scale up), to using flash, to some random things involving font embedding tags.

However,none of them work – but one of my colleagues stumbled upon the solution..

Use this tag. fontGridFitType

It’s used like this:

here’s a snippet:

  2. <?xml version="1.0" encoding="utf-8"?>
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  4. <mx:Text id="jerky" text="some jerky text" />
  5. <mx:Text id="smooth" text="some smooth text" fontGridFitType="none"/>
  7. <mx:Zoom id="grow" targets="{ [ jerky, smooth ] }"
  8. zoomWidthTo="3" zoomHeightTo="3" duration="2000"/>
  9. <mx:Zoom id="shrink" targets="{ [ jerky, smooth ] }"
  10. zoomWidthTo="1" zoomHeightTo="1" duration="2000"/>
  12. <mx:Button label="eat me" click="{ grow.play() }"/>
  13. <mx:Button label="drink me" click="{ shrink.play() }"/>
  14. </mx:Application>

The reason it works is beacuse if the fontGridtype is set to anything other than none , it plays with the kerning horrendously (making the letters land on pixelboundaries) – which makes it appear jerky.

I was sOOO glad to find this out – it was driving me mad!!

Have fun with it.