Part 5: Text Filter Effects and ActionScript Extensions

When the dynamic glyph cache is enabled, Scaleform 3 and higher version supports Blur, Drop Shadow, and Glow filter effects applied to text. Text filter support requires dynamic cache; when using glyph packer or static font textures filter effects are not supported. In the current version of the player filters will only work when applied directly to text fields, they will have no effect when applied to movie clips.

Although Scaleform text filters work similar to Flash there are a number of differences. In Adobe Flash, filters are applied consecutively to the raster result of the entire text field. This means that there can be Blur, Drop Shadow, and Glow filters applied one after another. This method has a good degree of flexibility, but it is computationally expensive. In contrast to Flash, filter support in Scaleform is limited, but very fast. Combined with the dynamic adaptive glyph cache, filters work almost as fast as regular text. Despite limited filter support, Scaleform offers very good capabilities for making soft shadow and glow effects.

Filter Types, Available Options and Restrictions

In Flash Studio, filters can be added the text field one at a time.

The major difference between Flash and Scaleform filters is that Scaleform creates and stores in the cache bitmap copies of blurred glyphs, where Flash applies the filters to the resulting text field.

Scaleform supports only Blur and Drop Shadow filters. The Glow filter is actually a sub-set of the Drop Shadow filter. Unlike Flash the filters are not applied consecutively, instead, they work independently, as two different layers. In Scaleform, only one Drop Shadow or Glow filter is taken into account, whichever appears last in the filter list. Plus, an optional Blur filter can be applied to the text itself. The general algorithm is as follows.

As a result, the combinations of filters that make sense are:

If you add Drop Shadow and Glow filters to the list, only the last one will be taken into account.

Rendering in Scaleform, also differs from Flash. First, the “shadow” or “glow” layer is rendered. Then the text itself is rendered over the shadow, with an optional “Blur” filter applied to the original glyphs. If the “shadow” or “glow” filters have “Knockout” or “Hide Object” flags, the text (the second layer) is not rendered. “Inner Shadow” and “Inner Glow” are not support by Scaleform at this time.

Due to the nature of the algorithm, filters in Scaleform have certain restrictions. The maximal Blur X and Blur Y values are restricted to 15.9 pixels. The maximal shadow or glow strength is also restricted to 1590%.

The “Knockout” option also works differently. In Flash the original image is subtracted from the shadow as a whole, preserving the shadow offset. In Scaleform it is done “glyph-by-glyph”, ignoring the offset. Also, if the shadow or glow radius is big the glyph images may overlap and “obscure” each other:

As a result, the “Knockout” option is basically only useful for the “Glow” filter (or for the “Drop Shadow” with zero offset) with a small filter radius.

Filter Quality

Flash uses a simple box filtering to blur the images. “Quality” controls the number of passes the filter performs, which heavily affects the resulting image. For example, the blurring filter 3x3 with low quality simply calculates average values of 3x3 pixel areas. Medium quality means the same filter is applied twice; and high quality applies this filter 3 times. It means the quality heavily affects the visual radius of the filter. Because of different approaches, the visual result is different, but similar. In fact, a simple one-pass box filter produces too poor a result.

Unlike Flash, Scaleform uses a fair Gaussian Blur filter and a smart recursive algorithm, whose speed does not depend on the filter radius. There are only two levels of quality in Scaleform: Low and High and they produce very similar visual results. The low quality is used only when “Quality: Low” is set in the filter panel. Otherwise Scaleform uses the high quality filter. The difference between them is the high quality filter can operate with fractional values of radii (sigma), while the low quality filter has integer radii. In most cases Scaleform simulates the fractional radius with appropriate scaling of the glyphs, but in case the text field is anti-aliased for readability the low quality shadow may look slightly inaccurate. The general recommendation is to use the high quality filter for small text optimized for readability.

As you can see, in Flash the difference is very visible; while in Scaleform, it is subtle. Only “Low quality” differs from the others in Scaleform. “Medium quality” and “High quality” generate identical results.

The low quality filter works faster, but the glyph cache system eliminates the difference. Still, it is definitely better to use the low quality filters on low performance systems, especially if there is no hardware floating point available.

The high quality filter requires floating point calculations and uses a recursive implementation described here: http://www.ph.tn.tudelft.nl/Courses/FIP/noframes/fip-Smoothin.html.

Filter Animation

It is possible to animate the shadow effects using the Flash timeline as well as Scaleform ActionScript extensions. However, it is necessary to understand the cost of the animation operations. When changing the radius, strength, or quality, Scaleform has to re-generate the glyph images and store them in the cache. It will result in more frequent cache update. In fact, changing values mentioned above is equivalent to increasing the multiplicity of the alphabet. Each version has to be stored in the cache. Instead, changing the color (including alpha), angle, and the distance does not affect the performance. For example, if you want to fade in and out the shadow or glow, it’s better to animate the color translucency (alpha) instead of changing the radius and/or strength.

Using filters from ActionScript

Scaleform support standard filter classes (such as DropShadowFilter, BlurFilter, ColorMatrixFilter, BevelFilter) for dynamic/input text fields for both AS2 and AS3. Refer to Flash documentation for further details.