Recently, I faced the awkward Adobe Flash slowness on Mac and old PCs during the development of the web site of a client of mine.

After doing a little research and testing, I found out that some Mac are especially bad at alpha and scaling, among other things.

This post aims to centralize as much information as possible on the subject, because very little is available on the web and it’s unfortunately disparate. I’ll try to nail the facts and outline solutions.

Please add a comment or email me if you feel I’ve forgotten something or if you made a breakthrough discovery.

Facts, or rumors?

Unfortunately, there is not a lot of information about this. Bits and pieces floating around in forums, a few hints on Adobe’s web site, but nothing more.

Based on my experience, the especially slow things are:

• Alpha transparency
  • Redrawing portions of the screen with alpha transparency is significantly slower than without.
  • When doing alpha transparency, avoid medium-large MovieClips that are moving, or underneath, above or very close to moving objects, as they need to be redrawn often.
• Redrawing large portion of the screen
  • Clipping mask don’t reduce the redraw region. If you have a 1000 x 1000 clip masked on 100 x 100, the hidden region is still redrawn if something changes in it.
  • Scaling increases the actual size of the redraw region.
  • Solutions: disabling scaling when dealing with slow computers.
• Vector graphics
  • High quality complex vector graphics usually requires more CPU processing than bitmaps.
  • Solutions: cache vector graphic as bitmap, and reduce quality when dealing with slow computers.

Here’s more. I discovered that:

• Flash 8 and above uses OpenGL on Safari to speed up scaling and alpha rendering ¹
• G3 and old G4’s with ATI cards can’t use OpenGL because the card isn’t compatible and doesn’t support the necessary features ¹
• Single or dual G4 apparently doesn’t change a thing (forum talk², and personal benchmark with the problematic site)
• Newer G4’s with NVidia cards, G5 and Core Duo Macs will use OpenGL on Safari and will run just fine.
• A dual G4 1Ghz with 2 GB of RAM and an ATI card runs slower than a single P-III 866Mhz with 512 MB or RAM (personal benchmark with the problematic site)

¹ Based on Tinic Uro’s post on Kaourantin.
² Based on forum post at Kirupa.

Solutions: the two approaches

Now, many of my clients want their web site to be usable by technology laggards. So the simplest solution would be to use the lowest common denominator. However, Flash sites designed for G3’s can’t be much interactive and carry multimedia content, unless they do in very small portions of the screen, and never simultaneously.

Then the idea of creating an adaptive solution came to my mind. What if the site would be optimized for recent computers (newer G4’s for instance, so we’re talking 5 years of age), and would detect slow turtles and reduce rendering quality in real-time?

Slow computers detection

Unfortunately, to be adaptive, we need to detect the turtles, and detecting isn’t necessarily easy.Browser detection is unsafe. We can probably say that a Mac that runs Safari 1.3 is fairly old. But Safari 2 and 3 can run on slow computers as well.

If you’re playing a video, you can check the current FPS to see if it’s really low (from my tests, playing at or below 8 FPS should be considered slow, as the sound stream usually starts to skip).

If you’re not playing a video however, I suggest you use the following trick: use an onEnterFrame event to calculate that actual FPS. Then compare it to the expected FPS, and see it’s too slow or acceptable. That’s what my AS2 turtleDetector class does.

turtleDetector.zip (19 KB)

Disabling alpha on the fly

If your Flash application is running on a turtle, you want to disable Alpha transparency as much as possible, especially on parts that are rendered often. That includes moving objects with Alpha transparency, and fixed objects underneath or above moving objects. I haven’t come up with a fully automatic solution yet, unfortunately.

Disabling scaling on the fly

It’s pretty simple to disable scaling in ActionScript. However, there is unfortunately no option to achieve both vertical and horizontal centering.

Stage.scaleMode = "noScale";Stage.align = "T";

See Adobe LiveDocs for further details.

For both vertical and horizontal centering, you will have to use JavaScript to resize the container (or reload the page with a resized container if there’s no JavaScript available).

Reducing movie quality on the fly

This can be done on the entire movie with the _quality global property:

_quality = "LOW";

… or on a specific MovieClip with the _quality public property:

mc._quality = "LOW";

See Adobe’s LiveDocs on global _quality and MovieClip._quality for further details.

Caching vector graphic as bitmap

Caching complex vector as bitmap can speed things up in many cases.

mc.cacheAsBitmap = true;

Caching as bitmap is a double bladed knife: it requires more memory, and can be slower if your vector graphic has to be redrawn often. You will need to do some profiling.

See Adobe’s LiveDocs for further details.

Conclusion

It is indeed possible to detect the slow Mac and PCs and offer them an accessible site with less rendering quality. Shall you have more tips and tricks, I can only encourage you to share them here.

Further reading

• Why does Flash Player 8 on Mac perform so much better? on Kaourantin
• Flash Player Performance on OS X : Looking for Examples, on Mike Chambers Blog

Turtle photograph by Axonite.

If you like this acrticle, leaving a comment, Digging it, adding it to your del.icio.us bookmarks is always appreciated.