The Back Button

Ever since the release of Flash 8, I’ve rarely published a Flash project with a HIGH stage quality. If you know why, then you can skim this post and leave me a high-five in the comments, if not then read on …

So what’s stage quality I hear some of you asking? Well, you may of seen it feature within the default context menu of the Flash Player. And this small setting defines how certain elements are anti-aliased/smoothed within your Flash application.

Here are the four available quality settings:

• StageQuality.LOW - Graphics are not anti-aliased, and bitmaps are not smoothed.
• StageQuality.MEDIUM - Graphics are anti-aliased using a 2 x 2 pixel grid, but bitmaps are not smoothed.
• StageQuality.HIGH - Graphics are anti-aliased using a 4 x 4 pixel grid, and bitmaps are smoothed if the movie is static.
• StageQuality.BEST - Graphics are anti-aliased using a 4 x 4 pixel grid and bitmaps are always smoothed.

So, HIGH and BEST sounds really awesome right? Think again! Let’s take a brief look at (vector) graphics:

Vector graphics (also called geometric modeling or object-oriented graphics) is the use of geometrical primitives such as points, lines, curves, and polygons, which are all based upon mathematical equations to represent images in computer graphics. It is used in contrast to the term raster graphics (also know as a Bitmap), which is the representation of images as a collection of pixels, and used as the sole graphic type for actual photographic images.

When Flash renders a vector graphic, the bitmap result of the vector data is calculated on the fly. This can be awfully taxing on the users machine depending on how complex the vector graphic drawing is. A large part of this calculation goes on smoothening-out all of the lines and edges so that you end up with something that doesn’t look jaggy, and this is where the quality setting comes into play. You can think of the quality setting as accuracy level of anti-aliasing. So, the higher the accuracy, the more work has to be done when rendering.

So what changed in Flash 8?. Well, Bitmaps staged a military coup and took the crown away from vector graphics of course (err). First off, we got the cacheAsBitmap flag, this took a lot of stress of rendering complex vectors away such as UI components. Then we got the awesome BitmapData class (its like a freaking Swiss army knife!), and finally we got Advanced embedded text rendering. The new text rendering is the most important reason for not using HIGH anymore as it does not suffer from jaggies in lower modes.

Back in 2005, I created my first Flash 8 website while working at Sparkart for Mike Shinoda’s side project, Fort Minor (http://fortminor.com/site.php). I really wanted to dip my toes into as many Flash 8 features as possible. So, in the site you’ll see blend modes, blurs, vp6, BitmapData (used for image flattening) and advanced text. But the best thing about all of this is that the site stage quality is set to LOW! Now, this site wont win any awards for usability and the code is rushed (~2.5 week project) but you’ll see how I was able to push the speed of the animation by setting the quality to LOW without really loosing anything visually. An important thing to note from this is that the site has no vector graphics, its all bitmap based.

This brings me briefly onto Papervision 3D developers who actually inspired me to write this post. Today, I came across the papervision based game “Downtown Maze Master” from Nissan. I noticed that the game was running in HIGH mode through the games context menu as my MacBooks core was running at 77% and my laptops fan soon fired up. Thanks again to the context menu, I took the setting down to LOW and immediately watched my core usage go down to 54% without any anything visually bad happening in the game. I’d usually expect papervision3d developers to be close on the bleeding edge of Flash, so I wonder why the quality setting was forgotten. And this site is only once of many papervision3d sites guilty of this sin. End of rant, spread the word :).

Bitmaps rock your sock in Flash, but what about if you need to resize bitmap elements? Well in my world today, I work mainly on creating application UIs vs website experiences, and my best friend is 9 slice bitmap scaling. To read more about 9 slice resizing, check here. But what about if you still need to utilize vector graphics and run with a LOW setting? Well, you may still need to use the HIGH setting if your vector is quite dynamic and/or shape tweened. But if your only planing to pan your vector around the stage, then you might be able to use LOW successfully if you “flatten” the vector to a Bitmap in HIGH mode, then switch back to LOW.

// ActionScript 3

stage.quality = StageQuality.HIGH;
var shape:Shape = new Shape();
shape.graphics.lineStyle(2,0xcc00cc);
shape.graphics.drawCircle(100,100,100);
var bitmapCanvas:BitmapData = new BitmapData(200,200,true,0xffffff);
bitmapCanvas.draw(shape)
stage.quality = StageQuality.LOW;
var circleImg:Bitmap = new Bitmap(bitmapCanvas);
addChild(circleImg)

The result will be a wonderfully anti-aliased circle shown in LOW mode. This method also works well for cutting down the number of elements on stage in general, just think of it as an uneditable cacheAsBitmap.

The lesson I want you to take from this post is to always play with your default quality mode before pushing your site live. You just might get a pleasant surprise :).