ActionScript 3: How to move a TextField smoothly?

Question

In my program I have a feature of text scrolling across the screen. This works fine, except for the unbelievable laggy movement. I'm simply adding the speed to the x-position of the textfield, and the movement animation works fine for all other objects (movieclips, bitmaps etc).

EDIT:

I now tried to convert the text to a BitMap, and then move it. Unfortunately this resulted in the same "laggy" movement with lots of sudden "jumps".

bmd = new BitmapData (event_field.width, event_field.height, true, 0);
bmd.draw (event_field);

bm = new Bitmap (bmd);
bm.x = event_field.x;
bm.y = event_field.y;
bm.cacheAsBitmap = true;
bm.smoothing = true;
this.addChild(bm);

In my enter-frame-function:

bm.x-=3

Does anyone have a solution for this?

Answer 1

Not smoothing the textfield may improve performance, but using the native TextField class in my experience, has performance limitations that can't really be overcome. Real-time rendering of text is expensive. Real-time rendering that text to bitmapData, can also be expensive and is really only beneficial if the text doesn't change much. In any case that's something cacheAsBitmap should already be doing automatically.

To overcome both of these issues, you should consider bitmap fonts. These are pre-rendered, solving both of the above issues. However, the native API doesn't support it.

The two options that I'm aware of:

1. BMFontRenderer. Some classes that supposedly provide support for bitmap font rendering. I've not tried this so I can't vouch for it.
2. Use Starling for your whole project, which includes excellent support for bitmap fonts and distance field fonts (scalable bitmap fonts). It's a 2D hardware accelerated framework, so this is just the tip of the iceberg in terms of what it can offer. I use it for everything now, but for your project it may be too late to be switching from the native framework to another.

To generate your bitmap fonts, these are some tools recommended by the Starling Manual. I personally use Littera and BMFont:

• Littera
• BMFont
• Glyph Designer
• bmGlyph

Answer 2

You can try embedding font or animate bitmap not textfield

• create snapshot of textfield before animation starts,
• hide textfield
• animate snapshot
• at animation finish move invisible textfield into destination, destroy snapshot and show textfield