Flash Player 11.2 graphical gem

At MAX2011 I had a session talking about Flash Player futures and what we have in store to keep the needle moving. A lot of things have made it in including a small graphical gem I’d like to reveal today. It’s primary focus is not so much targeting the web but those few cases where designers use the Flash Player for offline graphics production work which remains surprisingly common.

Flash Player has seen improvements in the graphics department over the last few years but we have not really addressed basic vector rendering that much. That’s rather visible when look around on the web today. A lot of graphic assets are created using Flash Professional and then either exported as bitmaps to be used in other workflows or of course as SWFs. The rendering of vector graphics in the Flash run time has a distinct pattern due to the way anti-aliasing is computed.

Until today there was a ceiling for what you could accomplish quality unless you went through some hoops. These limitations in the Flash Player rasterization engine have been in place because the target was and is real-time rendering of vector graphics. The run-time still does this pretty well, even today with all the GPU and HTML5 Canvas tag brouhaha.

Anyhow, we can do much better quality wise if you do not care about performance that much. So why not offer the option to crank up the quality level? Flash Player 11.2 has a couple new stage quality settings which try to help. The specific improvements for these modes can be split into these categories:

- better anti-aliasing using 16×16 oversampling per pixel instead of the classic 4×4.
- linear blending for anti-aliased pixels to avoid halos when certain colors are used. It also visibly improves the pixel stepping artifacts of thin curves and lines.
- dithered gradient rendering to avoid banding with gradients which have small luma changes.
- better interpolation between gradients stops to avoid banding.

It’s fairly simple to enable these new modes in Flash Player 11.2. Simply set your stage quality in AS3 or AS2 to “16X16″ or “16x16LINEAR”. Yes, it works for both AS2 and AS3 movies. In AS2 simply add this action to your SWF:

_root._quality = "16X16LINEAR"; // or "16X16"

In AS3 add this to your actions:

stage.quality = "16X16LINEAR"; // or "16X16"

You might want to export to SWF version 15 or newer as some internal limits on bitmap sizes have been lifted and affect this feature if you have a stage larger than 1024×1024. For the 16×16 oversampling to work all internal coordinates need to be scaled 4x.

Here is a matrix which shows the current rendering on the left column and the two new modes on middle and right column:

Now the question for you will be if you will really see a difference with your content. That’s a good question. If you can spot the differences in the above image instantly you are on a good track to realize improvements in your own designs. If not, rethink using this feature since the impact on performance is really severe.

On that note: These modes are not designed for real time uses case. Please do not blindly enable these modes for web content. That is not the point. These modes are VERY slow and designed to improve quality, not performance. The only use case where it would make sense to use these modes on the web would be for instance to pre-render sprite sheets for use with Stage3D. We also have a new feature lined up in the next version of the Flash Player which will extend the BitmapData.draw() to take an extra parameter to specify the quality without having to change the global stage quality. We know that this an important feature for games which want to run in LOW quality but render assets in HIGH quality.

Technical note: While 16X16LINEAR will oversample fractionally covered pixels in linear sRGB space, the linear space calculations do not apply to general compositing operations. I did experiment with having the entire rasterization in linear sRGB space but it turns out to be more of a liability than it helps for existing content as anything with transparency will change so visibly in appearance that designers would have to make adjustments. Designers already make manual adjustment to handle non-linear color space artifacts in their design so limiting the linear space calculations to those parts the designer can’t control, like in this case anti-aliasing, make more sense and generally keep the intent of the design while improving the rest of the image. Going forward it will of course be great to only operate in linear sRGB space and offer tooling around this. This gets complicated quickly workflow wise though because as soon as you try to communicate why anything else than Flash, including other Adobe tools and any sort of common file format, you end up with standard non-linear sRGB. You’ll see part of this problem if you use the new 16x16LINEAR mode and export the result to a PNG or something like that you want to reuse. If there is any sort of transparency weird results can ensue. In that case you would want to stick with 16X16.

Leave a comment

2 Comments.

  1. Hi Tinic,

    Will the anti-aliasing in the new Bitmap.draw() feature allow TextFields/Fonts to be rendered with the 16×16 option as well?

    Cheers,

    Jamie

  2. Thanks for your blog and all the work you’ve done to make Flash an amazing experience. These new modes look fantastic: examples clearly demonstrate the value of the oversampling and I love hearing that you’re working on making it specifically addressable to bitmapData so you won’t have to change the overall stage quality.

    I also have a question for you about a rendering anomaly I’m experiencing on a specific project. (I’m a UX designer at our company.) Our Flex developers are having a really difficult time figuring out why certain bitmaps are being scaled/smoothed when we don’t want them to be. I’ve posted a sample of the issue in the website field above. (If you can help us solve this conundrum I would be heavily in your debt and our developers might spare my life.)