Flashでは、一定のスピードで流れるテロップがカクついて表示されてしまうことがあります。
環境依存の面もあり、回避が困難な場合も多いのですが、どういう時に起きるのかを要素を分けて確認できれば、改善への一助になると思い、表示確認ツールを作りました。
ツール
全画面で表示
描画方法別のバリエーション
TextField.x by Enterframe：TextFieldをEnterframeを使って、xを加算して移動。
TextField.x by int Enterframe：TextFieldをEnterframeを使って、一定の整数xを加算して移動。
Shape.x by Enterframe：ShapeにbeginBitmapFillで描画し、Enterframeを使って、xを加算して移動。
Shape.x by int Enterframe：ShapeにbeginBitmapFillで描画し、Enterframeを使って、一定の整数xを加算して移動。
Bitmap.x by Enterframe：BitmapをEnterframeを使って、xを加算して移動。
Bitmap.x by int Enterframe：BitmapをEnterframeを使って、一定の整数xを加算して移動。
BitmapData.draw by Matrix：DisplayObjectの座標は変えず、BitmapDataへのdrawの位置を変更。
BitmapData.draw by int Matrix：DisplayObjectの座標は変えず、BitmapDataへのdrawの位置を一定の整数で変更。
Starling Image.x by Enterframe：Starlingで描画。xを加算して移動。
Starling Image.x by int Enterframe：Starlingで描画。一定の整数xを加算して移動。
tweenエンジン別のパリエーション
Shape.x by BetweenAS3：BetweenAS3でTextFieldのx座標を変更。
Shape.x by Tween24：Tween24でTextFieldのx座標を変更。
Shape.x by TweenMax：TweenMaxでTextFieldのx座標を変更。
Shape.x by TweenMax useFrames：TweenMaxでTextFieldのx座標を変更、useFramesを使用。
Shape.x by Tweener：TweenerでTextFieldのx座標を変更。
Shape.x by Tweener useFrames：TweenerでTextFieldのx座標を変更、useFramesを使用。
設定
Speed：スクロールスピードを設定します。1秒間に進むpx数を指定します。数値を変えた後、描画方法のボタンを押して反映。
GarbageCollection：強制的にガベージコレクションを実行。
Stats：Statsの表示／非表示を切り替える。
EnterFrame：値を増やして表示するだけのEnterFrameを実行。
キーボードによる操作
カーソルの左右または、スペースバーで描画方法を変更できます。
ファイル一式
https://github.com/umhr/TextScroll
意図
カクつきはどうしても発生してしまうのだが、制作の後半に問題になると、厳しいことになる。
再現しにくく、当てずっぽうの策になりやすい。
とりあえず思いつく方法を組み合わせてみて、効果の有る無しを明確にしたかった。
わかったこと
若干のチラツキ（明朝体の画数の多い文字で目立ちやすくなる程度）を低減させるために気をつけることがいくつかわかった。
Windows 8のIE10や、Windows 8.1のIE11では、Statsを表示しながら、tweenエンジンを時間ベースで指定すると、カクつくことがある。
TextFieldを動かすより、Bitmapを動かしたほうがきれいなんじゃないかって思ったけど、特に違いはわからなかった。
BitmapDataにdrawも改善は見られない。むしろ、Windows RT(Surface)では、カクついた。
描画方法よりも、座標指定の仕方の違いの方が、影響が大きいようだ。
Shape.graphics.beginBitmapFillで描画して、Shape.xで移動させると、BitmapやTextFieldの移動よりも綺麗な動きになる。
2013/11/24
Shapeに描画して移動させると、BitmapやTextFieldとは異なる結果になるので、大幅書き換え。
参考
ガベージコレクションの裏技
http://f-site.org/articles/2011/07/31220748.html
にゃあプロジェクト – ウェブログ – [AS3.0] カルーセルに挑戦！ (2)
http://www.project-nya.jp/modules/weblog/details.php?blog_id=1500
