참조
http://www.adrianparr.com/?p=40
Eversince the release of Flash 8, I’ve rarely published a Flash projectwith a HIGH stage quality. If you know why, then you can skim this postand 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 ofseen it feature within the default context menu of the Flash Player.And this small setting defines how certain elements areanti-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 orobject-oriented graphics) is the use of geometrical primitives such aspoints, lines, curves, and polygons, which are all based uponmathematical equations to represent images in computer graphics. It isused in contrast to the term raster graphics (also know as a Bitmap),which is the representation of images as a collection of pixels, andused as the sole graphic type for actual photographic images.
When Flash renders a vector graphic, the bitmap result of the vectordata is calculated on the fly. This can be awfully taxing on the usersmachine depending on how complex the vector graphic drawing is. A largepart of this calculation goes on smoothening-out all of the lines andedges so that you end up with something that doesn’t look jaggy, andthis is where the quality setting comes into play. You can think of thequality setting as accuracy level of anti-aliasing. So, the higher theaccuracy, the more work has to be done when rendering.
So what changed in Flash 8?. Well, Bitmaps staged a military coupand took the crown away from vector graphics of course (err). Firstoff, we got the cacheAsBitmap flag, this took a lot of stress ofrendering complex vectors away such as UI components. Then we got theawesome BitmapData class (its like a freaking Swiss army knife!), andfinally we got Advanced embedded text rendering. The new text renderingis the most important reason for not using HIGH anymore as it does notsuffer 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 aspossible. So, in the site you’ll see blend modes, blurs, vp6,BitmapData (used for image flattening) and advanced text. But the bestthing 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 ofthe animation by setting the quality to LOW without really loosinganything visually. An important thing to note from this is that thesite 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 throughthe games context menu as my MacBooks core was running at 77% and mylaptops fan soon fired up. Thanks again to the context menu, I took thesetting down to LOW and immediately watched my core usage go down to54% without any anything visually bad happening in the game. I’dusually expect papervision3d developers to be close on the bleedingedge of Flash, so I wonder why the quality setting was forgotten. Andthis 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 toresize bitmap elements? Well in my world today, I work mainly oncreating application UIs vs website experiences, and my best friend is9 slice bitmap scaling. To read more about 9 slice resizing, check here.But what about if you still need to utilize vector graphics and runwith a LOW setting? Well, you may still need to use the HIGH setting ifyour vector is quite dynamic and/or shape tweened. But if your onlyplaning to pan your vector around the stage, then you might be able touse LOW successfully if you “flatten” the vector to a Bitmap in HIGHmode, 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 LOWmode. This method also works well for cutting down the number ofelements on stage in general, just think of it as an uneditablecacheAsBitmap.
The lesson I want you to take from this post is to always play withyour default quality mode before pushing your site live. You just mightget a pleasant surprise :).
